feat: แก้ สถานะ

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 -->