fix: open edit modal when 'Add Category' clicked (add top-level categ…

…ory)

src/stores/settings.ts

@@ -95,15 +95,14 @@ export const useSettingsStore = defineStore('settings', {
         // Skip keys starting with underscore, as they are local to the vuex store.
         return !key.startsWith('_');
       });
-      console.log('all_keys', all_keys);
 
       const storage = {};
       for (const key of all_keys) {
         // If key is set in server, use that value, otherwise use localStorage
         const set_in_server = server_settings[key] !== undefined;
         const value = set_in_server ? server_settings[key] : localStorage.getItem(key);
-        const locstr = set_in_server ? '[server]' : '[localStorage]';
-        console.log(`${locstr} ${key}:`, value);
+        //const locstr = set_in_server ? '[server]' : '[localStorage]';
+        //console.debug(`${locstr} ${key}:`, value);
 
         // Keys ending with 'Data' are JSON-serialized objects
         if (key.includes('Data') && !set_in_server) {

src/views/settings/CategorizationSettings.vue

@@ -28,6 +28,8 @@ div
           | Discard
     div(v-for="_class in classes_hierarchy")
       CategoryEditTree(:_class="_class")
+    div(v-if="editingId !== null")
+      CategoryEditModal(:categoryId='editingId', @hidden="hideEditModal()")
 
   div.row
     div.col-sm-12
@@ -40,20 +42,25 @@ div
 <script>
 import { mapState, mapGetters } from 'pinia';
 import CategoryEditTree from '~/components/CategoryEditTree.vue';
+import CategoryEditModal from '~/components/CategoryEditModal.vue';
 import 'vue-awesome/icons/undo';
 import router from '~/route';
 
 import { useCategoryStore } from '~/stores/categories';
 
+import _ from 'lodash';
+
 const confirmationMessage = 'Your categories have unsaved changes, are you sure you want to leave?';
 
 export default {
   name: 'CategorizationSettings',
   components: {
     CategoryEditTree,
+    CategoryEditModal,
   },
   data: () => ({
     categoryStore: useCategoryStore(),
+    editingId: null,
   }),
   computed: {
     ...mapState(useCategoryStore, ['classes_unsaved_changes']),
@@ -95,6 +102,10 @@ export default {
         name: ['New class'],
         rule: { type: 'regex', regex: 'FILL ME' },
       });
+
+      // Find the category with the max ID, and open an editor for it
+      const lastId = _.max(_.map(this.categoryStore.classes, 'id'));
+      this.editingId = lastId;
     },
     saveClasses: async function () {
       await this.categoryStore.save();
@@ -105,6 +116,9 @@ export default {
     restoreDefaultClasses: async function () {
       await this.categoryStore.restoreDefaultClasses();
     },
+    hideEditModal: function () {
+      this.editingId = null;
+    },
     exportClasses: function () {
       console.log('Exporting categories...');