refactor: cleanup
This commit is contained in:
Methapon2001
parent
38384fa0f2
commit
97eea0cc6b
1 changed files with 65 additions and 91 deletions
|
|
@ -75,29 +75,56 @@ async function init() {
|
|||
}
|
||||
onMounted(init);
|
||||
|
||||
// NOTE: Page Data
|
||||
const currentCustomer = ref<Customer>();
|
||||
const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
|
||||
const listEmployee = ref<Employee[]>([]);
|
||||
const hideStats = ref(false);
|
||||
const statsCustomerType = ref<CustomerStats>({
|
||||
CORP: 0,
|
||||
PERS: 0,
|
||||
});
|
||||
|
||||
// NOTE: Page State
|
||||
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 fieldSelectedCustomer = ref<{ label: string; value: string }>({
|
||||
const customerTypeSelected = ref<{
|
||||
label: string;
|
||||
value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
|
||||
}>({
|
||||
label: t('all'),
|
||||
value: 'all',
|
||||
});
|
||||
const employeeStats = ref(0);
|
||||
const gridView = ref(false);
|
||||
const splitPercent = ref(15); // Customer only
|
||||
|
||||
watch(() => route.name, init);
|
||||
watch(
|
||||
[currentTab, currentStatus, inputSearch, customerTypeSelected],
|
||||
async ([tabName]) => {
|
||||
if (tabName === 'employer') {
|
||||
currentPageCustomer.value = 1;
|
||||
await fetchListCustomer(true);
|
||||
}
|
||||
if (tabName === 'employee') {
|
||||
currentPageEmployee.value = 1;
|
||||
await fetchListEmployee(true);
|
||||
}
|
||||
flowStore.rotate();
|
||||
},
|
||||
);
|
||||
watch(locale, () => {
|
||||
customerTypeSelected.value = {
|
||||
label: `${customerTypeSelected.value.label}`,
|
||||
value: customerTypeSelected.value?.value,
|
||||
};
|
||||
});
|
||||
watch(
|
||||
() => $q.screen.lt.md,
|
||||
() => $q.screen.lt.md && (gridView.value = true),
|
||||
);
|
||||
|
||||
const fieldDisplayEmployer = ref<{ label: string; value: string }[]>([
|
||||
{ label: 'corporation', value: 'customerName' },
|
||||
|
|
@ -161,26 +188,8 @@ const fieldSelected = ref<
|
|||
'action',
|
||||
]);
|
||||
|
||||
const splitPercent = ref(15);
|
||||
const gridView = ref(false);
|
||||
const statsEmployee = ref(0);
|
||||
const hideStat = ref(false);
|
||||
|
||||
const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
|
||||
|
||||
const statusToggle = ref<boolean>(false);
|
||||
const statsCustomerType = ref<CustomerStats>({
|
||||
CORP: 0,
|
||||
PERS: 0,
|
||||
});
|
||||
const currentCustomerId = ref<string>('');
|
||||
const currentCustomer = ref<Customer>();
|
||||
|
||||
const currentBranch = ref<{ name: string; code: string }>({
|
||||
name: '',
|
||||
code: '',
|
||||
});
|
||||
|
||||
const branch = ref<CustomerBranch[]>();
|
||||
|
||||
const currentPageCustomer = ref<number>(1);
|
||||
|
|
@ -190,23 +199,17 @@ const pageSize = ref<number>(10);
|
|||
const currentPageEmployee = ref<number>(1);
|
||||
const maxPageEmployee = ref<number>(1);
|
||||
|
||||
const currentBranchId = ref<string>('');
|
||||
|
||||
const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
|
||||
const listEmployee = ref<Employee[]>([]);
|
||||
|
||||
const customerStats = [
|
||||
{ id: 1, count: 2, name: 'CORP' },
|
||||
{ id: 2, count: 3, name: 'PERS' },
|
||||
];
|
||||
|
||||
const fieldCustomer = ref([
|
||||
const fieldCustomer = [
|
||||
'all',
|
||||
'customerLegalEntity',
|
||||
'customerNaturalPerson',
|
||||
]);
|
||||
] as const;
|
||||
|
||||
const infoDrawerBranch = ref<boolean>(false);
|
||||
const customerType = ref<CustomerType>('CORP');
|
||||
const employeeHistoryDialog = ref(false);
|
||||
const employeeHistory = ref<EmployeeHistory[]>();
|
||||
|
|
@ -251,7 +254,7 @@ async function fetchListOfOptionBranch() {
|
|||
}
|
||||
|
||||
async function fetchListCustomer(fetchStats = false) {
|
||||
const resultList = await fetchList({
|
||||
const resultList = await customerStore.fetchList({
|
||||
includeBranch: true,
|
||||
page: currentPageCustomer.value,
|
||||
pageSize: pageSize.value,
|
||||
|
|
@ -262,6 +265,13 @@ async function fetchListCustomer(fetchStats = false) {
|
|||
? 'ACTIVE'
|
||||
: 'INACTIVE',
|
||||
query: inputSearch.value,
|
||||
customerType: (
|
||||
{
|
||||
all: undefined,
|
||||
customerLegalEntity: 'CORP',
|
||||
customerNaturalPerson: 'PERS',
|
||||
} as const
|
||||
)[customerTypeSelected.value.value],
|
||||
});
|
||||
|
||||
if (resultList) {
|
||||
|
|
@ -296,7 +306,7 @@ async function fetchListEmployee(fetchStats = false) {
|
|||
listEmployee.value = resultListEmployee.result;
|
||||
}
|
||||
|
||||
if (fetchStats) statsEmployee.value = await employeeStore.getStatsEmployee();
|
||||
if (fetchStats) employeeStats.value = await employeeStore.getStatsEmployee();
|
||||
}
|
||||
|
||||
async function triggerChangeStatus(id: string, status: string) {
|
||||
|
|
@ -365,36 +375,7 @@ async function openHistory(id: string) {
|
|||
employeeHistoryDialog.value = true;
|
||||
}
|
||||
|
||||
watch(locale, () => {
|
||||
fieldSelectedCustomer.value = {
|
||||
label: `${fieldSelectedCustomer.value.label}`,
|
||||
value: fieldSelectedCustomer.value?.value,
|
||||
};
|
||||
});
|
||||
|
||||
watch(fieldSelectedCustomer, async () => {
|
||||
const resultList = await fetchList({
|
||||
includeBranch: true,
|
||||
customerType: (
|
||||
{
|
||||
all: undefined,
|
||||
cusomterLegalEnity: 'CORP',
|
||||
customerNaturalPerson: 'PERS',
|
||||
} as const
|
||||
)[fieldSelectedCustomer.value.value],
|
||||
});
|
||||
|
||||
if (resultList) listCustomer.value = resultList.result;
|
||||
|
||||
flowStore.rotate();
|
||||
});
|
||||
|
||||
// TODO: When in employee form, if select address same as customer then auto fill
|
||||
|
||||
watch(
|
||||
() => $q.screen.lt.md,
|
||||
() => $q.screen.lt.md && (gridView.value = true),
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -440,7 +421,7 @@ watch(
|
|||
:style="{
|
||||
color: 'white',
|
||||
'background-color':
|
||||
customerType === 'CORP'
|
||||
currentCustomer?.customerType === 'CORP'
|
||||
? 'hsla(var(--violet-11-hsl))'
|
||||
: 'hsla(var(--pink-6-hsl))',
|
||||
}"
|
||||
|
|
@ -481,8 +462,8 @@ watch(
|
|||
flat
|
||||
dense
|
||||
rounded
|
||||
@click="hideStat = !hideStat"
|
||||
:style="hideStat ? 'rotate: 90deg' : ''"
|
||||
@click="hideStats = !hideStats"
|
||||
:style="hideStats ? 'rotate: 90deg' : ''"
|
||||
style="transition: 0.1s ease-in-out"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -490,7 +471,7 @@ watch(
|
|||
<div class="row full-width">
|
||||
<!-- stat -->
|
||||
<transition name="slide">
|
||||
<div v-if="!hideStat" class="col-12 q-mb-md">
|
||||
<div v-if="!hideStats" class="col-12 q-mb-md">
|
||||
<div class="scroll">
|
||||
<StatCardComponent
|
||||
v-if="customerStats"
|
||||
|
|
@ -516,7 +497,7 @@ watch(
|
|||
: [
|
||||
{
|
||||
label: 'EMPLOYEE',
|
||||
count: statsEmployee,
|
||||
count: employeeStats,
|
||||
icon: 'mdi-account',
|
||||
color: 'pink',
|
||||
},
|
||||
|
|
@ -730,8 +711,8 @@ watch(
|
|||
dense
|
||||
class="no-padding items-center rounded full-width"
|
||||
active-class="employer-active"
|
||||
:active="fieldSelectedCustomer.value === v"
|
||||
@click="fieldSelectedCustomer = { label: v, value: v }"
|
||||
:active="customerTypeSelected.value === v"
|
||||
@click="customerTypeSelected = { label: v, value: v }"
|
||||
>
|
||||
<span class="q-px-md ellipsis">
|
||||
{{ $t(v) }}
|
||||
|
|
@ -896,12 +877,6 @@ watch(
|
|||
await fetchListOfOptionBranch();
|
||||
const { branch, ...payload } = props.row;
|
||||
currentCustomer = payload;
|
||||
|
||||
currentCustomerId = props.row.id;
|
||||
customerType = props.row.customerType;
|
||||
|
||||
// assignFormData(props.row.id);
|
||||
// openDialogInputForm('INFO', props.row.id);
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
|
@ -925,7 +900,6 @@ watch(
|
|||
const { branch, ...payload } = props.row;
|
||||
currentCustomer = payload;
|
||||
|
||||
currentCustomerId = props.row.id;
|
||||
customerType = props.row.customerType;
|
||||
// assignFormData(props.row.id);
|
||||
// openDialogInputForm('INFO', props.row.id);
|
||||
|
|
@ -1161,7 +1135,7 @@ watch(
|
|||
<!-- employee -->
|
||||
<template
|
||||
v-if="
|
||||
listEmployee && statsEmployee > 0 && currentTab === 'employee'
|
||||
listEmployee && employeeStats > 0 && currentTab === 'employee'
|
||||
"
|
||||
>
|
||||
<div
|
||||
|
|
@ -1569,7 +1543,7 @@ watch(
|
|||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage: listEmployee.length,
|
||||
total: statsEmployee,
|
||||
total: employeeStats,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -1593,7 +1567,7 @@ watch(
|
|||
v-if="
|
||||
(statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
|
||||
currentTab === 'employer') ||
|
||||
(statsEmployee === 0 && currentTab === 'employee')
|
||||
(employeeStats === 0 && currentTab === 'employee')
|
||||
"
|
||||
>
|
||||
<TooltipComponent
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue