refactor: no product on service work & select all search

src/components/ProfileBanner.vue

@@ -81,7 +81,15 @@ const showOverlay = ref(false);
             @mouseleave="showOverlay = false"
             @click.stop="$emit('view')"
           >
-            <q-img id="profile-view" v-if="img" :src="img" :ratio="1">
+            <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"
@@ -113,6 +121,7 @@ const showOverlay = ref(false);
                   </div>
                 </template>
               </q-img>
+            </div>
             <div
               v-else
               class="full-width full-height flex items-center justify-center"

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,12 +3817,30 @@ watch(
       }
     "
   >
-    <div class="full-width q-pa-lg">
+    <div
-      <div class="row items-center justify-between q-mb-md">
+      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 ===
+            !!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;
@@ -3815,7 +3851,15 @@ watch(
           @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;
@@ -3825,21 +3869,9 @@ watch(
               ) {
                 selectProduct = [];
               } else {
-                productIsAdd
+                !!inputSearchProductAndService
-                  ?.filter((i) => {
+                  ? resultSearchProduct && selectAllProduct(resultSearchProduct)
-                    if (i.status === 'INACTIVE') {
+                  : productIsAdd && selectAllProduct(productIsAdd);
-                      return false;
-                    }
-                    return true;
-                  })
-                  .forEach((i) => {
-                    const productExists = selectProduct.some(
-                      (product) => product.id === i.id,
-                    );
-                    if (!productExists) {
-                      selectProduct.push({ ...i });
-                    }
-                  });
               }
             }
           "
@@ -3863,10 +3895,17 @@ watch(
       </div>
 
       <div
-        class="flex col justify-center items-center"
+        class="flex col justify-center items-center col"
-        v-if="resultSearchProduct?.length === 0"
+        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