feat: Support import and export of categories

Author: johan-bjareholt

src/store/modules/categories.js

@@ -57,6 +57,13 @@ const mutations = {
     console.log('Loaded classes:', state.classes);
     state.classes_unsaved_changes = false;
   },
+  import(state, classes) {
+    let i = 0;
+    // overwrite id even if already set
+    state.classes = classes.map(c => Object.assign(c, { id: i++ }));
+    console.log('Loaded classes:', state.classes);
+    state.classes_unsaved_changes = true;
+  },
   updateClass(state, new_class) {
     console.log('Updating class:', new_class);
 

src/views/settings/CategorizationSettings.vue

@@ -6,6 +6,11 @@ div
     b-btn.ml-1(@click="restoreDefaultClasses", variant="outline-warning" size="sm")
       icon(name="undo")
       | Restore defaults
+    label.btn.btn-sm.ml-1.btn-outline-primary(style="margin: 0")
+      | Import
+      input(type="file" @change="importCategories" hidden)
+    b-btn.ml-1(@click="exportClasses", variant="outline-primary" size="sm")
+      | Export
   div
     | Rules for categorizing events. An event can only have one category. If several categories match, the deepest one will be chosen.
 
@@ -61,6 +66,41 @@ export default {
     restoreDefaultClasses: async function () {
       await this.$store.commit('categories/restoreDefaultClasses');
     },
+    exportClasses: function () {
+      console.log('Exporting categories...');
+
+      const export_data = {
+        categories: JSON.parse(localStorage.classes),
+      };
+      const text = JSON.stringify(export_data);
+      const filename = 'aw-category-export.json';
+
+      // Initiate downloading a file by creating a hidden button and clicking it
+      const element = document.createElement('a');
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+      element.setAttribute('download', filename);
+      element.style.display = 'none';
+      document.body.appendChild(element);
+      element.click();
+      document.body.removeChild(element);
+    },
+    importCategories: async function (elem) {
+      console.log('Importing categories...');
+
+      // Get file from upload
+      const file = elem.originalTarget.files[0];
+      if (file.type != 'application/json') {
+        console.error('Only JSON files are possible to import');
+        return;
+      }
+
+      // Read and parse import text to JSON
+      const text = await file.text();
+      const import_obj = JSON.parse(text);
+
+      // Set import to categories as unsaved changes
+      this.$store.commit('categories/import', import_obj.categories);
+    },
   },
 };
 </script>