From 3b80c7e3b32080c8a4df304f473a688a35d3286d Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Fri, 30 Aug 2024 09:56:58 +0000
Subject: [PATCH] Fix: Populate subcategory dialog fields on initial load after
 page refresh

- 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.
---
 .../knowledge-base/KnowledgeBaseSubcategory.vue     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
index 706403726..1d5ffb2c6 100644
--- a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
+++ b/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({