From f56c5591cc744f482a84bfc0a5e1e140d8a79319 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 22 Aug 2024 16:37:27 +0700
Subject: [PATCH] refactor: no product on service work & select all search

---
 src/components/ProfileBanner.vue          |  73 ++++++++-------
 src/pages/04_product-service/MainPage.vue | 103 +++++++++++++++-------
 2 files changed, 112 insertions(+), 64 deletions(-)

diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index d58ee26e..a3dc214d 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -81,38 +81,47 @@ const showOverlay = ref(false);
             @mouseleave="showOverlay = false"
             @click.stop="$emit('view')"
           >
-            <q-img id="profile-view" v-if="img" :src="img" :ratio="1">
-              <template #error>
-                <q-img
-                  v-if="fallbackImg"
-                  :src="fallbackImg"
-                  :ratio="1"
-                  style="background-color: transparent"
-                >
-                  <template #error>
-                    <div
-                      class="full-width full-height flex items-center justify-center"
-                      :style="{
-                        background: `${bgColor || 'var(--brand-1)'}`,
-                        color: `${color || 'white'}`,
-                      }"
-                    >
-                      <q-icon :name="icon || 'mdi-account'" />
-                    </div>
-                  </template>
-                </q-img>
-                <div
-                  v-else
-                  class="full-width full-height flex items-center justify-center"
-                  :style="{
-                    background: `${bgColor || 'var(--brand-1)'}`,
-                    color: `${color || 'white'}`,
-                  }"
-                >
-                  <q-icon :name="icon || 'mdi-account'" />
-                </div>
-              </template>
-            </q-img>
+            <div
+              v-if="img"
+              class="full-width full-height"
+              :style="{
+                background: `${bgColor || 'var(--brand-1)'}`,
+                color: `${color || 'white'}`,
+              }"
+            >
+              <q-img id="profile-view" :src="img" :ratio="1">
+                <template #error>
+                  <q-img
+                    v-if="fallbackImg"
+                    :src="fallbackImg"
+                    :ratio="1"
+                    style="background-color: transparent"
+                  >
+                    <template #error>
+                      <div
+                        class="full-width full-height flex items-center justify-center"
+                        :style="{
+                          background: `${bgColor || 'var(--brand-1)'}`,
+                          color: `${color || 'white'}`,
+                        }"
+                      >
+                        <q-icon :name="icon || 'mdi-account'" />
+                      </div>
+                    </template>
+                  </q-img>
+                  <div
+                    v-else
+                    class="full-width full-height flex items-center justify-center"
+                    :style="{
+                      background: `${bgColor || 'var(--brand-1)'}`,
+                      color: `${color || 'white'}`,
+                    }"
+                  >
+                    <q-icon :name="icon || 'mdi-account'" />
+                  </div>
+                </template>
+              </q-img>
+            </div>
             <div
               v-else
               class="full-width full-height flex items-center justify-center"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index a07bc3a8..9e9c2649 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -497,6 +497,24 @@ async function searchProduct(isAdd: boolean = true) {
   flowStore.rotate();
 }
 
+function selectAllProduct(list: ProductList[]) {
+  list
+    ?.filter((i) => {
+      if (i.status === 'INACTIVE') {
+        return false;
+      }
+      return true;
+    })
+    .forEach((i) => {
+      const productExists = selectProduct.value.some(
+        (product) => product.id === i.id,
+      );
+      if (!productExists) {
+        selectProduct.value.push({ ...i });
+      }
+    });
+}
+
 async function fetchListOfOptionBranch() {
   const uid = getUserId();
   const role = getRole();
@@ -3799,47 +3817,61 @@ watch(
       }
     "
   >
-    <div class="full-width q-pa-lg">
-      <div class="row items-center justify-between q-mb-md">
+    <div
+      class="full-width q-pa-lg column"
+      :class="
+        resultSearchProduct?.length === 0 || productIsAdd?.length === 0
+          ? 'full-height no-wrap'
+          : ''
+      "
+    >
+      <div
+        class="row items-center justify-between q-mb-md"
+        v-if="productIsAdd?.length !== 0"
+      >
         <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 ===
+            !!inputSearchProductAndService
+              ? selectProduct.length ===
+                resultSearchProduct?.filter((i) => {
+                  if (i.status === 'INACTIVE') {
+                    return false;
+                  }
+                  return true;
+                }).length
+              : selectProduct.length ===
                 productIsAdd?.filter((i) => {
                   if (i.status === 'INACTIVE') {
                     return false;
                   }
                   return true;
                 }).length
+          "
+          @click="
+            () => {
+              if (
+                !!inputSearchProductAndService
+                  ? selectProduct.length ===
+                    resultSearchProduct?.filter((i) => {
+                      if (i.status === 'INACTIVE') {
+                        return false;
+                      }
+                      return true;
+                    }).length
+                  : 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,
-                    );
-                    if (!productExists) {
-                      selectProduct.push({ ...i });
-                    }
-                  });
+                !!inputSearchProductAndService
+                  ? resultSearchProduct && selectAllProduct(resultSearchProduct)
+                  : productIsAdd && selectAllProduct(productIsAdd);
               }
             }
           "
@@ -3863,10 +3895,17 @@ watch(
       </div>
 
       <div
-        class="flex col justify-center items-center"
-        v-if="resultSearchProduct?.length === 0"
+        class="flex col justify-center items-center col"
+        v-if="resultSearchProduct?.length === 0 || productIsAdd?.length === 0"
       >
-        <NoData notFound />
+        <NoData
+          :notFound="resultSearchProduct?.length === 0"
+          :text="
+            productIsAdd?.length === 0
+              ? $t('productService.product.noProduct')
+              : ''
+          "
+        />
       </div>
       <div v-else class="row q-col-gutter-md">
         <div