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

chore: cleanup

Browse source
This commit is contained in:
Methapon2001 2024-08-02 16:38:49 +07:00
parent f5db816496
commit 38384fa0f2
1 changed files with 78 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

307
src/pages/03_customer-management/MainPage.vue
View file

@ -43,28 +43,57 @@ const userBranchStore = useMyBranchStore();
const employeeStore = useEmployeeStore(); const employeeStore = useEmployeeStore();
async function init() { async function init() {
if (route.name === 'CustomerManagement') { utilsStore.currentTitle.title = 'customerManagement';
await fetchListCustomer(true); utilsStore.currentTitle.path = [
} {
text: 'customerManagementCaption',
handler: () => router.push('/customer-management'),
},
];
gridView.value = $q.screen.lt.md ? true : false;
if (route.name === 'CustomerManagement') await fetchListCustomer(true);
if ( if (
route.name === 'CustomerBranchManagement' && route.name === 'CustomerBranchManagement' &&
typeof route.params.customerId === 'string' typeof route.params.customerId === 'string'
) { ) {
const _data = await customerStore.fetchById(route.params.customerId); const _data = await customerStore.fetchById(route.params.customerId);
if (_data) currentCustomer.value = _data;
else router.push('/customer-management'); if (_data) {
currentCustomer.value = _data;
utilsStore.currentTitle.path.push({
text: currentCustomer.value.customerName,
});
} else {
router.push('/customer-management');
}
} }
flowStore.rotate(); flowStore.rotate();
} }
watch(() => route.name, init);
onMounted(init); onMounted(init);
const { getStatsCustomer, fetchList, editById } = customerStore; const currentTab = ref<'employer' | 'employee'>('employer');
const currentTab = ref('employer'); const inputSearch = ref('');
const currentStatus = ref<Status | 'All'>('All');
watch(() => route.name, init);
watch([currentTab, currentStatus, inputSearch], async ([name]) => {
if (name === 'employer') {
currentPageCustomer.value = 1;
await fetchListCustomer(true);
}
if (name === 'employee') {
currentPageEmployee.value = 1;
await fetchListEmployee(true);
}
flowStore.rotate();
});
const { fetchList } = customerStore;
const inputSearch = ref<string>();
const fieldSelectedCustomer = ref<{ label: string; value: string }>({ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
label: t('all'), label: t('all'),
value: 'all', value: 'all',
@ -135,24 +164,17 @@ const fieldSelected = ref<
const splitPercent = ref(15); const splitPercent = ref(15);
const gridView = ref(false); const gridView = ref(false);
const statsEmployee = ref(0); const statsEmployee = ref(0);
const statsEmployeeGender = ref<{ male: number; female: number }>({
male: 0,
female: 0,
});
const hideStat = ref(false); const hideStat = ref(false);
const branchOption = ref<{ id: string; name: string }[]>();
const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
const statusToggle = ref<boolean>(false); const statusToggle = ref<boolean>(false);
const infoDrawer = ref(false);
const infoDrawerEdit = ref(false);
const isMainPage = ref<boolean>(true);
const statsCustomerType = ref<CustomerStats>({ const statsCustomerType = ref<CustomerStats>({
CORP: 0, CORP: 0,
PERS: 0, PERS: 0,
}); });
const currentCustomerId = ref<string>(''); const currentCustomerId = ref<string>('');
const currentCustomer = ref<Customer>(); const currentCustomer = ref<Customer>();
const statBranchNo = ref<number>(0);
const currentBranch = ref<{ name: string; code: string }>({ const currentBranch = ref<{ name: string; code: string }>({
name: '', name: '',
@ -169,11 +191,6 @@ const currentPageEmployee = ref<number>(1);
const maxPageEmployee = ref<number>(1); const maxPageEmployee = ref<number>(1);
const currentBranchId = ref<string>(''); const currentBranchId = ref<string>('');
const currentCustomerName = ref<string>('');
const currentCustomerUrlImage = ref<string | null>(null);
const genderSelector = ref<string>('');
const currentStatus = ref<Status | 'All'>('All');
const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]); const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
const listEmployee = ref<Employee[]>([]); const listEmployee = ref<Employee[]>([]);
@ -190,7 +207,6 @@ const fieldCustomer = ref([
]); ]);
const infoDrawerBranch = ref<boolean>(false); const infoDrawerBranch = ref<boolean>(false);
const selectorLabel = ref<string>('EMPLOYER');
const customerType = ref<CustomerType>('CORP'); const customerType = ref<CustomerType>('CORP');
const employeeHistoryDialog = ref(false); const employeeHistoryDialog = ref(false);
const employeeHistory = ref<EmployeeHistory[]>(); const employeeHistory = ref<EmployeeHistory[]>();
@ -206,10 +222,7 @@ function deleteCustomerById(id: string) {
action: async () => { action: async () => {
await customerStore.deleteById(id); await customerStore.deleteById(id);
const resultList = await fetchList({ includeBranch: true }); await fetchListCustomer(true);
if (resultList) listCustomer.value = resultList.result;
infoDrawer.value = false;
flowStore.rotate(); flowStore.rotate();
}, },
cancel: () => {}, cancel: () => {},
@ -217,7 +230,7 @@ function deleteCustomerById(id: string) {
} }
async function fetchListOfOptionBranch() { async function fetchListOfOptionBranch() {
if (branchOption.value) return; if (registerAbleBranchOption.value) return;
const uid = getUserId(); const uid = getUserId();
const role = getRole(); const role = getRole();
@ -226,10 +239,12 @@ async function fetchListOfOptionBranch() {
if (role?.includes('system')) { if (role?.includes('system')) {
const result = await userBranchStore.fetchListOptionBranch(); const result = await userBranchStore.fetchListOptionBranch();
if (result && result.total > 0) branchOption.value = result.result; if (result && result.total > 0)
registerAbleBranchOption.value = result.result;
} else { } else {
const result = await userBranchStore.fetchListMyBranch(uid); const result = await userBranchStore.fetchListMyBranch(uid);
if (result && result.total > 0) branchOption.value = result.result; if (result && result.total > 0)
registerAbleBranchOption.value = result.result;
} }
// TODO: Assign (first) branch of the user as register branch of the data // TODO: Assign (first) branch of the user as register branch of the data
@ -256,13 +271,13 @@ async function fetchListCustomer(fetchStats = false) {
} }
if (fetchStats) { if (fetchStats) {
statsCustomerType.value = await getStatsCustomer().then((value) => statsCustomerType.value = await customerStore
value ? value : { CORP: 0, PERS: 0 }, .getStatsCustomer()
); .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
} }
} }
async function fetchListEmployee() { async function fetchListEmployee(fetchStats = false) {
const resultListEmployee = await employeeStore.fetchList({ const resultListEmployee = await employeeStore.fetchList({
page: currentPageEmployee.value, page: currentPageEmployee.value,
pageSize: pageSize.value, pageSize: pageSize.value,
@ -273,7 +288,6 @@ async function fetchListEmployee() {
? 'ACTIVE' ? 'ACTIVE'
: 'INACTIVE', : 'INACTIVE',
query: inputSearch.value, query: inputSearch.value,
gender: genderSelector.value,
}); });
if (resultListEmployee) { if (resultListEmployee) {
maxPageEmployee.value = Math.ceil( maxPageEmployee.value = Math.ceil(
@ -281,6 +295,8 @@ async function fetchListEmployee() {
); );
listEmployee.value = resultListEmployee.result; listEmployee.value = resultListEmployee.result;
} }
if (fetchStats) statsEmployee.value = await employeeStore.getStatsEmployee();
} }
async function triggerChangeStatus(id: string, status: string) { async function triggerChangeStatus(id: string, status: string) {
@ -319,8 +335,7 @@ async function toggleStatusEmployee(id: string, status: boolean) {
} }
async function toggleStatusCustomer(id: string, status: boolean) { async function toggleStatusCustomer(id: string, status: boolean) {
await editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' }); await customerStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
await fetchListCustomer(); await fetchListCustomer();
flowStore.rotate(); flowStore.rotate();
} }
@ -350,62 +365,6 @@ async function openHistory(id: string) {
employeeHistoryDialog.value = true; employeeHistoryDialog.value = true;
} }
async function fetchListStatsEmployeeGender() {
const resultStatsEmployeeGender = await employeeStore.getStatsEmployeeGender({
query: inputSearch.value,
status:
currentStatus.value === 'All'
? undefined
: currentStatus.value === 'ACTIVE'
? 'ACTIVE'
: 'INACTIVE',
});
if (resultStatsEmployeeGender) {
if (genderSelector.value === 'male') {
statsEmployeeGender.value.male = resultStatsEmployeeGender.male;
return;
}
if (genderSelector.value === 'female') {
statsEmployeeGender.value.female = resultStatsEmployeeGender.female;
return;
}
statsEmployeeGender.value = resultStatsEmployeeGender;
}
}
onMounted(async () => {
utilsStore.currentTitle.title = 'customerManagement';
utilsStore.currentTitle.path = [
{
text: 'customerManagementCaption',
handler: () => {
isMainPage.value = true;
currentCustomerUrlImage.value = null;
},
},
];
gridView.value = $q.screen.lt.md ? true : false;
const resultStatsEmployee = await employeeStore.getStatsEmployee();
if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
await fetchListStatsEmployeeGender();
const resultListEmployee = await employeeStore.fetchList({
page: 1,
pageSize: pageSize.value,
});
if (resultListEmployee) {
maxPageEmployee.value = Math.ceil(
resultListEmployee.total / pageSize.value,
);
listEmployee.value = resultListEmployee.result;
}
flowStore.rotate();
});
watch(locale, () => { watch(locale, () => {
fieldSelectedCustomer.value = { fieldSelectedCustomer.value = {
label: `${fieldSelectedCustomer.value.label}`, label: `${fieldSelectedCustomer.value.label}`,
@ -432,64 +391,17 @@ watch(fieldSelectedCustomer, async () => {
// TODO: When in employee form, if select address same as customer then auto fill // TODO: When in employee form, if select address same as customer then auto fill
watch(genderSelector, async () => {
await fetchListEmployee();
await fetchListStatsEmployeeGender();
flowStore.rotate();
});
watch(selectorLabel, async () => {
if (inputSearch.value) inputSearch.value = undefined;
if (selectorLabel.value === 'EMPLOYEE') {
await fetchListEmployee();
await fetchListStatsEmployeeGender();
} else {
await fetchListCustomer();
}
});
watch([inputSearch, currentStatus], async () => {
if (selectorLabel.value === 'EMPLOYEE') {
currentPageEmployee.value = 1;
await fetchListEmployee();
await fetchListStatsEmployeeGender();
} else {
currentPageCustomer.value = 1;
await fetchListCustomer();
}
flowStore.rotate();
});
watch( watch(
() => $q.screen.lt.md, () => $q.screen.lt.md,
() => $q.screen.lt.md && (gridView.value = true), () => $q.screen.lt.md && (gridView.value = true),
); );
watch(isMainPage, () => {
const tmp: typeof utilsStore.currentTitle.path = [
{
text: 'customerManagementCaption',
handler: () => {
isMainPage.value = true;
currentCustomerUrlImage.value = null;
// clearForm();
},
},
];
if (isMainPage.value === false) {
tmp.push({ text: currentCustomerName.value || '' });
}
utilsStore.currentTitle.path = tmp;
});
</script> </script>
<template> <template>
<ButtonAddComponent style="z-index: 999"> <ButtonAddComponent style="z-index: 999">
<div v-if="isMainPage"> <div v-if="$route.name === 'CustomerManagement'">
<q-fab-action <q-fab-action
v-if="selectorLabel === 'EMPLOYER' || !selectorLabel" v-if="currentTab === 'employer'"
id="add-customer-legal-entity" id="add-customer-legal-entity"
style="color: white; background-color: hsla(var(--violet-11-hsl))" style="color: white; background-color: hsla(var(--violet-11-hsl))"
@click="" @click=""
@ -500,7 +412,7 @@ watch(isMainPage, () => {
label-position="left" label-position="left"
/> />
<q-fab-action <q-fab-action
v-if="selectorLabel === 'EMPLOYER' || !selectorLabel" v-if="currentTab === 'employer'"
id="add-customer-natural-person" id="add-customer-natural-person"
:label="$t('add') + ' ' + $t('customerNaturalPerson')" :label="$t('add') + ' ' + $t('customerNaturalPerson')"
external-label external-label
@ -511,7 +423,7 @@ watch(isMainPage, () => {
icon="mdi-account-plus" icon="mdi-account-plus"
/> />
<q-fab-action <q-fab-action
v-if="selectorLabel === 'EMPLOYEE' || !selectorLabel" v-if="currentTab === 'employee'"
:label="$t('add') + ' ' + $t('EMPLOYEE')" :label="$t('add') + ' ' + $t('EMPLOYEE')"
external-label external-label
id="add-employee" id="add-employee"
@ -556,7 +468,7 @@ watch(isMainPage, () => {
" "
> >
{{ {{
selectorLabel === 'EMPLOYER' currentTab === 'employer'
? listCustomer?.length ? listCustomer?.length
: listEmployee.length : listEmployee.length
}} }}
@ -585,7 +497,7 @@ watch(isMainPage, () => {
labelI18n labelI18n
:branch=" :branch="
customerStats && customerStats &&
(selectorLabel === 'EMPLOYER' (currentTab === 'employer'
? customerStats.map((v) => ({ ? customerStats.map((v) => ({
count: count:
v.name === 'CORP' v.name === 'CORP'
@ -753,8 +665,7 @@ watch(isMainPage, () => {
name="employer" name="employer"
id="tab-employer" id="tab-employer"
@click=" @click="
async () => { () => {
selectorLabel = 'EMPLOYER';
currentPageCustomer = 1; currentPageCustomer = 1;
inputSearch = ''; inputSearch = '';
currentStatus = 'All'; currentStatus = 'All';
@ -775,8 +686,7 @@ watch(isMainPage, () => {
name="employee" name="employee"
id="tab-employee" id="tab-employee"
@click=" @click="
async () => { () => {
selectorLabel = 'EMPLOYEE';
currentPageEmployee = 1; currentPageEmployee = 1;
inputSearch = ''; inputSearch = '';
currentStatus = 'All'; currentStatus = 'All';
@ -811,7 +721,7 @@ watch(isMainPage, () => {
class="column q-pa-md surface-1 full-height full-width" class="column q-pa-md surface-1 full-height full-width"
style="gap: var(--size-1)" style="gap: var(--size-1)"
> >
<template v-if="selectorLabel === 'EMPLOYER'"> <template v-if="currentTab === 'employer'">
<q-item <q-item
v-close-popup v-close-popup
clickable clickable
@ -852,7 +762,7 @@ watch(isMainPage, () => {
v-if=" v-if="
listCustomer && listCustomer &&
statsCustomerType.PERS + statsCustomerType.CORP > 0 && statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
selectorLabel === 'EMPLOYER' currentTab === 'employer'
" "
> >
<div <div
@ -1045,23 +955,7 @@ watch(isMainPage, () => {
dense dense
class="row q-py-sm" class="row q-py-sm"
style="white-space: nowrap" style="white-space: nowrap"
@click=" @click="() => {}"
() => {
if (!listCustomer) return;
customerType = props.row.customerType;
const { branch, ...payload } = props.row;
currentCustomer = payload;
currentCustomerId = props.row.id;
// assignFormData(props.row.id);
infoDrawerEdit = true;
// openDialogInputForm('INFO', props.row.id);
}
"
> >
<q-icon <q-icon
name="mdi-pencil-outline" name="mdi-pencil-outline"
@ -1181,47 +1075,13 @@ watch(isMainPage, () => {
]" ]"
:disabled="props.row.status === 'INACTIVE'" :disabled="props.row.status === 'INACTIVE'"
@history="openHistory(props.row.id)" @history="openHistory(props.row.id)"
@update-card=" @update-card="() => {}"
() => {
if (!listCustomer) return;
customerType = props.row.customerType;
const { branch, ...payload } = props.row;
currentCustomer = payload;
currentCustomerId = props.row.id;
// assignFormData(props.row.id);
infoDrawerEdit = true;
// openDialogInputForm('INFO', props.row.id);
}
"
@enter-card=" @enter-card="
() => { $router.push(
currentCustomerName = props.row.customerName; `/customer-management/${props.row.id}/branch`,
customerType = props.row.customerType; )
currentCustomerUrlImage = props.row.imageUrl;
currentCustomerId = props.row.id;
const { branch, ...payload } = props.row;
currentCustomer = payload;
statBranchNo =
branch[branch.length - 1].branchNo + 1;
isMainPage = false;
}
"
@view-card="
() => {
if (!listCustomer) return;
customerType = props.row.customerType;
const { branch, ...payload } = props.row;
currentCustomer = payload;
currentCustomerId = props.row.id;
// assignFormData(props.row.id);
// openDialogInputForm('INFO', props.row.id);
}
" "
@view-card=""
@delete-card="deleteCustomerById(props.row.id)" @delete-card="deleteCustomerById(props.row.id)"
@toggle-status=" @toggle-status="
triggerChangeStatus(props.row.id, props.row.status) triggerChangeStatus(props.row.id, props.row.status)
@ -1301,9 +1161,7 @@ watch(isMainPage, () => {
<!-- employee --> <!-- employee -->
<template <template
v-if=" v-if="
listEmployee && listEmployee && statsEmployee > 0 && currentTab === 'employee'
statsEmployee > 0 &&
selectorLabel === 'EMPLOYEE'
" "
> >
<div <div
@ -1734,19 +1592,19 @@ watch(isMainPage, () => {
<template <template
v-if=" v-if="
(statsCustomerType.CORP + statsCustomerType.PERS === 0 && (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
selectorLabel === 'EMPLOYER') || currentTab === 'employer') ||
(statsEmployee === 0 && selectorLabel === 'EMPLOYEE') (statsEmployee === 0 && currentTab === 'employee')
" "
> >
<TooltipComponent <TooltipComponent
class="self-end q-ma-md" class="self-end q-ma-md"
:title=" :title="
selectorLabel === 'EMPLOYER' currentTab === 'employer'
? 'customerEmployerTooltipTitle' ? 'customerEmployerTooltipTitle'
: 'customerEmployeeTooltipTitle' : 'customerEmployeeTooltipTitle'
" "
:caption=" :caption="
selectorLabel === 'EMPLOYER' currentTab === 'employer'
? 'customerEmployerTooltipCaption' ? 'customerEmployerTooltipCaption'
: 'customerEmployeeTooltipCaption' : 'customerEmployeeTooltipCaption'
" "
@ -1759,7 +1617,7 @@ watch(isMainPage, () => {
> >
<AddButton <AddButton
:label=" :label="
selectorLabel === 'EMPLOYER' currentTab === 'employer'
? 'customerEmployerAdd' ? 'customerEmployerAdd'
: 'customerEmployeeAdd' : 'customerEmployeeAdd'
" "
@ -1781,18 +1639,9 @@ watch(isMainPage, () => {
v-model:mode-view="gridView" v-model:mode-view="gridView"
@back="$router.push('/customer-management')" @back="$router.push('/customer-management')"
@view-detail=" @view-detail="
async (v) => { async (value) => {
await fetchListOfOptionBranch(); await fetchListOfOptionBranch();
currentBranchId = v.id; // TODO: Assign data to form
statusToggle = v.status === 'INACTIVE' ? false : true;
currentBranch = {
name: v.name,
code: v.code,
};
if (currentCustomer) {
// assignFormData(currentCustomer.id, v, i);
}
infoDrawerBranch = true;
} }
" "
v-model:branch="branch" v-model:branch="branch"