refactor(04): service group (unfinish)

src/pages/04_product-service/MainPage.vue

@@ -145,6 +145,8 @@ 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>();
@@ -3646,12 +3648,23 @@ watch(
     :submit="
       () => {
         selectProduct.forEach((i) => {
+          const productExists = workItems[currentWorkIndex].product.some(
+            (product) => product.id === i.id,
+          );
+          if (!productExists) {
             workItems[currentWorkIndex].product.push({
               ...i,
               nameEn: '',
             });
+          }
         });
 
+        workItems[currentWorkIndex].product = workItems[
+          currentWorkIndex
+        ].product.filter((product) =>
+          selectProduct.some((i) => i.id === product.id),
+        );
+
         dialogTotalProduct = false;
         selectProduct = [];
       }
@@ -3663,9 +3676,57 @@ watch(
       }
     "
   >
-    <div class="full-width full-height q-pa-lg">
+    <div class="q-pa-lg full-height scroll column">
-      <div class="row items-center">
+      <div class="row items-center justify-between">
-        <q-space />
+        <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) => {
+                    const productExists = selectProduct.some(
+                      (product) => product.id === i.id,
+                    );
+                    if (!productExists) {
+                      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"
@@ -3683,21 +3744,17 @@ watch(
           </template>
         </q-input>
       </div>
-      <div>
+
-        <AppBox
+      <div class="row q-mt-md q-col-gutter-md col">
-          no-padding
-          class="row q-mt-md q-col-gutter-sm"
-          style="background: none"
-        >
         <div
-            class="col-12 text-center"
+          class="flex col justify-center items-center"
           v-if="resultSearchProduct?.length === 0"
         >
           <NoData />
         </div>
 
         <div
-            :class="`${$q.screen.gt.sm ? 'col-3 ' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+          class="col-md-3 col-sm-6 col-12"
           v-for="i in (!!inputSearchProductAndService
             ? resultSearchProduct
             : productIsAdd
@@ -3710,6 +3767,7 @@ watch(
           :key="i.id"
         >
           <TotalProductCardComponent
+            no-time-img
             :index="selectProduct.findIndex((v) => v.id === i.id)"
             :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
             :isSelected="true"
@@ -3752,7 +3810,6 @@ watch(
             "
           />
         </div>
-        </AppBox>
       </div>
     </div>
   </DialogForm>
@@ -4155,6 +4212,7 @@ watch(
             async (index) => {
               await fetchListOfProductIsAdd(currentIdType);
               currentWorkIndex = index;
+              selectProduct = workItems[currentWorkIndex].product;
               dialogTotalProduct = true;
             }
           "
@@ -4374,6 +4432,7 @@ watch(
             async (index) => {
               await fetchListOfProductIsAdd(currentIdType);
               currentWorkIndex = index;
+              selectProduct = workItems[currentWorkIndex].product;
               dialogTotalProduct = true;
             }
           "