feat: แก้ สถานะ

src/components/04_product-service/ProductCardComponent.vue

@@ -10,6 +10,8 @@ withDefaults(
     status?: Status;
     date?: Date;
     isType?: boolean;
+    id?: string;
+    isDisabled?: boolean;
   }>(),
   {
     color: 'var(--brand-1)',
@@ -19,8 +21,16 @@ withDefaults(
 
 <template>
   <div
-    class="full-width rounded hover-card bordered q-pa-sm"
-    @click="$emit('onClick')"
+    class="full-width rounded bordered q-pa-sm"
+    @click="
+      () => {
+        if (!isDisabled) $emit('onClick');
+      }
+    "
+    :class="{
+      'hover-card': !isDisabled,
+      'disabled-card': isDisabled,
+    }"
   >
     <div
       class="relative-position rounded q-pb-lg"
@@ -52,7 +62,11 @@ withDefaults(
                 dense
                 class="row q-py-sm"
                 style="white-space: nowrap"
-                @click="$emit('viewCard')"
+                @click="
+                  () => {
+                    if (!isDisabled) $emit('viewCard');
+                  }
+                "
               >
                 <q-icon
                   name="mdi-eye-outline"
@@ -69,7 +83,13 @@ withDefaults(
                 clickable
                 class="row q-py-sm"
                 style="white-space: nowrap"
-                @click="$emit('updateCard')"
+                @click="
+                  () => {
+                    if (!isDisabled) {
+                      $emit('updateCard');
+                    }
+                  }
+                "
                 v-close-popup
               >
                 <q-icon
@@ -85,7 +105,11 @@ withDefaults(
               <q-item
                 dense
                 clickable
-                @click="$emit('deleteCard')"
+                @click="
+                  () => {
+                    if (!isDisabled) $emit('deleteCard');
+                  }
+                "
                 v-close-popup
               >
                 <q-icon
@@ -97,6 +121,28 @@ withDefaults(
                   {{ $t('delete') }}
                 </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>
@@ -142,7 +188,13 @@ withDefaults(
         {{ dateFormat(date) }}
       </div>
       <q-btn
-        @click.stop="$emit('viewDetail')"
+        @click.stop="
+          () => {
+            if (!isDisabled) {
+              $emit('viewDetail');
+            }
+          }
+        "
         unelevated
         class="q-px-sm"
         :label="$t('detail')"
@@ -171,4 +223,9 @@ withDefaults(
   opacity: 0.8;
   box-shadow: var(--shadow-3);
 }
+
+.disabled-card {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 </style>

src/components/04_product-service/TotalProductComponent.vue

@@ -9,7 +9,7 @@ import TotalProductCardComponent from 'components/04_product-service/TotalProduc
     style="
       width: 75vw;
       display: grid;
-
+      background: none;
       grid-template-columns: repeat(4, 1fr);
       gap: var(--size-3);
     "