From c04a473f9e87e71f6629266faf3f28b31a56b958 Mon Sep 17 00:00:00 2001 From: Net Date: Wed, 11 Sep 2024 15:41:35 +0700 Subject: [PATCH 1/3] refactor: edit search --- src/pages/01_branch-management/MainPage.vue | 111 ++++++++++---------- src/stores/branch/index.ts | 2 +- 2 files changed, 59 insertions(+), 54 deletions(-) diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue index 50a1819c..57da5cd8 100644 --- a/src/pages/01_branch-management/MainPage.vue +++ b/src/pages/01_branch-management/MainPage.vue @@ -177,22 +177,28 @@ const { locale } = useI18n(); const { data: branchData } = storeToRefs(branchStore); +const currentSubBranch = ref(undefined); const treeData = computed(() => { const map: Record = {}; - 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,22 @@ 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, () => { + fetchList({ tree: true, query: inputSearch.value }); + currentSubBranch.value = undefined; +}); + async function triggerChangeStatus( id: string, status: string, @@ -659,7 +694,7 @@ async function onSubmit() { }, ); - await branchStore.fetchList({ pageSize: 99999 }); + await fetchList({ pageSize: 99999 }); if (!imageDialog.value) modalDrawer.value = false; modal.value = false; } @@ -675,7 +710,7 @@ async function onSubmit() { formBankBook.value, ); - await branchStore.fetchList({ pageSize: 99999 }); + await fetchList({ pageSize: 99999 }); modal.value = false; }; @@ -818,6 +853,8 @@ watch(currentHq, () => { }); } + selectedSubBranche(currentHq.value.id); + utilsStore.currentTitle.path = tmp; }); @@ -1130,43 +1167,7 @@ watch(currentHq, () => { bordered 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; - - return false; - }) - " + :rows="currentSubBranch || treeData" :columns="columns" :grid="modeView" card-container-class="row q-col-gutter-md" @@ -1197,7 +1198,7 @@ watch(currentHq, () => { - {{ props.row.contact[0]?.telephoneNo || '-' }} + {{ + props.row.contact !== undefined + ? props.row.contact[0]?.telephoneNo + : '-' + }} @@ -1806,7 +1811,7 @@ watch(currentHq, () => { formType = 'view'; } - await branchStore.fetchList({ pageSize: 99999 }); + await fetchList({ pageSize: 99999 }); } " :readonly="formType === 'view'" diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts index 0e3753d7..e39d87a1 100644 --- a/src/stores/branch/index.ts +++ b/src/stores/branch/index.ts @@ -12,7 +12,7 @@ type BranchId = string; const useBranchStore = defineStore('api-branch', () => { const flowStore = useFlowStore(); - const data = ref>({ + const data = ref>({ result: [], page: 0, pageSize: 0, From b8a9acbaeb6683105f3fa80a0195a2e486a612c6 Mon Sep 17 00:00:00 2001 From: Methapon Metanipat Date: Wed, 11 Sep 2024 16:08:32 +0700 Subject: [PATCH 2/3] refactor: move flow into interceptor --- src/boot/axios.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/boot/axios.ts b/src/boot/axios.ts index 87b93766..7f8767e3 100644 --- a/src/boot/axios.ts +++ b/src/boot/axios.ts @@ -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; }); From 8d6ec05c669125f35c4c65ace321f552e4876355 Mon Sep 17 00:00:00 2001 From: Net Date: Wed, 11 Sep 2024 16:15:40 +0700 Subject: [PATCH 3/3] refactor: header inputSearch --- src/pages/01_branch-management/MainPage.vue | 24 ++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue index 57da5cd8..19838466 100644 --- a/src/pages/01_branch-management/MainPage.vue +++ b/src/pages/01_branch-management/MainPage.vue @@ -643,6 +643,7 @@ async function fetchList(opts: { } watch(inputSearch, () => { + console.log(inputSearch.value); fetchList({ tree: true, query: inputSearch.value }); currentSubBranch.value = undefined; }); @@ -1167,7 +1168,28 @@ watch(currentHq, () => { bordered class="full-width" :rows-per-page-options="[0]" - :rows="currentSubBranch || treeData" + :rows=" + ( + 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" card-container-class="row q-col-gutter-md"