From 9990b73f4c2106836fe20efcb3a6a28177d92bd2 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 4 Sep 2024 15:43:08 +0700
Subject: [PATCH] fix: kebab action hide after change status

---
 src/components/TreeComponent.vue          |  2 +-
 src/components/shared/KebabAction.vue     | 24 ++++++++++++++++++++---
 src/pages/04_product-service/MainPage.vue |  3 ++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/TreeComponent.vue b/src/components/TreeComponent.vue
index 40b83fa4..0980dfa2 100644
--- a/src/components/TreeComponent.vue
+++ b/src/components/TreeComponent.vue
@@ -133,7 +133,7 @@ defineEmits<{
             <KebabAction
               v-if="action && !node.actionDisabled"
               :id-name="node.name"
-              status="ACTIVE"
+              :status="node.status"
               @view="$emit('view', node)"
               @edit="$emit('edit', node)"
               @delete="$emit('delete', node)"
diff --git a/src/components/shared/KebabAction.vue b/src/components/shared/KebabAction.vue
index 88c48546..701e77c2 100644
--- a/src/components/shared/KebabAction.vue
+++ b/src/components/shared/KebabAction.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
 import ToggleButton from '../button/ToggleButton.vue';
+import { QMenu } from 'quasar';
+import { watch } from 'vue';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     idName: string;
     status: string;
@@ -20,6 +23,17 @@ defineEmits<{
   (e: 'delete'): void;
   (e: 'changeStatus'): void;
 }>();
+
+const refMenu = ref<InstanceType<typeof QMenu>>();
+
+watch(
+  () => props.status,
+  () => {
+    setTimeout(() => {
+      refMenu.value?.hide();
+    }, 100);
+  },
+);
 </script>
 <template>
   <q-btn
@@ -31,7 +45,7 @@ defineEmits<{
     :id="`btn-kebab-action-${idName}`"
     @click.stop
   >
-    <q-menu class="bordered">
+    <q-menu class="bordered" ref="refMenu">
       <q-list>
         <q-item
           v-close-popup
@@ -107,7 +121,11 @@ defineEmits<{
                 two-way
                 :id="`btn-kebab-status-${idName}`"
                 :model-value="status !== 'INACTIVE'"
-                @click="() => $emit('changeStatus')"
+                @click="
+                  () => {
+                    $emit('changeStatus');
+                  }
+                "
               />
               <span class="q-pl-md">
                 {{
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 4b7805ea..2fc1e38d 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -175,7 +175,8 @@ const treeProductTypeAndGroup = computed(
         product: item._count.product,
       },
       type: 'group',
-      actionDisabled: item.status === 'INACTIVE',
+      actionDisabled: false,
+      // actionDisabled: item.status === 'INACTIVE',
       children: [
         {
           id: 'type',