From 37d19e8600ad88bebe8efdb9280a2351a8cee011 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:15:31 +0700
Subject: [PATCH] feat: scroll inside product / service

---
 src/pages/04_product-service/MainPage.vue | 237 +++++++++++-----------
 1 file changed, 116 insertions(+), 121 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7b7cdc3b..8890de45 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1227,31 +1227,28 @@ watch(inputSearchProductAndService, async () => {
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-1 col bordered rounded q-px-md q-pt-md scroll column"
+        class="surface-1 col bordered rounded column no-wrap"
       >
-        <div class="row justify-between">
-          <div
-            v-if="productMode === 'type'"
-            class="text-h6 text-weight-bold q-mb-md"
-          >
+        <div class="row surface-2 bordered-b q-px-md q-py-sm">
+          <div v-if="productMode === 'type'" class="text-h6 text-weight-bold">
             {{ $t('productAndServiceType') }}
           </div>
           <div
             v-else-if="productMode === 'group'"
-            class="text-h6 text-weight-bold q-mb-md"
+            class="text-h6 text-weight-bold"
           >
             {{ $t('productAndServiceAll') }}
           </div>
           <div
             v-if="productMode === 'group' || productMode === 'type'"
-            class="row q-px-md q-pb-md"
+            class="row q-ml-auto"
           >
             <q-input
               style="width: 300px"
               outlined
               dense
               :label="$t('search')"
-              class="q-mr-lg"
+              class="q-mr-sm"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="500"
@@ -1309,119 +1306,117 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div class="row q-col-gutter-md col scroll">
-          <div
-            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-            v-for="(v, i) in productMode === 'type'
-              ? productType
-              : productGroup"
-            :key="i"
-          >
-            <ProductCardComponent
-              v-if="productMode === 'type'"
-              isType
-              :count-product="v._count.product"
-              :count-type="v._count.type"
-              :count-service="v._count.service"
-              :title="v.name"
-              :subtitle="v.code"
-              :date="new Date(v.updatedAt)"
-              :status="v.status"
-              :id="v.id"
-              :isDisabled="v.status === 'INACTIVE'"
-              :color="
-                $q.dark.isActive
-                  ? 'var(--purple-7-hsl)'
-                  : 'var(--violet-11-hsl)'
-              "
-              @toggleStatus="toggleStatusType(v.id, v.status)"
-              @viewCard="
-                () => {
-                  currentStatusProduct = v.status === 'INACTIVE';
-                  clearFormGroup();
-                  currentIdType = v.id;
-                  assignFormDataGroup(v);
-                  isEdit = false;
-                  drawerInfo = true;
-                }
-              "
-              @updateCard="
-                () => {
-                  clearFormGroup();
-                  currentIdType = v.id;
-                  assignFormDataGroup(v);
-                  isEdit = true;
-                  drawerInfo = true;
-                }
-              "
-              @deleteCard="
-                () => {
-                  deleteProductById(v.id);
-                }
-              "
-              @on-click="
-                async () => {
-                  pathTypeName = v.name;
-                  currentIdType = v.id;
-                  productMode = 'service';
-                  productAndServiceTab = 'all';
-                  // await featchStatsService();
-                  // await featchStatsProduct();
-                  await fetchListOfProduct();
-                  await fetchListOfService();
-                  await fetchListOfProductAndService();
-                  flowStore.rotate();
-                }
-              "
-            />
-            <ProductCardComponent
-              v-else-if="productMode === 'group'"
-              :title="v.name"
-              :subtitle="v.code"
-              :count-product="v._count.product"
-              :count-type="v._count.type"
-              :count-service="v._count.service"
-              :date="new Date(v.updatedAt)"
-              :status="v.status"
-              color="var(--pink-6-hsl)"
-              :id="v.id"
-              :isDisabled="v.status === 'INACTIVE'"
-              @toggleStatus="toggleStatusGroup(v.id, v.status)"
-              @viewCard="
-                () => {
-                  currentStatusProduct = v.status === 'INACTIVE';
-                  clearFormGroup();
-                  assignFormDataGroup(v);
-                  isEdit = false;
-                  currentId = v.id;
-                  drawerInfo = true;
-                }
-              "
-              @updateCard="
-                () => {
-                  clearFormGroup();
-                  assignFormDataGroup(v);
-                  isEdit = true;
-                  currentId = v.id;
+        <div style="height: 100%" class="q-pa-md scroll">
+          <div class="row q-col-gutter-md col">
+            <div
+              :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+              v-for="(v, i) in productMode === 'type'
+                ? productType
+                : productGroup"
+              :key="i"
+            >
+              <ProductCardComponent
+                v-if="productMode === 'type'"
+                isType
+                :count-product="v._count.product"
+                :count-type="v._count.type"
+                :count-service="v._count.service"
+                :title="v.name"
+                :subtitle="v.code"
+                :date="new Date(v.updatedAt)"
+                :status="v.status"
+                :id="v.id"
+                :isDisabled="v.status === 'INACTIVE'"
+                :color="
+                  $q.dark.isActive
+                    ? 'var(--purple-7-hsl)'
+                    : 'var(--violet-11-hsl)'
+                "
+                @toggleStatus="toggleStatusType(v.id, v.status)"
+                @viewCard="
+                  () => {
+                    currentStatusProduct = v.status === 'INACTIVE';
+                    clearFormGroup();
+                    currentIdType = v.id;
+                    assignFormDataGroup(v);
+                    isEdit = false;
+                    drawerInfo = true;
+                  }
+                "
+                @updateCard="
+                  () => {
+                    clearFormGroup();
+                    currentIdType = v.id;
+                    assignFormDataGroup(v);
+                    isEdit = true;
+                    drawerInfo = true;
+                  }
+                "
+                @deleteCard="
+                  () => {
+                    deleteProductById(v.id);
+                  }
+                "
+                @on-click="
+                  async () => {
+                    pathTypeName = v.name;
+                    currentIdType = v.id;
+                    productMode = 'service';
+                    productAndServiceTab = 'all';
+                    // await featchStatsService();
+                    // await featchStatsProduct();
+                    await fetchListOfProduct();
+                    await fetchListOfService();
+                    await fetchListOfProductAndService();
+                    flowStore.rotate();
+                  }
+                "
+              />
+              <ProductCardComponent
+                v-else-if="productMode === 'group'"
+                :title="v.name"
+                :subtitle="v.code"
+                :count-product="v._count.product"
+                :count-type="v._count.type"
+                :count-service="v._count.service"
+                :date="new Date(v.updatedAt)"
+                :status="v.status"
+                color="var(--pink-6-hsl)"
+                :id="v.id"
+                :isDisabled="v.status === 'INACTIVE'"
+                @toggleStatus="toggleStatusGroup(v.id, v.status)"
+                @viewCard="
+                  () => {
+                    currentStatusProduct = v.status === 'INACTIVE';
+                    clearFormGroup();
+                    assignFormDataGroup(v);
+                    isEdit = false;
+                    currentId = v.id;
+                    drawerInfo = true;
+                  }
+                "
+                @updateCard="
+                  () => {
+                    clearFormGroup();
+                    assignFormDataGroup(v);
+                    isEdit = true;
+                    currentId = v.id;
 
-                  drawerInfo = true;
-                }
-              "
-              @deleteCard="
-                () => {
-                  deleteProductById(v.id);
-                }
-              "
-              @on-click="
-                async () => {
-                  pathGroupName = v.name;
-                  currentId = v.id;
-                  productMode = 'type';
-                  await fetchListType();
-                  flowStore.rotate();
-                }
-              "
-            />
+                    drawerInfo = true;
+                  }
+                "
+                @deleteCard="deleteProductById(v.id)"
+                @on-click="
+                  async () => {
+                    pathGroupName = v.name;
+                    currentId = v.id;
+                    productMode = 'type';
+                    await fetchListType();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
         </div>