refactor: use table product

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

@@ -36,6 +36,7 @@ import {
   UndoButton,
   ToggleButton,
 } from 'components/button';
+import TableProduct from 'src/components/04_product-service/TableProduct.vue';
 
 import useFlowStore from 'stores/flow';
 
@@ -233,6 +234,8 @@ const productTab = ref(1);
 const productGroup = ref<ProductGroup[]>();
 const product = ref<(Product & { type: 'product' })[]>();
 const productIsAdd = ref<(Product & { type: 'product' })[]>();
+const modeViewIsAdd = ref<boolean>(false);
+
 const service = ref<(Service & { type: 'service' })[]>();
 const resultSearchProduct = ref<Product[]>();
 
@@ -3354,18 +3357,8 @@ watch(
       }
     "
   >
-    <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"
-      >
+    <div class="full-width q-pa-lg column full-height no-wrap">
+      <div class="row items-center q-mb-md" v-if="productIsAdd?.length !== 0">
         <q-checkbox
           :label="$t('general.selectAll')"
           :model-value="
@@ -3413,6 +3406,52 @@ watch(
             }
           "
         />
+
+        <q-btn-toggle
+          v-model="modeViewIsAdd"
+          id="btn-mode"
+          dense
+          class="no-shadow bordered rounded surface-1 q-ml-auto q-mr-sm"
+          :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+          size="xs"
+          :options="[
+            { value: true, slot: 'folder' },
+            { value: false, slot: 'list' },
+          ]"
+        >
+          <template v-slot:folder>
+            <q-icon
+              name="mdi-view-grid-outline"
+              size="16px"
+              class="q-px-sm q-py-xs rounded"
+              :style="{
+                color: $q.dark.isActive
+                  ? modeViewIsAdd
+                    ? '#C9D3DB '
+                    : '#787B7C'
+                  : modeViewIsAdd
+                    ? '#787B7C'
+                    : '#C9D3DB',
+              }"
+            />
+          </template>
+          <template v-slot:list>
+            <q-icon
+              name="mdi-format-list-bulleted"
+              class="q-px-sm q-py-xs rounded"
+              size="16px"
+              :style="{
+                color: $q.dark.isActive
+                  ? modeView === false
+                    ? '#C9D3DB'
+                    : '#787B7C'
+                  : modeView === false
+                    ? '#787B7C'
+                    : '#C9D3DB',
+              }"
+            />
+          </template>
+        </q-btn-toggle>
         <q-input
           id="input-search-add-product"
           outlined
@@ -3442,64 +3481,75 @@ watch(
           "
         />
       </div>
-      <div v-else class="row q-col-gutter-md full-width">
-        <div
-          class="col-md-3 col-sm-6 col-12"
-          v-for="i in (!!inputSearchWorkProduct
-            ? resultSearchProduct
-            : productIsAdd
-          )?.filter((i) => {
-            if (i.status === 'INACTIVE') {
-              return false;
-            }
-            return true;
-          })"
-          :key="i.id"
-        >
-          <TotalProductCardComponent
-            no-time-img
-            :index="selectProduct.findIndex((v) => v.id === i.id)"
-            :is-add-product="!!selectProduct.find((v) => v.id === i.id)"
-            :action="false"
-            :data="{ ...i, type: 'product' }"
-            :title="i.name"
-            :status="i.status === 'INACTIVE' ? true : false"
-            :price-display="priceDisplay"
-            @menu-view-detail="
-              () => {
-                currentIdProduct = i.id;
-                assignFormDataProduct(i);
-                dialogProductEdit = true;
-              }
-            "
-            @menu-edit="
-              () => {
-                currentIdProduct = i.id;
-                infoProductEdit = true;
-                assignFormDataProduct(i);
-                dialogProductEdit = true;
-              }
-            "
-            @view-detail="
-              () => {
-                currentIdProduct = i.id;
-                infoProductEdit = false;
-                assignFormDataProduct(i);
-                dialogProductEdit = true;
-              }
-            "
-            @select="
-              (data) => {
-                const tempValue = selectProduct.find((v) => v.id === i.id);
+      <div v-else class="flex col scroll" style="max-height: 100%">
+        <TableProduct
+          :row="!!inputSearchWorkProduct ? resultSearchProduct : productIsAdd"
+          :column="tbColumn.product"
+          :fieldSelected="tbControl.product.fieldSelected"
+          :grid="modeViewIsAdd"
+          v-model:selectedItem="selectProduct"
+          card-container-class="row q-col-gutter-md"
+          @select="
+            (data) => {
+              {
+                const tempValue = selectProduct.find((v) => v.id === data.id);
                 if (tempValue) {
-                  selectProduct = selectProduct.filter((v) => v.id !== i.id);
+                  selectProduct = selectProduct.filter((v) => v.id !== data.id);
                 } else {
                   selectProduct.push(data);
                 }
               }
-            "
-          />
-        </div>
+            }
+          "
+        >
+          <template #grid="{ row }">
+            <TotalProductCardComponent
+              no-time-img
+              :index="selectProduct.findIndex((v) => v.id === row.id)"
+              :is-add-product="!!selectProduct.find((v) => v.id === row.id)"
+              :action="false"
+              :data="{ ...row, type: 'product' }"
+              :title="row.name"
+              :status="row.status === 'INACTIVE' ? true : false"
+              :price-display="priceDisplay"
+              @menu-view-detail="
+                () => {
+                  currentIdProduct = row.id;
+                  assignFormDataProduct(row);
+                  dialogProductEdit = true;
+                }
+              "
+              @menu-edit="
+                () => {
+                  currentIdProduct = row.id;
+                  infoProductEdit = true;
+                  assignFormDataProduct(row);
+                  dialogProductEdit = true;
+                }
+              "
+              @view-detail="
+                () => {
+                  currentIdProduct = row.id;
+                  infoProductEdit = false;
+                  assignFormDataProduct(row);
+                  dialogProductEdit = true;
+                }
+              "
+              @select="
+                (data) => {
+                  const tempValue = selectProduct.find((v) => v.id === row.id);
+                  if (tempValue) {
+                    selectProduct = selectProduct.filter(
+                      (v) => v.id !== row.id,
+                    );
+                  } else {
+                    selectProduct.push(data);
+                  }
+                }
+              "
+            />
+          </template>
+        </TableProduct>
       </div>
     </div>
   </DialogForm>
@@ -4081,6 +4131,7 @@ watch(
                 JSON.stringify(workItems[currentWorkIndex].product),
               );
               dialogTotalProduct = true;
+              modeViewIsAdd = false;
             }
           "
           @manage-work-name="
@@ -4470,6 +4521,7 @@ watch(
                 JSON.stringify(workItems[currentWorkIndex].product),
               );
               dialogTotalProduct = true;
+              modeViewIsAdd = false;
             }
           "
           @manage-work-name="