feat: รับค่าสถานะ

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