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

Merge branch 'develop'
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Details

Browse source
This commit is contained in:
Methapon2001 2025-04-08 16:00:10 +07:00
commit bc5097a0a8
29 changed files with 2748 additions and 1199 deletions
Download patch file Download diff file Expand all files Collapse all files

106
public/option/option.json
View file

@ -1,5 +1,28 @@
{
"eng": {
"visaType": [
{
"label": "Non-LA",
"value": "nla"
},
{
"label": "Non-B",
"value": "nb"
},
{
"label": "TV.60",
"value": "tv60"
},
{
"label": "Non-TR",
"value": "ntr"
},
{
"label": "TV.30",
"value": "tv30"
}
],
"workerStatus": [
{
"label": "Normal",
@ -154,7 +177,8 @@
{ "label": "VS2", "value": "VS2" },
{ "label": "WO", "value": "WO" },
{ "label": "WP390", "value": "WP390" },
{ "label": "WP44", "value": "WP44" }
{ "label": "WP44", "value": "WP44" },
{ "label": "CUST", "value": "CUST" }
],
"prefix": [
@ -183,29 +207,44 @@
}
],
"training": [
"border": [
{
"label": "Myanmar Labor Training Center - Mae Sot, Tak Province",
"label": "Mae Sot, Tak Province",
"value": "trainingTak"
},
{
"label": "Myanmar Labor Training Center - Kawthoung, Ranong Province",
"label": "Koh Song, Ranong province",
"value": "trainingRanong"
},
{
"label": "Laos Labor Training Center - Nong Khai, Nong Khai Province",
"label": "Nong Khai, Nong Khai Province",
"value": "trainingNongKhai"
},
{
"label": "Cambodian Labor Training Center - Aranyaprathet, Sa Kaeo Province",
"label": "Aranyaprathet, Sa Kaeo Province",
"value": "trainingSaKaeo"
},
{
"label": "Cambodian Labor Training Center - Ban Laem, Chanthaburi Province",
"label": "Ban Laem, Chanthaburi Province",
"value": "trainingChanthaburi"
}
],
"training": [
{
"label": "The first center accepts work. and end of employment Tak Province",
"value": "trainingTak"
},
{
"label": "The first center accepts work. and end of employment Nong Khai Province",
"value": "trainingNongKhai"
},
{
"label": "The first center accepts work. and end of employment Sa Kaeo Province",
"value": "trainingSaKaeo"
}
],
"nationality": [
{
"label": "Thai",
@ -1050,6 +1089,29 @@
},
"tha": {
"visaType": [
{
"label": "Non-LA",
"value": "nla"
},
{
"label": "Non-B",
"value": "nb"
},
{
"label": "ผผ.60",
"value": "tv60"
},
{
"label": "Non-TR",
"value": "ntr"
},
{
"label": "ผผ.30",
"value": "tv30"
}
],
"workerStatus": [
{
"label": "ปกติ",
@ -1204,7 +1266,8 @@
{ "label": "VS2", "value": "VS2" },
{ "label": "WO", "value": "WO" },
{ "label": "WP390", "value": "WP390" },
{ "label": "WP44", "value": "WP44" }
{ "label": "WP44", "value": "WP44" },
{ "label": "CUST", "value": "CUST" }
],
"prefix": [
@ -1233,29 +1296,44 @@
}
],
"training": [
"border": [
{
"label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
"label": "แม่สอด จ.ตาก",
"value": "trainingTak"
},
{
"label": "สถานที่อบรมแรงงานเมียนมา-เกาะสอง จ.ระนอง",
"label": "เกาะสอง จ.ระนอง",
"value": "trainingRanong"
},
{
"label": "สถานที่อบรมแรงงานลาว-หนองคาย จ.หนองคาย",
"label": "หนองคาย จ.หนองคาย",
"value": "trainingNongKhai"
},
{
"label": "สถานที่อบรมแรงงานกัมพูชา-อรัญประเทศ จ.สระแก้ว",
"label": "อรัญประเทศ จ.สระแก้ว",
"value": "trainingSaKaeo"
},
{
"label": "สถานที่อบรมแรงงานกัมพูชา-บ้านแหลม จ.จันทบุรี",
"label": "บ้านแหลม จ.จันทบุรี",
"value": "trainingChanthaburi"
}
],
"training": [
{
"label": "ศูนย์แรกรับเข้าทำงาน และสิ้นสุดการจ้าง จังหวัดตาก",
"value": "trainingTak"
},
{
"label": "ศูนย์แรกรับเข้าทำงาน และสิ้นสุดการจ้าง จังหวัดหนองคาย",
"value": "trainingNongKhai"
},
{
"label": "ศูนย์แรกรับเข้าทำงาน และสิ้นสุดการจ้าง จังหวัดสระแก้ว",
"value": "trainingSaKaeo"
}
],
"nationality": [
{
"label": "ไทย",

3
src/boot/i18n.ts
View file

@ -2,6 +2,7 @@ import { defineBoot } from '#q-app/wrappers';
import { createI18n } from 'vue-i18n';
import messages from 'src/i18n';
import { Lang } from 'src/utils/ui';
export type MessageLanguages = keyof typeof messages;
// Type-define 'eng' as the master schema for the resource
@ -26,7 +27,7 @@ export const i18n = createI18n<
MessageLanguages,
false
>({
locale: 'eng',
locale: 'tha',
legacy: false,
messages,
});

9
src/components/01_branch-management/FormBank.vue
View file

@ -36,6 +36,7 @@ defineProps<{
outlined?: boolean;
readonly?: boolean;
view?: boolean;
single?: boolean;
}>();
defineEmits<{
@ -121,7 +122,7 @@ watch(
/>
{{ $t(`${title}`) }}
<AddButton
v-if="!readonly"
v-if="!readonly && !single"
id="btn-add-bank"
icon-only
class="q-ml-sm"
@ -141,7 +142,10 @@ watch(
style="padding-block: 0.01px"
spaced="lg"
/>
<span class="col-12 app-text-muted-2 flex justify-between items-center">
<span
v-if="!single"
class="col-12 app-text-muted-2 flex justify-between items-center"
>
{{ `${$t('branch.form.bankAccountNo')} ${i + 1}` }}
<div class="row items-center">
<div style="height: 30.8px" />
@ -172,6 +176,7 @@ watch(
</span>
<div
v-if="!single"
class="bordered q-mr-sm rounded col text-center overflow-hidden"
:class="{ 'pointer-none': readonly, 'q-my-sm': $q.screen.lt.md }"
>

248
src/components/02_personnel-management/FormByType.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts">
import useUserStore from 'stores/user';
import useOptionStore from 'stores/options';
import { UserAttachmentDelete } from 'stores/user/types';
import { dialog, selectFilterOptionRefMod } from 'stores/utils';
import { onMounted, ref, watch } from 'vue';
import { UserAttachmentDelete, AgencyStatus } from 'stores/user/types';
import { dialog } from 'stores/utils';
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Icon } from '@iconify/vue';
import { QSelect } from 'quasar';
import DatePicker from '../shared/DatePicker.vue';
import SelectInput from 'src/components/shared/SelectInput.vue';
import SelectOffice from 'components/shared/select-muliple/SelectOffice.vue';
@ -33,13 +33,15 @@ const importNationality = defineModel<string | null | undefined>(
'importNationality',
);
const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
const checkpoint = defineModel<string | null | undefined>('checkPoint');
const checkpointEN = defineModel<string | null | undefined>('checkPointEn');
const checkpoint = defineModel<string | null | undefined>('checkpoint');
const agencyFile = defineModel<File[]>('agencyFile');
const agencyFileList =
defineModel<{ name: string; url: string }[]>('agencyFileList');
const remark = defineModel<string | null | undefined>('remark');
const agencyStatus = defineModel<string | null | undefined>('agencyStatus');
const attachmentRef = ref();
const checkpointENOption = ref([]);
defineProps<{
dense?: boolean;
@ -76,59 +78,11 @@ function deleteFile(name: string) {
});
}
const nationalityOptions = ref<Record<string, unknown>[]>([]);
let nationalityFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const trainingPlaceOptions = ref<Record<string, unknown>[]>([]);
let trainingPlaceFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const responsibleAreaOptions = ref<Record<string, unknown>[]>([]);
let responsibleAreaFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
onMounted(() => {
if (optionStore.globalOption?.nationality) {
nationalityFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
nationalityOptions,
'label',
);
trainingPlaceFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.training),
trainingPlaceOptions,
'label',
);
responsibleAreaFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.area),
responsibleAreaOptions,
'label',
);
}
onMounted(async () => {
const resultOption = await fetch('/option/option.json');
const rawOption = await resultOption.json();
checkpointENOption.value = rawOption.eng.border;
});
watch(
() => optionStore.globalOption,
() => {
nationalityFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
nationalityOptions,
'label',
);
trainingPlaceFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.training),
trainingPlaceOptions,
'label',
);
},
);
</script>
<template>
<div class="row col-12">
@ -218,136 +172,108 @@ watch(
class="row col-12 q-col-gutter-sm"
style="margin-left: 0px; padding-left: 0px"
>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
class="col-md-3 col-6"
<SelectInput
:model-value="readonly ? sourceNationality || '-' : sourceNationality"
id="input-source-nationality"
for="input-source-nationality"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:option="optionStore.globalOption.nationality"
class="col-md-3 col-6"
:readonly
clearable
:label="$t('personnel.form.sourceNationality')"
:options="nationalityOptions"
@filter="nationalityFilter"
:model-value="readonly ? sourceNationality || '-' : sourceNationality"
@update:model-value="
(v) => (typeof v === 'string' ? (sourceNationality = v) : '')
"
@clear="sourceNationality = ''"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
class="col-md-3 col-6"
/>
<SelectInput
:model-value="readonly ? importNationality || '-' : importNationality"
id="input-import-nationality"
for="input-import-nationality"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:option="optionStore.globalOption.nationality"
class="col-md-3 col-6"
:readonly
clearable
:label="$t('personnel.form.importNationality')"
:options="nationalityOptions"
@filter="nationalityFilter"
:model-value="readonly ? importNationality || '-' : importNationality"
@update:model-value="
(v) => (typeof v === 'string' ? (importNationality = v) : '')
"
@clear="importNationality = ''"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-label="label"
option-value="label"
class="col-md-6 col-12"
/>
<SelectInput
:model-value="readonly ? trainingPlace || '-' : trainingPlace"
id="select-trainig-place"
for="select-trainig-place"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:option="optionStore.globalOption.training"
class="col-md-6 col-12"
:readonly
:label="$t('personnel.form.trainingPlace')"
:options="trainingPlaceOptions"
@filter="trainingPlaceFilter"
:model-value="readonly ? trainingPlace || '-' : trainingPlace"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (trainingPlace = v) : '')
"
@clear="trainingPlace = ''"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
for="input-checkpoint"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('personnel.form.checkpoint')"
class="col-6"
/>
<SelectInput
:model-value="readonly ? checkpoint || '-' : checkpoint"
id="select-checkpoint"
for="select-checkpoint"
:option="optionStore.globalOption.border"
class="col-6"
:readonly
:label="$t('personnel.form.checkpoint')"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (checkpoint = v) : '')
"
@clear="checkpoint = ''"
/>
<SelectInput
:model-value="readonly ? checkpoint || '-' : checkpoint"
id="select-checkpoint-en"
for="select-checkpoint-en"
:option="checkpointENOption"
class="col-6"
:readonly
:label="$t('personnel.form.checkpointEN')"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (checkpoint = v) : '')
"
/>
<SelectInput
:model-value="readonly ? agencyStatus || '-' : agencyStatus"
id="select-checkpoint-en"
for="select-checkpoint-en"
:option="[
{ label: $t('personnel.form.normal'), value: AgencyStatus.Normal },
{
label: $t('personnel.form.canceled'),
value: AgencyStatus.Canceled,
},
{
label: $t('personnel.form.blacklist'),
value: AgencyStatus.Blacklist,
},
]"
class="col-md-6 col-12"
:readonly
:label="$t('personnel.form.agencyStatus')"
clearable
@update:model-value="
(v) => (typeof v === 'string' ? (agencyStatus = v) : '')
"
/>
<q-input
for="input-checkpoint-en"
for="input-discount-condition"
:dense="dense"
outlined
:readonly="readonly"
:label="$t('personnel.form.checkpointEN')"
class="col-6"
:model-value="readonly ? checkpointEN || '-' : checkpointEN"
:readonly
:label="$t('general.remark')"
class="col-12"
type="textarea"
:model-value="readonly ? remark || '-' : remark"
@update:model-value="
(v) => (typeof v === 'string' ? (checkpointEN = v) : '')
(v) => (typeof v === 'string' ? (remark = v) : '')
"
@clear="checkpointEN = ''"
@clear="remark = ''"
/>
<q-file
ref="attachmentRef"
@ -358,7 +284,7 @@ watch(
multiple
append
:label="$t('personnel.form.attachment')"
class="col-12"
class="col"
v-model="agencyFile"
>
<template v-slot:prepend>

106
src/components/02_personnel-management/FormPerson.vue
View file

@ -41,6 +41,12 @@ let prefixNameFilter: (
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const prefixNameOptionsEn = ref<Record<string, unknown>[]>([]);
let prefixNameFilterEn: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const genderOptions = ref<Record<string, unknown>[]>([]);
let genderFilter: (
value: string,
@ -55,7 +61,9 @@ let nationalityFilter: (
function matPreFixName() {
if (gender.value === 'male') prefixName.value = 'mr';
if (gender.value === 'female') prefixName.value = 'mrs';
if (gender.value === 'female' && prefixName.value === 'mr') {
prefixName.value = 'mrs';
}
}
onMounted(() => {
@ -64,6 +72,13 @@ onMounted(() => {
prefixNameOptions,
'label',
);
prefixNameFilterEn = selectFilterOptionRefMod(
ref(optionStore.rawOption?.eng.prefix),
prefixNameOptionsEn,
'label',
);
genderFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.gender),
genderOptions,
@ -94,6 +109,12 @@ watch(
nationalityOptions,
'label',
);
prefixNameFilterEn = selectFilterOptionRefMod(
ref(optionStore.rawOption?.eng.prefix),
prefixNameOptionsEn,
'label',
);
},
);
@ -175,6 +196,7 @@ watch(
(v) => (typeof v === 'string' ? (prefixName = v) : '')
"
@clear="prefixName = ''"
:rules="[(val: string) => !!val || $t('form.error.required')]"
>
<template v-slot:no-option>
<q-item>
@ -194,7 +216,11 @@ watch(
class="col"
:label="$t('personnel.form.firstName')"
v-model="firstName"
:rules="[(val: string) => !!val || $t('form.error.required')]"
:rules="
employee
? []
: [(val: string) => !!val || $t('form.error.required')]
"
/>
<q-input
@ -229,25 +255,41 @@ watch(
class="col-12 row"
style="display: flex; gap: var(--size-2)"
>
<q-input
:for="`${prefixId}-input-first-name`"
:dense="dense"
<q-select
outlined
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
:readonly="readonly"
:disable="!readonly"
input-debounce="0"
option-label="label"
option-value="value"
hide-dropdown-icon
autocomplete="off"
class="col-md-1 col-6"
label="Title"
:model-value="
readonly
? capitalize(prefixName || '') || '-'
: capitalize(prefixName || '')
"
:dense="dense"
:readonly="readonly"
:options="prefixNameOptionsEn"
:for="`${prefixId}-select-prefix-name-en`"
label="Prefix"
@filter="prefixNameFilter"
:model-value="readonly ? prefixName || '-' : prefixName"
@update:model-value="
(v) => (typeof v === 'string' ? (prefixName = v) : '')
"
@clear="prefixName = ''"
/>
:rules="[(val: string) => !!val || $t('form.error.required')]"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
:for="`${prefixId}-input-first-name-en`"
@ -287,10 +329,22 @@ watch(
class="col"
label="Surname"
v-model="lastNameEN"
:rules="[
(val: string) =>
!val || /^[A-Za-z\s]+$/.test(val) || $t('form.error.letterOnly'),
]"
:rules="
employee
? [
(val: string) => !!val || $t('form.error.required'),
(val: string) =>
!val ||
/^[A-Za-z\s]+$/.test(val) ||
$t('form.error.letterOnly'),
]
: [
(val: string) =>
!val ||
/^[A-Za-z\s]+$/.test(val) ||
$t('form.error.letterOnly'),
]
"
/>
</div>
@ -392,11 +446,15 @@ watch(
:readonly="readonly"
:label="$t('form.birthDate')"
:disabled-dates="disabledAfterToday"
:rules="[
(val: string) =>
!!val ||
$t('form.error.selectField', { field: $t('form.birthDate') }),
]"
:rules="
employee
? []
: [
(val: string) =>
!!val ||
$t('form.error.selectField', { field: $t('form.birthDate') }),
]
"
/>
<q-input
@ -478,7 +536,6 @@ watch(
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-gender`"
:label="$t('form.gender')"
:rules="[(val: string) => !!val || $t('form.error.required')]"
@filter="genderFilter"
>
<template v-slot:no-option>
@ -511,7 +568,6 @@ watch(
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-nationality`"
:label="$t('general.nationality')"
:rules="[(val: string) => !!val || $t('form.error.required')]"
@filter="nationalityFilter"
>
<template v-slot:no-option>

8
src/components/03_customer-management/FormEmployeeOther.vue
View file

@ -106,7 +106,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('form.firstName')"
:label="$t('general.nativeLanguage', { msg: $t('form.firstName') })"
:model-value="employeeOther.fatherFirstName"
@update:model-value="
(v) =>
@ -122,7 +122,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('form.lastName')"
:label="$t('general.nativeLanguage', { msg: $t('form.lastName') })"
:model-value="employeeOther.fatherLastName"
@update:model-value="
(v) =>
@ -177,7 +177,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('form.firstName')"
:label="$t('general.nativeLanguage', { msg: $t('form.firstName') })"
:model-value="employeeOther.motherFirstName"
@update:model-value="
(v) =>
@ -193,7 +193,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('form.lastName')"
:label="$t('general.nativeLanguage', { msg: $t('form.lastName') })"
:model-value="employeeOther.motherLastName"
@update:model-value="
(v) =>

12
src/components/03_customer-management/FormEmployeePassport.vue
View file

@ -103,7 +103,7 @@ onMounted(() => {
'label',
);
passportIssuingCountryFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
ref(optionStore.rawOption?.eng.nationality),
passportIssuingCountryOptions,
'label',
);
@ -121,13 +121,13 @@ onMounted(() => {
);
genderFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.gender),
ref(optionStore.rawOption?.eng.gender),
genderOptions,
'label',
);
nationalityFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.nationality),
ref(optionStore.rawOption?.eng.nationality),
nationalityOptions,
'label',
);
@ -152,7 +152,7 @@ watch(
);
passportIssuingCountryFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
ref(optionStore.rawOption?.eng.nationality),
passportIssuingCountryOptions,
'label',
);
@ -164,13 +164,13 @@ watch(
);
genderFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.gender),
ref(optionStore.rawOption?.eng.gender),
genderOptions,
'label',
);
nationalityFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.nationality),
ref(optionStore.rawOption?.eng.nationality),
nationalityOptions,
'label',
);

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

@ -92,7 +92,7 @@ let workerTypeFilter: (
onMounted(() => {
visaTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.nationality),
ref(optionStore.globalOption?.visaType),
visaTypeOptions,
'label',
);

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

@ -3,6 +3,7 @@ import { QSelect } from 'quasar';
import { CustomerBranch } from 'stores/customer/types';
import { selectFilterOptionRefMod } from 'stores/utils';
import { onMounted, ref, watch } from 'vue';
import SelectCustomer from 'components/shared/select/SelectCustomer.vue';
import {
EditButton,
DeleteButton,
@ -11,6 +12,7 @@ import {
} from 'components/button';
import { useI18n } from 'vue-i18n';
import useOptionStore from 'stores/options';
import { formatAddress } from 'src/utils/address';
const { locale } = useI18n();
@ -21,6 +23,13 @@ const optionsBranch = defineModel<{ id: string; name: string }[]>(
);
// employee
const customerBranchId = defineModel<string>('customerBranchId');
const currentCustomerBranch = defineModel<CustomerBranch>(
'currentCustomerBranch',
);
const customerBranch = defineModel<{
id: string;
address: string;
@ -107,180 +116,14 @@ defineEmits<{
</div>
<div class="col-12 row" style="gap: var(--size-2)">
<q-select
:id="`${prefixId}-select-employer-branch`"
:for="`${prefixId}-select-employer-branch`"
:use-input="!customerBranch"
autocomplete="off"
input-debounce="0"
:hide-dropdown-icon="readonly"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12"
<SelectCustomer
v-model:value="customerBranchId"
v-model:value-option="currentCustomerBranch"
:label="$t('customer.form.branchCode')"
v-model="customerBranch"
:option-value="
(v) => ({
id: v.id,
address: v.address,
addressEN: v.addressEN,
provinceId: v.provinceId,
districtId: v.districtId,
subDistrictId: v.subDistrictId,
zipCode: v.zipCode,
})
"
emit-value
map-options
:options="employeeOwnerOption"
@filter="(val, update) => $emit('filterOwnerBranch', val, update)"
:rules="[
(val: string) =>
!!val ||
$t('form.error.selectField', {
field: $t('customerEmployee.branch'),
}),
]"
>
<template v-slot:option="scope">
<q-item
v-if="scope.opt"
v-bind="scope.itemProps"
class="row items-start col-12 no-padding"
>
<div class="q-ma-sm">
<i class="isax isax-frame5" style="color: var(--brand-1)" />
</div>
<div class="q-mt-sm">
<div>
<span v-if="scope.opt.customer.customerType">
<span style="font-weight: 600">
{{
scope.opt.customer.customerType === 'CORP'
? $t('customer.form.registerName')
: $t('customer.form.ownerName')
}}:
</span>
{{
scope.opt.customer.customerType === 'CORP'
? $i18n.locale === 'eng'
? scope.opt.registerNameEN
: scope.opt.registerName
: $i18n.locale === 'eng'
? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
'-'
: `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
'-'
}}
({{ scope.opt.code }})
</span>
</div>
<div class="text-caption app-text-muted-2 q-mb-xs">
<span v-if="scope.opt.customer" class="col column">
{{
$t(
`branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
)
}}
{{
!scope.opt.code.endsWith('-00')
? +scope.opt.code.split('-')[1]
: ''
}}
</span>
<span v-if="scope.opt.province" class="col">
{{ $t('general.address') }}
{{
$i18n.locale === 'eng'
? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
: `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
}}
{{ scope.opt.subDistrict?.zipCode || '' }}
</span>
</div>
</div>
</q-item>
<q-separator class="q-mx-sm" />
</template>
<template v-slot:selected-item="scope">
<div
v-if="scope.opt"
class="row items-center no-wrap"
style="width: 1px"
>
<div class="q-mr-sm">
<span style="font-weight: 600">
{{
scope.opt.customer.customerType === 'CORP'
? $t('customer.form.registerName')
: $t('customer.form.ownerName')
}}:
</span>
{{
scope.opt.customer.customerType === 'CORP'
? $i18n.locale === 'eng'
? scope.opt.registerNameEN
: scope.opt.registerName
: $i18n.locale === 'eng'
? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
'-'
: `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
'-'
}}
({{ scope.opt.code }})
</div>
<div
class="text-caption app-text-muted-2"
v-if="scope.opt.customer && scope.opt.province"
>
{{
$t(
`branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
)
}}
{{
!scope.opt.code.endsWith('-00')
? +scope.opt.code.split('-')[1]
: ''
}}
{{ $t('general.address') }}
{{
$i18n.locale === 'eng'
? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
: `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
}}
{{ scope.opt.subDistrict?.zipCode || '' }}
<q-tooltip v-if="scope.opt.customer && scope.opt.province">
{{ $t('customerBranch.form.title') }}:
{{ $t('general.address') }}
{{
$i18n.locale === 'eng'
? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
: `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
}}
{{ scope.opt.subDistrict?.zipCode || '' }}
</q-tooltip>
</div>
</div>
</template>
<template v-slot:append>
<q-icon
v-if="!readonly && customerBranch"
name="mdi-close-circle"
@click.stop="customerBranch = undefined"
class="cursor-pointer clear-btn"
/>
</template>
</q-select>
class="col-12 field-two"
required
:readonly
/>
<q-input
:for="`${prefixId}-input-code`"

77
src/components/07_agencies-management/FormBasicInfoAgencies.vue
View file

@ -14,6 +14,9 @@ defineProps<{
const group = defineModel('group', { default: '' });
const name = defineModel('name', { default: '' });
const nameEn = defineModel('nameEn', { default: '' });
const contactName = defineModel('contactName', { default: '' });
const email = defineModel('email', { default: '' });
const contactTel = defineModel('contactTel', { default: '' });
type Options = { label: string; value: string };
</script>
@ -35,7 +38,7 @@ type Options = { label: string; value: string };
<div class="col-12 row q-col-gutter-sm">
<SelectInput
:class="{ col: $q.screen.lt.md }"
class="col"
:disable="!readonly && onDrawer"
:readonly="readonly"
for="input-agencies-code"
@ -62,7 +65,7 @@ type Options = { label: string; value: string };
outlined
:readonly="readonly"
hide-bottom-space
class="col-md col-12"
class="col-md-4 col-12"
:label="$t('agencies.name')"
v-model="name"
:rules="[(val: string) => !!val || $t('form.error.required')]"
@ -73,10 +76,78 @@ type Options = { label: string; value: string };
outlined
:readonly="readonly"
hide-bottom-space
class="col-md col-12"
class="col-md-4 col-12"
:label="'Agencies Name'"
v-model="nameEn"
/>
<q-input
for="input-agencies-contact-name"
dense
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-4 col-12"
:label="$t('agencies.contactName')"
:model-value="readonly ? contactName || '-' : contactName"
@update:model-value="
(v) => (typeof v === 'string' ? (contactName = v) : '')
"
/>
<q-input
for="input-agencies-email"
dense
outlined
hide-bottom-space
:readonly="readonly"
:label="$t('form.email')"
:rules="
readonly
? undefined
: [
(v: string) =>
!v ||
/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
$t('form.error.invalid'),
]
"
class="col-md-4 col-12"
:model-value="readonly ? email || '-' : email"
@update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
@clear="email = ''"
>
<template #prepend>
<q-icon
size="xs"
name="mdi-email-outline"
class="cursor-pointer"
color="primary"
/>
</template>
</q-input>
<q-input
for="input-agencies-contact-tel"
id="input-agencies-contact-tel"
dense
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-4 col-12"
:label="$t('form.telephone')"
:model-value="readonly ? contactTel || '-' : contactTel"
@update:model-value="
(v) => (typeof v === 'string' ? (contactTel = v) : '')
"
>
<template #prepend>
<q-icon
size="xs"
name="mdi-phone-outline"
class="cursor-pointer"
color="primary"
/>
</template>
</q-input>
</div>
</div>
</template>

7
src/components/CanvasComponent.vue
View file

@ -93,13 +93,6 @@ function clearUpload() {
imgUrl.value = '';
}
watch(
() => tab.value,
async () => {
await initializeSignaturePad();
},
);
onMounted(async () => {
await initializeSignaturePad();
});

2
src/components/shared/select/SelectCustomer.vue
View file

@ -158,7 +158,7 @@ onMounted(async () => {
</template>
<template #option="{ opt, scope }">
<q-item v-bind="scope.itemProps">
<q-item @click="valueOption = opt" v-bind="scope.itemProps">
<SelectCustomerItem :data="opt" :simple :simple-branch-no />
</q-item>

4
src/components/shared/table/TableWorker.vue
View file

@ -54,7 +54,9 @@ const columns = [
field: (v: Employee) =>
locale.value === Lang.English
? `${v.firstNameEN} ${v.lastNameEN}`
: `${v.firstName} ${v.lastName}`,
: v.firstName
? `${v.firstName} ${v.lastName}`
: `${v.firstNameEN} ${v.lastNameEN}`,
},
{
name: 'birthDate',

11
src/i18n/eng.ts
View file

@ -153,6 +153,7 @@ export default {
tableOfContent: 'Table of Contents',
draw: 'Draw',
newUpload: 'New Upload',
nativeLanguage: '{msg} Native Language',
},
menu: {
@ -451,7 +452,7 @@ export default {
responsibleArea: 'Responsibel Area',
discount: 'Discount Condition',
sourceNationality: 'Source Nationality',
importNationality: 'import Nationality',
importNationality: 'Import Nationality',
trainingPlace: 'Training Place',
checkpoint: 'Checkpoint',
checkpointEN: 'Checkpoint (EN)',
@ -459,6 +460,10 @@ export default {
citizenId: 'Citizen ID',
citizenIssue: 'Citizen Issue',
citizenExpire: 'Citizen Expire',
agencyStatus: 'Agency Status',
normal: 'Normal',
canceled: 'Canceled',
blacklist: 'Black list',
},
},
customer: {
@ -912,6 +917,9 @@ export default {
code: 'Agencies Code',
group: 'Agencies Group',
name: 'Agencies Name',
contactName: 'Contact Name',
contactTel: 'Contact Telephone',
bankInfo: 'Bank Information',
},
requestList: {
@ -1183,6 +1191,7 @@ export default {
'Product with the same name already exists. If you want to create with this name please select another code.',
userExists: 'User already exits.',
sameNameExists: 'Same name exists.',
samePropertyNameExists: 'Same property name exists.',
validateError: 'Validate Error',
codeMisMatch: 'Code Mismatch',

11
src/i18n/tha.ts
View file

@ -153,6 +153,7 @@ export default {
tableOfContent: 'สารบัญ',
draw: 'วาด',
newUpload: 'อัปโหลดใหม่',
nativeLanguage: '{msg} ภาษาต้นทาง',
},
menu: {
@ -455,6 +456,10 @@ export default {
citizenId: 'เลขที่บัตรประชาชน',
citizenIssue: 'วันที่ออกบัตร',
citizenExpire: 'วันที่หมดอายุ',
agencyStatus: 'สถานะการเป็นเอเจนซี่',
normal: 'ปกติ',
canceled: 'ยกเลิก',
blacklist: 'แบล็คลิสต์',
},
},
customer: {
@ -780,7 +785,7 @@ export default {
branch: 'สาขาที่ออกใบเสนอราคา',
branchVirtual: 'จุดรับบริการที่ออกใบเสนอราคา',
customer: 'ลูกค้า',
newCustomer: 'แรงงานใหม่',
newCustomer: 'ลูกค้าใหม่',
employeeList: 'รายชื่อแรงงาน',
employee: 'แรงงาน',
employeeName: 'ชื่อ-นามสกุล แรงงาน',
@ -903,6 +908,9 @@ export default {
code: 'รหัสหน่วยงาน',
group: 'กลุ่มหน่วยงาน',
name: 'ชื่อหน่วยงาน',
contactName: 'ชื่อผู้ติดต่อ',
contactTel: 'เบอร์โทรผู้ติดต่อ',
bankInfo: 'ข้อมูลธนาคาร',
},
requestList: {
@ -1163,6 +1171,7 @@ export default {
'สินค้าที่มีชื่อเดียวกันมีในระบบแล้ว หากคุณต้องการสร้างด้วยชื่อนี้โปรดเลือกรหัสอื่น',
userExists: 'ชื่อผู้ใช้นี้มีอยู่ในระบบอยู่แล้ว',
sameNameExists: 'ชื่อนี้ถูกใช้ไปแล้ว',
samePropertyNameExists: 'คุณสมบัตินี้มีอยู่ในระบบอยู่แล้ว',
validateError: 'เกิดข้อผิดพลาดจากการตรวจสอบ',
codeMisMatch: 'รหัสไม่ตรงกัน',

18
src/pages/02_personnel-management/MainPage.vue
View file

@ -151,6 +151,8 @@ const defaultFormData = {
citizenExpire: null,
citizenIssue: null,
citizenId: '',
remark: '',
agencyStatus: null,
};
const formData = ref<UserCreate>({
@ -199,6 +201,8 @@ const formData = ref<UserCreate>({
citizenExpire: null,
citizenIssue: null,
citizenId: '',
remark: '',
agencyStatus: null,
});
const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@ -419,6 +423,7 @@ async function onSubmit(excludeDialog?: boolean) {
: '';
const formDataEdit = {
...formData.value,
checkpointEN: formData.value.checkpoint,
status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
} as const;
@ -450,6 +455,7 @@ async function onSubmit(excludeDialog?: boolean) {
: hqId.value
? hqId.value
: '';
formData.value.checkpointEN = formData.value.checkpoint;
const result = await userStore.create(
formData.value,
onCreateImageList.value,
@ -603,6 +609,8 @@ async function assignFormData(idEdit: string) {
(foundUser.citizenIssue && new Date(foundUser.citizenIssue)) || null,
citizenExpire:
(foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null,
remark: foundUser.remark || '',
agencyStatus: foundUser.agencyStatus || '',
};
formData.value.status === 'ACTIVE' || 'CREATED'
@ -1781,10 +1789,11 @@ watch(
v-model:import-nationality="formData.importNationality"
v-model:training-place="formData.trainingPlace"
v-model:checkpoint="formData.checkpoint"
v-model:checkpoint-en="formData.checkpointEN"
v-model:agency-file="agencyFile"
v-model:agency-file-list="agencyFileList"
v-model:user-id="currentUser.id"
v-model:remark="formData.remark"
v-model:agency-status="formData.agencyStatus"
/>
</div>
</div>
@ -1854,7 +1863,6 @@ watch(
<div
class="col"
id="personnel-form"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
@ -1898,7 +1906,7 @@ watch(
? [
{
name: $t('personnel.form.workInformation'),
anchor: 'dialog-info-work',
anchor: 'dialog-form-work',
},
]
: [],
@ -1914,6 +1922,7 @@ watch(
</div>
</div>
<div
id="personnel-form"
class="col-md-10 col-12 full-height scroll"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
@ -1992,7 +2001,8 @@ watch(
v-model:import-nationality="formData.importNationality"
v-model:training-place="formData.trainingPlace"
v-model:checkpoint="formData.checkpoint"
v-model:checkpoint-en="formData.checkpointEN"
v-model:agency-status="formData.agencyStatus"
v-model:remark="formData.remark"
v-model:agency-file="agencyFile"
/>
</div>

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

@ -102,27 +102,33 @@ const optionStore = useOptionStore();
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 { state: employeeFormState, currentFromDataEmployee } =
storeToRefs(employeeFormStore);
const {
fetchListOfOptionBranch,
customerFormUndo,
customerConfirmUnsave,
deleteCustomerById,
validateTabField,
deleteCustomerBranchById,
} = customerFormStore;
const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
employeeFormStore;
const {
state: customerFormState,
currentFormData: customerFormData,
registerAbleBranchOption,
tabFieldRequired,
} = storeToRefs(customerFormStore);
const {
state: employeeFormState,
currentFromDataEmployee,
onCreateImageList,
statusEmployeeCreate,
refreshImageState,
} = storeToRefs(employeeFormStore);
async function init() {
navigatorStore.current.title = 'menu.customer';
@ -209,13 +215,7 @@ const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
// image
const refreshImageState = ref(false);
const imageList = ref<{ selectedImage: string; list: string[] }>();
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
watch(() => route.name, init);
watch(
[currentTab, currentStatus, inputSearch, customerTypeSelected, pageSize],
@ -276,8 +276,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 +292,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;
@ -503,64 +426,6 @@ async function toggleStatusCustomer(id: string, status: boolean) {
await fetchListCustomer(false, $q.screen.xs);
flowStore.rotate();
}
async function deleteEmployeeById(opts: {
id?: string;
type?: 'passport' | 'visa' | 'healthCheck' | 'work';
index?: number;
}) {
dialog({
color: 'negative',
icon: 'mdi-alert',
title: t('dialog.title.confirmDelete'),
actionText: t('general.delete'),
persistent: true,
message: t('dialog.message.confirmDelete'),
action: async () => {
if (opts.type === 'passport' && opts.index !== undefined) {
await employeeFormStore.deletePassport(opts.index);
}
if (opts.type === 'visa' && opts.index !== undefined) {
await employeeFormStore.deleteVisa(opts.index);
}
if (opts.type === 'healthCheck' && opts.index !== undefined) {
await employeeFormStore.deleteHealthCheck(opts.index);
}
if (opts.type === 'work' && opts.index !== undefined) {
await employeeFormStore.deleteWorkHistory(opts.index);
} else {
if (!!opts.id) {
const result = await employeeStore.deleteById(opts.id);
if (result) {
employeeFormState.value.drawerModal = false;
employeeFormState.value.dialogModal = false;
}
}
}
if (route.name !== 'CustomerBranchManagement') {
await fetchListEmployee(
currentTab.value === 'employer'
? {
page: 1,
pageSize: 999,
customerId: customerFormState.value.currentCustomerId,
}
: { fetchStats: true, mobileFetch: $q.screen.xs },
);
flowStore.rotate();
}
},
cancel: () => {},
});
}
async function openHistory(id: string) {
const res = await employeeStore.getEditHistory(id);
employeeHistory.value = res.reverse();
@ -594,64 +459,6 @@ async function editEmployeeFormPersonal(id: string) {
employeeFormState.value.drawerModal = true;
}
function employeeConfirmUnsave(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: () => {
employeeFormStore.resetFormDataEmployee();
onCreateImageList.value = { selectedImage: '', list: [] };
employeeFormState.value.editReadonly = true;
employeeFormState.value.dialogModal = !close;
employeeFormState.value.drawerModal = !close;
},
cancel: () => {},
});
}
function employeeFormUndo(close = true) {
if (employeeFormStore.isFormDataDifferent()) {
return employeeConfirmUnsave(close);
}
employeeFormStore.resetFormDataEmployee();
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';
@ -686,7 +493,7 @@ async function fetchImageList(
// TODO: When in employee form, if select address same as customer then auto fill
watch(
() => employeeFormState.value.formDataEmployeeOwner,
() => employeeFormState.value.currentCustomerBranch,
(e) => {
if (!e) return;
if (employeeFormState.value.formDataEmployeeSameAddr) {
@ -703,21 +510,21 @@ watch(
watch(
() => employeeFormState.value.formDataEmployeeSameAddr,
(isSame) => {
if (!employeeFormState.value.formDataEmployeeOwner) return;
if (!employeeFormState.value.currentCustomerBranch) return;
if (isSame) {
currentFromDataEmployee.value.address =
employeeFormState.value.formDataEmployeeOwner.address;
employeeFormState.value.currentCustomerBranch.address;
currentFromDataEmployee.value.addressEN =
employeeFormState.value.formDataEmployeeOwner.addressEN;
employeeFormState.value.currentCustomerBranch.addressEN;
currentFromDataEmployee.value.provinceId =
employeeFormState.value.formDataEmployeeOwner.provinceId;
employeeFormState.value.currentCustomerBranch.provinceId;
currentFromDataEmployee.value.districtId =
employeeFormState.value.formDataEmployeeOwner.districtId;
employeeFormState.value.currentCustomerBranch.districtId;
currentFromDataEmployee.value.subDistrictId =
employeeFormState.value.formDataEmployeeOwner.subDistrictId;
employeeFormState.value.currentCustomerBranch.subDistrictId;
}
currentFromDataEmployee.value.customerBranchId =
employeeFormState.value.formDataEmployeeOwner.id;
employeeFormState.value.currentCustomerBranch.id;
},
);
@ -1540,7 +1347,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(
@ -1588,7 +1401,23 @@ const emptyCreateDialog = ref(false);
"
@delete="
(item: any) => {
deleteEmployeeById({ id: item.id });
deleteEmployeeById({
id: item.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@toggle-status="
@ -1763,7 +1592,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,
@ -1898,7 +1736,23 @@ const emptyCreateDialog = ref(false);
@edit="(item: any) => editEmployeeFormPersonal(item.id)"
@delete="
(item: any) => {
deleteEmployeeById({ id: item.id });
deleteEmployeeById({
id: item.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@toggle-status="
@ -2036,7 +1890,7 @@ const emptyCreateDialog = ref(false);
async (currentBranch) => {
createEmployeeForm();
await nextTick();
employeeFormState.formDataEmployeeOwner = { ...currentBranch };
employeeFormState.currentBranchId = currentBranch.id;
}
"
v-model:branch="branch"
@ -2265,7 +2119,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 +2292,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) {
@ -2870,12 +2731,30 @@ const emptyCreateDialog = ref(false);
id="btn-info-basic-delete"
icon-only
@click="
() => deleteEmployeeById({ id: currentFromDataEmployee.id })
() =>
deleteEmployeeById({
id: currentFromDataEmployee.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
})
"
type="button"
/>
</div>
</div>
<BasicInformation
no-action
id="form-information"
@ -2888,11 +2767,13 @@ const emptyCreateDialog = ref(false);
title="form.field.basicInformation"
:readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption || []"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
v-model:customer-branch-id="employeeFormState.currentBranchId"
v-model:current-customer-branch="
employeeFormState.currentCustomerBranch
"
v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
class="q-mb-xl"
/>
<FormPerson
@ -2918,6 +2799,7 @@ const emptyCreateDialog = ref(false);
class="q-mb-xl"
/>
<AddressForm
disabledRule
id="form-personal-address"
prefix-id="form-employee"
:readonly="!employeeFormState.isEmployeeEdit"
@ -2940,7 +2822,7 @@ const emptyCreateDialog = ref(false);
class="q-mb-xl"
/>
<div class="row q-mb-md" id="drawer-info-file-upload">
<div class="row q-mb-md" id="form-info-file-upload">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
@ -3448,7 +3330,24 @@ const emptyCreateDialog = ref(false);
@click.stop="
() => {
employeeFormState.currentIndexPassport = index;
deleteEmployeeById({ type: 'passport', index });
deleteEmployeeById({
type: 'passport',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
type="button"
@ -3599,7 +3498,24 @@ const emptyCreateDialog = ref(false);
@click.stop="
() => {
employeeFormState.currentIndexVisa = index;
deleteEmployeeById({ type: 'visa', index });
deleteEmployeeById({
type: 'visa',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
type="button"
@ -3671,7 +3587,23 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexCheckup = index;
deleteEmployeeById({ type: 'healthCheck', index });
deleteEmployeeById({
type: 'healthCheck',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId: customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@save="
@ -3757,7 +3689,23 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexWorkHistory = index;
deleteEmployeeById({ type: 'work', index });
deleteEmployeeById({
type: 'work',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId: customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@save="
@ -4224,7 +4172,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"
@ -4821,7 +4772,23 @@ const emptyCreateDialog = ref(false);
icon-only
@click="
() =>
deleteEmployeeById({ id: currentFromDataEmployee.id })
deleteEmployeeById({
id: currentFromDataEmployee.id,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
})
"
type="button"
/>
@ -4835,16 +4802,13 @@ const emptyCreateDialog = ref(false);
outlined
title="form.field.basicInformation"
:readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch="
employeeFormState.formDataEmployeeOwner
v-model:customer-branch-id="employeeFormState.currentBranchId"
v-model:current-customer-branch="
employeeFormState.currentCustomerBranch
"
v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="
employeeFormStore.employeeFilterOwnerBranch
"
class="q-mb-xl"
/>
<FormPerson
@ -4871,6 +4835,7 @@ const emptyCreateDialog = ref(false);
<AddressForm
id="drawer-form-personal-address"
employee
disabledRule
v-model:address="currentFromDataEmployee.address"
v-model:address-en="currentFromDataEmployee.addressEN"
v-model:moo="currentFromDataEmployee.moo"
@ -5450,6 +5415,20 @@ const emptyCreateDialog = ref(false);
deleteEmployeeById({
type: 'passport',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@ -5621,7 +5600,24 @@ const emptyCreateDialog = ref(false);
icon-only
@click.stop="
() => {
deleteEmployeeById({ type: 'visa', index });
deleteEmployeeById({
type: 'visa',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
type="button"
@ -5742,7 +5738,24 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexCheckup = index;
deleteEmployeeById({ type: 'healthCheck', index });
deleteEmployeeById({
type: 'healthCheck',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
/>
@ -5812,7 +5825,24 @@ const emptyCreateDialog = ref(false);
@delete="
(index) => {
employeeFormState.currentIndexWorkHistory = index;
deleteEmployeeById({ type: 'work', index });
deleteEmployeeById({
type: 'work',
index,
fetch: async () =>
await fetchListEmployee(
currentTab === 'employer'
? {
page: 1,
pageSize: 999,
customerId:
customerFormState.currentCustomerId,
}
: {
fetchStats: true,
mobileFetch: $q.screen.xs,
},
),
});
}
"
@save="

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

@ -1,22 +1,50 @@
import { ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { useI18n } from 'vue-i18n';
import {
CustomerBranch,
CustomerBranchCreate,
CustomerCreate,
CustomerType,
} 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';
import { useRoute } from 'vue-router';
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 +388,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 +509,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;
@ -581,11 +725,23 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
});
export const useEmployeeForm = defineStore('form-employee', () => {
const { t } = useI18n();
const customerStore = useCustomerStore();
const employeeStore = useEmployeeStore();
const flowStore = useFlowStore();
const branchStore = useMyBranch();
const route = useRoute();
const refreshImageState = ref(false);
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
const statusEmployeeCreate = ref<boolean>(false);
const state = ref<{
dialogType: 'info' | 'create' | 'edit';
imageDialog: boolean;
@ -594,6 +750,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
drawerModal: boolean;
isImageEdit: boolean;
currentBranchId: string;
currentCustomerBranch?: CustomerBranch;
currentEmployeeCode: string;
currentEmployee: Employee | null;
currentIndexPassport: number;
@ -627,6 +785,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
| undefined;
ocr: boolean;
}>({
currentBranchId: '',
isImageEdit: false,
currentIndexPassport: -1,
currentIndexVisa: -1,
@ -1089,6 +1248,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}) {
let employeeId: string | undefined = undefined;
currentFromDataEmployee.value.firstName =
currentFromDataEmployee.value.firstName.trim();
currentFromDataEmployee.value.middleName =
@ -1107,7 +1268,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
const res = await employeeStore.create(
{
...currentFromDataEmployee.value,
customerBranchId: state.value.formDataEmployeeOwner?.id || '',
customerBranchId: state.value.currentBranchId || '',
employeeWork: [],
employeeCheckup: [],
@ -1117,6 +1278,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
);
if (res) {
employeeId = res.id;
await assignFormDataEmployee(res.id);
currentFromDataEmployee.value.id = res.id;
state.value.statusSavePersonal = true;
@ -1138,10 +1300,12 @@ export const useEmployeeForm = defineStore('form-employee', () => {
},
);
if (res) {
employeeId = res.id;
await assignFormDataEmployee(res.id);
state.value.statusSavePersonal = true;
}
}
return employeeId;
}
async function assignFormDataEmployee(id?: string) {
@ -1183,7 +1347,19 @@ export const useEmployeeForm = defineStore('form-employee', () => {
employeePassport: structuredClone(
payload.employeePassport?.length === 0
? state.value.dialogModal
? defaultFormData.employeePassport
? defaultFormData.employeePassport.map((v) => ({
...v,
namePrefix: payload.namePrefix,
firstName: payload.firstName,
firstNameEN: payload.firstNameEN,
middleName: payload.middleName,
middleNameEN: payload.middleNameEN,
lastName: payload.lastName,
lastNameEN: payload.lastNameEN,
gender: payload.gender,
nationality: payload.nationality,
birthDate: payload.dateOfBirth,
}))
: []
: payload.employeePassport,
),
@ -1270,6 +1446,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
state.value.currentIndexVisa = -1;
}
state.value.currentBranchId = payload.customerBranchId;
const foundBranch = await customerStore.fetchListCustomerBranchById(
payload.customerBranchId,
);
@ -1325,17 +1503,17 @@ export const useEmployeeForm = defineStore('form-employee', () => {
issueDate: new Date(),
type: '',
expireDate: new Date(),
birthDate: new Date(),
birthDate: currentFromDataEmployee.value.dateOfBirth,
workerStatus: '',
nationality: '',
gender: '',
lastNameEN: '',
lastName: '',
middleNameEN: '',
middleName: '',
firstNameEN: '',
firstName: '',
namePrefix: '',
nationality: currentFromDataEmployee.value.nationality,
gender: currentFromDataEmployee.value.gender,
lastNameEN: currentFromDataEmployee.value.lastNameEN,
lastName: currentFromDataEmployee.value.lastName,
middleNameEN: currentFromDataEmployee.value.middleNameEN,
middleName: currentFromDataEmployee.value.middleName,
firstNameEN: currentFromDataEmployee.value.firstNameEN,
firstName: currentFromDataEmployee.value.firstName,
namePrefix: currentFromDataEmployee.value.namePrefix,
number: '',
});
@ -1396,7 +1574,88 @@ export const useEmployeeForm = defineStore('form-employee', () => {
(currentFromDataEmployee.value.employeeWork?.length || 0) - 1;
}
function employeeFormUndo(close = true) {
if (isFormDataDifferent()) {
return employeeConfirmUnsave(close);
}
resetFormDataEmployee();
state.value.editReadonly = true;
}
function employeeConfirmUnsave(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: () => {
resetFormDataEmployee();
onCreateImageList.value = { selectedImage: '', list: [] };
state.value.editReadonly = true;
state.value.dialogModal = !close;
state.value.drawerModal = !close;
},
cancel: () => {},
});
}
async function deleteEmployeeById(opts: {
id?: string;
type?: 'passport' | 'visa' | 'healthCheck' | 'work';
index?: number;
fetch?: (...args: unknown[]) => unknown;
removeArray?: (...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 () => {
if (opts.type === 'passport' && opts.index !== undefined) {
await deletePassport(opts.index);
}
if (opts.type === 'visa' && opts.index !== undefined) {
await deleteVisa(opts.index);
}
if (opts.type === 'healthCheck' && opts.index !== undefined) {
await deleteHealthCheck(opts.index);
}
if (opts.type === 'work' && opts.index !== undefined) {
await deleteWorkHistory(opts.index);
} else {
if (!!opts.id) {
const result = await employeeStore.deleteById(opts.id);
if (result) {
state.value.drawerModal = false;
state.value.dialogModal = false;
}
}
}
if (route.name !== 'CustomerBranchManagement') {
await opts.fetch?.();
flowStore.rotate();
}
opts.removeArray?.();
},
cancel: () => {},
});
}
return {
refreshImageState,
statusEmployeeCreate,
onCreateImageList,
state,
currentFromDataEmployee,
resetEmployeeData,
@ -1423,5 +1682,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
employeeFilterOwnerBranch,
isFormDataDifferent,
employeeFormUndo,
employeeConfirmUnsave,
deleteEmployeeById,
};
});

33
src/pages/04_property-managment/MainPage.vue
View file

@ -14,19 +14,22 @@ import { FloatingActionButton, PaginationComponent } from 'src/components';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
import PropertyDialog from './PropertyDialog.vue';
import { Property } from 'src/stores/property/types';
import { dialog } from 'src/stores/utils';
import { dialog, toCamelCase } from 'src/stores/utils';
import CreateButton from 'src/components/AddButton.vue';
import useOptionStore from 'stores/options';
const { t } = useI18n();
const { t, locale } = useI18n();
const $q = useQuasar();
const navigatorStore = useNavigator();
const propertyStore = useProperty();
const optionStore = useOptionStore();
const {
data: propertyData,
page: propertyPage,
pageSize: propertyPageSize,
pageMax: propertyPageMax,
} = storeToRefs(propertyStore);
const { globalOption } = storeToRefs(optionStore);
const currPropertyData = ref<Property>();
const formProperty = ref<Property>({
@ -146,6 +149,7 @@ async function fetchPropertyList(mobileFetch?: boolean) {
function triggerDialog(type: 'add' | 'edit' | 'view') {
if (type === 'add') {
resetForm();
pageState.addModal = true;
pageState.isDrawerEdit = true;
}
@ -271,6 +275,31 @@ async function submit() {
});
}
await fetchPropertyList($q.screen.xs);
// assign new property to global option
const propList = propertyData.value.map((v) => {
return {
label: locale.value === 'eng' ? v.nameEN : v.name,
value: toCamelCase(v.nameEN),
type: v.type.type,
};
});
const existingValues = new Set(
globalOption.value.propertiesField.map(
(item: { value: string }) => item.value,
),
);
const newProps = propList.filter((prop) => !existingValues.has(prop.value));
if (newProps) {
globalOption.value.propertiesField.splice(
globalOption.value.propertiesField.length - 4,
0,
...newProps,
);
}
currPropertyData.value;
resetForm();
}

487
src/pages/05_quotation/MainPage.vue
View file

@ -2,10 +2,12 @@
import { onMounted, reactive, ref, watch, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
// NOTE: Import stores
import useCustomerStore from 'stores/customer';
import { useQuotationStore } from 'src/stores/quotations';
import { isRoleInclude } from 'stores/utils';
import { dialog, isRoleInclude, notify } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import useFlowStore from 'src/stores/flow';
import useMyBranch from 'stores/my-branch';
@ -38,26 +40,43 @@ import { AddressForm } from 'components/form';
import {
EmployerFormBusiness,
EmployerFormAbout,
EmployerFormBasicInfo,
EmployerFormBranch,
} from 'src/pages/03_customer-management/components';
import { useCustomerForm } from 'src/pages/03_customer-management/form';
import { Quotation } from 'src/stores/quotations/types';
import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
import { DialogContainer, DialogHeader } from 'src/components/dialog';
const { t, locale } = useI18n();
const $q = useQuasar();
const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
const flowStore = useFlowStore();
const userBranch = useMyBranch();
const navigatorStore = useNavigator();
const customerStore = useCustomerStore();
const {
fetchListOfOptionBranch,
customerFormUndo,
deleteCustomerById,
validateTabField,
deleteCustomerBranchById,
} = customerFormStore;
const {
currentFormData: quotationFormData,
currentFormState: quotationFormState,
} = storeToRefs(quotationFormStore);
const { state: customerFormState, currentFormData: customerFormData } =
storeToRefs(customerFormStore);
const {
state: customerFormState,
currentFormData: customerFormData,
registerAbleBranchOption,
tabFieldRequired,
} = storeToRefs(customerFormStore);
const { currentMyBranch } = storeToRefs(userBranch);
const fieldSelectedOption = computed(() => {
@ -170,8 +189,7 @@ async function submitCustomer() {
customerFormData.value.registeredBranchId = isRoleInclude(['system'])
? branchId.value
: currentMyBranch.value.id;
await customerFormStore.submitFormCustomer();
await customerFormStore.addCurrentCustomerBranch();
customerFormState.value.dialogModal = false;
// customerFormState.value.dialogType = 'info';
}
@ -241,6 +259,16 @@ const {
stats: quotationStats,
} = storeToRefs(quotationStore);
const customerNameInfo = computed(() => {
if (customerFormData.value.customerBranch === undefined) return;
const name =
locale.value === 'eng'
? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
: `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
return name || '-';
});
onMounted(async () => {
pageState.gridView = $q.screen.lt.md ? true : false;
navigatorStore.current.title = 'quotation.title';
@ -911,30 +939,49 @@ async function storeDataLocal(id: string) {
<!-- NOTE: START - Customer / Employer Form -->
<DialogForm
hide-footer
ref="formDialogRef"
v-model:modal="customerFormState.dialogModal"
:title="
customerFormState.dialogType === 'create'
? $t(`general.add`, {
text: `${$t('customer.employer')} `,
})
: `${$t('customer.employer')} `
"
:submit="
() => {
submitCustomer();
<DialogContainer
:model-value="customerFormState.dialogModal"
:on-open="
async () => {
customerFormStore.resetForm(customerFormState.dialogType === 'create');
onCreateImageList = { selectedImage: '', list: [] };
customerFormState.customerImageUrl = '';
await fetchListOfOptionBranch();
await customerFormStore.addCurrentCustomerBranch();
}
"
:close="
:on-close="
() => {
customerFormState.dialogModal = false;
customerFormStore.resetForm(true);
setDefaultCustomer();
onCreateImageList = { selectedImage: '', list: [] };
}
"
>
<template #header>
<DialogHeader
:title="
customerFormState.dialogType === 'create'
? $t(`general.add`, {
text: `${$t('customer.employer')} `,
})
: `${$t('customer.employer')} `
"
>
<template #title-after>
<span
:style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
>
:
{{
customerFormData.customerType === 'CORP'
? $t('customer.employerLegalEntity')
: $t('customer.employerNaturalPerson')
}}
</span>
</template>
</DialogHeader>
</template>
<div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
@ -942,10 +989,10 @@ async function storeDataLocal(id: string) {
}"
>
<ProfileBanner
prefix="dialog"
v-if="customerFormData.customerBranch !== undefined"
active
hide-fade
prefix="dialog"
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
:img="
customerFormState.customerImageUrl ||
@ -961,13 +1008,13 @@ async function storeDataLocal(id: string) {
"
:title="
customerFormData.customerType === 'PERS'
? `${customerFormData.customerBranch[0]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
: customerFormData.customerBranch[0]?.registerName || ''
? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
: customerFormData.customerBranch[0]?.registerName
"
:caption="
customerFormData.customerType === 'PERS'
? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
: customerFormData.customerBranch[0]?.registerNameEN || ''
? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
: customerFormData.customerBranch[0]?.registerNameEN
"
@view="
() => {
@ -981,143 +1028,295 @@ async function storeDataLocal(id: string) {
/>
</div>
<div
class="col"
style="flex: 1; width: 100%; overflow-y: auto"
id="customer-form"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-sm': !$q.screen.gt.sm,
}"
>
<div
style="overflow-y: auto"
class="row full-width full-height surface-1 rounded bordered relative-position"
>
<div class="col surface-1 full-height rounded bordered scroll row">
<div
:class="{
'q-py-md q-px-lg': $q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm,
}"
style="position: absolute; z-index: 99999; top: 0; right: 0"
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
<div
v-if="customerFormData.status !== 'INACTIVE'"
class="surface-1 row rounded"
>
<SaveButton
v-if="
customerFormState.dialogType === 'edit' ||
customerFormState.dialogType === 'create'
"
id="btn-info-basic-save"
icon-only
type="submit"
/>
<div class="q-py-md q-pl-md q-pr-sm">
<SideMenu
:menu="[
{
name: $t('form.field.basicInformation'),
anchor: 'form-basic-info-customer',
},
{
name: $t('customer.form.group.branch'),
anchor: 'form-branch-customer-branch',
useBtn: true,
},
...(customerFormData.customerBranch?.map((v, i) => ({
name:
i === 0
? $t('customer.form.headQuarters.title')
: $t('customer.form.branch.title', {
name: i,
}),
anchor: `form-branch-customer-no-${i}`,
sub: true,
})) || []),
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#customer-form-content"
>
<template v-slot:btn-form-branch-customer-branch>
<q-btn
dense
flat
icon="mdi-plus"
size="sm"
rounded
padding="0px 0px"
style="color: var(--stone-9)"
@click.stop="submitCustomer()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</template>
</SideMenu>
</div>
</div>
<div
class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
v-if="$q.screen.gt.sm"
>
<SideMenu
:menu="[
{
name: $t('form.customerInformation'),
anchor: 'form-information',
},
{
name: $t('customerBranch.tab.business'),
anchor: 'form-business',
},
{
name: $t('form.address'),
anchor: 'form-address',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#branch-form"
/>
</div>
<div
class="col-12 col-md-10 full-height q-col-gutter-sm"
class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
id="branch-form"
style="overflow-y: auto"
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<EmployerFormAbout
id="form-information"
show-title
:index="'0'"
:customerType="customerFormData.customerType"
:readonly="customerFormState.dialogType === 'info'"
v-model:citizen-id="formDataCustomerBranch.citizenId"
v-model:prefix-name="formDataCustomerBranch.namePrefix"
v-model:first-name="formDataCustomerBranch.firstName"
v-model:last-name="formDataCustomerBranch.lastName"
v-model:first-name-en="formDataCustomerBranch.firstNameEN"
v-model:last-name-en="formDataCustomerBranch.lastNameEN"
v-model:gender="formDataCustomerBranch.gender"
v-model:birth-date="formDataCustomerBranch.birthDate"
v-model:customer-name="formDataCustomerBranch.customerName"
v-model:legal-person-no="formDataCustomerBranch.legalPersonNo"
v-model:register-name="formDataCustomerBranch.registerName"
v-model:register-name-en="formDataCustomerBranch.registerNameEN"
v-model:register-date="formDataCustomerBranch.registerDate"
v-model:authorized-capital="
formDataCustomerBranch.authorizedCapital
<EmployerFormBasicInfo
prefixId="form"
v-if="
customerFormData.customerBranch !== undefined &&
customerFormData.customerBranch.length > 0
"
v-model:telephone-no="formDataCustomerBranch.telephoneNo"
class="q-mb-xl"
:readonly="
(customerFormState.dialogType === 'edit' &&
customerFormState.readonly === true) ||
customerFormState.dialogType === 'info'
"
:action-disabled="customerFormState.branchIndex !== -1"
id="form-basic-info-customer"
:onCreate="customerFormState.dialogType === 'create'"
@edit="
(customerFormState.dialogType = 'edit'),
(customerFormState.readonly = false)
"
@cancel="() => customerFormUndo(false)"
@delete="
customerFormState.editCustomerId &&
deleteCustomerById(customerFormState.editCustomerId)
"
:customer-type="customerFormData.customerType"
v-model:registered-branch-id="customerFormData.registeredBranchId"
v-model:customer-name="customerNameInfo"
v-model:register-name="
customerFormData.customerBranch[0].registerName
"
v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
v-model:legal-person-no="
customerFormData.customerBranch[0].legalPersonNo
"
v-model:business-type="
customerFormData.customerBranch[0].businessType
"
v-model:job-position="
customerFormData.customerBranch[0].jobPosition
"
v-model:telephone-no="
customerFormData.customerBranch[0].telephoneNo
"
v-model:branch-options="registerAbleBranchOption"
/>
<div class="row q-col-gutter-sm" id="form-branch-customer-branch">
<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-outline"
style="background-color: var(--surface-3)"
/>
<span>{{ $t('customer.form.group.branch') }}</span>
</div>
<EmployerFormBusiness
id="form-business"
show-title
prefix-id="dialog"
dense
outlined
:readonly="customerFormState.dialogType === 'info'"
v-model:bussiness-type="formDataCustomerBranch.businessType"
v-model:job-position="formDataCustomerBranch.jobPosition"
v-model:job-description="formDataCustomerBranch.jobDescription"
v-model:pay-date="formDataCustomerBranch.payDate"
v-model:pay-date-en="formDataCustomerBranch.payDateEN"
v-model:wage-rate="formDataCustomerBranch.wageRate"
v-model:wage-rate-text="formDataCustomerBranch.wageRateText"
/>
<AddressForm
id="form-address"
prefix-id="employer"
dense
outlined
use-employment
:title="$t('form.address')"
:addressTitle="$t('form.address')"
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
:readonly="customerFormState.dialogType === 'info'"
v-model:bussiness-type="formDataCustomerBranch.businessType"
v-model:address="formDataCustomerBranch.address"
v-model:address-en="formDataCustomerBranch.addressEN"
v-model:street="formDataCustomerBranch.street"
v-model:street-en="formDataCustomerBranch.streetEN"
v-model:moo="formDataCustomerBranch.moo"
v-model:moo-en="formDataCustomerBranch.mooEN"
v-model:soi="formDataCustomerBranch.soi"
v-model:soi-en="formDataCustomerBranch.soiEN"
v-model:province-id="formDataCustomerBranch.provinceId"
v-model:district-id="formDataCustomerBranch.districtId"
v-model:sub-district-id="formDataCustomerBranch.subDistrictId"
v-model:home-code="formDataCustomerBranch.homeCode"
/>
<template
v-for="(_, idx) in customerFormData.customerBranch"
:key="idx"
>
<!-- v-if="customerFormData.customerBranch" -->
<q-form
class="full-width"
greedy
@submit.prevent="
async () => {
if (!customerFormData.customerBranch) return;
if (customerFormData.customerType === 'PERS') {
tabFieldRequired.main = [
'citizenId',
'namePrefix',
'firstName',
'firstNameEN',
'lastName',
'lastNameEN',
'gender',
'birthDate',
];
}
if (customerFormData.customerType === 'CORP') {
tabFieldRequired.main = ['legalPersonNo', 'registerName'];
}
let tapIsUndefined = validateTabField(
customerFormData.customerBranch?.[idx],
tabFieldRequired,
);
if (tapIsUndefined.length > 0) {
return dialog({
color: 'warning',
icon: 'mdi-alert',
title: t('dialog.title.incompleteDataEntry'),
actionText: t('general.ok'),
persistent: true,
message: t('dialog.message.incompleteDataEntry', {
tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
}),
action: async () => {
return;
},
});
}
if (!customerFormData.customerBranch[idx].id) {
let res: any;
if (idx === 0) {
res =
await customerFormStore.submitFormCustomer(
onCreateImageList,
);
} else {
res = await customerStore.createBranch({
...customerFormData.customerBranch[idx],
customerId: customerFormState.editCustomerId || '',
id: undefined,
});
}
if (res) {
customerFormState.readonly = true;
notify('create', $t('general.success'));
}
} else {
if (!customerFormState.editCustomerId) return;
await customerStore.editBranchById(
customerFormData.customerBranch[idx].id || '',
{
...customerFormData.customerBranch[idx],
id: undefined,
},
);
}
const uploadResult =
customerFormData.customerBranch[idx].file?.map(
async (v) => {
if (!v.file) return;
const ext = v.file.name.split('.').at(-1);
let filename = v.group + '-' + new Date().getTime();
if (ext) filename += `.${ext}`;
const res = await customerStore.putAttachment({
branchId:
customerFormData.customerBranch?.[idx].id || '',
file: v.file,
filename,
});
if (res) {
await customerFormStore.assignFormData(
customerFormState.editCustomerId,
);
}
},
) || [];
for (const r of uploadResult) await r;
await customerFormStore.assignFormData(
customerFormState.editCustomerId,
);
customerFormStore.resetForm();
}
"
>
<!-- v-if="!!customerFormState.editCustomerId" -->
<EmployerFormBranch
:index="idx"
prefixId="form"
v-if="customerFormData.customerBranch"
v-model:customer="customerFormData"
v-model:customer-branch="customerFormData.customerBranch[idx]"
:onCreate="customerFormState.dialogType === 'create'"
:customer-type="customerFormData.customerType"
:readonly="customerFormState.branchIndex !== idx"
:action-disabled="
!customerFormState.readonly ||
(customerFormState.branchIndex !== -1 &&
customerFormState.branchIndex !== idx)
"
@edit="() => (customerFormState.branchIndex = idx)"
@cancel="() => customerFormUndo(false)"
@delete="
async () => {
if (!customerFormState.editCustomerId) return;
if (idx === 0) {
deleteCustomerById(customerFormState.editCustomerId);
return;
}
if (!!customerFormData.customerBranch?.[idx].id) {
const action = await deleteCustomerBranchById(
customerFormData.customerBranch[idx].id || '',
);
if (action) {
await customerFormStore.assignFormData(
customerFormState.editCustomerId,
);
}
customerFormStore.resetForm();
}
}
"
@save="() => {}"
/>
</q-form>
</template>
</div>
</div>
</div>
</div>
</DialogForm>
</DialogContainer>
</template>
<style scoped></style>

9
src/pages/05_quotation/QuotationForm.vue
View file

@ -164,7 +164,9 @@ const selectedWorkerItem = computed(() => {
employeeName:
locale.value === Lang.English
? `${e.firstNameEN} ${e.lastNameEN}`
: `${e.firstName} ${e.lastName}`,
: e.firstName
? `${e.firstName} ${e.lastName}`
: `${e.firstNameEN} ${e.lastNameEN}`,
birthDate: dateFormatJS({ date: e.dateOfBirth }),
gender: e.gender,
age: calculateAge(e.dateOfBirth),
@ -590,8 +592,9 @@ async function convertDataToFormSubmit() {
}
}),
...newWorkerList.value.map((v) => {
const { attachment, ...payload } = v;
return payload;
{
return v.id;
}
}),
]),
);

1632
src/pages/05_quotation/QuotationFormWorkerSelect.vue
View file

File diff suppressed because it is too large Load diff

1
src/pages/05_quotation/form.ts
View file

@ -221,6 +221,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
newWorkerList.value.push({
//passportNo: obj.data.passportNo,
//documentExpireDate: obj.data.documentExpireDate,
id: obj.data.id,
lastNameEN: obj.data.lastNameEN,
lastName: obj.data.lastName,
middleNameEN: obj.data.middleNameEN,

61
src/pages/07_agencies-management/AgenciesDialog.vue
View file

@ -10,6 +10,7 @@ import DrawerInfo from 'src/components/DrawerInfo.vue';
import DialogForm from 'src/components/DialogForm.vue';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import SideMenu from 'src/components/SideMenu.vue';
import FormBank from 'src/components/01_branch-management/FormBank.vue';
import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
import {
UndoButton,
@ -19,6 +20,7 @@ import {
} from 'src/components/button';
import AddressForm from 'src/components/form/AddressForm.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
import { BankBook } from 'src/stores/branch/types';
const institutionStore = useInstitution();
@ -73,6 +75,9 @@ const data = defineModel<InstitutionPayload>('data', {
group: '',
name: '',
nameEN: '',
contactName: '',
contactEmail: '',
contactTel: '',
code: '',
addressEN: '',
address: '',
@ -88,6 +93,19 @@ const data = defineModel<InstitutionPayload>('data', {
selectedImage: '',
},
});
const formBankBook = defineModel<BankBook[]>('formBankBook', {
default: [
{
bankName: '',
accountNumber: '',
bankBranch: '',
accountName: '',
accountType: '',
currentlyUse: true,
bankUrl: '',
},
],
});
function viewImage() {
imageState.imageDialog = true;
@ -237,11 +255,15 @@ watch(
:menu="[
{
name: $t('form.field.basicInformation'),
anchor: 'agencies-basic-info',
anchor: 'agencies-form-basic-info',
},
{
name: $t('general.address'),
anchor: 'agencies-address-info',
anchor: 'agencies-form-address-info',
},
{
name: $t('agencies.bankInfo'),
anchor: 'agencies-form-bank-info',
},
]"
background="transparent"
@ -275,14 +297,17 @@ watch(
</div>
</div>
<FormBasicInfoAgencies
id="agencies-basic-info"
id="agencies-form-basic-info"
class="q-mb-xl"
v-model:group="data.group"
v-model:name="data.name"
v-model:name-en="data.nameEN"
v-model:contact-name="data.contactName"
v-model:email="data.contactEmail"
v-model:contact-tel="data.contactTel"
/>
<AddressForm
id="agencies-address-info"
id="agencies-form-address-info"
dense
:prefix-id="''"
v-model:address="data.address"
@ -297,6 +322,14 @@ watch(
v-model:district-id="data.districtId"
v-model:sub-district-id="data.subDistrictId"
/>
<FormBank
id="agencies-form-bank-info"
title="agencies.bankInfo"
class="q-pt-xl"
dense
single
v-model:bank-book-list="formBankBook"
/>
</div>
</div>
</DialogForm>
@ -427,13 +460,17 @@ watch(
name: $t('general.address'),
anchor: 'agencies-address-info',
},
{
name: $t('agencies.bankInfo'),
anchor: 'agencies-bank-info',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#agencies-form-content"
scroll-element="#agencies-view-content"
/>
</div>
</div>
@ -444,7 +481,7 @@ watch(
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
id="user-form-content"
id="agencies-view-content"
style="height: 100%; max-height: 100; overflow-y: auto"
>
<FormBasicInfoAgencies
@ -455,6 +492,9 @@ watch(
v-model:group="data.group"
v-model:name="data.name"
v-model:name-en="data.nameEN"
v-model:contact-name="data.contactName"
v-model:email="data.contactEmail"
v-model:contact-tel="data.contactTel"
/>
<AddressForm
id="agencies-address-info"
@ -473,6 +513,15 @@ watch(
v-model:district-id="data.districtId"
v-model:sub-district-id="data.subDistrictId"
/>
<FormBank
id="agencies-bank-info"
title="agencies.bankInfo"
class="q-pt-xl"
dense
single
:readonly
v-model:bank-book-list="formBankBook"
/>
</div>
</div>
</div>

38
src/pages/07_agencies-management/MainPage.vue
View file

@ -85,6 +85,9 @@ const blankFormData: InstitutionPayload = {
code: '',
name: '',
nameEN: '',
contactName: '',
contactEmail: '',
contactTel: '',
addressEN: '',
address: '',
soi: '',
@ -98,6 +101,16 @@ const blankFormData: InstitutionPayload = {
provinceId: '',
selectedImage: '',
status: 'CREATED',
bank: [
{
bankName: '',
accountNumber: '',
bankBranch: '',
accountName: '',
accountType: '',
currentlyUse: true,
},
],
};
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
@ -160,6 +173,19 @@ function assignFormData(data: Institution) {
provinceId: data.provinceId,
selectedImage: data.selectedImage,
status: data.status,
contactEmail: data.contactEmail,
contactName: data.contactName,
contactTel: data.contactTel,
bank: [
{
bankName: data.bank[0]?.bankName,
accountNumber: data.bank[0]?.accountNumber,
bankBranch: data.bank[0]?.bankBranch,
accountName: data.bank[0]?.accountName,
accountType: data.bank[0]?.accountType,
currentlyUse: data.bank[0]?.currentlyUse,
},
],
};
}
@ -169,6 +195,9 @@ async function submit(opt?: { selectedImage: string }) {
code: formData.value.code,
name: formData.value.name,
nameEN: formData.value.nameEN,
contactName: formData.value.contactName,
contactEmail: formData.value.contactEmail,
contactTel: formData.value.contactTel,
addressEN: formData.value.addressEN,
address: formData.value.address,
soi: formData.value.soi,
@ -181,6 +210,14 @@ async function submit(opt?: { selectedImage: string }) {
districtId: formData.value.districtId,
provinceId: formData.value.provinceId,
status: formData.value.status,
bank: formData.value.bank.map((v) => ({
bankName: v.bankName,
accountNumber: v.accountNumber,
bankBranch: v.bankBranch,
accountName: v.accountName,
accountType: v.accountType,
currentlyUse: v.currentlyUse,
})),
};
if (
(pageState.isDrawerEdit && currAgenciesData.value?.id) ||
@ -922,6 +959,7 @@ watch(
v-model="pageState.addModal"
v-model:drawer-model="pageState.viewDrawer"
v-model:data="formData"
v-model:form-bank-book="formData.bank"
v-model:on-create-image-list="onCreateImageList"
/>
</template>

11
src/stores/institution/types.ts
View file

@ -1,4 +1,5 @@
import { District, Province, SubDistrict } from '../address';
import { BankBook } from '../branch/types';
import { Status } from '../types';
export type Institution = {
@ -25,6 +26,11 @@ export type Institution = {
districtId: string;
provinceId: string;
status: Status;
contactName?: string | null;
contactEmail?: string | null;
contactTel?: string | null;
bank: BankBook[];
};
export type InstitutionPayload = {
@ -34,6 +40,11 @@ export type InstitutionPayload = {
group?: string;
selectedImage?: string | null;
contactName?: string | null;
contactEmail?: string | null;
contactTel?: string | null;
bank: BankBook[];
addressEN: string;
address: string;
soi?: string | null;

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

@ -75,6 +75,7 @@ const useOptionStore = defineStore('optionStore', () => {
}
return {
rawOption,
globalOption,
mapOption,
};

12
src/stores/user/types.ts
View file

@ -57,6 +57,9 @@ export type User = {
citizenIssue?: Date | null;
citizenId: string;
branch: Branch[];
remark?: string;
agencyStatus?: AgencyStatus;
};
export type UserCreate = {
@ -105,8 +108,17 @@ export type UserCreate = {
citizenExpire?: Date | null;
citizenIssue?: Date | null;
citizenId: string;
remark?: string;
agencyStatus?: AgencyStatus | string;
};
export enum AgencyStatus {
Normal = 'Normal',
Canceled = 'Canceled',
Blacklist = 'Blacklist',
}
export type UserAttachment = {
name: string;
url: string;

26
src/utils/address.ts
View file

@ -19,34 +19,34 @@ export function formatAddress(opt: {
let addressParts: string[];
if (opt.en) {
// en
addressParts = [`${opt.addressEN},`];
if (opt.mooEN) addressParts.push(`Moo ${opt.mooEN},`);
if (opt.soiEN) addressParts.push(`Soi ${opt.soiEN},`);
addressParts = [`${opt.addressEN}`];
if (opt.mooEN) addressParts.push(`Moo ${opt.mooEN}`);
if (opt.soiEN) addressParts.push(`Soi ${opt.soiEN}`);
if (opt.streetEN) addressParts.push(`${opt.streetEN} Rd.`);
if (opt.subDistrict) {
addressParts.push(`${opt.subDistrict.nameEN} sub-district,`);
addressParts.push(`${opt.subDistrict.nameEN} sub-district`);
}
if (opt.district) addressParts.push(`${opt.district.nameEN} district,`);
if (opt.province) addressParts.push(`${opt.province.nameEN},`);
if (opt.district) addressParts.push(`${opt.district.nameEN} distric`);
if (opt.province) addressParts.push(`${opt.province.nameEN}`);
} else {
// th
addressParts = [`${opt.address},`];
if (opt.moo) addressParts.push(`หมู่ ${opt.moo},`);
if (opt.soi) addressParts.push(`ซอย ${opt.soi},`);
if (opt.street) addressParts.push(`ถนน${opt.street},`);
addressParts = [`${opt.address}`];
if (opt.moo) addressParts.push(`หมู่ ${opt.moo}`);
if (opt.soi) addressParts.push(`ซอย ${opt.soi}`);
if (opt.street) addressParts.push(`ถนน${opt.street}`);
if (opt.subDistrict) {
addressParts.push(
`${opt.province?.id === '10' ? 'แขวง' : 'ตำบล'}${opt.subDistrict.name},`,
`${opt.province?.id === '10' ? 'แขวง' : 'ตำบล'}${opt.subDistrict.name}`,
);
}
if (opt.district) {
addressParts.push(
`${opt.province?.id === '10' ? 'เขต' : 'อำเภอ'}${opt.district.name},`,
`${opt.province?.id === '10' ? 'เขต' : 'อำเภอ'}${opt.district.name}`,
);
}
if (opt.province) addressParts.push(`จังหวัด${opt.province.name},`);
if (opt.province) addressParts.push(`จังหวัด${opt.province.name}`);
// addressParts.push(
// `${opt.province.id === '10' ? t('address.subArea') : t('address.subDistrict')}${opt.subDistrict.name},`,
// );