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