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

fix(03): customer profile banner & tab

Browse source
This commit is contained in:
puriphatt 2024-08-06 03:14:31 +00:00
parent f97b78187d
commit 6b2c407946
5 changed files with 163 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/employee-avatar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
public/images/employee-banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 483 KiB

13
src/components/ProfileBanner.vue
View file

@ -39,8 +39,6 @@ const toggleStatus = defineModel<string>('toggleStatus', {
const currentTab = defineModel<string>('currentTab');
const showOverlay = ref(false);
currentTab.value = 'name1';
</script>
<template>
<q-img
@ -187,13 +185,12 @@ currentTab.value = 'name1';
<div class="row" v-if="tabsList && currentTab">
<div class="row q-px-sm full-width">
<q-tabs
dense
inline-label
mobile-arrows
dense
class="app-text-muted full-width"
v-model="currentTab"
active-class="active-tab"
indicator-color="transparent"
active-class="active-tab text-weight-bold"
class="app-text-muted full-width"
align="left"
>
<q-tab
@ -277,4 +274,8 @@ currentTab.value = 'name1';
.q-img__content > nav {
pointer-events: all;
}
.active-tab {
color: var(--brand-1);
}
</style>

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

@ -42,6 +42,8 @@ import { useCustomerForm, useEmployeeForm } from './form';
import { storeToRefs } from 'pinia';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
import useOptionStore from 'src/stores/options';
const { t, locale } = useI18n();
const $q = useQuasar();
@ -54,6 +56,7 @@ const userBranchStore = useMyBranchStore();
const employeeStore = useEmployeeStore();
const customerFormStore = useCustomerForm();
const employeeFormStore = useEmployeeForm();
const optionStore = useOptionStore();
const { state: customerFormState, currentFormData: customerFormData } =
storeToRefs(customerFormStore);
@ -431,6 +434,10 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
customerFormData.value.customerType = customerType;
}
function createEmployeeForm() {
employeeFormState.value.dialogModal = true;
}
// TODO: When in employee form, if select address same as customer then auto fill
</script>
@ -465,7 +472,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
external-label
id="add-employee"
label-position="left"
@click=""
@click="createEmployeeForm"
color="primary"
padding="xs"
icon="mdi-account-plus"
@ -538,8 +545,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
? customerStats.map((v) => ({
count:
v.name === 'CORP'
? statsCustomerType?.CORP ?? 0
: statsCustomerType?.PERS ?? 0,
? (statsCustomerType?.CORP ?? 0)
: (statsCustomerType?.PERS ?? 0),
label:
v.name === 'CORP'
? 'customerLegalEntity'
@ -1527,7 +1534,7 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
{
icon: 'mdi-clock-outline',
value: props.row.dateOfBirth
? calculateAge(props.row.dateOfBirth) ?? ''
? (calculateAge(props.row.dateOfBirth) ?? '')
: '',
},
],
@ -1816,6 +1823,144 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
<!-- label="Save" -->
<!-- /> -->
</DialogForm>
<DialogForm
:title="$t('form.title.create', { name: 'Employee' })"
v-model:modal="employeeFormState.dialogModal"
>
<div class="q-mx-lg q-mt-lg">
<ProfileBanner
active
useToggle
color="white"
icon="mdi-account-plus"
bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
v-model:current-tab="employeeFormState.currentTab"
v-model:cover-url="employeeFormState.profileUrl"
fallbackCover="images/employee-banner.png"
:img="`images/employee-avatar.png`"
:tabs-list="[
{ name: 'personalInfo', label: 'personalInfo' },
{ name: 'healthCheck', label: 'healthCheck' },
{ name: 'workHistory', label: 'workHistory' },
{ name: 'other', label: 'other' },
]"
:menu="formMenuIconEmployee"
:toggleTitle="$t('formDialogTitleUserStatus')"
:hideFade="
employeeFormState.profileUrl === '' ||
employeeFormState.profileUrl === undefined
"
/>
</div>
<div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="personnel-form"
>
<div class="col">
<div style="position: sticky; top: 0" class="q-pa-sm">
<SideMenu
:menu="[
{
name: $t('formDialogTitleInformation'),
anchor: 'form-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'form-personal',
},
{
name: $t('formDialogTitlePersonnelAddress'),
anchor: 'form-personal-address',
},
{
name: $t('formDialogTitlePassport'),
anchor: 'form-passport',
},
{
name: $t('formDialogTitleVisa'),
anchor: 'form-visa',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#employee-form"
/>
</div>
</div>
<div
v-if="employeeFormState.currentTab === 'personalInfo'"
class="col-10 q-pa-md q-gutter-y-xl"
>
<BasicInformation
id="form-information"
prefix-id="drawer-info-employee"
employee
dense
outlined
separator
:title="$t('formDialogTitleInformation')"
:employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
/>
<FormPerson
id="form-personal"
prefix-id="drawer-info-employee"
dense
outlined
employee
separator
:title="$t('personalInfo')"
v-model:firstName="currentFromDataEmployee.firstName"
v-model:lastName="currentFromDataEmployee.lastName"
v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
v-model:gender="currentFromDataEmployee.gender"
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"
prefix-id="drawer-info-personnel"
dense
/>
</div>
<div
v-if="employeeFormState.currentTab === 'healthCheck'"
class="col-10 q-pa-md q-gutter-y-xl"
>
<FormEmployeeHealthCheck
id="form-information"
prefix-id="drawer-info-employee"
dense
outlined
v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
v-model:medicalBenefitOption="optionStore.globalOption.insurancePlace"
v-model:insuranceCompanyOption="
optionStore.globalOption.insurancePlace
"
/>
</div>
</div>
</DialogForm>
<ImageUploadDialog
ref="dialogCustomerImageUpload"
v-model:dialog-state="customerFormState.imageDialog"

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

@ -14,7 +14,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
const customerStore = useCustomerStore();
const branchStore = useMyBranch();
let defaultFormData: CustomerCreate = {
const defaultFormData: CustomerCreate = {
status: 'CREATED',
personName: '',
customerType: 'CORP',
@ -223,6 +223,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
const state = ref<{
dialogType: 'info' | 'create' | 'edit';
currentTab: string;
dialogModal: boolean;
drawerModal: boolean;
currentEmployeeCode: string;
currentEmployee: Employee | null;
@ -252,6 +254,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
| undefined;
}>({
drawerModal: false,
currentTab: 'personalInfo',
dialogModal: false,
dialogType: 'info',
currentEmployeeCode: '',
currentEmployee: null,
@ -263,7 +267,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
formDataEmployeeOwner: undefined,
});
let defaultFormData: EmployeeCreate = {
const defaultFormData: EmployeeCreate = {
code: '',
image: null,
customerBranchId: '',
@ -345,7 +349,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
},
};
let resetEmployeeData = structuredClone(defaultFormData);
const resetEmployeeData = structuredClone(defaultFormData);
const currentFromDataEmployee = ref<EmployeeCreate>(
structuredClone(defaultFormData),
);