Merge branch 'refactor/branch-search' into develop

This commit is contained in:
Methapon Metanipat 2024-09-11 16:20:05 +07:00
commit ab0b3bb4f3
3 changed files with 80 additions and 51 deletions

View file

@ -3,6 +3,7 @@ import { boot } from 'quasar/wrappers';
import { getToken } from 'src/services/keycloak';
import { dialog } from 'stores/utils';
import useLoader from 'stores/loader';
import useFlowStore from 'src/stores/flow';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
@ -32,6 +33,7 @@ function parseError(
api.interceptors.request.use(async (config) => {
useLoader().show();
config.headers.Authorization = `Bearer ${await getToken()}`;
config.headers['X-Rtid'] = useFlowStore().rtid;
return config;
});

View file

@ -177,22 +177,28 @@ const { locale } = useI18n();
const { data: branchData } = storeToRefs(branchStore);
const currentSubBranch = ref<Branch[] | undefined>(undefined);
const treeData = computed(() => {
const map: Record<string, BranchWithChildren> = {};
const children: Branch[] = [];
branchData.value?.result.forEach((v) => {
const name = locale.value === 'eng' ? v.nameEN : v.name;
if (v.isHeadOffice) map[v.id] = { ...v, name, branch: [] };
else children.push({ ...v, name });
map[v.id] = { ...v, name, branch: v.branch || [] };
});
children.forEach((v) => {
const name = locale.value === 'eng' ? v.nameEN : v.name;
if (v.headOfficeId && map[v.headOfficeId]) {
map[v.headOfficeId].branch.push({ ...v, name });
}
});
// branchData.value?.result.forEach((v) => {
// const name = locale.value === 'eng' ? v.nameEN : v.name;
// if (v.isHeadOffice) map[v.id] = { ...v, name, branch: [] };
// else children.push({ ...v, name });
// });
// children.forEach((v) => {
// const name = locale.value === 'eng' ? v.nameEN : v.name;
// if (v.headOfficeId && map[v.headOfficeId]) {
// map[v.headOfficeId].branch.push({ ...v, name });
// }
// });
return Object.values(map);
});
@ -254,7 +260,7 @@ onMounted(async () => {
// object, we are effectively unselecting any HQ branch.
];
await branchStore.fetchList({ pageSize: 99999 });
await fetchList({ pageSize: 99999, tree: true });
await calculateStats();
modeView.value = $q.screen.lt.md ? true : false;
@ -361,6 +367,19 @@ function openDialog() {
modal.value = true;
}
async function selectedSubBranche(id: string) {
const res = await branchStore.fetchById(id, {
includeSubBranch: true,
includeContact: true,
});
if (res) {
currentSubBranch.value = res.branch;
} else {
currentSubBranch.value = undefined;
}
}
async function fetchBranchById(id: string) {
const res = await branchStore.fetchById(id, { includeContact: true });
if (res) {
@ -556,7 +575,7 @@ function triggerDelete(id: string) {
message: t('dialog.message.confirmDelete'),
action: async () => {
await branchStore.deleteById(id);
await branchStore.fetchList({ pageSize: 99999 });
await fetchList({ pageSize: 99999 });
modalDrawer.value = false;
await calculateStats();
@ -612,6 +631,23 @@ function triggerEditQrCodeBank(opts?: { save?: boolean }) {
}
}
async function fetchList(opts: {
page?: number;
pageSize?: number;
zipCode?: string;
query?: string;
tree?: boolean;
filter?: 'head' | 'sub';
}) {
await branchStore.fetchList(opts);
}
watch(inputSearch, () => {
console.log(inputSearch.value);
fetchList({ tree: true, query: inputSearch.value });
currentSubBranch.value = undefined;
});
async function triggerChangeStatus(
id: string,
status: string,
@ -659,7 +695,7 @@ async function onSubmit() {
},
);
await branchStore.fetchList({ pageSize: 99999 });
await fetchList({ pageSize: 99999 });
if (!imageDialog.value) modalDrawer.value = false;
modal.value = false;
}
@ -675,7 +711,7 @@ async function onSubmit() {
formBankBook.value,
);
await branchStore.fetchList({ pageSize: 99999 });
await fetchList({ pageSize: 99999 });
modal.value = false;
};
@ -818,6 +854,8 @@ watch(currentHq, () => {
});
}
selectedSubBranche(currentHq.value.id);
utilsStore.currentTitle.path = tmp;
});
</script>
@ -1131,41 +1169,26 @@ watch(currentHq, () => {
class="full-width"
:rows-per-page-options="[0]"
:rows="
treeData
.flatMap((v) => [v, ...v.branch])
.filter((v) => {
if (
statusFilter === 'statusACTIVE' &&
v.status === 'INACTIVE'
) {
return false;
}
if (
statusFilter === 'statusINACTIVE' &&
v.status !== 'INACTIVE'
) {
return false;
}
const terms = `${v.code} ${$i18n.locale === 'eng' ? v.nameEN : v.name} ${v.telephoneNo}`;
if (inputSearch && !terms.includes(inputSearch)) {
return false;
}
if (
!!currentHq.id &&
currentHq.id === v.headOfficeId
) {
return true;
}
if (fieldSelectedBranch.value === 'all') return true;
if (fieldSelectedBranch.value === 'branchHQLabel')
return v.isHeadOffice;
if (fieldSelectedBranch.value === 'branchLabel')
return !v.isHeadOffice;
(
currentSubBranch ||
(inputSearch !== ''
? treeData.flatMap((v) => [v, ...v.branch])
: treeData)
).filter((v) => {
if (
statusFilter === 'statusACTIVE' &&
v.status === 'INACTIVE'
) {
return false;
})
}
if (
statusFilter === 'statusINACTIVE' &&
v.status !== 'INACTIVE'
) {
return false;
}
return true;
})
"
:columns="columns"
:grid="modeView"
@ -1197,7 +1220,7 @@ watch(currentHq, () => {
<q-tr
:class="{
'app-text-muted': props.row.status === 'INACTIVE',
'cursor-pointer': props.row._count.branch !== 0,
'cursor-pointer': props.row._count?.branch !== 0,
}"
:style="
props.rowIndex % 2 !== 0
@ -1317,7 +1340,11 @@ watch(currentHq, () => {
</q-td>
<q-td v-if="fieldSelected.includes('branchLabelTel')">
{{ props.row.contact[0]?.telephoneNo || '-' }}
{{
props.row.contact !== undefined
? props.row.contact[0]?.telephoneNo
: '-'
}}
</q-td>
<q-td v-if="fieldSelected.includes('contactName')">
@ -1806,7 +1833,7 @@ watch(currentHq, () => {
formType = 'view';
}
await branchStore.fetchList({ pageSize: 99999 });
await fetchList({ pageSize: 99999 });
}
"
:readonly="formType === 'view'"

View file

@ -12,7 +12,7 @@ type BranchId = string;
const useBranchStore = defineStore('api-branch', () => {
const flowStore = useFlowStore();
const data = ref<Pagination<Branch[]>>({
const data = ref<Pagination<(Branch & { branch?: Branch[] })[]>>({
result: [],
page: 0,
pageSize: 0,