fix: grid mode when screen xs

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>