From d15c306605ffd0ef16e218e03d8b4221c0b09934 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 24 Jun 2024 13:06:28 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=84?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=AA=E0=B8=96=E0=B8=B2=E0=B8=99=E0=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TotalProductCardComponent.vue             | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 41fa36dd..80300205 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -20,7 +20,6 @@ withDefaults(
     readonly?: boolean;
     separator?: boolean;
     typeProduct?: string;
-    status?: boolean;
 
     isAddProduct?: boolean;
     isSelected?: boolean;
@@ -31,6 +30,7 @@ withDefaults(
     process?: number;
     createdAt?: string;
     index?: number;
+    isDisabled?: boolean;
   }>(),
   {
     isSelected: false,
@@ -48,7 +48,7 @@ withDefaults(
   >
     <div class="q-pa-sm">
       <div class="row flex justify-between text-bold">
-        <div class="col-9" :class="{ inactive: status }">
+        <div class="col-9" :class="{ inactive: isDisabled }">
           {{ title ?? 'title' }}
         </div>
         <div
@@ -84,7 +84,9 @@ withDefaults(
                     {{ $t('viewDetail') }}
                   </span>
                 </q-item>
+
                 <q-item
+                  v-if="!isDisabled"
                   dense
                   clickable
                   class="row q-py-sm"
@@ -102,6 +104,29 @@ withDefaults(
                     {{ $t('edit') }}
                   </span>
                 </q-item>
+
+                <q-item dense>
+                  <q-item-section class="q-py-sm">
+                    <div class="q-pa-sm surface-2 rounded">
+                      <q-toggle
+                        dense
+                        size="sm"
+                        @click="$emit('toggleStatus', id)"
+                        :model-value="!isDisabled"
+                        val="xs"
+                        padding="none"
+                      >
+                        <div class="q-ml-xs">
+                          {{
+                            !isDisabled
+                              ? $t('switchOnLabel')
+                              : $t('switchOffLabel')
+                          }}
+                        </div>
+                      </q-toggle>
+                    </div>
+                  </q-item-section>
+                </q-item>
               </q-list>
             </q-menu>
           </q-btn>
@@ -117,7 +142,7 @@ withDefaults(
         </q-avatar>
       </div>
 
-      <div :class="{ inactive: status }">
+      <div :class="{ inactive: isDisabled }">
         <div class="app-text-muted">{{ code ?? 'code' }}</div>
         <div class="flex justify-start text-bold">
           <div