chamomind/jws-frontend
chamomind/jws-frontend
6
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

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

@ -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>