From fc002b9ca0cbb044c77d2ee38a78a85d291ca88d Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 19 Jun 2024 18:00:38 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=AA?=
 =?UTF-8?q?=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

---
 .../ProductCardComponent.vue                  | 69 ++++++++++++++++--
 .../TotalProductComponent.vue                 |  2 +-
 src/pages/04_product-service/MainPage.vue     | 71 ++++++++++++++-----
 3 files changed, 116 insertions(+), 26 deletions(-)

diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index 60d02760..1cde2872 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/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>
diff --git a/src/components/04_product-service/TotalProductComponent.vue b/src/components/04_product-service/TotalProductComponent.vue
index 0e74d113..bc1892d2 100644
--- a/src/components/04_product-service/TotalProductComponent.vue
+++ b/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);
     "
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index ee00133c..6e9a7d87 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -84,6 +84,8 @@ import { onMounted } from 'vue';
 const { t } = useI18n();
 
 const inputSearch = ref<string>('');
+const searchTotalProduct = ref<string>('');
+
 const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
@@ -99,7 +101,7 @@ const profileUrl = ref<string | null>('');
 
 const groupName = ref<string>('งาน MOU');
 const dialogProductServiceType = ref<boolean>(false);
-const dialogTotalProduct = ref<boolean>(false);
+const dialogTotalProduct = ref<boolean>(true);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 
 const productGroup = ref<ProductGroup[]>();
@@ -286,6 +288,22 @@ const itemCard = [
   },
 ];
 
+async function toggleStatusType(id: string, status: Status) {
+  await editProductServiceType(id, {
+    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
+  });
+
+  await fetchListType();
+}
+
+async function toggleStatusGroup(id: string, status: Status) {
+  await editProductService(id, {
+    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
+  });
+
+  await fetchListGroups();
+}
+
 async function deleteServiceById(serviceId?: string) {
   dialog({
     color: 'negative',
@@ -772,7 +790,10 @@ watch(currentStatus, async () => {
               :subtitle="v.code"
               :date="new Date(v.updatedAt)"
               :status="v.status"
+              :id="v.id"
+              :isDisabled="v.status === 'ACTIVE' || v.status === 'CREATED'"
               color="var(--purple-11-hsl)"
+              @toggleStatus="toggleStatusType(v.id, v.status)"
               @viewCard="
                 () => {
                   clearFormGroup();
@@ -811,6 +832,9 @@ watch(currentStatus, async () => {
               :date="new Date(v.updatedAt)"
               :status="v.status"
               color="var(--pink-6-hsl)"
+              :id="v.id"
+              :isDisabled="v.status === 'ACTIVE' || v.status === 'CREATED'"
+              @toggleStatus="toggleStatusGroup(v.id, v.status)"
               @viewCard="
                 () => {
                   clearFormGroup();
@@ -1111,7 +1135,7 @@ watch(currentStatus, async () => {
     v-model:modal="dialogTotalProduct"
     noAddress
     noAppBox
-    title="รวมสินค้าทั้งหมด (2 ชิ้น)"
+    title="สินค้าทั้งหมด"
     :submit="
       () => {
         console.log('submit');
@@ -1119,24 +1143,33 @@ watch(currentStatus, async () => {
     "
     :close="() => {}"
   >
-    <template #footer>
-      <div class="row items-center q-gutter-md">
-        <q-icon name="mdi-cart" class="app-text-muted" size="sm" />
-        <div class="relative-position" style="bottom: 15px; right: 25px">
-          <div
-            class="absolute bg-red text-white flex justify-center text-center rounded items-center"
-            style="width: 16px; height: 16px; font-size: 11px"
-          >
-            2
-          </div>
-        </div>
-        <div>
-          รวมสินค้าทั้งหมด
-          <div class="text-bold" style="color: var(--green-10)">฿ 2,400</div>
-        </div>
+    <div
+      style="
+        width: 75vw;
+        display: grid;
+        background: none;
+        grid-template-rows: auto;
+        gap: var(--size-3);
+      "
+    >
+      <div class="row items-center">
+        <q-space />
+        <q-input
+          outlined
+          dense
+          :label="$t('search')"
+          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+          v-model="searchTotalProduct"
+          debounce="500"
+          @update:model-value=""
+        >
+          <template v-slot:prepend>
+            <q-icon name="mdi-magnify" />
+          </template>
+        </q-input>
       </div>
-    </template>
-    <TotalProductComponent />
+      <TotalProductComponent />
+    </div>
   </FormDialog>
 
   <!-- Add Product -->