From 915cb8af80b053e040a4526c580a2919362b82aa Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 18 Jul 2024 09:10:51 +0000
Subject: [PATCH] fix: grid mode when screen xs

---
 src/pages/01_branch-management/MainPage.vue   | 24 +++++++----
 .../02_personnel-management/MainPage.vue      | 33 ++++++++++-----
 src/pages/03_customer-management/MainPage.vue | 36 ++++++++++++-----
 src/pages/04_product-service/MainPage.vue     | 40 ++++++++++++++-----
 4 files changed, 96 insertions(+), 37 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index c90d7ce3..b3d550b2 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import { BranchContact } from 'src/stores/branch-contact/types';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 import type { QTableProps } from 'quasar';
 
 import useBranchStore from 'stores/branch';
+import useFlowStore from 'src/stores/flow';
+import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
+import { Status } from 'src/stores/types';
 
 import useUtilsStore, { dialog } from 'src/stores/utils';
-import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
@@ -22,12 +26,7 @@ import FormImage from 'components/01_branch-management/FormImage.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 
-import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
-import { watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import useFlowStore from 'src/stores/flow';
-import { Status } from 'src/stores/types';
-
+const $q = useQuasar();
 const { t } = useI18n();
 const utilsStore = useUtilsStore();
 
@@ -170,6 +169,8 @@ onMounted(async () => {
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();
 
+  modeView.value = $q.screen.lt.md ? true : false;
+
   flowStore.rotate();
 });
 
@@ -497,6 +498,13 @@ watch(locale, () => {
     value: fieldSelectedBranch.value.value,
   };
 });
+
+watch(
+  () => $q.screen.lt.md,
+  (v) => {
+    if (v) modeView.value = true;
+  },
+);
 </script>
 
 <template>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index d14d09fd..15912ef4 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -2,7 +2,7 @@
 import { ref, onMounted, watch, computed } from 'vue';
 import useUtilsStore, { dialog } from 'src/stores/utils';
 import { calculateAge } from 'src/utils/datetime';
-import type { QTableProps } from 'quasar';
+import { useQuasar, type QTableProps } from 'quasar';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
@@ -34,6 +34,7 @@ import ProfileUpload from 'components/ProfileUpload.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 const { locale, t } = useI18n();
+const $q = useQuasar();
 
 const utilsStore = useUtilsStore();
 const flowStore = useFlowStore();
@@ -543,6 +544,7 @@ async function assignFormData(idEdit: string) {
 onMounted(async () => {
   utilsStore.currentTitle.title = 'personnelManagement';
   utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
+  modeView.value = $q.screen.lt.md ? true : false;
 
   await fetchUserList();
 
@@ -611,6 +613,13 @@ async function fetchUserList() {
 }
 
 watch(inputSearch, async () => await fetchUserList());
+
+watch(
+  () => $q.screen.lt.md,
+  (v) => {
+    if (v) modeView.value = true;
+  },
+);
 </script>
 
 <template>
@@ -756,7 +765,7 @@ watch(inputSearch, async () => await fetchUserList());
                 v-if="!modeView"
                 id="select-field"
                 for="select-field"
-                class="col q-mx-sm"
+                class="col q-ml-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
@@ -779,7 +788,7 @@ watch(inputSearch, async () => await fetchUserList());
                 id="btn-mode"
                 v-model="modeView"
                 dense
-                class="no-shadow bordered rounded surface-1"
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
                 :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                 size="xs"
                 :options="[
@@ -824,12 +833,14 @@ watch(inputSearch, async () => await fetchUserList());
           </div>
         </div>
 
-        <div class="surface-2 bordered-b q-px-md">
+        <div class="surface-2 bordered-b q-px-md full-width">
           <q-tabs
+            inline-label
+            mobile-arrows
             dense
             v-model="selectorLabel"
             align="left"
-            class="full-height"
+            class="full-width"
             active-color="info"
           >
             <q-tab
@@ -968,7 +979,7 @@ watch(inputSearch, async () => await fetchUserList());
             "
             :columns="columns"
             class="full-width"
-            card-container-class="q-gutter-md  "
+            card-container-class="q-col-gutter-md"
             row-key="name"
             :rows-per-page-options="[0]"
             hide-pagination
@@ -1213,7 +1224,7 @@ watch(inputSearch, async () => await fetchUserList());
             </template>
 
             <template v-slot:item="props">
-              <div class="col-3">
+              <div class="col-md-3 col-12">
                 <PersonCard
                   :data="{
                     code: props.row.code,
@@ -1357,8 +1368,12 @@ watch(inputSearch, async () => await fetchUserList());
         v-if="currentMaxPage > 0"
       >
         <div class="col-4">
-          <div class="row items-center">
-            <div class="app-text-muted" style="width: 80px">
+          <div class="row items-center no-wrap">
+            <div
+              class="app-text-muted"
+              style="width: 80px"
+              v-if="$q.screen.gt.sm"
+            >
               {{ $t('showing') }}
             </div>
             <div>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4338cbf7..3f22f9aa 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRaw } from 'vue';
-import type { QTableProps } from 'quasar';
+import { useQuasar, type QTableProps } from 'quasar';
 import { storeToRefs } from 'pinia';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { Status } from 'src/stores/types';
@@ -9,12 +9,10 @@ import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 import useOptionStore from 'src/stores/options';
 import useMyBranchStore from 'src/stores/my-branch';
-import useUserStore from 'src/stores/user';
 
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
-import SelectorList from 'components/SelectorList.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import AddButton from 'components/AddButton.vue';
@@ -64,11 +62,11 @@ import { calculateAge } from 'src/utils/datetime';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 
+const $q = useQuasar();
 const { t, locale } = useI18n();
 const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
 const userBranchStore = useMyBranchStore();
-const userStore = useUserStore();
 
 const { currentMyBranch } = storeToRefs(userBranchStore);
 
@@ -1396,6 +1394,7 @@ async function fetchListStatsEmployeeGender() {
 onMounted(async () => {
   utilsStore.currentTitle.title = 'customerManagement';
   utilsStore.currentTitle.path = [{ text: 'customerManagementCaption' }];
+  modeView.value = $q.screen.lt.md ? true : false;
 
   const resultStats = await getStatsCustomer();
 
@@ -1534,6 +1533,13 @@ watch([inputSearch, currentStatus], async () => {
   }
   flowStore.rotate();
 });
+
+watch(
+  () => $q.screen.lt.md,
+  (v) => {
+    if (v) modeView.value = true;
+  },
+);
 </script>
 
 <template>
@@ -1699,7 +1705,7 @@ watch([inputSearch, currentStatus], async () => {
                 id="select-field"
                 v-if="modeView === false"
                 for="select-field"
-                class="q-mx-sm col"
+                class="q-ml-sm col"
                 :options="
                   currentTab === 'employer'
                     ? fieldDisplayEmployer
@@ -1721,7 +1727,7 @@ watch([inputSearch, currentStatus], async () => {
                 id="btn-mode"
                 v-model="modeView"
                 dense
-                class="no-shadow bordered rounded surface-1"
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
                 :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                 size="xs"
                 :options="[
@@ -1897,7 +1903,7 @@ watch([inputSearch, currentStatus], async () => {
                     :grid="modeView"
                     :rows="listCustomer"
                     :columns="columnsCustomer"
-                    card-container-class=" q-col-gutter-md"
+                    card-container-class="q-col-gutter-md"
                     row-key="name"
                     :rows-per-page-options="[0]"
                     hide-pagination
@@ -2161,7 +2167,7 @@ watch([inputSearch, currentStatus], async () => {
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-3">
+                      <div class="col-12 col-md-3">
                         <PersonCard
                           :field-selected="fieldSelected"
                           history
@@ -2247,7 +2253,11 @@ watch([inputSearch, currentStatus], async () => {
                   class="row justify-between items-center q-px-md q-py-sm"
                 >
                   <div class="row col-4 items-center">
-                    <div class="app-text-muted" style="width: 80px">
+                    <div
+                      class="app-text-muted"
+                      style="width: 80px"
+                      v-if="$q.screen.gt.sm"
+                    >
                       {{ $t('showing') }}
                     </div>
                     <div>
@@ -2625,7 +2635,7 @@ watch([inputSearch, currentStatus], async () => {
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-3">
+                      <div class="col-12 col-md-3">
                         <PersonCard
                           :field-selected="fieldSelected"
                           history
@@ -2685,7 +2695,11 @@ watch([inputSearch, currentStatus], async () => {
                   class="row justify-between items-center q-px-md q-py-sm"
                 >
                   <div class="row col-4 items-center">
-                    <div class="app-text-muted" style="width: 80px">
+                    <div
+                      class="app-text-muted"
+                      style="width: 80px"
+                      v-if="$q.screen.gt.sm"
+                    >
                       {{ $t('showing') }}
                     </div>
                     <div>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index daae6a8b..c6a1af56 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { storeToRefs } from 'pinia';
-import type { QTableProps } from 'quasar';
+import { useQuasar, type QTableProps } from 'quasar';
 import ItemCard from 'components/ItemCard.vue';
 import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
@@ -364,6 +364,7 @@ const tbControl = reactive({
     ],
   },
 });
+const $q = useQuasar();
 
 const workItems = ref<WorkItems[]>([]);
 const workNameRef = ref();
@@ -1207,6 +1208,7 @@ onMounted(async () => {
       },
     },
   ];
+  modeView.value = $q.screen.lt.md ? true : false;
 
   calculateStats();
   await fetchListGroups();
@@ -1271,6 +1273,13 @@ watch(inputSearch, async () => {
 watch(inputSearchProductAndService, async () => {
   await alternativeFetch();
 });
+
+watch(
+  () => $q.screen.lt.md,
+  (v) => {
+    if (v) modeView.value = true;
+  },
+);
 </script>
 
 <template>
@@ -1710,7 +1719,7 @@ watch(inputSearchProductAndService, async () => {
                     :hide-dropdown-icon="$q.screen.lt.sm"
                     :display-value="$t('displayField')"
                     v-model="tbControl.groupAndType.fieldSelected"
-                    class="col q-mx-sm"
+                    class="col q-ml-sm"
                     option-label="label"
                     option-value="value"
                     map-options
@@ -1724,7 +1733,7 @@ watch(inputSearchProductAndService, async () => {
                     v-model="modeView"
                     id="btn-mode"
                     dense
-                    class="no-shadow bordered rounded surface-1"
+                    class="no-shadow bordered rounded surface-1 q-ml-sm"
                     :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                     size="xs"
                     :options="[
@@ -2114,7 +2123,7 @@ watch(inputSearchProductAndService, async () => {
                     </template>
 
                     <template v-slot:item="props">
-                      <div class="col-3">
+                      <div class="col-md-6 col-12">
                         <ProductCardComponent
                           :isType="productMode === 'type'"
                           :count-product="props.row._count.product"
@@ -2228,7 +2237,11 @@ watch(inputSearchProductAndService, async () => {
                 >
                   <div class="col-4">
                     <div class="row items-center">
-                      <div class="app-text-muted" style="width: 80px">
+                      <div
+                        class="app-text-muted"
+                        style="width: 80px"
+                        v-if="$q.screen.gt.sm"
+                      >
                         {{ $t('showing') }}
                       </div>
                       <div>
@@ -2290,7 +2303,11 @@ watch(inputSearchProductAndService, async () => {
                 >
                   <div class="col-4">
                     <div class="row items-center">
-                      <div class="app-text-muted" style="width: 80px">
+                      <div
+                        class="app-text-muted"
+                        style="width: 80px"
+                        v-if="$q.screen.gt.sm"
+                      >
                         {{ $t('showing') }}
                       </div>
                       <div>
@@ -2428,9 +2445,10 @@ watch(inputSearchProductAndService, async () => {
 
                   <q-select
                     v-if="modeView === false"
+                    :hide-dropdown-icon="$q.screen.lt.sm"
                     id="select-field"
                     for="select-field"
-                    class="col q-mx-sm"
+                    class="col q-ml-sm"
                     :options="
                       {
                         product: tbControl.product.fieldDisplay,
@@ -2463,7 +2481,7 @@ watch(inputSearchProductAndService, async () => {
                     v-model="modeView"
                     id="btn-mode"
                     dense
-                    class="no-shadow bordered rounded surface-1"
+                    class="no-shadow bordered rounded surface-1 q-ml-sm"
                     :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                     size="xs"
                     :options="[
@@ -3032,7 +3050,11 @@ watch(inputSearchProductAndService, async () => {
               >
                 <div class="col-4">
                   <div class="row items-center">
-                    <div class="app-text-muted" style="width: 80px">
+                    <div
+                      class="app-text-muted"
+                      style="width: 80px"
+                      v-if="$q.screen.gt.sm"
+                    >
                       {{ $t('showing') }}
                     </div>
                     <div>