feat: add date range filtering to product and service lists
This commit is contained in:
puriphatt
parent
efeb1b51eb
commit
461dd359b1
2 changed files with 108 additions and 43 deletions
|
|
@ -3,7 +3,7 @@ import { nextTick, ref, watch, reactive } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { QSelect, useQuasar, type QTableProps } from 'quasar';
|
||||
import { useQuasar, type QTableProps } from 'quasar';
|
||||
|
||||
import DialogProperties from 'src/components/dialog/DialogProperties.vue';
|
||||
import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
|
||||
|
|
@ -69,6 +69,7 @@ import {
|
|||
import { useWorkflowTemplate } from 'src/stores/workflow-template';
|
||||
import { deepEquals } from 'src/utils/arr';
|
||||
import { toRaw } from 'vue';
|
||||
import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
const navigatorStore = useNavigator();
|
||||
|
|
@ -167,8 +168,6 @@ const splitterModel = computed(() =>
|
|||
$q.screen.lt.md ? (productMode.value !== 'group' ? 0 : 100) : 25,
|
||||
);
|
||||
|
||||
const refFilterGroup = ref<InstanceType<typeof QSelect>>();
|
||||
const refFilterProductService = ref<InstanceType<typeof QSelect>>();
|
||||
const holdDialog = ref(false);
|
||||
const imageDialog = ref(false);
|
||||
const currentNode = ref<ProductGroup & { type: string }>();
|
||||
|
|
@ -526,6 +525,7 @@ const currentStatusGroupType = ref<Status>('CREATED');
|
|||
const currentIdGroupType = ref('');
|
||||
|
||||
const currentStatus = ref<Status | 'All'>('All');
|
||||
const searchDate = ref<string[]>([]);
|
||||
|
||||
// img
|
||||
const isImageEdit = ref<boolean>(false);
|
||||
|
|
@ -621,6 +621,8 @@ async function fetchListGroups(mobileFetch?: boolean) {
|
|||
: currentStatus.value === 'ACTIVE'
|
||||
? 'ACTIVE'
|
||||
: 'INACTIVE',
|
||||
startDate: searchDate.value[0],
|
||||
endDate: searchDate.value[1],
|
||||
});
|
||||
|
||||
if (res) {
|
||||
|
|
@ -681,6 +683,8 @@ async function fetchListOfProduct(mobileFetch?: boolean) {
|
|||
? 'ACTIVE'
|
||||
: undefined,
|
||||
productGroupId: currentIdGroup.value,
|
||||
startDate: searchDate.value[0],
|
||||
endDate: searchDate.value[1],
|
||||
});
|
||||
|
||||
if (res) {
|
||||
|
|
@ -726,6 +730,8 @@ async function fetchListOfService(mobileFetch?: boolean) {
|
|||
? 'ACTIVE'
|
||||
: undefined,
|
||||
productGroupId: currentIdGroup.value,
|
||||
startDate: searchDate.value[0],
|
||||
endDate: searchDate.value[1],
|
||||
});
|
||||
|
||||
if (res) {
|
||||
|
|
@ -1596,6 +1602,7 @@ async function enterNext(type: 'service' | 'product') {
|
|||
inputSearchProductAndService.value = '';
|
||||
currentStatus.value = 'All';
|
||||
filterStat.value = [];
|
||||
searchDate.value = [];
|
||||
|
||||
if (
|
||||
expandedTree.value.length > 1 &&
|
||||
|
|
@ -1751,7 +1758,7 @@ watch(currentStatus, async () => {
|
|||
flowStore.rotate();
|
||||
});
|
||||
|
||||
watch(inputSearch, async () => {
|
||||
watch([inputSearch, () => searchDate.value], async () => {
|
||||
if (productMode.value === 'group') {
|
||||
productGroup.value = [];
|
||||
currentPageGroup.value = 1;
|
||||
|
|
@ -1760,7 +1767,7 @@ watch(inputSearch, async () => {
|
|||
}
|
||||
});
|
||||
|
||||
watch(inputSearchProductAndService, async () => {
|
||||
watch([inputSearchProductAndService, () => searchDate.value], async () => {
|
||||
product.value = [];
|
||||
service.value = [];
|
||||
currentPageServiceAndProduct.value = 1;
|
||||
|
|
@ -2015,19 +2022,34 @@ watch(
|
|||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template v-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilterGroup?.showPopup"
|
||||
<template v-slot:append>
|
||||
<q-separator vertical inset class="q-mr-xs" />
|
||||
<AdvanceSearch
|
||||
v-model="searchDate"
|
||||
:active="$q.screen.lt.md && currentStatus !== 'All'"
|
||||
>
|
||||
<div class="q-mt-sm text-weight-medium">
|
||||
{{ $t('general.status') }}
|
||||
</div>
|
||||
<q-select
|
||||
v-model="currentStatus"
|
||||
for="select-status"
|
||||
outlined
|
||||
dense
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
map-options
|
||||
emit-value
|
||||
:options="[
|
||||
{ label: $t('general.all'), value: 'All' },
|
||||
{ label: $t('general.active'), value: 'ACTIVE' },
|
||||
{
|
||||
label: $t('general.inactive'),
|
||||
value: 'INACTIVE',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</span>
|
||||
</AdvanceSearch>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
|
@ -2182,26 +2204,44 @@ watch(
|
|||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template v-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilterGroup?.showPopup"
|
||||
<template v-slot:append>
|
||||
<q-separator vertical inset class="q-mr-xs" />
|
||||
<AdvanceSearch
|
||||
v-model="searchDate"
|
||||
:active="$q.screen.lt.md && currentStatus !== 'All'"
|
||||
>
|
||||
<div
|
||||
v-if="$q.screen.lt.md"
|
||||
class="q-mt-sm text-weight-medium"
|
||||
>
|
||||
{{ $t('general.status') }}
|
||||
</div>
|
||||
<q-select
|
||||
v-if="$q.screen.lt.md"
|
||||
v-model="currentStatus"
|
||||
for="select-status"
|
||||
outlined
|
||||
dense
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
map-options
|
||||
emit-value
|
||||
:options="[
|
||||
{ label: $t('general.all'), value: 'All' },
|
||||
{ label: $t('general.active'), value: 'ACTIVE' },
|
||||
{
|
||||
label: $t('general.inactive'),
|
||||
value: 'INACTIVE',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</span>
|
||||
</AdvanceSearch>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="row col-md-6" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilterGroup"
|
||||
v-model="currentStatus"
|
||||
for="select-status"
|
||||
outlined
|
||||
|
|
@ -2685,26 +2725,45 @@ watch(
|
|||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template v-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilterProductService?.showPopup"
|
||||
<template v-slot:append>
|
||||
<q-separator vertical inset class="q-mr-xs" />
|
||||
<AdvanceSearch
|
||||
v-model="searchDate"
|
||||
:active="$q.screen.lt.md && currentStatus !== 'All'"
|
||||
>
|
||||
<div
|
||||
v-if="$q.screen.lt.md"
|
||||
class="q-mt-sm text-weight-medium"
|
||||
>
|
||||
{{ $t('general.status') }}
|
||||
</div>
|
||||
<q-select
|
||||
v-if="$q.screen.lt.md"
|
||||
:for="'field-select-status'"
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
dense
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
map-options
|
||||
emit-value
|
||||
:options="[
|
||||
{ label: $t('general.all'), value: 'All' },
|
||||
{ label: $t('general.active'), value: 'ACTIVE' },
|
||||
{
|
||||
label: $t('general.inactive'),
|
||||
value: 'INACTIVE',
|
||||
},
|
||||
]"
|
||||
@update:model-value="fetchStatus()"
|
||||
/>
|
||||
</span>
|
||||
</AdvanceSearch>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="row col-md-6" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilterProductService"
|
||||
:for="'field-select-status'"
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
|
|
|
|||
|
|
@ -56,6 +56,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
|
|||
query?: string;
|
||||
status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
|
||||
activeOnly?: boolean;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
}) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
|
|
@ -142,6 +144,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
|
|||
orderField?: string;
|
||||
activeOnly?: boolean;
|
||||
orderBy?: 'asc' | 'desc';
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
}) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
|
|
@ -249,6 +253,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
|
|||
productGroupId?: string;
|
||||
status?: string;
|
||||
fullDetail?: boolean;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
}) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue