fix: ellipsis product card and cleanup

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

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"
+          :model-value="
+            selectProduct.length ===
+            productIsAdd?.filter((i) => {
+              if (i.status === 'INACTIVE') {
+                return false;
+              }
+              return true;
+            }).length
+          "
           @click="
             () => {
-                if (selectProduct.length === productIsAdd?.length) {
+              if (
+                selectProduct.length ===
+                productIsAdd?.filter((i) => {
+                  if (i.status === 'INACTIVE') {
+                    return false;
+                  }
+                  return true;
+                }).length
+              ) {
                 selectProduct = [];
               } else {
-                  productIsAdd?.forEach((i) => {
+                productIsAdd
+                  ?.filter((i) => {
+                    if (i.status === 'INACTIVE') {
+                      return false;
+                    }
+                    return true;
+                  })
+                  .forEach((i) => {
                     const productExists = selectProduct.some(
                       (product) => product.id === i.id,
                     );
@@ -3699,34 +3721,6 @@ watch(
             }
           "
         />
-          <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 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