fix: populate subcategory dialog fields on initial load after page re…

…fresh

- Added logic to initialize 'name' and 'description' fields with existing values when the dialog is opened for the first time after a page refresh.
- Implemented a watcher to ensure that fields are pre-filled with the correct data, preventing users from having to retype entire fields for minor edits.

desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue

@@ -56,13 +56,13 @@
           <div class="space-y-4">
             <FormControl
               v-model="newSubCategoryName"
-              :placeholder="subCategory.doc.category_name"
+              placeholder="Name"
               label="Name"
               type="text"
             />
             <FormControl
               v-model="newSubCategoryDescription"
-              :placeholder="subCategory.doc.description"
+              placeholder="Description"
               label="Description"
               type="textarea"
             />
@@ -80,7 +80,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {
   createDocumentResource,
@@ -122,6 +122,13 @@ const subCategory = createDocumentResource({
   },
 });
 
+watch(showEdit, (newValue) => {
+  if (newValue) {
+    newSubCategoryName.value = subCategory.doc?.category_name || "";
+    newSubCategoryDescription.value = subCategory.doc?.description || "";
+  }
+});
+
 const saveSubCategory = debounce(
   () =>
     subCategory.setValue.submit({