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

feat: filter based on status

Browse source
This commit is contained in:
Methapon2001 2024-04-18 16:13:16 +07:00
parent 004bf00be9
commit b999802133
1 changed files with 73 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -76,6 +76,8 @@ onMounted(async () => {
}
});
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
const currentHq = ref<{ id: string; code: string }>({
id: '',
code: '',
@ -530,18 +532,64 @@ watch(locale, () => {
</div>
<div class="branch-wrapper q-pa-md">
<div class="q-mb-md flex" style="gap: var(--size-4)">
<div style="flex-grow: 1; display: flex; align-items: center">
<q-select
v-if="!currentHq.id"
outlined
v-model="fieldSelectedBranch"
:options="
fieldBranch.map((v) => ({ label: $t(v), value: v }))
"
:label="$t('select')"
dense
/>
<div
style="
flex-grow: 1;
display: flex;
align-items: stretch;
gap: var(--size-2);
"
>
<template v-if="!currentHq.id">
<q-select
v-model="fieldSelectedBranch"
style="min-width: 120px"
outlined
:options="
fieldBranch.map((v) => ({ label: $t(v), value: v }))
"
:label="$t('select')"
dense
/>
<q-btn
icon="mdi-tune-vertical-variant"
class="bordered rounded"
unelevated
>
<q-menu class="bordered">
<q-list v-close-popup dense>
<q-item
clickable
class="flex items-center"
:class="{ 'app-text-info': statusFilter === 'all' }"
@click="statusFilter = 'all'"
>
{{ $t('all') }}
</q-item>
<q-item
clickable
class="flex items-center"
:class="{
'app-text-info': statusFilter === 'statusACTIVE',
}"
@click="statusFilter = 'statusACTIVE'"
>
{{ $t('statusACTIVE') }}
</q-item>
<q-item
clickable
class="flex items-center"
:class="{
'app-text-info': statusFilter === 'statusINACTIVE',
}"
@click="statusFilter = 'statusINACTIVE'"
>
{{ $t('statusINACTIVE') }}
</q-item>
</q-list>
</q-menu>
</q-btn>
</template>
<div v-else class="text-weight-bold text">
{{ $t('branchInHQ') }}
{{ currentHq.code }}
@ -581,6 +629,18 @@ watch(locale, () => {
<BranchCard
v-for="item in branchData.result
.filter((v) => {
if (
statusFilter === 'statusACTIVE' &&
v.status === 'INACTIVE'
) {
return false;
}
if (
statusFilter === 'statusINACTIVE' &&
v.status !== 'INACTIVE'
) {
return false;
}
if (!!currentHq.id && currentHq.id === v.headOfficeId) {
return true;
}
@ -618,11 +678,7 @@ watch(locale, () => {
() => {
if (item.hq) {
fieldSelectedBranch.value = '';
currentHq = {
id: item.id,
code: item.branchLabelCode,
};
currentHq = { id: item.id, code: item.branchLabelCode };
beforeBranch = {
id: '',
code: '',