fix: enhance UX for category edit dialog in knowledge base section

frappe · Sep 1, 2024 · f3dc744 · f3dc744
1 parent 464c7f8
commit f3dc744
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue
@@ -57,11 +57,11 @@
             <div class="text-xs text-gray-700">Title</div>
             <div class="flex items-center gap-2">
               <KnowledgeBaseIconSelector
-                :icon="newCategoryIcon || category.doc?.icon"
+                :icon="newCategoryIcon"
                 @select="(icon) => (newCategoryIcon = icon)"
               />
               <FormControl
-                v-model="category.doc.category_name"
+                v-model="newCategoryName"
                 placeholder="A brief guide"
                 type="text"
               />
@@ -70,7 +70,7 @@
           <div class="space-y-2">
             <div class="text-xs text-gray-700">Description</div>
             <FormControl
-              v-model="category.doc.description"
+              v-model="newCategoryDescription"
               placeholder="A short description"
               type="textarea"
             />
@@ -118,7 +118,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, toRef } from "vue";
+import { ref, toRef, watch } from "vue";
 import { useRouter } from "vue-router";
 import {
   createResource,
@@ -168,11 +168,20 @@ const category = createDocumentResource({
         icon: "check",
         iconClasses: "text-green-500",
       });
+      showEdit.value = false;
     },
     onError: useError({ title: "Error updating category" }),
   },
 });
 
+watch(showEdit, (newValue) => {
+  if (newValue) {
+    newCategoryName.value = category.doc.category_name || "";
+    newCategoryDescription.value = category.doc.description || "";
+    newCategoryIcon.value = category.doc.icon || "";
+  }
+});
+
 const saveCategory = debounce(
   () =>
     category.setValue.submit({