chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: grid mode when screen xs

Browse source
This commit is contained in:
puriphatt 2024-07-18 09:10:51 +00:00
parent bd2b327313
commit 915cb8af80
4 changed files with 96 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/pages/01_branch-management/MainPage.vue
View file

@ -1,14 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { ref, onMounted, computed } from 'vue'; import { ref, onMounted, computed, watch } from 'vue';
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import { BranchContact } from 'src/stores/branch-contact/types'; import { BranchContact } from 'src/stores/branch-contact/types';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import type { QTableProps } from 'quasar'; import type { QTableProps } from 'quasar';
import useBranchStore from 'stores/branch'; 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 useUtilsStore, { dialog } from 'src/stores/utils';
import AppBox from 'components/app/AppBox.vue';
import AddButton from 'components/AddButton.vue'; import AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue'; import TooltipComponent from 'components/TooltipComponent.vue';
import StatCard from 'components/StatCardComponent.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 DrawerInfo from 'components/DrawerInfo.vue';
import InfoForm from 'components/02_personnel-management/InfoForm.vue'; import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import { BranchWithChildren, BranchCreate } from 'stores/branch/types'; const $q = useQuasar();
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import useFlowStore from 'src/stores/flow';
import { Status } from 'src/stores/types';
const { t } = useI18n(); const { t } = useI18n();
const utilsStore = useUtilsStore(); const utilsStore = useUtilsStore();
@ -170,6 +169,8 @@ onMounted(async () => {
await branchStore.fetchList({ pageSize: 99999 }); await branchStore.fetchList({ pageSize: 99999 });
await calculateStats(); await calculateStats();
modeView.value = $q.screen.lt.md ? true : false;
flowStore.rotate(); flowStore.rotate();
}); });
@ -497,6 +498,13 @@ watch(locale, () => {
value: fieldSelectedBranch.value.value, value: fieldSelectedBranch.value.value,
}; };
}); });
watch(
() => $q.screen.lt.md,
(v) => {
if (v) modeView.value = true;
},
);
</script> </script>
<template> <template>

33
src/pages/02_personnel-management/MainPage.vue
View file

@ -2,7 +2,7 @@
import { ref, onMounted, watch, computed } from 'vue'; import { ref, onMounted, watch, computed } from 'vue';
import useUtilsStore, { dialog } from 'src/stores/utils'; import useUtilsStore, { dialog } from 'src/stores/utils';
import { calculateAge } from 'src/utils/datetime'; import { calculateAge } from 'src/utils/datetime';
import type { QTableProps } from 'quasar'; import { useQuasar, type QTableProps } from 'quasar';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
@ -34,6 +34,7 @@ import ProfileUpload from 'components/ProfileUpload.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue'; import PaginationComponent from 'src/components/PaginationComponent.vue';
const { locale, t } = useI18n(); const { locale, t } = useI18n();
const $q = useQuasar();
const utilsStore = useUtilsStore(); const utilsStore = useUtilsStore();
const flowStore = useFlowStore(); const flowStore = useFlowStore();
@ -543,6 +544,7 @@ async function assignFormData(idEdit: string) {
onMounted(async () => { onMounted(async () => {
utilsStore.currentTitle.title = 'personnelManagement'; utilsStore.currentTitle.title = 'personnelManagement';
utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }]; utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
modeView.value = $q.screen.lt.md ? true : false;
await fetchUserList(); await fetchUserList();
@ -611,6 +613,13 @@ async function fetchUserList() {
} }
watch(inputSearch, async () => await fetchUserList()); watch(inputSearch, async () => await fetchUserList());
watch(
() => $q.screen.lt.md,
(v) => {
if (v) modeView.value = true;
},
);
</script> </script>
<template> <template>
@ -756,7 +765,7 @@ watch(inputSearch, async () => await fetchUserList());
v-if="!modeView" v-if="!modeView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col q-mx-sm" class="col q-ml-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,
@ -779,7 +788,7 @@ watch(inputSearch, async () => await fetchUserList());
id="btn-mode" id="btn-mode"
v-model="modeView" v-model="modeView"
dense 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'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs" size="xs"
:options="[ :options="[
@ -824,12 +833,14 @@ watch(inputSearch, async () => await fetchUserList());
</div> </div>
</div> </div>
<div class="surface-2 bordered-b q-px-md"> <div class="surface-2 bordered-b q-px-md full-width">
<q-tabs <q-tabs
inline-label
mobile-arrows
dense dense
v-model="selectorLabel" v-model="selectorLabel"
align="left" align="left"
class="full-height" class="full-width"
active-color="info" active-color="info"
> >
<q-tab <q-tab
@ -968,7 +979,7 @@ watch(inputSearch, async () => await fetchUserList());
" "
:columns="columns" :columns="columns"
class="full-width" class="full-width"
card-container-class="q-gutter-md " card-container-class="q-col-gutter-md"
row-key="name" row-key="name"
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
hide-pagination hide-pagination
@ -1213,7 +1224,7 @@ watch(inputSearch, async () => await fetchUserList());
</template> </template>
<template v-slot:item="props"> <template v-slot:item="props">
<div class="col-3"> <div class="col-md-3 col-12">
<PersonCard <PersonCard
:data="{ :data="{
code: props.row.code, code: props.row.code,
@ -1357,8 +1368,12 @@ watch(inputSearch, async () => await fetchUserList());
v-if="currentMaxPage > 0" v-if="currentMaxPage > 0"
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <div class="row items-center no-wrap">
<div class="app-text-muted" style="width: 80px"> <div
class="app-text-muted"
style="width: 80px"
v-if="$q.screen.gt.sm"
>
{{ $t('showing') }} {{ $t('showing') }}
</div> </div>
<div> <div>

36
src/pages/03_customer-management/MainPage.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watch, toRaw } from 'vue'; import { computed, ref, watch, toRaw } from 'vue';
import type { QTableProps } from 'quasar'; import { useQuasar, type QTableProps } from 'quasar';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { getUserId, getRole } from 'src/services/keycloak'; import { getUserId, getRole } from 'src/services/keycloak';
import { Status } from 'src/stores/types'; import { Status } from 'src/stores/types';
@ -9,12 +9,10 @@ import useCustomerStore from 'src/stores/customer';
import useEmployeeStore from 'src/stores/employee'; import useEmployeeStore from 'src/stores/employee';
import useOptionStore from 'src/stores/options'; import useOptionStore from 'src/stores/options';
import useMyBranchStore from 'src/stores/my-branch'; import useMyBranchStore from 'src/stores/my-branch';
import useUserStore from 'src/stores/user';
import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue'; import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
import PersonCard from 'components/home/PersonCard.vue'; import PersonCard from 'components/home/PersonCard.vue';
import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue'; import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
import SelectorList from 'components/SelectorList.vue';
import StatCardComponent from 'components/StatCardComponent.vue'; import StatCardComponent from 'components/StatCardComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue'; import TooltipComponent from 'components/TooltipComponent.vue';
import AddButton from 'components/AddButton.vue'; import AddButton from 'components/AddButton.vue';
@ -64,11 +62,11 @@ import { calculateAge } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
const $q = useQuasar();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const utilsStore = useUtilsStore(); const utilsStore = useUtilsStore();
const userCustomer = useCustomerStore(); const userCustomer = useCustomerStore();
const userBranchStore = useMyBranchStore(); const userBranchStore = useMyBranchStore();
const userStore = useUserStore();
const { currentMyBranch } = storeToRefs(userBranchStore); const { currentMyBranch } = storeToRefs(userBranchStore);
@ -1396,6 +1394,7 @@ async function fetchListStatsEmployeeGender() {
onMounted(async () => { onMounted(async () => {
utilsStore.currentTitle.title = 'customerManagement'; utilsStore.currentTitle.title = 'customerManagement';
utilsStore.currentTitle.path = [{ text: 'customerManagementCaption' }]; utilsStore.currentTitle.path = [{ text: 'customerManagementCaption' }];
modeView.value = $q.screen.lt.md ? true : false;
const resultStats = await getStatsCustomer(); const resultStats = await getStatsCustomer();
@ -1534,6 +1533,13 @@ watch([inputSearch, currentStatus], async () => {
} }
flowStore.rotate(); flowStore.rotate();
}); });
watch(
() => $q.screen.lt.md,
(v) => {
if (v) modeView.value = true;
},
);
</script> </script>
<template> <template>
@ -1699,7 +1705,7 @@ watch([inputSearch, currentStatus], async () => {
id="select-field" id="select-field"
v-if="modeView === false" v-if="modeView === false"
for="select-field" for="select-field"
class="q-mx-sm col" class="q-ml-sm col"
:options=" :options="
currentTab === 'employer' currentTab === 'employer'
? fieldDisplayEmployer ? fieldDisplayEmployer
@ -1721,7 +1727,7 @@ watch([inputSearch, currentStatus], async () => {
id="btn-mode" id="btn-mode"
v-model="modeView" v-model="modeView"
dense 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'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs" size="xs"
:options="[ :options="[
@ -1897,7 +1903,7 @@ watch([inputSearch, currentStatus], async () => {
:grid="modeView" :grid="modeView"
:rows="listCustomer" :rows="listCustomer"
:columns="columnsCustomer" :columns="columnsCustomer"
card-container-class=" q-col-gutter-md" card-container-class="q-col-gutter-md"
row-key="name" row-key="name"
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
hide-pagination hide-pagination
@ -2161,7 +2167,7 @@ watch([inputSearch, currentStatus], async () => {
</template> </template>
<template v-slot:item="props"> <template v-slot:item="props">
<div class="col-3"> <div class="col-12 col-md-3">
<PersonCard <PersonCard
:field-selected="fieldSelected" :field-selected="fieldSelected"
history history
@ -2247,7 +2253,11 @@ watch([inputSearch, currentStatus], async () => {
class="row justify-between items-center q-px-md q-py-sm" class="row justify-between items-center q-px-md q-py-sm"
> >
<div class="row col-4 items-center"> <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') }} {{ $t('showing') }}
</div> </div>
<div> <div>
@ -2625,7 +2635,7 @@ watch([inputSearch, currentStatus], async () => {
</template> </template>
<template v-slot:item="props"> <template v-slot:item="props">
<div class="col-3"> <div class="col-12 col-md-3">
<PersonCard <PersonCard
:field-selected="fieldSelected" :field-selected="fieldSelected"
history history
@ -2685,7 +2695,11 @@ watch([inputSearch, currentStatus], async () => {
class="row justify-between items-center q-px-md q-py-sm" class="row justify-between items-center q-px-md q-py-sm"
> >
<div class="row col-4 items-center"> <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') }} {{ $t('showing') }}
</div> </div>
<div> <div>

40
src/pages/04_product-service/MainPage.vue
View file

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { getUserId, getRole } from 'src/services/keycloak'; import { getUserId, getRole } from 'src/services/keycloak';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import type { QTableProps } from 'quasar'; import { useQuasar, type QTableProps } from 'quasar';
import ItemCard from 'components/ItemCard.vue'; import ItemCard from 'components/ItemCard.vue';
import AppBox from 'components/app/AppBox.vue'; import AppBox from 'components/app/AppBox.vue';
import AddButton from 'components/AddButton.vue'; import AddButton from 'components/AddButton.vue';
@ -364,6 +364,7 @@ const tbControl = reactive({
], ],
}, },
}); });
const $q = useQuasar();
const workItems = ref<WorkItems[]>([]); const workItems = ref<WorkItems[]>([]);
const workNameRef = ref(); const workNameRef = ref();
@ -1207,6 +1208,7 @@ onMounted(async () => {
}, },
}, },
]; ];
modeView.value = $q.screen.lt.md ? true : false;
calculateStats(); calculateStats();
await fetchListGroups(); await fetchListGroups();
@ -1271,6 +1273,13 @@ watch(inputSearch, async () => {
watch(inputSearchProductAndService, async () => { watch(inputSearchProductAndService, async () => {
await alternativeFetch(); await alternativeFetch();
}); });
watch(
() => $q.screen.lt.md,
(v) => {
if (v) modeView.value = true;
},
);
</script> </script>
<template> <template>
@ -1710,7 +1719,7 @@ watch(inputSearchProductAndService, async () => {
:hide-dropdown-icon="$q.screen.lt.sm" :hide-dropdown-icon="$q.screen.lt.sm"
:display-value="$t('displayField')" :display-value="$t('displayField')"
v-model="tbControl.groupAndType.fieldSelected" v-model="tbControl.groupAndType.fieldSelected"
class="col q-mx-sm" class="col q-ml-sm"
option-label="label" option-label="label"
option-value="value" option-value="value"
map-options map-options
@ -1724,7 +1733,7 @@ watch(inputSearchProductAndService, async () => {
v-model="modeView" v-model="modeView"
id="btn-mode" id="btn-mode"
dense 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'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs" size="xs"
:options="[ :options="[
@ -2114,7 +2123,7 @@ watch(inputSearchProductAndService, async () => {
</template> </template>
<template v-slot:item="props"> <template v-slot:item="props">
<div class="col-3"> <div class="col-md-6 col-12">
<ProductCardComponent <ProductCardComponent
:isType="productMode === 'type'" :isType="productMode === 'type'"
:count-product="props.row._count.product" :count-product="props.row._count.product"
@ -2228,7 +2237,11 @@ watch(inputSearchProductAndService, async () => {
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <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') }} {{ $t('showing') }}
</div> </div>
<div> <div>
@ -2290,7 +2303,11 @@ watch(inputSearchProductAndService, async () => {
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <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') }} {{ $t('showing') }}
</div> </div>
<div> <div>
@ -2428,9 +2445,10 @@ watch(inputSearchProductAndService, async () => {
<q-select <q-select
v-if="modeView === false" v-if="modeView === false"
:hide-dropdown-icon="$q.screen.lt.sm"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col q-mx-sm" class="col q-ml-sm"
:options=" :options="
{ {
product: tbControl.product.fieldDisplay, product: tbControl.product.fieldDisplay,
@ -2463,7 +2481,7 @@ watch(inputSearchProductAndService, async () => {
v-model="modeView" v-model="modeView"
id="btn-mode" id="btn-mode"
dense 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'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs" size="xs"
:options="[ :options="[
@ -3032,7 +3050,11 @@ watch(inputSearchProductAndService, async () => {
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <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') }} {{ $t('showing') }}
</div> </div>
<div> <div>