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

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

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