refactor: change form like page customer
This commit is contained in:
Thanaphon Frappet
parent
2511690d54
commit
6f2471c33b
4 changed files with 532 additions and 278 deletions
|
|
@ -104,23 +104,22 @@ const ocrStore = useOcrStore();
|
|||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
const statusEmployeeCreate = ref<boolean>(false);
|
||||
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
|
||||
const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
|
||||
{
|
||||
main: [],
|
||||
business: ['businessType', 'jobPosition'],
|
||||
address: [
|
||||
'address',
|
||||
'addressEN',
|
||||
'provinceId',
|
||||
'districtId',
|
||||
'subDistrictId',
|
||||
],
|
||||
contact: [],
|
||||
},
|
||||
);
|
||||
|
||||
const { state: customerFormState, currentFormData: customerFormData } =
|
||||
storeToRefs(customerFormStore);
|
||||
const {
|
||||
fetchListOfOptionBranch,
|
||||
customerFormUndo,
|
||||
customerConfirmUnsave,
|
||||
deleteCustomerById,
|
||||
validateTabField,
|
||||
deleteCustomerBranchById,
|
||||
} = customerFormStore;
|
||||
|
||||
const {
|
||||
state: customerFormState,
|
||||
currentFormData: customerFormData,
|
||||
registerAbleBranchOption,
|
||||
tabFieldRequired,
|
||||
} = storeToRefs(customerFormStore);
|
||||
const { state: employeeFormState, currentFromDataEmployee } =
|
||||
storeToRefs(employeeFormStore);
|
||||
|
||||
|
|
@ -276,8 +275,6 @@ const fieldSelected = ref<string[]>(
|
|||
].filter((v, index, self) => self.indexOf(v) === index),
|
||||
);
|
||||
|
||||
const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
|
||||
|
||||
const branch = ref<CustomerBranch[]>();
|
||||
|
||||
const customerStats = [
|
||||
|
|
@ -294,81 +291,6 @@ const fieldCustomer = [
|
|||
const employeeHistoryDialog = ref(false);
|
||||
const employeeHistory = ref<EmployeeHistory[]>();
|
||||
|
||||
function validateTabField<T = CustomerBranchCreate>(
|
||||
value: T,
|
||||
fieldRequired: { [key: string]: (keyof T)[] },
|
||||
) {
|
||||
const list: string[] = [];
|
||||
|
||||
for (const tab in fieldRequired) {
|
||||
for (const field of fieldRequired[tab]) {
|
||||
if (!value[field] && !list.includes(tab)) list.push(tab);
|
||||
}
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function deleteCustomerById(id: string) {
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
title: t('dialog.title.confirmDelete'),
|
||||
actionText: t('general.delete'),
|
||||
persistent: true,
|
||||
message: t('dialog.message.confirmDelete'),
|
||||
action: async () => {
|
||||
await customerStore.deleteById(id);
|
||||
|
||||
await fetchListCustomer(true, $q.screen.xs);
|
||||
customerFormState.value.dialogModal = false;
|
||||
flowStore.rotate();
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteCustomerBranchById(id: string) {
|
||||
return await new Promise((resolve) => {
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
title: t('dialog.title.confirmDelete'),
|
||||
actionText: t('general.delete'),
|
||||
persistent: true,
|
||||
message: t('dialog.message.confirmDelete'),
|
||||
action: async () => {
|
||||
await customerStore.deleteBranchById(id);
|
||||
flowStore.rotate();
|
||||
resolve(true);
|
||||
},
|
||||
cancel: () => {
|
||||
resolve(false);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
async function fetchListOfOptionBranch() {
|
||||
if (registerAbleBranchOption.value) return;
|
||||
|
||||
const uid = getUserId();
|
||||
const role = getRole();
|
||||
|
||||
if (!uid) return; // should not possible as the system require login to be able to access resource.
|
||||
|
||||
if (role?.includes('system')) {
|
||||
const result = await userBranchStore.fetchListOptionBranch();
|
||||
if (result && result.total > 0)
|
||||
registerAbleBranchOption.value = result.result;
|
||||
} else {
|
||||
const result = await userBranchStore.fetchListMyBranch(uid);
|
||||
if (result && result.total > 0)
|
||||
registerAbleBranchOption.value = result.result;
|
||||
}
|
||||
|
||||
// TODO: Assign (first) branch of the user as register branch of the data
|
||||
}
|
||||
|
||||
async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
|
||||
const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
|
||||
|
||||
|
|
@ -621,37 +543,6 @@ function employeeFormUndo(close = true) {
|
|||
employeeFormState.value.editReadonly = true;
|
||||
}
|
||||
|
||||
function customerConfirmUnsave(close = true) {
|
||||
dialog({
|
||||
color: 'warning',
|
||||
icon: 'mdi-alert',
|
||||
title: t('form.warning.title'),
|
||||
actionText: t('general.ok'),
|
||||
persistent: true,
|
||||
message: t('form.warning.unsave'),
|
||||
|
||||
action: () => {
|
||||
customerFormStore.resetForm();
|
||||
customerFormState.value.readonly = true;
|
||||
|
||||
if (!customerFormState.value.drawerModal) {
|
||||
customerFormState.value.dialogModal = !close;
|
||||
} else {
|
||||
customerFormState.value.drawerModal = !close;
|
||||
}
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
function customerFormUndo(close = true) {
|
||||
if (customerFormStore.isFormDataDifferent()) {
|
||||
return customerConfirmUnsave(close);
|
||||
}
|
||||
customerFormStore.resetForm();
|
||||
customerFormState.value.readonly = true;
|
||||
}
|
||||
|
||||
async function createCustomerForm(customerType: 'CORP' | 'PERS') {
|
||||
customerFormState.value.dialogModal = true;
|
||||
customerFormState.value.dialogType = 'create';
|
||||
|
|
@ -1540,7 +1431,13 @@ const emptyCreateDialog = ref(false);
|
|||
customerFormState.branchIndex = 0;
|
||||
}
|
||||
"
|
||||
@delete="deleteCustomerById(props.row.id)"
|
||||
@delete="
|
||||
deleteCustomerById(
|
||||
props.row.id,
|
||||
async () =>
|
||||
await fetchListCustomer(true, $q.screen.xs),
|
||||
)
|
||||
"
|
||||
@change-status="
|
||||
async () => {
|
||||
triggerChangeStatus(
|
||||
|
|
@ -1763,7 +1660,16 @@ const emptyCreateDialog = ref(false);
|
|||
customerFormState.branchIndex = 0;
|
||||
}
|
||||
"
|
||||
@delete="deleteCustomerById(props.row.id)"
|
||||
@delete="
|
||||
deleteCustomerById(
|
||||
props.row.id,
|
||||
async () =>
|
||||
await fetchListCustomer(
|
||||
true,
|
||||
$q.screen.xs,
|
||||
),
|
||||
)
|
||||
"
|
||||
@change-status="
|
||||
triggerChangeStatus(
|
||||
props.row.id,
|
||||
|
|
@ -2265,7 +2171,10 @@ const emptyCreateDialog = ref(false);
|
|||
@cancel="() => customerFormUndo(false)"
|
||||
@delete="
|
||||
customerFormState.editCustomerId &&
|
||||
deleteCustomerById(customerFormState.editCustomerId)
|
||||
deleteCustomerById(
|
||||
customerFormState.editCustomerId,
|
||||
async () => await fetchListCustomer(true, $q.screen.xs),
|
||||
)
|
||||
"
|
||||
:customer-type="customerFormData.customerType"
|
||||
v-model:registered-branch-id="customerFormData.registeredBranchId"
|
||||
|
|
@ -2435,7 +2344,11 @@ const emptyCreateDialog = ref(false);
|
|||
if (!customerFormState.editCustomerId) return;
|
||||
|
||||
if (idx === 0) {
|
||||
deleteCustomerById(customerFormState.editCustomerId);
|
||||
deleteCustomerById(
|
||||
customerFormState.editCustomerId,
|
||||
async () =>
|
||||
await fetchListCustomer(true, $q.screen.xs),
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (!!customerFormData.customerBranch?.[idx].id) {
|
||||
|
|
@ -4225,7 +4138,10 @@ const emptyCreateDialog = ref(false);
|
|||
@cancel="() => customerFormUndo(false)"
|
||||
@delete="
|
||||
customerFormState.editCustomerId &&
|
||||
deleteCustomerById(customerFormState.editCustomerId)
|
||||
deleteCustomerById(
|
||||
customerFormState.editCustomerId,
|
||||
async () => await fetchListCustomer(true, $q.screen.xs),
|
||||
)
|
||||
"
|
||||
:customer-type="customerFormData.customerType"
|
||||
v-model:registered-branch-id="customerFormData.registeredBranchId"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ref, watch } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import {
|
||||
CustomerBranchCreate,
|
||||
CustomerCreate,
|
||||
|
|
@ -7,16 +8,41 @@ import {
|
|||
} from 'stores/customer/types';
|
||||
import { Employee, EmployeeCreate } from 'stores/employee/types';
|
||||
|
||||
import { dialog } from 'stores/utils';
|
||||
import useMyBranch from 'stores/my-branch';
|
||||
import useCustomerStore from 'stores/customer';
|
||||
import useEmployeeStore from 'stores/employee';
|
||||
import useFlowStore from 'stores/flow';
|
||||
import useMyBranchStore from 'stores/my-branch';
|
||||
|
||||
import { baseUrl } from 'src/stores/utils';
|
||||
import { getRole, getUserId } from 'src/services/keycloak';
|
||||
|
||||
export const useCustomerForm = defineStore('form-customer', () => {
|
||||
const customerStore = useCustomerStore();
|
||||
|
||||
const { t } = useI18n();
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const userBranchStore = useMyBranchStore();
|
||||
|
||||
const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
|
||||
|
||||
const tabFieldRequired = ref<{
|
||||
[key: string]: (keyof CustomerBranchCreate)[];
|
||||
}>({
|
||||
main: [],
|
||||
business: ['businessType', 'jobPosition'],
|
||||
address: [
|
||||
'address',
|
||||
'addressEN',
|
||||
'provinceId',
|
||||
'districtId',
|
||||
'subDistrictId',
|
||||
],
|
||||
contact: [],
|
||||
});
|
||||
|
||||
const defaultFormData: CustomerCreate = {
|
||||
// code: '',
|
||||
// namePrefix: '',
|
||||
|
|
@ -360,7 +386,118 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
}
|
||||
}
|
||||
|
||||
async function fetchListOfOptionBranch() {
|
||||
if (registerAbleBranchOption.value) return;
|
||||
|
||||
const uid = getUserId();
|
||||
const role = getRole();
|
||||
|
||||
if (!uid) return; // should not possible as the system require login to be able to access resource.
|
||||
|
||||
if (role?.includes('system')) {
|
||||
const result = await userBranchStore.fetchListOptionBranch();
|
||||
if (result && result.total > 0)
|
||||
registerAbleBranchOption.value = result.result;
|
||||
} else {
|
||||
const result = await userBranchStore.fetchListMyBranch(uid);
|
||||
if (result && result.total > 0)
|
||||
registerAbleBranchOption.value = result.result;
|
||||
}
|
||||
|
||||
// TODO: Assign (first) branch of the user as register branch of the data
|
||||
}
|
||||
|
||||
function customerFormUndo(close = true) {
|
||||
if (isFormDataDifferent()) {
|
||||
return customerConfirmUnsave(close);
|
||||
}
|
||||
resetForm();
|
||||
state.value.readonly = true;
|
||||
}
|
||||
|
||||
function customerConfirmUnsave(close = true) {
|
||||
dialog({
|
||||
color: 'warning',
|
||||
icon: 'mdi-alert',
|
||||
title: t('form.warning.title'),
|
||||
actionText: t('general.ok'),
|
||||
persistent: true,
|
||||
message: t('form.warning.unsave'),
|
||||
|
||||
action: () => {
|
||||
resetForm();
|
||||
state.value.readonly = true;
|
||||
|
||||
if (!state.value.drawerModal) {
|
||||
state.value.dialogModal = !close;
|
||||
} else {
|
||||
state.value.drawerModal = !close;
|
||||
}
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
function deleteCustomerById(
|
||||
id: string,
|
||||
fetch?: (...args: unknown[]) => unknown,
|
||||
) {
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
title: t('dialog.title.confirmDelete'),
|
||||
actionText: t('general.delete'),
|
||||
persistent: true,
|
||||
message: t('dialog.message.confirmDelete'),
|
||||
action: async () => {
|
||||
await customerStore.deleteById(id);
|
||||
await fetch();
|
||||
state.value.dialogModal = false;
|
||||
flowStore.rotate();
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
function validateTabField<T = CustomerBranchCreate>(
|
||||
value: T,
|
||||
fieldRequired: { [key: string]: (keyof T)[] },
|
||||
) {
|
||||
const list: string[] = [];
|
||||
|
||||
for (const tab in fieldRequired) {
|
||||
for (const field of fieldRequired[tab]) {
|
||||
if (!value[field] && !list.includes(tab)) list.push(tab);
|
||||
}
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
async function deleteCustomerBranchById(id: string) {
|
||||
return await new Promise((resolve) => {
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-alert',
|
||||
title: t('dialog.title.confirmDelete'),
|
||||
actionText: t('general.delete'),
|
||||
persistent: true,
|
||||
message: t('dialog.message.confirmDelete'),
|
||||
action: async () => {
|
||||
await customerStore.deleteBranchById(id);
|
||||
flowStore.rotate();
|
||||
resolve(true);
|
||||
},
|
||||
cancel: () => {
|
||||
resolve(false);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
tabFieldRequired,
|
||||
registerAbleBranchOption,
|
||||
state,
|
||||
resetFormData,
|
||||
currentFormData,
|
||||
|
|
@ -370,13 +507,18 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
submitFormCustomer,
|
||||
addCurrentCustomerBranch,
|
||||
deleteAttachment,
|
||||
fetchListOfOptionBranch,
|
||||
customerFormUndo,
|
||||
customerConfirmUnsave,
|
||||
deleteCustomerById,
|
||||
validateTabField,
|
||||
deleteCustomerBranchById,
|
||||
};
|
||||
});
|
||||
|
||||
export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
|
||||
const customerStore = useCustomerStore();
|
||||
const customerFormStore = useCustomerForm();
|
||||
|
||||
const defaultFormData: CustomerBranchCreate & {
|
||||
id?: string;
|
||||
codeCustomer?: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue