From c50e775c116f9dc72c191a68665bc5d6a7824e33 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 8 Jul 2024 17:16:34 +0700
Subject: [PATCH] refactor: lay out

---
 .../TotalProductCardComponent.vue             |   2 +-
 src/pages/04_product-service/MainPage.vue     | 310 ++++++++----------
 2 files changed, 146 insertions(+), 166 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index c38862f3..aa596898 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -42,7 +42,7 @@ withDefaults(
   <div
     bordered
     :class="{ 'is-add-product': isAddProduct }"
-    class="column bordered rounded q-pa-sm no-wrap"
+    class="column bordered rounded q-pa-sm no-wrap surface-1"
     style="height: 20rem"
     @click="$emit('select', data)"
   >
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index dc5c728b..22de202e 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1559,119 +1559,13 @@ watch(inputSearchProductAndService, async () => {
       <!-- product/service -->
       <div
         v-else-if="productMode === 'service'"
-        class="surface-1 col bordered rounded column"
+        class="surface-2 col bordered rounded column"
       >
         <div
-          class="row justify-between items-center surface-1 rounded"
+          class="row justify-between items-center surface-1 q-px-md q-py-sm rounded surface-3 bordered"
           style="z-index: 1"
         >
-          <q-tabs
-            v-model="productAndServiceTab"
-            class="full-height"
-            style="border-top-left-radius: var(--radius-2)"
-          >
-            <q-tab
-              name="all"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  pageSizeServiceAndProduct;
-                  // await fetchListOfProductAndService();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'all'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('all') }}
-                <q-badge
-                  class="rounded q-ml-sm"
-                  :class="
-                    productAndServiceTab === 'all' ? '' : 'app-text-muted'
-                  "
-                  :color="productAndServiceTab === 'all' ? 'primary' : ''"
-                  style="background-color: var(--surface-3)"
-                  :label="totalProductAndService"
-                />
-              </div>
-            </q-tab>
-
-            <q-tab
-              name="product"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfProduct();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'product'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('product') }}
-
-                <q-badge
-                  class="rounded q-ml-sm"
-                  :class="
-                    productAndServiceTab === 'product' ? '' : 'app-text-muted'
-                  "
-                  :color="productAndServiceTab === 'product' ? 'primary' : ''"
-                  style="background-color: var(--surface-3)"
-                  :label="totalProduct"
-                />
-              </div>
-            </q-tab>
-            <q-tab
-              name="service"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfService();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'service'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('service') }}
-                <q-badge
-                  class="rounded q-ml-sm"
-                  :class="
-                    productAndServiceTab === 'service' ? '' : 'app-text-muted'
-                  "
-                  :color="productAndServiceTab === 'service' ? 'primary' : ''"
-                  style="background-color: var(--surface-3)"
-                  :label="totalService"
-                />
-              </div>
-            </q-tab>
-          </q-tabs>
-
-          <div class="row q-py-sm q-pr-md">
+          <div>
             <q-input
               style="width: 300px"
               outlined
@@ -1687,7 +1581,8 @@ watch(inputSearchProductAndService, async () => {
                 <q-icon name="mdi-magnify" />
               </template>
             </q-input>
-
+          </div>
+          <div class="row">
             <q-btn
               icon="mdi-tune-vertical-variant"
               size="sm"
@@ -1754,74 +1649,159 @@ watch(inputSearchProductAndService, async () => {
         </div>
 
         <!-- tab -->
+
         <div
           v-if="productAndService && productAndService.length > 0"
-          class="row flex q-pa-md q-col-gutter-md col scroll"
+          class="row flex col q-px-md"
         >
-          <div
-            class="col-md-3 col-sm-6 col-12"
-            v-for="i in productAndServiceTab === 'all'
-              ? productAndService
-              : productAndServiceTab === 'product'
-                ? product
-                : service"
-            :key="i.id"
+          <q-tabs
+            dense
+            v-model="productAndServiceTab"
+            class="col-12 q-mb-lg bordered-b"
+            align="left"
+            style="border-top-left-radius: var(--radius-2)"
           >
-            <TotalProductCardComponent
-              :data="i"
-              :key="i.id"
-              :title="i.name"
-              :isDisabled="i.status === 'INACTIVE' ? true : false"
-              @toggleStatus="
-                () => {
-                  if (i.type === 'product') {
-                    toggleStatusProduct(i.id, i.status);
-                  }
-                  if (i.type === 'service') {
-                    toggleStatusService(i.id, i.status);
-                  }
+            <q-tab
+              name="all"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  pageSizeServiceAndProduct;
+                  // await fetchListOfProductAndService();
+                  flowStore.rotate();
                 }
               "
-              @menuViewDetail="
-                async () => {
-                  if (i.type === 'product') {
-                    currentIdProduct = i.id;
-                    assignFormDataProduct(i);
-                    dialogProductEdit = true;
-                  }
-                  if (i.type === 'service') {
-                    currentIdService = i.id;
-                    infoServiceEdit = false;
-                    assignFormDataProductService(i.id);
-                    dialogServiceEdit = true;
-                  }
-                  await fetchListOfOptionBranch();
-                }
-              "
-              @menuEdit="
-                async () => {
-                  if (i.type === 'product') {
-                    currentIdProduct = i.id;
-                    infoProductEdit = true;
-                    assignFormDataProduct(i);
-                    dialogProductEdit = true;
-                  }
-                  if (i.type === 'service') {
-                    currentIdService = i.id;
-                    infoServiceEdit = true;
-                    assignFormDataProductService(i.id);
-                    dialogServiceEdit = true;
-                  }
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'all'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('all') }}
+              </div>
+            </q-tab>
 
-                  await fetchListOfOptionBranch();
+            <q-tab
+              name="product"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  // await fetchListOfProduct();
+                  flowStore.rotate();
                 }
               "
-            />
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'product'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('product') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="service"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  // await fetchListOfService();
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'service'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('service') }}
+              </div>
+            </q-tab>
+          </q-tabs>
+          <div class="col-12 row flex col q-col-gutter-sm scroll full-height">
+            <div
+              class="col-md-3 col-sm-6 col-12"
+              v-for="i in productAndServiceTab === 'all'
+                ? productAndService
+                : productAndServiceTab === 'product'
+                  ? product
+                  : service"
+              :key="i.id"
+            >
+              <TotalProductCardComponent
+                :data="i"
+                :key="i.id"
+                :title="i.name"
+                :isDisabled="i.status === 'INACTIVE' ? true : false"
+                @toggleStatus="
+                  () => {
+                    if (i.type === 'product') {
+                      toggleStatusProduct(i.id, i.status);
+                    }
+                    if (i.type === 'service') {
+                      toggleStatusService(i.id, i.status);
+                    }
+                  }
+                "
+                @menuViewDetail="
+                  async () => {
+                    if (i.type === 'product') {
+                      currentIdProduct = i.id;
+                      assignFormDataProduct(i);
+                      dialogProductEdit = true;
+                    }
+                    if (i.type === 'service') {
+                      currentIdService = i.id;
+                      infoServiceEdit = false;
+                      assignFormDataProductService(i.id);
+                      dialogServiceEdit = true;
+                    }
+                    await fetchListOfOptionBranch();
+                  }
+                "
+                @menuEdit="
+                  async () => {
+                    if (i.type === 'product') {
+                      currentIdProduct = i.id;
+                      infoProductEdit = true;
+                      assignFormDataProduct(i);
+                      dialogProductEdit = true;
+                    }
+                    if (i.type === 'service') {
+                      currentIdService = i.id;
+                      infoServiceEdit = true;
+                      assignFormDataProductService(i.id);
+                      dialogServiceEdit = true;
+                    }
+
+                    await fetchListOfOptionBranch();
+                  }
+                "
+              />
+            </div>
           </div>
         </div>
 
         <!-- footer -->
-        <div class="row items-center justify-between q-px-md">
+        <div
+          class="row items-center justify-between q-px-md surface-2"
+          style="z-index: 99"
+        >
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">