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

Merge branch 'refactor/customer' into develop

Browse source
This commit is contained in:
Methapon2001 2024-08-06 09:26:11 +07:00
commit abb4932271
10 changed files with 174 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/03_customer-management/employee/BasicInformation.vue
View file

@ -34,7 +34,7 @@ const props = withDefaults(
employee?: boolean;
employeeOwnerOption?: CustomerBranch[];
prefixId: string;
showBtnSave: boolean;
showBtnSave?: boolean;
}>(),
{
showBtnSave: false,

14
src/components/DialogForm.vue
View file

@ -29,13 +29,18 @@ defineProps<{
submit?: (...args: unknown[]) => void;
close?: (...args: unknown[]) => void;
undo?: (...args: unknown[]) => void;
beforeClose?: (...args: unknown[]) => boolean;
}>();
const modal = defineModel('modal', { default: false });
const currentTab = defineModel<string>('currentTab');
</script>
<template>
<q-dialog v-model="modal" @hide="close" @before-show="show">
<q-dialog
:model-value="modal"
@update:model-value="(v) => (modal = beforeClose ? beforeClose() : v)"
@before-show="show"
>
<div
class="surface-1"
style="padding: 0; border-radius: var(--radius-2); height: 100%"
@ -129,7 +134,12 @@ const currentTab = defineModel<string>('currentTab');
padding="xs"
class="close-btn"
:class="{ dark: $q.dark.isActive }"
@click="close"
@click="
() => {
modal = beforeClose ? beforeClose() : !modal;
close?.();
}
"
/>
</div>
</div>

6
src/i18n/en-US/index.ts
View file

@ -99,11 +99,17 @@ export default {
invalid: 'Invalid value.',
invalidCustomeMessage: 'Invalid value. {msg}',
},
warning: {
title: 'Warning {msg}',
unsave:
'You have unsaved changes. Are you sure you want to close this window?',
},
},
customer: {
form: {
group: {
basicInfo: 'Basic Information',
branch: 'Branch',
},
registeredBranch: 'Registered Branch',
customerName: 'Company Name',

9
src/i18n/th-th/index.ts
View file

@ -100,17 +100,26 @@ export default {
invalid: 'ค่าที่ไม่ถูกต้อง',
invalidCustomeMessage: 'ค่าที่ไม่ถูกต้อง {msg}',
},
warning: {
title: 'แจ้งเตือน {msg}',
unsave:
'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คุณต้องการปิดหน้าต่างนี้หรือไม่',
},
},
customer: {
form: {
group: {
basicInfo: 'ข้อมูลพื้นฐาน',
branch: 'ข้อมูลสาขา',
},
registeredBranch: 'สาขาที่ลงทะเบียน',
customerName: 'ชื่อบริษัท',
customerNameEN: 'ชื่อบริษัท (EN)',
personName: 'ชื่อลูกค้า',
taxIdentificationNumber: 'หมายเลขประจำตัวผู้เสียภาษี',
branch: {
title: 'สาขาที่ {name}',
},
},
},
};

8
src/layouts/MainLayout.vue
View file

@ -281,9 +281,11 @@ onMounted(async () => {
>
{{
item.text
? $t(item.text, {
...(item.argsi18n || {}),
})
? item.i18n
? $t(item.text, {
...(item.argsi18n || {}),
})
: item.text
: ''
}}
</span>

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

@ -29,6 +29,7 @@ import SideMenu from 'src/components/SideMenu.vue';
import BasicInformation from 'src/components/03_customer-management/employee/BasicInformation.vue';
import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
import FormBasicInfo from './components/FormBasicInfo.vue';
import FormBranch from './components/FormBranch.vue';
import CustomerInfoComponent from './components/CustomerBranch.vue';
import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
@ -82,6 +83,7 @@ async function init() {
currentCustomer.value = _data;
utilsStore.currentTitle.path.push({
text: currentCustomer.value.customerName,
i18n: false,
});
} else {
router.push('/customer-management');
@ -398,6 +400,30 @@ async function editCustomerForm(id: string) {
customerFormState.value.editCustomerId = id;
}
function customerConfirmUnsave() {
dialog({
color: 'warning',
icon: 'mdi-alert',
title: t('form.warning.title'),
actionText: t('ok'),
persistent: true,
message: t('form.warning.unsave'),
action: () => {
customerFormStore.resetForm();
customerFormState.value.editReadonly = true;
},
cancel: () => {},
});
}
function customerFormUndo() {
if (customerFormStore.isFormDataDifferent()) {
return customerConfirmUnsave();
}
customerFormStore.resetForm();
customerFormState.value.editReadonly = true;
}
function createCustomerForm(customerType: 'CORP' | 'PERS') {
customerFormState.value.dialogModal = true;
customerFormState.value.dialogType = 'create';
@ -1657,11 +1683,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
:title="$t('form.title.create', { name: 'Employer' })"
:edit="customerFormState.dialogType === 'edit'"
:isEdit="customerFormState.editReadonly === false"
:undo="
() => (
customerFormStore.resetForm(), (customerFormState.editReadonly = true)
)
"
:undo="() => customerFormUndo()"
:deleteData="
() =>
customerFormState.editCustomerId &&
@ -1669,8 +1691,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
"
:editData="() => (customerFormState.editReadonly = false)"
:show="
async () =>
await fetchListOfOptionBranch().then(() => {
() =>
fetchListOfOptionBranch().then(() => {
customerFormStore.resetForm(
customerFormState.dialogType === 'create',
);
@ -1682,7 +1704,15 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
await fetchListCustomer();
}
"
:close="() => (customerFormState.dialogModal = false)"
:before-close="
() => {
if (customerFormStore.isFormDataDifferent()) {
customerConfirmUnsave();
return true;
}
return false; // close
}
"
no-footer
>
<div class="q-mx-lg q-mt-lg">
@ -1713,13 +1743,19 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
<div class="q-py-md q-pl-md">
<div class="q-py-md q-pl-md q-pr-sm">
<SideMenu
:menu="[
{
name: $t('customer.form.group.basicInfo'),
anchor: 'form-basic-info-customer',
},
...(customerFormData.customerBranch?.map((v) => ({
name: $t('customer.form.branch.title', {
name: v.branchNo || 0,
}),
anchor: `form-branch-customer-no-${v.branchNo}`,
})) || []),
]"
background="transparent"
:active="{
@ -1731,11 +1767,12 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
</div>
</div>
<div
class="col-12 col-md-10 q-pa-md"
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<FormBasicInfo
class="q-mb-xl"
:readonly="
customerFormState.dialogType === 'edit' &&
customerFormState.editReadonly === true
@ -1750,6 +1787,15 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
v-model:registered-branch-id="customerFormData.registeredBranchId"
v-model:branch-options="registerAbleBranchOption"
/>
<FormBranch
id="form-branch-customer"
:editable="
customerFormState.dialogType === 'create' ||
customerFormState.editReadonly === false
"
@add-branch="customerFormStore.addCurrentCustomerBranch()"
v-model:customer-branch="customerFormData.customerBranch"
/>
</div>
</div>
@ -1791,18 +1837,26 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
: `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
: '-'
"
:badgeClass="
currentFromDataEmployee.gender === 'male'
? 'app-bg-male text-white'
: currentFromDataEmployee.gender === 'female'
? 'app-bg-female text-white'
: ''
"
>
<div class="q-mx-lg q-mt-lg">
<ProfileBanner
active
hideFade
:img="employeeFormState.profileUrl"
:menu="formMenuIconEmployee"
/>
<div class="full-height full-width column">
<div class="q-mx-lg q-mt-lg">
<ProfileBanner
active
hideFade
:img="employeeFormState.profileUrl"
:menu="formMenuIconEmployee"
/>
</div>
<div
class="col surface-1 q-mt-lg rounded bordered scroll row"
id="personnel-form"
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="employee-form"
>
<div class="col">
<div style="position: sticky; top: 0" class="q-pa-sm">
@ -1834,13 +1888,13 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#personnel-form"
scroll-element="#employee-form"
/>
</div>
</div>
<div class="col-10 q-pa-md q-gutter-y-xl">
<BasicInformation
id="form-information"
prefix-id="drawer-info-employee"
employee
dense
@ -1855,8 +1909,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
/>
<FormPerson
id="form-personal"
prefix-id="drawer-info-employee"
dense
outlined
@ -1872,6 +1926,18 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
v-model:birthDate="currentFromDataEmployee.dateOfBirth"
v-model:nationality="currentFromDataEmployee.nationality"
/>
<FormAddress
id="form-personal-address"
v-model:address="currentFromDataEmployee.address"
v-model:addressEN="currentFromDataEmployee.addressEN"
v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
:readonly="!employeeFormState.isEmployeeEdit"
prefix-id="drawer-info-personnel"
dense
/>
</div>
</div>
</div>

2
src/pages/03_customer-management/components/FormBasicInfo.vue
View file

@ -54,7 +54,7 @@ watch(
</script>
<template>
<div class="row q-col-gutter-md">
<div class="row q-col-gutter-sm">
<div class="col-12 text-weight-bold text-body1 row items-center">
<q-icon
flat

48
src/pages/03_customer-management/components/FormBranch.vue Normal file
View file

@ -0,0 +1,48 @@
<script setup lang="ts">
import { CustomerCreate } from 'src/stores/customer/types';
const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
default: [],
});
defineProps<{
editable?: boolean;
}>();
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-12 text-weight-bold text-body1 row items-center">
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-briefcase"
style="background-color: var(--surface-3)"
/>
<span>{{ $t('customer.form.group.branch') }}</span>
<q-btn
type="button"
rounded
flat
dense
unelevated
color="primary"
@click="$emit('addBranch')"
v-if="editable"
icon="mdi-plus"
class="q-ml-md"
/>
</div>
<template v-for="item in branch">
<span
class="col-12 text-weight-bold"
:id="`form-branch-customer-no-${item.branchNo}`"
>
{{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
</span>
</template>
</div>
</template>

3
src/pages/03_customer-management/form.ts
View file

@ -139,7 +139,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
currentFormData.value.customerBranch?.push({
id: '',
code: '',
branchNo: 1,
branchNo:
(currentFormData.value.customerBranch?.at(-1)?.branchNo || 0) + 1,
address: '',
addressEN: '',
provinceId: '',

1
src/stores/utils/index.ts
View file

@ -167,6 +167,7 @@ const useUtilsStore = defineStore('utilsStore', () => {
title: string;
path: {
text: string;
i18n?: boolean;
argsi18n?: Record<string, string>;
handler?: () => unknown;
}[];