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) => {
-          workItems[currentWorkIndex].product.push({
+          const productExists = workItems[currentWorkIndex].product.some(
-            ...i,
+            (product) => product.id === i.id,
-            nameEn: '',
+          );
-          });
+          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,76 +3744,72 @@ watch(
           </template>
         </q-input>
       </div>
-      <div>
+
-        <AppBox
+      <div class="row q-mt-md q-col-gutter-md col">
-          no-padding
+        <div
-          class="row q-mt-md q-col-gutter-sm"
+          class="flex col justify-center items-center"
-          style="background: none"
+          v-if="resultSearchProduct?.length === 0"
         >
-          <div
+          <NoData />
-            class="col-12 text-center"
+        </div>
-            v-if="resultSearchProduct?.length === 0"
-          >
-            <NoData />
-          </div>
 
-          <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
+          v-for="i in (!!inputSearchProductAndService
-              ? resultSearchProduct
+            ? resultSearchProduct
-              : productIsAdd
+            : productIsAdd
-            )?.filter((i) => {
+          )?.filter((i) => {
-              if (i.status === 'INACTIVE') {
+            if (i.status === 'INACTIVE') {
-                return false;
+              return false;
+            }
+            return true;
+          })"
+          :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"
+            :data="{ ...i, type: 'product' }"
+            :title="i.name"
+            :status="i.status === 'INACTIVE' ? true : false"
+            @menuViewDetail="
+              () => {
+                currentIdProduct = i.id;
+                assignFormDataProduct(i);
+                dialogProductEdit = true;
               }
-              return true;
+            "
-            })"
+            @menuEdit="
-            :key="i.id"
+              () => {
-          >
+                currentIdProduct = i.id;
-            <TotalProductCardComponent
+                infoProductEdit = true;
-              :index="selectProduct.findIndex((v) => v.id === i.id)"
+                assignFormDataProduct(i);
-              :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
+                dialogProductEdit = true;
-              :isSelected="true"
+              }
-              :data="{ ...i, type: 'product' }"
+            "
-              :title="i.name"
+            @viewDetail="
-              :status="i.status === 'INACTIVE' ? true : false"
+              () => {
-              @menuViewDetail="
+                currentIdProduct = i.id;
-                () => {
+                infoProductEdit = false;
-                  currentIdProduct = i.id;
+                assignFormDataProduct(i);
-                  assignFormDataProduct(i);
+                dialogProductEdit = true;
-                  dialogProductEdit = true;
+              }
-                }
+            "
-              "
+            @select="
-              @menuEdit="
+              (data) => {
-                () => {
+                const tempValue = selectProduct.find((v) => v.id === i.id);
-                  currentIdProduct = i.id;
-                  infoProductEdit = true;
-                  assignFormDataProduct(i);
-                  dialogProductEdit = true;
-                }
-              "
-              @viewDetail="
-                () => {
-                  currentIdProduct = i.id;
-                  infoProductEdit = false;
-                  assignFormDataProduct(i);
-                  dialogProductEdit = true;
-                }
-              "
-              @select="
-                (data) => {
-                  const tempValue = selectProduct.find((v) => v.id === i.id);
 
-                  if (tempValue) {
+                if (tempValue) {
-                    selectProduct = selectProduct.filter((v) => v.id !== i.id);
+                  selectProduct = selectProduct.filter((v) => v.id !== i.id);
-                  } else {
+                } else {
-                    selectProduct.push(data);
+                  selectProduct.push(data);
-                  }
                 }
-              "
+              }
-            />
+            "
-          </div>
+          />
-        </AppBox>
+        </div>
       </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;
             }
           "