fix: select all

fixes #155

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

@@ -236,7 +236,7 @@ const productIsAdd = ref<(Product & { type: 'product' })[]>();
 const modeViewIsAdd = ref<boolean>(false);
 
 const service = ref<(Service & { type: 'service' })[]>();
-const resultSearchProduct = ref<Product[]>();
+const resultSearchProduct = ref<Product[]>([]);
 
 const productAndServiceTab = ref<'product' | 'service'>('service');
 const manageWorkNameDialog = ref(false);
@@ -518,6 +518,26 @@ const onCreateImageList = ref<{
   list: { url: string; imgFile: File | null; name: string }[];
 }>({ selectedImage: '', list: [] });
 
+const isSelectAll = computed(() => {
+  const tempProduct = !!inputSearchWorkProduct.value
+    ? resultSearchProduct.value
+    : productIsAdd.value;
+
+  const activeProducts = tempProduct?.filter((i) => i.status !== 'INACTIVE');
+
+  if (!!inputSearchWorkProduct.value) {
+    return tempProduct?.length !== 0
+      ? activeProducts?.every((activeProduct) =>
+          selectProduct.value.some(
+            (product) => product.id === activeProduct.id,
+          ),
+        )
+      : false;
+  }
+
+  return selectProduct.value.length === activeProducts?.length;
+});
+
 async function searchProduct(isAdd: boolean = true) {
   const res = await fetchListProduct({
     query: inputSearchWorkProduct.value,
@@ -542,6 +562,13 @@ async function searchProduct(isAdd: boolean = true) {
   flowStore.rotate();
 }
 
+function deleteSelectAllAtSearch() {
+  selectProduct.value = selectProduct.value.filter(
+    (product) =>
+      !resultSearchProduct.value.some((result) => result.id === product.id),
+  );
+}
+
 function selectAllProduct(list: Product[]) {
   list
     ?.filter((i) => {
@@ -3402,43 +3429,13 @@ watch(
       <div class="row items-center q-mb-md" v-if="productIsAdd?.length !== 0">
         <q-checkbox
           :label="$t('general.selectAll')"
-          :model-value="
+          :model-value="isSelectAll"
-            !!inputSearchWorkProduct
-              ? 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 (
+              if (isSelectAll) {
                 !!inputSearchWorkProduct
-                  ? selectProduct.length ===
+                  ? deleteSelectAllAtSearch()
-                    resultSearchProduct?.filter((i) => {
+                  : (selectProduct = []);
-                      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 {
                 !!inputSearchWorkProduct
                   ? resultSearchProduct && selectAllProduct(resultSearchProduct)
@@ -3511,7 +3508,10 @@ watch(
 
       <div
         class="flex col justify-center items-center col"
-        v-if="resultSearchProduct?.length === 0 || productIsAdd?.length === 0"
+        v-if="
+          (!!inputSearchWorkProduct && resultSearchProduct?.length === 0) ||
+          productIsAdd?.length === 0
+        "
       >
         <NoData
           :not-found="resultSearchProduct?.length === 0"