From 9c3443a3231e6a4192b483bdf981144020e802d6 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 12 Jul 2024 15:26:13 +0700
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20=20lay?=
 =?UTF-8?q?out=20=20=E0=B8=AA=E0=B8=B4=E0=B8=99=E0=B8=84=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 1304 +++++++++++----------
 1 file changed, 653 insertions(+), 651 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index cf41e589..6aed2115 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1295,110 +1295,111 @@ watch(inputSearchProductAndService, async () => {
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="text-body-2 q-mb-xs flex items-center">
-    {{ $t('dataSum') }}
-    <q-btn
-      class="q-ml-xs"
-      icon="mdi-pin"
-      color="primary"
-      size="sm"
-      flat
-      dense
-      rounded
-      @click="hideStat = !hideStat"
-      :style="hideStat ? 'rotate: 90deg' : ''"
-      style="transition: 0.1s ease-in-out"
-    />
-  </div>
-
-  <transition name="slide">
-    <div v-if="!hideStat" class="scroll q-mb-md">
-      <div style="display: inline-block">
-        <StatCard
-          label-i18n
-          :branch="stat.filter((v) => !filterStat.includes(v.mode))"
-          :dark="$q.dark.isActive"
-          nowrap
-        />
-      </div>
+  <div class="full-height overflow-hidden">
+    <div class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('dataSum') }}
+      <q-btn
+        class="q-ml-xs"
+        icon="mdi-pin"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="hideStat = !hideStat"
+        :style="hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
     </div>
-  </transition>
 
-  <q-splitter
-    v-model="splitterModel"
-    :limits="[0, 100]"
-    style="width: 100%; height: 82%"
-    after-class="overflow-hidden"
-  >
-    <template v-slot:before>
-      <div class="surface-2 column full-height">
-        <div
-          class="row bordered-b q-pl-sm text-weight-bold items-center"
-          style="height: 56px"
-        >
-          <div class="col">จัดการสาขาทั้งหมด</div>
+    <transition name="slide">
+      <div v-if="!hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <StatCard
+            label-i18n
+            :branch="stat.filter((v) => !filterStat.includes(v.mode))"
+            :dark="$q.dark.isActive"
+            nowrap
+          />
         </div>
+      </div>
+    </transition>
 
-        <div class="col" style="position: relative">
-          <div class="scroll" style="position: absolute; inset: 0">
-            <!-- <q-tree
-                      :nodes="treeData"
+    <q-splitter
+      v-model="splitterModel"
+      :limits="[20, 100]"
+      style="width: 100%; height: 100%"
+      after-class="overflow-hidden"
+    >
+      <template v-slot:before>
+        <div class="surface-2 column full-height">
+          <div
+            class="row bordered-b q-pl-sm text-weight-bold items-center"
+            style="height: 56px"
+          >
+            <div class="col">จัดการสาขาทั้งหมด</div>
+          </div>
+
+          <div class="col" style="position: relative">
+            <div class="scroll" style="position: absolute; inset: 0">
+              <!-- <q-tree
+              :nodes="treeData"
                       node-key="id"
                       label-key="name"
                       children-key="branch"
                       style="color: var(--foreground)"
-                    >
+                      >
                       <template #default-header="{ node }">
                         <div
-                          class="row items-center justify-between full-width no-wrap"
+                        class="row items-center justify-between full-width no-wrap"
                         >
-                          <span>{{ node.name }}</span>
-                          <div
-                            class="row q-gutter-xs items-center no-wrap"
-                            @click.stop
-                          >
-                            <q-btn
-                              v-if="node.isHeadOffice"
-                              :id="`create-sub-branch-btn-${node.name}`"
-                              @click.stop=""
-                              icon="mdi-file-plus-outline"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                            />
-
-                            <q-btn
-                              :id="`view-detail-btn-${node.name}`"
+                        <span>{{ node.name }}</span>
+                        <div
+                        class="row q-gutter-xs items-center no-wrap"
+                        @click.stop
+                        >
+                        <q-btn
+                        v-if="node.isHeadOffice"
+                        :id="`create-sub-branch-btn-${node.name}`"
+                        @click.stop=""
+                        icon="mdi-file-plus-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        />
+                        
+                        <q-btn
+                        :id="`view-detail-btn-${node.name}`"
                               icon="mdi-dots-vertical"
                               size="sm"
                               dense
                               round
                               flat
-                            >
+                              >
                               <q-menu class="bordered">
                                 <q-list v-close-popup>
                                   <q-item
-                                    :id="`view-detail-btn-${node.name}-view`"
-                                    @click.stop="
-                                    
-                                    "
-                                    clickable
-                                    dense
-                                    class="row q-py-sm"
-                                    style="white-space: nowrap"
+                                  :id="`view-detail-btn-${node.name}-view`"
+                                  @click.stop="
+                                  
+                                  "
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
                                   >
-                                    <q-icon
-                                      name="mdi-eye-outline"
-                                      class="col-3"
-                                      size="xs"
-                                      style="color: hsl(var(--green-6-hsl))"
-                                    />
-                                    <span
-                                      class="col-9 q-px-md flex items-center"
-                                    >
-                                      {{ $t('viewDetail') }}
-                                    </span>
+                                  <q-icon
+                                  name="mdi-eye-outline"
+                                  class="col-3"
+                                  size="xs"
+                                  style="color: hsl(var(--green-6-hsl))"
+                                  />
+                                  <span
+                                  class="col-9 q-px-md flex items-center"
+                                  >
+                                  {{ $t('viewDetail') }}
+                                </span>
                                   </q-item>
 
                                   <q-item
@@ -1418,10 +1419,10 @@ watch(inputSearchProductAndService, async () => {
                                       class="col-3"
                                       size="xs"
                                       style="color: hsl(var(--cyan-6-hsl))"
-                                    />
-                                    <span
+                                      />
+                                      <span
                                       class="col-9 q-px-md flex items-center"
-                                    >
+                                      >
                                       {{ $t('edit') }}
                                     </span>
                                   </q-item>
@@ -1437,17 +1438,17 @@ watch(inputSearchProductAndService, async () => {
                                     }"
                                     style="white-space: nowrap"
                                     @click=""
-                                  >
+                                    >
                                     <q-icon
                                       name="mdi-trash-can-outline"
                                       size="xs"
                                       class="col-3"
                                       :class="{
                                         'app-text-negative':
-                                          node.status === 'CREATED',
+                                        node.status === 'CREATED',
                                       }"
-                                    />
-                                    <span
+                                      />
+                                      <span
                                       class="col-9 q-px-md flex items-center"
                                     >
                                       {{ $t('delete') }}
@@ -1458,19 +1459,19 @@ watch(inputSearchProductAndService, async () => {
                                     <q-item-section class="q-py-sm">
                                       <div class="q-pa-sm surface-2 rounded">
                                         <q-toggle
-                                          :id="`view-detail-btn-${node.name}-status`"
+                                        :id="`view-detail-btn-${node.name}-status`"
                                           dense
                                           size="sm"
                                           :label="
-                                            node.status !== 'INACTIVE'
-                                              ? $t('switchOnLabel')
-                                              : $t('switchOffLabel')
+                                          node.status !== 'INACTIVE'
+                                          ? $t('switchOnLabel')
+                                          : $t('switchOffLabel')
                                           "
                                           @click="
-                                            async () => {
+                                          async () => {
                                      
-                                        
-                                            }
+                                            
+                                          }
                                           "
                                           :model-value="
                                             node.status === 'CREATED' ||
@@ -1487,170 +1488,170 @@ watch(inputSearchProductAndService, async () => {
                         </div>
                       </template>
                     </q-tree> -->
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template v-slot:after>
-      <div class="column no-wrap full-height">
-        <!-- group/type -->
-        <div
-          v-if="productMode === 'group' || productMode === 'type'"
-          class="col justify-between surface-2 items-center full-width full-height justify-between"
-        >
-          <div
-            class="q-px-md row bordered-b justify-between items-center"
-            style="height: 56px"
-          >
-            <q-input
-              style="width: 300px"
-              outlined
-              dense
-              unelavated
-              :label="$t('search')"
-              class=""
-              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-              v-model="inputSearch"
-              debounce="250"
-            >
-              <template v-slot:prepend>
-                <q-icon name="mdi-magnify" />
-              </template>
-            </q-input>
-
-            <div class="row" style="gap: var(--size-2)">
-              <q-btn
-                icon="mdi-tune-vertical-variant"
-                size="sm"
-                :color="$q.dark.isActive ? 'dark' : 'white'"
-                :text-color="$q.dark.isActive ? 'white' : 'dark'"
-                class="bordered rounded"
-                unelevated
-              >
-                <q-menu class="bordered">
-                  <q-list v-close-popup dense>
-                    <q-item
-                      clickable
-                      class="flex items-center"
-                      @click="
-                        () => {
-                          currentStatus = 'All';
-                        }
-                      "
-                    >
-                      {{ $t('all') }}
-                    </q-item>
-                    <q-item
-                      clickable
-                      class="flex items-center"
-                      @click="
-                        () => {
-                          currentStatus = 'ACTIVE';
-                        }
-                      "
-                    >
-                      {{ $t('statusACTIVE') }}
-                    </q-item>
-                    <q-item
-                      clickable
-                      class="flex items-center"
-                      @click="
-                        () => {
-                          currentStatus = 'INACTIVE';
-                        }
-                      "
-                    >
-                      {{ $t('statusINACTIVE') }}
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-
-              <q-select
-                v-if="modeView === false"
-                id="select-field"
-                for="select-field"
-                :options="
-                  tbControl.groupAndType.fieldDisplay.map((x) => ({
-                    label: $t(x),
-                    value: x,
-                  }))
-                "
-                :display-value="$t('displayField')"
-                v-model="tbControl.groupAndType.fieldSelected"
-                option-label="label"
-                option-value="value"
-                map-options
-                emit-value
-                outlined
-                multiple
-                dense
-              />
-
-              <q-btn-toggle
-                v-model="modeView"
-                id="btn-mode"
-                dense
-                class="no-shadow bordered rounded surface-1"
-                :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
-                        ? modeView
-                          ? '#C9D3DB '
-                          : '#787B7C'
-                        : modeView
-                          ? '#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>
             </div>
           </div>
+        </div>
+      </template>
 
+      <template v-slot:after>
+        <div class="column no-wrap full-height">
+          <!-- group/type -->
           <div
-            v-if="
-              ((productMode === 'type' && productType?.length === 0) ||
-                (productGroup?.length === 0 && productMode === 'group')) &&
-              stat[0].count !== undefined
-            "
-            class="surface-1 row items-center justify-center bordered q-pa-md full-width full-height"
+            v-if="productMode === 'group' || productMode === 'type'"
+            class="col justify-between surface-2 items-center full-width full-height justify-between"
           >
-            <NoData :not-found="!!inputSearch" />
-          </div>
+            <div
+              class="q-px-md row bordered-b justify-between items-center"
+              style="height: 56px"
+            >
+              <q-input
+                style="width: 300px"
+                outlined
+                dense
+                unelavated
+                :label="$t('search')"
+                class=""
+                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                v-model="inputSearch"
+                debounce="250"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="mdi-magnify" />
+                </template>
+              </q-input>
 
-          <template v-else>
-            <div class="col flex scroll full-height q-pa-md surface-1">
-              <div class="full-width">
+              <div class="row" style="gap: var(--size-2)">
+                <q-btn
+                  icon="mdi-tune-vertical-variant"
+                  size="sm"
+                  :color="$q.dark.isActive ? 'dark' : 'white'"
+                  :text-color="$q.dark.isActive ? 'white' : 'dark'"
+                  class="bordered rounded"
+                  unelevated
+                >
+                  <q-menu class="bordered">
+                    <q-list v-close-popup dense>
+                      <q-item
+                        clickable
+                        class="flex items-center"
+                        @click="
+                          () => {
+                            currentStatus = 'All';
+                          }
+                        "
+                      >
+                        {{ $t('all') }}
+                      </q-item>
+                      <q-item
+                        clickable
+                        class="flex items-center"
+                        @click="
+                          () => {
+                            currentStatus = 'ACTIVE';
+                          }
+                        "
+                      >
+                        {{ $t('statusACTIVE') }}
+                      </q-item>
+                      <q-item
+                        clickable
+                        class="flex items-center"
+                        @click="
+                          () => {
+                            currentStatus = 'INACTIVE';
+                          }
+                        "
+                      >
+                        {{ $t('statusINACTIVE') }}
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+
+                <q-select
+                  v-if="modeView === false"
+                  id="select-field"
+                  for="select-field"
+                  :options="
+                    tbControl.groupAndType.fieldDisplay.map((x) => ({
+                      label: $t(x),
+                      value: x,
+                    }))
+                  "
+                  :display-value="$t('displayField')"
+                  v-model="tbControl.groupAndType.fieldSelected"
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
+                />
+
+                <q-btn-toggle
+                  v-model="modeView"
+                  id="btn-mode"
+                  dense
+                  class="no-shadow bordered rounded surface-1"
+                  :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
+                          ? modeView
+                            ? '#C9D3DB '
+                            : '#787B7C'
+                          : modeView
+                            ? '#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>
+              </div>
+            </div>
+
+            <div
+              v-if="
+                ((productMode === 'type' && productType?.length === 0) ||
+                  (productGroup?.length === 0 && productMode === 'group')) &&
+                stat[0].count !== undefined
+              "
+              class="surface-1 row items-center justify-center bordered q-pa-md full-width full-height"
+            >
+              <NoData :not-found="!!inputSearch" />
+            </div>
+
+            <template v-else>
+              <div class="surface-1 col flex q-pa-md scroll full-width">
                 <q-table
+                  :style="`height: ${hideStat ? '60dvh' : '50vh'}`"
                   flat
                   bordered
                   :grid="modeView"
@@ -2085,360 +2086,361 @@ watch(inputSearchProductAndService, async () => {
                   </template>
                 </q-table>
               </div>
-            </div>
 
-            <div
-              v-if="productMode === 'group'"
-              class="row items-center justify-between q-px-md q-py-sm"
-            >
-              <div class="col-4">
-                <div class="row items-center">
-                  <div class="app-text-muted" style="width: 80px">
-                    {{ $t('showing') }}
-                  </div>
-                  <div>
-                    <q-btn-dropdown
-                      dense
-                      unelevated
-                      :label="pageSizeGroup"
-                      class="bordered q-pl-md"
-                    >
-                      <q-list>
-                        <q-item
-                          v-for="v in [10, 30, 50, 100, 500, 1000]"
-                          :key="v"
-                          clickable
-                          v-close-popup
-                          @click="
-                            async () => {
-                              pageSizeGroup = v;
-                              await fetchListGroups();
-                            }
-                          "
-                        >
-                          <q-item-section>
-                            <q-item-label>{{ v }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-btn-dropdown>
+              <div
+                v-if="productMode === 'group'"
+                class="row items-center justify-between q-px-md q-py-sm"
+              >
+                <div class="col-4">
+                  <div class="row items-center">
+                    <div class="app-text-muted" style="width: 80px">
+                      {{ $t('showing') }}
+                    </div>
+                    <div>
+                      <q-btn-dropdown
+                        dense
+                        unelevated
+                        :label="pageSizeGroup"
+                        class="bordered q-pl-md"
+                      >
+                        <q-list>
+                          <q-item
+                            v-for="v in [10, 30, 50, 100, 500, 1000]"
+                            :key="v"
+                            clickable
+                            v-close-popup
+                            @click="
+                              async () => {
+                                pageSizeGroup = v;
+                                await fetchListGroups();
+                              }
+                            "
+                          >
+                            <q-item-section>
+                              <q-item-label>{{ v }}</q-item-label>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-btn-dropdown>
+                    </div>
                   </div>
                 </div>
+
+                <div class="col-4 row justify-center app-text-muted">
+                  {{
+                    $t('recordsPage', {
+                      resultcurrentPage: productGroup?.length,
+                      total: totalGroup,
+                    })
+                  }}
+                </div>
+
+                <div class="col-4 row justify-end">
+                  <PaginationComponent
+                    v-model:current-page="currentPageGroup"
+                    v-model:max-page="maxPageGroup"
+                    :fetch-data="
+                      async () => {
+                        await fetchListGroups();
+                        flowStore.rotate();
+                      }
+                    "
+                  />
+                </div>
               </div>
 
-              <div class="col-4 row justify-center app-text-muted">
-                {{
-                  $t('recordsPage', {
-                    resultcurrentPage: productGroup?.length,
-                    total: totalGroup,
-                  })
-                }}
-              </div>
-
-              <div class="col-4 row justify-end">
-                <PaginationComponent
-                  v-model:current-page="currentPageGroup"
-                  v-model:max-page="maxPageGroup"
-                  :fetch-data="
-                    async () => {
-                      await fetchListGroups();
-                      flowStore.rotate();
-                    }
-                  "
-                />
-              </div>
-            </div>
-
-            <div
-              v-if="productMode === 'type'"
-              class="row justify-between items-center"
-            >
-              <div class="col-4">
-                <div class="row items-center">
-                  <div class="app-text-muted" style="width: 80px">
-                    {{ $t('showing') }}
-                  </div>
-                  <div>
-                    <q-btn-dropdown
-                      dense
-                      unelevated
-                      :label="pageSizeType"
-                      class="bordered q-pl-md"
-                    >
-                      <q-list>
-                        <q-item
-                          v-for="v in [10, 30, 50, 100, 500, 1000]"
-                          :key="v"
-                          clickable
-                          v-close-popup
-                          @click="
-                            async () => {
-                              pageSizeType = v;
-                              await fetchListType();
-                            }
-                          "
-                        >
-                          <q-item-section>
-                            <q-item-label>{{ v }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-btn-dropdown>
+              <div
+                v-if="productMode === 'type'"
+                class="row justify-between items-center q-px-md q-py-sm"
+              >
+                <div class="col-4">
+                  <div class="row items-center">
+                    <div class="app-text-muted" style="width: 80px">
+                      {{ $t('showing') }}
+                    </div>
+                    <div>
+                      <q-btn-dropdown
+                        dense
+                        unelevated
+                        :label="pageSizeType"
+                        class="bordered q-pl-md"
+                      >
+                        <q-list>
+                          <q-item
+                            v-for="v in [10, 30, 50, 100, 500, 1000]"
+                            :key="v"
+                            clickable
+                            v-close-popup
+                            @click="
+                              async () => {
+                                pageSizeType = v;
+                                await fetchListType();
+                              }
+                            "
+                          >
+                            <q-item-section>
+                              <q-item-label>{{ v }}</q-item-label>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-btn-dropdown>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div class="col-4 row justify-center app-text-muted">
-                {{
-                  $t('recordsPage', {
-                    resultcurrentPage: productType?.length,
-                    total: totalType,
-                  })
-                }}
+                <div class="col-4 row justify-center app-text-muted">
+                  {{
+                    $t('recordsPage', {
+                      resultcurrentPage: productType?.length,
+                      total: totalType,
+                    })
+                  }}
+                </div>
+                <div class="col-4 row justify-end">
+                  <PaginationComponent
+                    v-model:current-page="currentPageType"
+                    v-model:max-page="maxPageType"
+                    :fetch-data="
+                      async () => {
+                        await fetchListType();
+                        flowStore.rotate();
+                      }
+                    "
+                  />
+                </div>
               </div>
-              <div class="col-4 row justify-end">
-                <PaginationComponent
-                  v-model:current-page="currentPageType"
-                  v-model:max-page="maxPageType"
-                  :fetch-data="
-                    async () => {
-                      await fetchListType();
-                      flowStore.rotate();
-                    }
+            </template>
+          </div>
+
+          <!-- product/service -->
+          <div
+            v-else-if="productMode === 'service'"
+            class="surface-2 col bordered rounded column no-wrap"
+            style="overflow: hidden"
+          >
+            <div
+              class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
+              style="z-index: 1"
+            >
+              <div>
+                <q-input
+                  style="width: 300px"
+                  outlined
+                  dense
+                  unelavated
+                  :label="$t('search')"
+                  class="q-mr-md"
+                  :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                  v-model="inputSearchProductAndService"
+                  debounce="250"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="mdi-magnify" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="row" style="gap: var(--size-2)">
+                <q-btn
+                  icon="mdi-tune-vertical-variant"
+                  size="sm"
+                  :color="$q.dark.isActive ? 'dark' : 'white'"
+                  :text-color="$q.dark.isActive ? 'white' : 'dark'"
+                  class="bordered rounded q-py-sm"
+                  unelevated
+                >
+                  <q-menu class="bordered">
+                    <q-list v-close-popup dense>
+                      <q-item
+                        clickable
+                        class="flex items-center"
+                        @click="
+                          async () => {
+                            currentStatus = 'All';
+                            await fetchStatus();
+                          }
+                        "
+                      >
+                        {{ $t('all') }}
+                      </q-item>
+                      <q-item
+                        clickable
+                        class="flex items-center"
+                        @click="
+                          async () => {
+                            currentStatus = 'ACTIVE';
+                            await fetchStatus();
+                          }
+                        "
+                      >
+                        {{ $t('statusACTIVE') }}
+                      </q-item>
+                      <q-item
+                        clickable
+                        class="flex items-center"
+                        @click="
+                          async () => {
+                            currentStatus = 'INACTIVE';
+                            await fetchStatus();
+                          }
+                        "
+                      >
+                        {{ $t('statusINACTIVE') }}
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+
+                <q-select
+                  v-if="modeView === false"
+                  id="select-field"
+                  for="select-field"
+                  :options="
+                    {
+                      product: tbControl.product.fieldDisplay,
+                      service: tbControl.service.fieldDisplay,
+                    }[productAndServiceTab].map((x) => ({
+                      label: $t(x),
+                      value: x,
+                    }))
                   "
+                  :display-value="$t('displayField')"
+                  :model-value="
+                    {
+                      product: tbControl.product.fieldSelected,
+                      service: tbControl.service.fieldSelected,
+                    }[productAndServiceTab]
+                  "
+                  @update:model-value="
+                    (v) => (tbControl[productAndServiceTab].fieldSelected = v)
+                  "
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
                 />
+
+                <q-btn-toggle
+                  v-model="modeView"
+                  id="btn-mode"
+                  dense
+                  class="no-shadow bordered rounded surface-1"
+                  :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
+                          ? modeView
+                            ? '#C9D3DB '
+                            : '#787B7C'
+                          : modeView
+                            ? '#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>
               </div>
             </div>
-          </template>
-        </div>
 
-        <!-- product/service -->
-        <div
-          v-else-if="productMode === 'service'"
-          class="surface-2 col bordered rounded column no-wrap"
-          style="overflow: hidden"
-        >
-          <div
-            class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
-            style="z-index: 1"
-          >
-            <div>
-              <q-input
-                style="width: 300px"
-                outlined
-                dense
-                unelavated
-                :label="$t('search')"
-                class="q-mr-md"
-                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-                v-model="inputSearchProductAndService"
-                debounce="250"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="mdi-magnify" />
-                </template>
-              </q-input>
-            </div>
-            <div class="row" style="gap: var(--size-2)">
-              <q-btn
-                icon="mdi-tune-vertical-variant"
-                size="sm"
-                :color="$q.dark.isActive ? 'dark' : 'white'"
-                :text-color="$q.dark.isActive ? 'white' : 'dark'"
-                class="bordered rounded q-py-sm"
-                unelevated
-              >
-                <q-menu class="bordered">
-                  <q-list v-close-popup dense>
-                    <q-item
-                      clickable
-                      class="flex items-center"
-                      @click="
-                        async () => {
-                          currentStatus = 'All';
-                          await fetchStatus();
-                        }
-                      "
-                    >
-                      {{ $t('all') }}
-                    </q-item>
-                    <q-item
-                      clickable
-                      class="flex items-center"
-                      @click="
-                        async () => {
-                          currentStatus = 'ACTIVE';
-                          await fetchStatus();
-                        }
-                      "
-                    >
-                      {{ $t('statusACTIVE') }}
-                    </q-item>
-                    <q-item
-                      clickable
-                      class="flex items-center"
-                      @click="
-                        async () => {
-                          currentStatus = 'INACTIVE';
-                          await fetchStatus();
-                        }
-                      "
-                    >
-                      {{ $t('statusINACTIVE') }}
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-
-              <q-select
-                v-if="modeView === false"
-                id="select-field"
-                for="select-field"
-                :options="
-                  {
-                    product: tbControl.product.fieldDisplay,
-                    service: tbControl.service.fieldDisplay,
-                  }[productAndServiceTab].map((x) => ({
-                    label: $t(x),
-                    value: x,
-                  }))
-                "
-                :display-value="$t('displayField')"
-                :model-value="
-                  {
-                    product: tbControl.product.fieldSelected,
-                    service: tbControl.service.fieldSelected,
-                  }[productAndServiceTab]
-                "
-                @update:model-value="
-                  (v) => (tbControl[productAndServiceTab].fieldSelected = v)
-                "
-                option-label="label"
-                option-value="value"
-                map-options
-                emit-value
-                outlined
-                multiple
-                dense
-              />
-
-              <q-btn-toggle
-                v-model="modeView"
-                id="btn-mode"
-                dense
-                class="no-shadow bordered rounded surface-1"
-                :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
-                        ? modeView
-                          ? '#C9D3DB '
-                          : '#787B7C'
-                        : modeView
-                          ? '#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>
-            </div>
-          </div>
-
-          <q-tabs
-            dense
-            v-model="productAndServiceTab"
-            class="bordered-b q-px-md"
-            align="left"
-          >
-            <q-tab
-              name="service"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfService();
-                  flowStore.rotate();
-                }
-              "
+            <q-tabs
+              dense
+              v-model="productAndServiceTab"
+              class="bordered-b q-px-md"
+              align="left"
             >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'service'
-                    ? 'text-bold'
-                    : 'app-text-muted'
+              <q-tab
+                name="service"
+                @click="
+                  async () => {
+                    currentPageServiceAndProduct = 1;
+                    inputSearchProductAndService = '';
+                    currentStatus = 'All';
+                    // await fetchListOfService();
+                    flowStore.rotate();
+                  }
                 "
               >
-                {{ $t('service') }}
-              </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'
+                <div
+                  class="row"
+                  :class="
+                    productAndServiceTab === 'service'
+                      ? 'text-bold'
+                      : 'app-text-muted'
+                  "
+                >
+                  {{ $t('service') }}
+                </div>
+              </q-tab>
+              <q-tab
+                name="product"
+                @click="
+                  async () => {
+                    currentPageServiceAndProduct = 1;
+                    inputSearchProductAndService = '';
+                    currentStatus = 'All';
+                    // await fetchListOfProduct();
+                    flowStore.rotate();
+                  }
                 "
               >
-                {{ $t('product') }}
-              </div>
-            </q-tab>
-          </q-tabs>
+                <div
+                  class="row"
+                  :class="
+                    productAndServiceTab === 'product'
+                      ? 'text-bold'
+                      : 'app-text-muted'
+                  "
+                >
+                  {{ $t('product') }}
+                </div>
+              </q-tab>
+            </q-tabs>
 
-          <div
-            v-if="
-              (productAndServiceTab === 'product' && product?.length === 0) ||
-              (productAndServiceTab === 'service' && service?.length === 0)
-            "
-            class="flex justify-center items-center surface-1 col"
-          >
-            <NoData :not-found="!!inputSearchProductAndService" />
-          </div>
-          <!-- tab -->
-          <template v-else>
-            <div class="col flex scroll full-height q-pa-md surface-1">
-              <div class="full-width">
+            <div
+              v-if="
+                (productAndServiceTab === 'product' && product?.length === 0) ||
+                (productAndServiceTab === 'service' && service?.length === 0)
+              "
+              class="flex justify-center items-center surface-1"
+              :style="`height: ${hideStat ? '60vh' : '49vh'}`"
+            >
+              {{ hideStat }}
+              <NoData :not-found="!!inputSearchProductAndService" />
+            </div>
+            <!-- tab -->
+            <template v-else>
+              <div class="flex scroll full-width q-pa-md surface-1">
                 <q-table
                   class="full-width"
+                  :style="`height: ${hideStat ? '55vh' : '45vh'}`"
                   flat
                   bordered
                   :rows-per-page-options="[0]"
@@ -2824,7 +2826,7 @@ watch(inputSearchProductAndService, async () => {
                   </template>
 
                   <template v-slot:item="{ row }">
-                    <div class="col-12 col-md-4 col-lg-2">
+                    <div class="col-12 col-md-6 col-lg-4">
                       <TotalProductCardComponent
                         :data="row"
                         :key="row.id"
@@ -2879,75 +2881,75 @@ watch(inputSearchProductAndService, async () => {
                   </template>
                 </q-table>
               </div>
-            </div>
-          </template>
-          <!-- footer -->
-          <div
-            class="row items-center justify-between q-py-sm q-px-md surface-2"
-          >
-            <div class="col-4">
-              <div class="row items-center">
-                <div class="app-text-muted" style="width: 80px">
-                  {{ $t('showing') }}
-                </div>
-                <div>
-                  <q-btn-dropdown
-                    dense
-                    unelevated
-                    :label="pageSizeServiceAndProduct"
-                    class="bordered q-pl-md"
-                  >
-                    <q-list>
-                      <q-item
-                        v-for="v in [10, 30, 50, 100, 500, 1000]"
-                        :key="v"
-                        clickable
-                        v-close-popup
-                        @click="
-                          async () => {
-                            pageSizeServiceAndProduct = v;
-                            await fetchListOfProductAndService();
-                          }
-                        "
-                      >
-                        <q-item-section>
-                          <q-item-label>{{ v }}</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-btn-dropdown>
+            </template>
+            <!-- footer -->
+            <div
+              class="row items-center justify-between q-py-sm q-px-md surface-2"
+            >
+              <div class="col-4">
+                <div class="row items-center">
+                  <div class="app-text-muted" style="width: 80px">
+                    {{ $t('showing') }}
+                  </div>
+                  <div>
+                    <q-btn-dropdown
+                      dense
+                      unelevated
+                      :label="pageSizeServiceAndProduct"
+                      class="bordered q-pl-md"
+                    >
+                      <q-list>
+                        <q-item
+                          v-for="v in [10, 30, 50, 100, 500, 1000]"
+                          :key="v"
+                          clickable
+                          v-close-popup
+                          @click="
+                            async () => {
+                              pageSizeServiceAndProduct = v;
+                              await fetchListOfProductAndService();
+                            }
+                          "
+                        >
+                          <q-item-section>
+                            <q-item-label>{{ v }}</q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div class="col-4 row justify-center app-text-muted">
-              {{
-                $t('recordsPage', {
-                  resultcurrentPage:
-                    productAndServiceTab === 'product'
-                      ? product?.length
-                      : service?.length,
-                  total: total,
-                })
-              }}
-            </div>
-            <div class="col-4 row justify-end">
-              <PaginationComponent
-                v-model:current-page="currentPageServiceAndProduct"
-                v-model:max-page="maxPageServiceAndProduct"
-                :fetch-data="
-                  async () => {
-                    await alternativeFetch();
-                    flowStore.rotate();
-                  }
-                "
-              />
+              <div class="col-4 row justify-center app-text-muted">
+                {{
+                  $t('recordsPage', {
+                    resultcurrentPage:
+                      productAndServiceTab === 'product'
+                        ? product?.length
+                        : service?.length,
+                    total: total,
+                  })
+                }}
+              </div>
+              <div class="col-4 row justify-end">
+                <PaginationComponent
+                  v-model:current-page="currentPageServiceAndProduct"
+                  v-model:max-page="maxPageServiceAndProduct"
+                  :fetch-data="
+                    async () => {
+                      await alternativeFetch();
+                      flowStore.rotate();
+                    }
+                  "
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </template>
-  </q-splitter>
+      </template>
+    </q-splitter>
+  </div>
 
   <FormDialog
     v-model:modal="dialogInputForm"

From c2940b58343eeb846f79daac7d340e2e335fa2f8 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 15 Jul 2024 09:25:39 +0700
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20id?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 194523e1..1316d7d5 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1973,6 +1973,7 @@ watch([inputSearch, currentStatus], async () => {
 
                             <q-btn
                               icon="mdi-dots-vertical"
+                              :id="`btn-dots-${props.row.customerName}`"
                               size="sm"
                               dense
                               round