From 266ee54e3b6bcc65fb59040f4ede824f6a8e285a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 16 Aug 2024 15:35:07 +0700
Subject: [PATCH] fix: ellipsis product card and cleanup

---
 .../TotalProductCardComponent.vue             |  4 +-
 src/pages/04_product-service/MainPage.vue     | 97 +++++++++----------
 2 files changed, 47 insertions(+), 54 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 8b84f3fc..78f6a02f 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -50,12 +50,12 @@ withDefaults(
     @click="$emit('select', data)"
   >
     <div class="row flex justify-between text-bold">
-      <div class="col-9" :class="{ inactive: isDisabled }">
+      <div class="col ellipsis-2-lines" :class="{ inactive: isDisabled }">
         {{ title ?? 'title' }}
       </div>
       <div
         v-if="isSelected === false"
-        class="col-3 relative-position"
+        class="col-1 relative-position"
         style="left: 10px; bottom: 10px"
       >
         <q-btn
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 30088f3e..a7354b72 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -145,8 +145,6 @@ const stat = ref<
 const { t } = useI18n();
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
-const isWorkProductGroup = ref(false);
-const workProductGroupName = ref('');
 const holdDialog = ref(false);
 const imageDialog = ref(false);
 const currentNode = ref<ProductGroup>();
@@ -3640,11 +3638,13 @@ watch(
     </template>
   </DialogForm>
 
+  <!-- work product -->
   <DialogForm
     v-model:modal="dialogTotalProduct"
     noAddress
     noAppBox
     title="สินค้าทั้งหมด"
+    :saveAmount="selectProduct.length"
     :submit="
       () => {
         selectProduct.forEach((i) => {
@@ -3676,18 +3676,40 @@ watch(
       }
     "
   >
-    <div class="q-pa-lg full-height scroll column">
+    <div class="q-pa-lg full-height scroll column no-wrap">
       <div class="row items-center justify-between">
-        <div class="row">
-          <q-checkbox
-            :label="$t('selectAll')"
-            :model-value="selectProduct.length === productIsAdd?.length"
-            @click="
-              () => {
-                if (selectProduct.length === productIsAdd?.length) {
-                  selectProduct = [];
-                } else {
-                  productIsAdd?.forEach((i) => {
+        <q-checkbox
+          :label="$t('selectAll')"
+          :model-value="
+            selectProduct.length ===
+            productIsAdd?.filter((i) => {
+              if (i.status === 'INACTIVE') {
+                return false;
+              }
+              return true;
+            }).length
+          "
+          @click="
+            () => {
+              if (
+                selectProduct.length ===
+                productIsAdd?.filter((i) => {
+                  if (i.status === 'INACTIVE') {
+                    return false;
+                  }
+                  return true;
+                }).length
+              ) {
+                selectProduct = [];
+              } else {
+                productIsAdd
+                  ?.filter((i) => {
+                    if (i.status === 'INACTIVE') {
+                      return false;
+                    }
+                    return true;
+                  })
+                  .forEach((i) => {
                     const productExists = selectProduct.some(
                       (product) => product.id === i.id,
                     );
@@ -3695,38 +3717,10 @@ watch(
                       selectProduct.push({ ...i });
                     }
                   });
-                }
               }
-            "
-          />
-          <q-btn
-            flat
-            :icon="isWorkProductGroup ? 'mdi-ungroup' : 'mdi-group'"
-            class="rounded q-ml-lg q-mr-sm"
-            padding="4px 8px"
-            style="color: hsl(var(--text-mute-2))"
-            @click="
-              () => {
-                isWorkProductGroup = !isWorkProductGroup;
-                if (!isWorkProductGroup) workProductGroupName = '';
-              }
-            "
-          >
-            <q-tooltip>สร้างกลุ่ม</q-tooltip>
-          </q-btn>
-          <q-input
-            v-if="isWorkProductGroup"
-            dense
-            outlined
-            clearable
-            v-model="workProductGroupName"
-            style="width: 400px"
-          >
-            <template #prepend>
-              <div class="text-caption text-black">ชื่อกลุ่ม:</div>
-            </template>
-          </q-input>
-        </div>
+            }
+          "
+        />
         <q-input
           lazy-rules="ondemand"
           id="input-search-add-product"
@@ -3745,14 +3739,13 @@ watch(
         </q-input>
       </div>
 
-      <div class="row q-mt-md q-col-gutter-md col">
-        <div
-          class="flex col justify-center items-center"
-          v-if="resultSearchProduct?.length === 0"
-        >
-          <NoData />
-        </div>
-
+      <div
+        class="flex col justify-center items-center"
+        v-if="resultSearchProduct?.length === 0"
+      >
+        <NoData />
+      </div>
+      <div v-else class="row q-mt-md q-col-gutter-md">
         <div
           class="col-md-3 col-sm-6 col-12"
           v-for="i in (!!inputSearchProductAndService