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

Merge refactor/i18n into develop

Browse source
This commit is contained in:
Methapon Metanipat 2024-08-26 16:24:08 +07:00
parent 3da5bf9079
commit c681b19e39
99 changed files with 2192 additions and 2987 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/01_branch-management/BranchCard.vue
View file

@ -86,7 +86,7 @@ defineProps<{
]"
class="branch-card__data"
>
<div>{{ $t(key) }}</div>
<div>{{ $t(`branch.card.${key}`) }}</div>
<div>{{ data[key as keyof typeof data] }}</div>
</div>
</div>

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

@ -110,10 +110,10 @@ watch(
spaced="lg"
/>
<span class="col-12 app-text-muted-2 flex justify-between items-center">
{{ `${$t('bankBookNo')} ${i + 1}` }}
{{ `${$t('branch.form.bankAccountNo')} ${i + 1}` }}
<div class="row items-center">
<div style="height: 30.8px" />
{{ $t('accountStatus') }}
{{ $t('branch.form.bankAccountStatus') }}
<ToggleButton
id="toggle-bank-status"
:disable="readonly"
@ -145,9 +145,10 @@ watch(
input-debounce="0"
option-label="label"
lazy-rules="ondemand"
class="col-3"
class="col-12 col-md-4"
autocomplete="off"
:dense="dense"
:label="$t('bankBook')"
:label="$t('branch.form.bank')"
:options="bankBookOptions"
:readonly="readonly"
:hide-dropdown-icon="readonly"
@ -195,7 +196,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -203,51 +204,17 @@ watch(
<q-input
outlined
for="input-bankbook"
class="col-3"
class="col-4"
lazy-rules="ondemand"
hide-bottom-space
:dense="dense"
:readonly="readonly"
:label="$t('accountNumber')"
:maxlength="13"
:rules="[
(val: string) =>
(val.length >= 7 && val.length <= 13) ||
$t('form.error.please', { msg: $t('accountNumber') }),
]"
:model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
@update:model-value="
(v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
"
/>
<q-input
outlined
for="input-bankbook"
class="col-3"
lazy-rules="ondemand"
hide-bottom-space
:dense="dense"
:readonly="readonly"
:label="$t('bankBranch')"
:label="$t('branch.form.bankBranch')"
:model-value="readonly ? book.bankBranch || '-' : book.bankBranch"
@update:model-value="
(v) => (typeof v === 'string' ? (book.bankBranch = v) : '')
"
/>
<q-input
outlined
for="input-bankbook"
class="col-3"
lazy-rules="ondemand"
hide-bottom-space
:dense="dense"
:readonly="readonly"
:label="$t('accountName')"
:model-value="readonly ? book.accountName || '-' : book.accountName"
@update:model-value="
(v) => (typeof v === 'string' ? (book.accountName = v) : '')
"
/>
<q-select
outlined
clearable
@ -261,9 +228,10 @@ watch(
input-debounce="0"
option-label="label"
lazy-rules="ondemand"
class="col-4"
class="col-12 col-md-4"
autocomplete="off"
:dense="dense"
:label="$t('bankType')"
:label="$t('branch.form.bankAccountType')"
:options="accountTypeOptions"
:readonly="readonly"
:hide-dropdown-icon="readonly"
@ -278,11 +246,46 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
outlined
for="input-bankbook"
class="col-12 col-md-4"
lazy-rules="ondemand"
hide-bottom-space
:dense="dense"
:readonly="readonly"
:label="$t('branch.form.bankAccountNumber')"
:maxlength="13"
:rules="[
(val: string) =>
(val.length >= 7 && val.length <= 13) ||
$t('form.error.please', { msg: $t('accountNumber') }),
]"
:model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
@update:model-value="
(v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
"
/>
<q-input
outlined
for="input-bankbook"
class="col-12 col-md-4"
lazy-rules="ondemand"
hide-bottom-space
:dense="dense"
:readonly="readonly"
:label="$t('branch.form.bankAccountName')"
:model-value="readonly ? book.accountName || '-' : book.accountName"
@update:model-value="
(v) => (typeof v === 'string' ? (book.accountName = v) : '')
"
/>
</div>
</div>
</template>

10
src/components/01_branch-management/FormBranchAdmin.vue
View file

@ -18,12 +18,12 @@ defineProps<{
name="mdi-account-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`branchAdminTitle`) }}
{{ $t(`branch.form.group.admin`) }}
</div>
<div class="col-12">
<template v-if="!admin">
<span>{{ $t('branchAdminNone') }}</span>
<span>{{ $t('general.noData') }}</span>
</template>
<template v-else>
<div class="row items-center">
@ -47,9 +47,9 @@ defineProps<{
<div class="col column q-pl-md">
<span>
{{
$i18n.locale === 'en-US'
? admin.firstNameEN + ' ' + admin.lastNameEN
: admin.firstName + ' ' + admin.lastName
$i18n.locale === 'eng'
? admin.firstNameEN || '-' + ' ' + admin.lastNameEN
: admin.firstName || '-' + ' ' + admin.lastName
}}
</span>
</div>

94
src/components/01_branch-management/FormBranchContact.vue
View file

@ -36,12 +36,8 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="
typeBranch === 'headOffice'
? $t('formDialogInputEmailHq')
: $t('formDialogInputEmailSubBranch')
"
class="col-12 col-md-4"
:label="$t('form.email')"
for="input-email"
:model-value="readonly ? email || '-' : email"
@update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
@ -62,12 +58,8 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="
typeBranch === 'headOffice'
? $t('formDialogInputTelephoneHq')
: $t('formDialogInputTelephoneSubBranch')
"
class="col-12 col-md-4"
:label="$t('form.telephone')"
for="input-telephone-no"
:model-value="readonly ? telephoneNo || '-' : telephoneNo"
@update:model-value="
@ -90,53 +82,51 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-12 col-md-4"
label="Line ID"
for="input-line-id"
:model-value="readonly ? lineId || '-' : lineId"
@update:model-value="(v) => (typeof v === 'string' ? (lineId = v) : '')"
/>
<div class="col-12 row q-col-gutter-sm">
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputContactName')"
for="input-contact-name"
:model-value="readonly ? contactName || '-' : contactName"
@update:model-value="
(v) => (typeof v === 'string' ? (contactName = v) : '')
"
/>
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
:label="$t('branch.form.contactName')"
for="input-contact-name"
:model-value="readonly ? contactName || '-' : contactName"
@update:model-value="
(v) => (typeof v === 'string' ? (contactName = v) : '')
"
/>
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputTelephoneContact')"
for="input-contact"
:model-value="readonly ? contact || '-' : contact"
@update:model-value="
(v) => (typeof v === 'string' ? (contact = v) : '')
"
>
<template #prepend>
<q-icon
color="primary"
name="mdi-phone-outline"
size="xs"
class="q-mr-xs"
/>
</template>
</q-input>
</div>
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
:label="$t('branch.form.contactTelephone')"
for="input-contact"
:model-value="readonly ? contact || '-' : contact"
@update:model-value="
(v) => (typeof v === 'string' ? (contact = v) : '')
"
>
<template #prepend>
<q-icon
color="primary"
name="mdi-phone-outline"
size="xs"
class="q-mr-xs"
/>
</template>
</q-input>
</div>
</div>
</template>

45
src/components/01_branch-management/FormBranchInformation.vue
View file

@ -1,6 +1,4 @@
<script setup lang="ts">
import { onMounted } from 'vue';
const code = defineModel<string>('code');
const codeSubBranch = defineModel<string>('codeSubBranch');
const taxNo = defineModel<string>('taxNo');
@ -40,13 +38,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
</div>
<div class="col-12 row q-col-gutter-sm">
<div
class="col-6 row q-col-gutter-sm"
:class="{
'col-8': typeBranch !== 'headOffice',
'col-6': typeBranch === 'headOffice',
}"
>
<div class="col-12 row q-col-gutter-sm">
<q-input
lazy-rules="ondemand"
:dense="dense"
@ -55,13 +47,13 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('formDialogHqAbbreviation')"
:label="$t('branch.form.abbrev')"
for="input-abbreviation"
:model-value="view ? formatCode(abbreviation, 'code') : abbreviation"
:rules="[
(val) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
(val && val.length > 0 && /^[a-zA-Z]+$/.test(val)) ||
$t('form.error.invalid'),
]"
@update:model-value="(v) => (abbreviation = v as string)"
/>
@ -73,7 +65,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
:disable="!readonly"
hide-bottom-space
class="col"
:label="$t('formDialogInputCode')"
:label="$t('branch.form.code')"
for="input-code"
:model-value="view ? formatCode(code, 'number') : code"
@update:model-value="(v) => (code = v as string)"
@ -87,7 +79,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('branchLabelCode')"
:label="$t('branch.form.codeBranch')"
for="input-code-sub-branch"
:model-value="
view ? formatCode(codeSubBranch, 'number') : codeSubBranch
@ -102,12 +94,13 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
:readonly="readonly"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputTaxNo')"
:label="$t('branch.form.taxNo')"
v-model="taxNo"
:rules="[
(val) => (val && val.length > 0) || $t('form.error.required'),
(val) =>
(val && val.length === 13 && /[0-9]+/.test(val)) ||
$t('formDialogInputTaxNoValidate'),
$t('form.error.invalid'),
]"
for="input-tax-no"
/>
@ -123,16 +116,12 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
class="col-6"
:label="
typeBranch === 'headOffice'
? $t('formDialogInputNameHq')
: $t('formDialogInputNameSubBranch')
? $t('branch.form.headofficeName')
: $t('branch.form.branchName')
"
v-model="name"
:rules="[(val) => val && val.length > 0]"
:error-message="
typeBranch === 'headOffice'
? $t('formDialogInputNameHqValidate')
: $t('formDialogInputNameSubBranchValidate')
"
:error-message="$t('form.error.required')"
for="input-name"
/>
<q-input
@ -145,15 +134,11 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
v-model="nameEN"
:label="
typeBranch === 'headOffice'
? $t('formDialogInputNameHqEn')
: $t('formDialogInputNameSubBranchEn')
? $t('branch.form.headofficeNameEN')
: $t('branch.form.branchNameEN')
"
:rules="[(val) => val && val.length > 0]"
:error-message="
typeBranch === 'headOffice'
? $t('formDialogInputNameHqEnValidate')
: $t('formDialogInputNameSubBranchEnValidate')
"
:error-message="$t('form.error.required')"
for="input-name-en"
/>
</div>

2
src/components/01_branch-management/FormLocation.vue
View file

@ -64,7 +64,7 @@ defineProps<{
"
unelevated
rounded
:label="$t('formDialogBtnLocation')"
:label="$t('branch.form.shareLocation')"
@click="getLocation()"
id="btn-get-location"
/>

2
src/components/01_branch-management/FormQr.vue
View file

@ -73,7 +73,7 @@ defineEmits<{
"
unelevated
rounded
:label="$t('formDialogUploadQrCode')"
:label="$t('general.upload')"
@click="$emit('upload')"
id="btn-upload-qr-code"
/>

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

@ -137,7 +137,7 @@ watch(
name="mdi-briefcase-outline"
style="background-color: var(--surface-3)"
/>
{{ $t('formDialogTitleByType') }}
{{ $t('personnel.form.workInformation') }}
</div>
<div class="col-12 row q-col-gutter-sm">
<div
@ -151,7 +151,7 @@ watch(
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputRegisNo')"
:label="$t('personnel.form.regisNo')"
class="col-12"
:model-value="readonly ? registrationNo || '-' : registrationNo"
@update:model-value="
@ -163,7 +163,7 @@ watch(
class="col-6"
id="input-start-date"
:readonly="readonly"
:label="$t('formDialogInputStartDate')"
:label="$t('personnel.form.startDate')"
v-model="startDate"
clearable
/>
@ -172,7 +172,7 @@ watch(
class="col-6"
id="input-retire-date"
:readonly="readonly"
:label="$t('formDialogInputRetireDate')"
:label="$t('personnel.form.retireDate')"
v-model="retireDate"
clearable
/>
@ -196,7 +196,7 @@ watch(
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputResponsibleArea')"
:label="$t('personnel.form.responsibleArea')"
:options="responsibleAreaOptions"
@filter="responsibleAreaFilter"
:model-value="readonly ? responsibleArea || '-' : responsibleArea"
@ -208,7 +208,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -225,7 +225,7 @@ watch(
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputDiscount')"
:label="$t('personnel.form.discount')"
class="col-12"
type="textarea"
:model-value="readonly ? discountCondition || '-' : discountCondition"
@ -258,7 +258,7 @@ watch(
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputSourceNationality')"
:label="$t('personnel.form.sourceNationality')"
:options="nationalityOptions"
@filter="nationalityFilter"
:model-value="readonly ? sourceNationality || '-' : sourceNationality"
@ -270,7 +270,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -293,7 +293,7 @@ watch(
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputImportNationality')"
:label="$t('personnel.form.importNationality')"
:options="nationalityOptions"
@filter="nationalityFilter"
:model-value="readonly ? importNationality || '-' : importNationality"
@ -305,7 +305,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -328,7 +328,7 @@ watch(
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputTrainingPlace')"
:label="$t('personnel.form.trainingPlace')"
:options="trainingPlaceOptions"
@filter="trainingPlaceFilter"
:model-value="readonly ? trainingPlace || '-' : trainingPlace"
@ -340,7 +340,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -351,7 +351,7 @@ watch(
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputCheckpoint')"
:label="$t('personnel.form.checkpoint')"
class="col-6"
:model-value="readonly ? checkpoint || '-' : checkpoint"
@update:model-value="
@ -365,7 +365,7 @@ watch(
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputCheckpoint') + ' ENG'"
:label="$t('personnel.form.checkpointEN')"
class="col-6"
:model-value="readonly ? checkpointEN || '-' : checkpointEN"
@update:model-value="
@ -381,7 +381,7 @@ watch(
:readonly="readonly"
multiple
append
:label="$t('formDialogAttachment')"
:label="$t('personnel.form.attachment')"
class="col-12"
v-model="agencyFile"
>

49
src/components/02_personnel-management/FormInformation.vue
View file

@ -51,7 +51,7 @@ const userTypeOptions = ref<Record<string, unknown>[]>([]);
const userTypeFilter = selectFilterOptionRefMod(
ref(
userStore.userOption.userTypeOpts.map((v) => ({
label: t(v.label),
label: t(`personnel.${v.label}`),
value: v.value,
})),
),
@ -101,20 +101,24 @@ onMounted(async () => {
option-label="label"
option-value="value"
lazy-rules="ondemand"
class="col-2"
class="col-md-2 col-12"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputCode')"
:label="$t('branch.form.code')"
:options="hqOptions"
:rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
:rules="[
(val: string) =>
!!val ||
$t('form.error.selectField', { field: $t('branch.form.code') }),
]"
@update:model-value="(val: string) => selectHq(val)"
@filter="hqFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -133,11 +137,11 @@ onMounted(async () => {
option-label="label"
option-value="value"
lazy-rules="ondemand"
class="col-2"
class="col-md-2 col-12"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputBrId')"
:label="$t('branch.form.codeBranch')"
:options="brOptions"
@filter="brFilter"
:model-value="readonly ? brId || '-' : brId"
@ -147,7 +151,7 @@ onMounted(async () => {
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -162,13 +166,10 @@ onMounted(async () => {
map-options
options-dense
hide-bottom-space
class="col"
:label="$t('formDialogInputUsername')"
class="col-md col-12"
:label="$t('personnel.form.username')"
v-model="username"
:rules="[
(val: string) =>
val.length > 2 || $t('formDialogInputUsernameValidate'),
]"
:rules="[(val: string) => val.length > 2 || $t('form.error.required')]"
/>
<q-select
outlined
@ -189,17 +190,21 @@ onMounted(async () => {
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('formDialogInputUserType')"
:label="$t('personnel.form.userType')"
:options="userTypeOptions"
:rules="[
(val: string) => !!val || $t('formDialogInputUserTypeValidate'),
(val: string) =>
!!val ||
$t('form.error.selectField', {
field: $t('personnel.form.userType'),
}),
]"
@filter="userTypeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -223,17 +228,21 @@ onMounted(async () => {
v-model="userRole"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:label="$t('userRole')"
:label="$t('personnel.form.userRole')"
:options="roleOptions"
:rules="[
(val: string) => !!val || $t('formDialogInputUserRoleValidate'),
(val: string) =>
!!val ||
$t('form.error.selectField', {
field: $t('personnel.form.userRole'),
}),
]"
@filter="roleFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>

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

@ -2,21 +2,13 @@
import { QSelect } from 'quasar';
import useOptionStore from 'stores/options';
import { selectFilterOptionRefMod } from 'stores/utils';
import {
dateFormat,
calculateAge,
parseAndFormatDate,
disabledAfterToday,
} from 'src/utils/datetime';
import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
import { ref, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { capitalize } from 'vue';
import DatePicker from '../shared/DatePicker.vue';
const { locale } = useI18n();
const optionStore = useOptionStore();
const prefixName = defineModel<string | null>('prefixName');
const prefixNameEN = defineModel<string | null>('prefixNameEn');
const firstName = defineModel<string>('firstName');
const lastName = defineModel<string>('lastName');
const firstNameEN = defineModel<string>('firstNameEn');
@ -125,12 +117,12 @@ watch(
option-value="value"
lazy-rules="ondemand"
hide-dropdown-icon
class="col-1"
class="col-md-1 col-6"
:dense="dense"
:readonly="readonly"
:options="prefixNameOptions"
:for="`${prefixId}-select-prefix-name`"
:label="$t('formDialogInputPrefixName')"
:label="$t('personnel.form.prefixName')"
@filter="prefixNameFilter"
:model-value="readonly ? prefixName || '-' : prefixName"
@update:model-value="
@ -141,7 +133,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -155,11 +147,9 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('formDialogInputFirstName')"
:label="$t('personnel.form.firstName')"
v-model="firstName"
:rules="[
(val: string) => !!val || $t('formDialogInputFirstNameValidate'),
]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
<q-input
@ -169,8 +159,8 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputMidName')"
class="col-md-3 col-6"
:label="$t('personnel.form.middleName')"
:model-value="readonly ? midName || '-' : midName"
@update:model-value="
(v) => (typeof v === 'string' ? (midName = v) : '')
@ -186,11 +176,9 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('formDialogInputLastName')"
:label="$t('personnel.form.lastName')"
v-model="lastName"
:rules="[
(val: string) => !!val || $t('formDialogInputLastNameValidate'),
]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
</div>
@ -203,8 +191,8 @@ watch(
hide-bottom-space
:readonly="readonly"
:disable="!readonly"
class="col-1"
:label="$t('formDialogInputPrefixName')"
class="col-md-1 col-6"
:label="$t('personnel.form.prefixName')"
:model-value="
readonly
? capitalize(prefixName || '') || '-'
@ -224,11 +212,9 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('formDialogInputFirstNameEN')"
:label="$t('personnel.form.firstNameEN')"
v-model="firstNameEN"
:rules="[
(val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
<q-input
@ -238,8 +224,8 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputMidNameEN')"
class="col-md-3 col-6"
:label="$t('personnel.form.middleNameEN')"
:model-value="readonly ? midNameEn || '-' : midNameEn"
@update:model-value="
(v) => (typeof v === 'string' ? (midNameEn = v) : '')
@ -254,11 +240,9 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('formDialogInputLastNameEN')"
:label="$t('personnel.form.lastNameEN')"
v-model="lastNameEN"
:rules="[
(val: string) => !!val || $t('formDialogInputLastNameENValidate'),
]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
</div>
@ -269,8 +253,8 @@ watch(
:dense="dense"
outlined
:readonly="readonly"
class="col-3"
:label="$t('formDialogInputTelephone')"
class="col-md-3 col-6"
:label="$t('form.telephone')"
:mask="readonly ? '' : '##########'"
:model-value="readonly ? telephoneNo || '-' : telephoneNo"
@update:model-value="
@ -285,8 +269,8 @@ watch(
:dense="dense"
outlined
:readonly="readonly"
:label="$t('formDialogInputEmail')"
class="col-3"
:label="$t('form.email')"
class="col-md-3 col-6"
:model-value="readonly ? email || '-' : email"
@update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
@clear="email = ''"
@ -305,13 +289,13 @@ watch(
option-label="label"
option-value="value"
lazy-rules="ondemand"
class="col-2"
class="col-md-2 col-6"
:dense="dense"
:readonly="readonly"
:options="genderOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-gender`"
:label="$t('formDialogInputGender')"
:label="$t('form.gender')"
@filter="genderFilter"
:model-value="readonly ? gender || '-' : gender"
@update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
@ -320,7 +304,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -328,14 +312,15 @@ watch(
<DatePicker
v-model="birthDate"
class="col-2"
class="col-md-2 col-6"
:id="`${prefixId}-input-birth-date`"
:readonly="readonly"
:label="$t('formDialogInputBirthDate')"
:label="$t('form.birthDate')"
:disabled-dates="disabledAfterToday"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
!!val ||
$t('form.error.selectField', { field: $t('form.birthDate') }),
]"
/>
@ -346,8 +331,8 @@ watch(
:dense="dense"
outlined
readonly
:label="$t('formDialogInputAge')"
class="col-2"
:label="$t('personnel.age')"
class="col-md-2 col-12"
:model-value="
birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined
@ -377,17 +362,14 @@ watch(
:options="genderOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-gender`"
:label="$t('formDialogInputGender')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputGender'),
]"
:label="$t('form.gender')"
:rules="[(val: string) => !!val || $t('form.error.required')]"
@filter="genderFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -413,17 +395,14 @@ watch(
:options="nationalityOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-nationality`"
:label="$t('formDialogInputNationality')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
]"
:label="$t('general.nationality')"
:rules="[(val: string) => !!val || $t('form.error.required')]"
@filter="nationalityFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>

30
src/components/03_customer-management/FormEmployeeHealthCheck.vue
View file

@ -158,7 +158,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
name="mdi-hospital-box-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`formDialogTitleHealthCheck`) }}
{{ $t(`customerEmployee.formHealthCheck.title`) }}
<AddButton
v-if="!readonly"
id="btn-add-bank"
@ -184,7 +184,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
spaced="lg"
/>
<span class="col-12 flex justify-between items-center">
{{ $t('customer.form.instance', { index: index + 1 }) }}
{{ $t('general.times', { number: index + 1 }) }}
<div class="row items-center">
<UndoButton
v-if="!readonly && !!checkup.id && !checkup.statusSave"
@ -228,7 +228,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:readonly="readonly || checkup.statusSave"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputCheckupRes')"
:label="$t('customerEmployee.formHealthCheck.result')"
v-model="checkup.checkupResult"
/>
<q-select
@ -251,13 +251,13 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:options="checkupTypeOptions"
:hide-dropdown-icon="readonly || checkup.statusSave"
:for="`${prefixId}-select-checkup-type`"
:label="$t('formDialogInputCheckupType')"
:label="$t('customerEmployee.formHealthCheck.checkupType')"
@filter="checkupTypeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -279,7 +279,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
v-model="checkup.provinceId"
:dense="dense"
:readonly="readonly || checkup.statusSave"
:label="$t('province')"
:label="$t('form.province')"
:hide-dropdown-icon="readonly || checkup.statusSave"
:for="`${prefixId}-select-province`"
:options="provinceOptions"
@ -288,7 +288,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -301,7 +301,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:readonly="readonly || checkup.statusSave"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputHospital')"
:label="$t('customerEmployee.formHealthCheck.hospital')"
v-model="checkup.hospitalName"
:for="`${prefixId}-input-hospital`"
/>
@ -325,20 +325,20 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:hide-dropdown-icon="readonly || checkup.statusSave"
:options="medicalBenefitOptions"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputMedicalBenefit')"
:label="$t('customerEmployee.formHealthCheck.medicalBenefit')"
@filter="medicalBenefitFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
lazy-rules="ondemand"
:label="$t('formDialogInputRemark')"
:label="$t('general.remark')"
:dense="dense"
outlined
:readonly="readonly || checkup.statusSave"
@ -349,7 +349,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:for="`${prefixId}-input-remark`"
/>
<DatePicker
:label="$t('formDialogInputCoverageStartDate')"
:label="$t('customerEmployee.formHealthCheck.coverageStartDate')"
v-model="checkup.coverageStartDate"
class="col"
:id="`${prefixId}-input-coverage-start-date`"
@ -357,7 +357,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
clearable
/>
<DatePicker
:label="$t('formDialogInputCoverageExpiretDate')"
:label="$t('customerEmployee.formHealthCheck.coverageExpireDate')"
v-model="checkup.coverageExpireDate"
class="col"
:id="`${prefixId}-input-coverage-expire-date`"
@ -385,13 +385,13 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:hide-dropdown-icon="readonly || checkup.statusSave"
:options="insuranceCompanyOptions"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputInsuranceCompany')"
:label="$t('customerEmployee.formHealthCheck.insuranceCompany')"
@filter="insuranceCompanyFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>

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

@ -30,8 +30,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
name="mdi-human-male-female-child"
style="background-color: var(--surface-3)"
/>
{{ $t('formDialogTitleFamilyHistory') }}
{{ $t('customerEmployee.form.group.family') }}
<div class="row q-ml-auto">
<UndoButton
v-if="!readonly && !!employeeOther.id && !employeeOther.statusSave"
@ -73,14 +72,14 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
:label="$t('formDialogInputCitizenId')"
:label="$t('customerEmployee.formFamily.citizenId')"
class="col"
v-model="employeeOther.citizenId"
/>
</div>
<div class="col-12 app-text-muted-2">
<q-icon size="xs" class="q-mr-xs" name="mdi-human-male" />
{{ $t('formDialogTitleFamilyHistoryDad') }}
{{ $t('customerEmployee.formFamily.father') }}
</div>
<div class="col-12 row q-col-gutter-sm">
<q-input
@ -91,7 +90,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputFirstName')"
:label="$t('form.firstName')"
v-model="employeeOther.fatherFirstName"
/>
<q-input
@ -102,7 +101,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputLastName')"
:label="$t('form.lastName')"
v-model="employeeOther.fatherLastName"
/>
<q-input
@ -113,7 +112,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputFirstNameEN')"
:label="$t('form.firstNameEN')"
v-model="employeeOther.fatherFirstNameEN"
/>
<q-input
@ -124,7 +123,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputLastNameEN')"
:label="$t('form.lastNameEN')"
v-model="employeeOther.fatherLastNameEN"
/>
<q-input
@ -135,14 +134,14 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"
:label="$t('customerEmployee.formFamily.fatherBirthPlace')"
v-model="employeeOther.fatherBirthPlace"
/>
</div>
<div class="col-12 app-text-muted-2">
<q-icon size="xs" class="q-mr-xs" name="mdi-human-female" />
{{ $t('formDialogTitleFamilyHistoryMom') }}
{{ $t('customerEmployee.formFamily.mother') }}
</div>
<div class="col-12 row q-col-gutter-sm">
<q-input
@ -153,7 +152,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputFirstName')"
:label="$t('form.firstName')"
v-model="employeeOther.motherFirstName"
/>
<q-input
@ -164,7 +163,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputLastName')"
:label="$t('form.lastName')"
v-model="employeeOther.motherLastName"
/>
<q-input
@ -175,7 +174,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputFirstNameEN')"
:label="$t('form.firstNameEN')"
v-model="employeeOther.motherFirstNameEN"
/>
<q-input
@ -186,7 +185,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputLastNameEN')"
:label="$t('form.lastNameEN')"
v-model="employeeOther.motherLastNameEN"
/>
<q-input
@ -197,7 +196,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"
:label="$t('customerEmployee.formFamily.motherBirthPlace')"
v-model="employeeOther.motherBirthPlace"
/>
</div>

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

@ -115,7 +115,7 @@ watch(
:hide-dropdown-icon="readonly"
:options="passportTypeOptions"
:for="`${prefixId}-select-passport-type`"
:label="$t('formDialogInputPassportType')"
:label="$t('customerEmployee.form.passportType')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportType'),
@ -125,7 +125,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -138,7 +138,7 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputPassportNo')"
:label="$t('customerEmployee.form.passportNo')"
v-model="passportNumber"
:rules="[
(val: string) =>
@ -153,7 +153,7 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputPassportRef')"
:label="$t('customerEmployee.form.passportRef')"
:model-value="
readonly
? previousPassportReference || '-'
@ -171,7 +171,7 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputWPassportPlace')"
:label="$t('customerEmployee.form.passportPlace')"
v-model="passportIssuingPlace"
:rules="[
(val: string) =>
@ -198,7 +198,7 @@ watch(
:hide-dropdown-icon="readonly"
:options="passportIssuingCountryOptions"
:for="`${prefixId}-select-passport-country`"
:label="$t('formDialogInputPassportCountry')"
:label="$t('customerEmployee.form.passportIssuer')"
:rules="[
(val: string) =>
!!val ||
@ -209,14 +209,14 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<DatePicker
:id="`${prefixId}-date-picker-passport-issueance`"
:label="$t('formDialogInputPassportIssuance')"
:label="$t('customerEmployee.form.passportIssueDate')"
v-model="passportIssueDate"
class="col-md-3 col-6"
:readonly="readonly"
@ -228,7 +228,7 @@ watch(
/>
<DatePicker
:id="`${prefixId}-date-picker-passport-expire`"
:label="$t('formDialogInputPassportExpire')"
:label="$t('customerEmployee.form.passportExpireDate')"
v-model="passportExpiryDate"
class="col-md-3 col-6"
:readonly="readonly"

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

@ -117,7 +117,7 @@ watch(
:options="visaTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-visa-type`"
:label="$t('formDialogInputVisaType')"
:label="$t('customerEmployee.form.visaType')"
@filter="visaTypeFilter"
:model-value="readonly ? visaType || '-' : visaType"
@update:model-value="
@ -128,7 +128,7 @@ watch(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -145,7 +145,7 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col-4"
:label="$t('formDialogInputVisaNo')"
:label="$t('customerEmployee.form.visaNo')"
:model-value="readonly ? visaNumber || '-' : visaNumber"
@update:model-value="
(v) => (typeof v === 'string' ? (visaNumber = v) : '')
@ -159,7 +159,7 @@ watch(
class="col-2"
:id="`${prefixId}-date-picker-visa-issuance`"
:readonly="readonly"
:label="$t('formDialogInputVisaIssuance')"
:label="$t('customerEmployee.form.visaIssuance')"
v-model="visaIssueDate"
clearable
/>
@ -167,7 +167,7 @@ watch(
class="col-2"
:id="`${prefixId}-date-picker-visa-expire`"
:readonly="readonly"
:label="$t('formDialogInputVisaExpire')"
:label="$t('customerEmployee.form.visaExpire')"
v-model="visaExpiryDate"
clearable
/>
@ -180,7 +180,7 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputVisaPlace')"
:label="$t('customerEmployee.form.visaPlace')"
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
@update:model-value="
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
@ -194,7 +194,7 @@ watch(
class="col-4"
:id="`${prefixId}-date-picker-visa-until`"
:readonly="readonly"
:label="$t('formDialogInputVisaStayUntil')"
:label="$t('customerEmployee.form.visaStayUntil')"
v-model="visaStayUntilDate"
clearable
/>
@ -207,7 +207,7 @@ watch(
:readonly="readonly"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputVisaTM6')"
:label="$t('customerEmployee.form.visaTM6')"
:model-value="readonly ? tm6Number || '-' : tm6Number"
@update:model-value="
(v) => (typeof v === 'string' ? (tm6Number = v) : '')
@ -222,7 +222,7 @@ watch(
class="col-4"
:id="`${prefixId}-date-picker-visa-enter`"
:readonly="readonly"
:label="$t('formDialogInputVisaEnter')"
:label="$t('customerEmployee.form.visaEnter')"
v-model="entryDate"
clearable
/>

28
src/components/03_customer-management/FormEmployeeWorkHistory.vue
View file

@ -114,7 +114,7 @@ const workplaceFilter = selectFilterOptionRefMod(
name="mdi-briefcase-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`workHistory`) }}
{{ $t(`customerEmployee.formWorkHistory.title`) }}
<AddButton
v-if="!readonly"
id="btn-add-bank"
@ -140,7 +140,7 @@ const workplaceFilter = selectFilterOptionRefMod(
spaced="lg"
/>
<span class="col-12 flex justify-between items-center">
{{ $t('customer.form.instance', { index: index + 1 }) }}
{{ $t('general.times', { number: index + 1 }) }}
<div class="row items-center">
<UndoButton
@ -196,13 +196,13 @@ const workplaceFilter = selectFilterOptionRefMod(
:options="jobTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-job-type`"
:label="$t('formDialogInputJobType')"
:label="$t('customerEmployee.formWorkHistory.jobType')"
@filter="jobTypeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -227,13 +227,13 @@ const workplaceFilter = selectFilterOptionRefMod(
:options="workplaceOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputWorkPlace')"
:label="$t('customerEmployee.formWorkHistory.workplace')"
@filter="workplaceFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -241,7 +241,7 @@ const workplaceFilter = selectFilterOptionRefMod(
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-work-end-date`"
:label="$t('formDialogInputRemark')"
:label="$t('general.remark')"
:dense="dense"
outlined
:readonly="readonly || work.statusSave"
@ -251,7 +251,7 @@ const workplaceFilter = selectFilterOptionRefMod(
type="textarea"
/>
<DatePicker
:label="$t('formDialogInputWorkUntil')"
:label="$t('customerEmployee.formWorkHistory.workUntil')"
v-model="work.workEndDate"
class="col-3"
:id="`${prefixId}-input-work-until-date`"
@ -267,11 +267,11 @@ const workplaceFilter = selectFilterOptionRefMod(
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputWorkPermitNo')"
:label="$t('customerEmployee.formWorkHistory.permitNo')"
v-model="work.workPermitNo"
/>
<DatePicker
:label="$t('formDialogInputWorkPermitIssueDate')"
:label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
v-model="work.workPermitIssuDate"
class="col-3"
:id="`${prefixId}-date-picker-work-permit-issue-date`"
@ -279,7 +279,7 @@ const workplaceFilter = selectFilterOptionRefMod(
clearable
/>
<DatePicker
:label="$t('formDialogInputWorkPermitExpireDate')"
:label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
v-model="work.workPermitExpireDate"
class="col-3"
:id="`${prefixId}-date-picker-work-permit-expire-date`"
@ -295,7 +295,7 @@ const workplaceFilter = selectFilterOptionRefMod(
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputOwnerName')"
:label="$t('customerEmployee.formWorkHistory.employerName')"
v-model="work.ownerName"
/>
<q-select
@ -318,13 +318,13 @@ const workplaceFilter = selectFilterOptionRefMod(
:options="positionNameOptions"
:hide-dropdown-icon="readonly || work.statusSave"
:for="`${prefixId}-select-position-name`"
:label="$t('formDialogInputJobPosition')"
:label="$t('customerEmployee.formWorkHistory.jobPosition')"
@filter="positionNameFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>

20
src/components/03_customer-management/HistoryEditComponent.vue
View file

@ -67,35 +67,35 @@ const fieldName = [
{
name: 'nrcNo',
title: 'formDialogTitleInformation',
i18n: 'formDialogEmployeeNRCNo',
i18n: 'customerEmployee.form.nrcNo',
},
{
name: 'firstName',
title: 'personalInfo',
i18n: 'formDialogInputFirstName',
i18n: 'form.firstName',
},
{
name: 'firstNameEN',
title: 'personalInfo',
i18n: 'formDialogInputFirstNameEN',
i18n: 'form.firstNameEN',
},
{ name: 'lastName', title: 'personalInfo', i18n: 'formDialogInputLastName' },
{
name: 'lastNameEN',
title: 'personalInfo',
i18n: 'formDialogInputLastNameEN',
i18n: 'form.lastNameEN',
},
{
name: 'dateOfBirth',
title: 'personalInfo',
i18n: 'formDialogInputBirthDate',
i18n: 'form.birthDate',
},
{ name: 'gender', title: 'personalInfo', i18n: 'formDialogInputGender' },
{
name: 'nationality',
title: 'personalInfo',
i18n: 'formDialogInputNationality',
i18n: 'general.nationality',
},
{
@ -339,14 +339,14 @@ watch(
autoApply
:teleport="true"
v-model="currentDate"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:locale="$i18n.locale === 'tha' ? 'th' : 'en'"
:enableTimePicker="false"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
{{ $i18n.locale === 'tha' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
{{ $i18n.locale === 'tha' ? value + 543 : value }}
</template>
<template #trigger>
<span class="text-weight-medium q-px-xl">
@ -394,7 +394,7 @@ watch(
<div class="column q-pl-md items-start">
<span class="text-weight-bold">
{{
$i18n.locale === 'en-US'
$i18n.locale === 'eng'
? `${props.row.updatedBy.firstNameEN} ${props.row.updatedBy.lastNameEN}`
: (`${props.row.updatedBy.firstName} ${props.row.updatedBy.lastName}` ??
'-')

20
src/components/03_customer-management/TableEmpoloyee.vue
View file

@ -20,7 +20,7 @@ const prop = withDefaults(
fieldSelected: () => [
'orderNumber',
'firstName',
'formDialogInputAge',
'general.age',
'formDialogInputNationality',
'formDialogInputPassportNo',
'passportExpiryDate',
@ -167,7 +167,7 @@ const prop = withDefaults(
</div>
</q-td>
<q-td v-if="fieldSelected.includes('formDialogInputAge')">
<q-td v-if="fieldSelected.includes('general.age')">
{{ calculateAge(props.row.dateOfBirth) || '-' }}
</q-td>
@ -195,9 +195,9 @@ const prop = withDefaults(
</div>
<div class="col app-text-muted">
{{
$i18n.locale === 'en-US'
? `${props.row.customerBranch.nameEN}`
: `${props.row.customerBranch.name}`
$i18n.locale === 'eng'
? `${props.row.customerBranch.registerNameEN}`
: `${props.row.customerBranch.registerName}`
}}
</div>
</div>
@ -242,7 +242,7 @@ const prop = withDefaults(
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
{{ $t('general.viewDetail') }}
</span>
</q-item>
@ -261,7 +261,7 @@ const prop = withDefaults(
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
{{ $t('general.edit') }}
</span>
</q-item>
<q-item
@ -285,7 +285,7 @@ const prop = withDefaults(
}"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
{{ $t('general.delete') }}
</span>
</q-item>
@ -325,7 +325,7 @@ const prop = withDefaults(
:data="{
code: props.row.code,
name:
$i18n.locale === 'en-US'
$i18n.locale === 'eng'
? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
: `${props.row.firstName} ${props.row.lastName} `.trim(),
img: props.row.profileImageUrl || '/images/employee-avatar.png',
@ -348,7 +348,7 @@ const prop = withDefaults(
:tag="[
{
color: 'pink',
value: $t('EMPLOYEE'),
value: $t('customer.employee'),
},
]"
:disabled="props.row.status === 'INACTIVE'"

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

@ -135,7 +135,7 @@ onMounted(() => {
:readonly="readonly"
hide-bottom-space
class="col-12"
:label="$t('formDialogEmployerBranchCode')"
:label="$t('customer.form.branchCode')"
v-model="customerBranch"
:option-value="
(v) => ({
@ -154,7 +154,10 @@ onMounted(() => {
@filter="(val, update) => $emit('filterOwnerBranch', val, update)"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
!!val ||
$t('form.error.selectField', {
field: $t('customer.form.employerBranch'),
}),
]"
>
<template v-slot:option="scope">
@ -168,58 +171,57 @@ onMounted(() => {
</div>
<div class="q-mt-sm">
<div>
{{ scope.opt.code }} {{ $t('branchName') }}:
{{
$i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name
}}
{{ scope.opt.code }} {{ $t('general.name') }}:
<template v-if="scope.opt.customer.customerType === 'CORP'">
{{
$i18n.locale === 'eng'
? scope.opt.registerName
: scope.opt.registerNameEN
}}
</template>
<template v-else>
{{
$i18n.locale === 'eng'
? scope.opt.customer.firstNameEN ||
'-' + ' ' + scope.opt.customer.lastNameEN ||
''
: scope.opt.customer.firstName ||
'-' + ' ' + scope.opt.customer.lastName ||
''
}}
</template>
</div>
<div class="text-caption app-text-muted-2 q-mb-xs">
<div v-if="scope.opt.customer" class="col column">
<span>
{{ $t('customerBranchName') }}:
{{ $t('customerEmployee.form.employerSelect.branchName') }}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.customerNameEN
: scope.opt.customer.customerName
$i18n.locale === 'eng'
? scope.opt.registerNameEN
: scope.opt.registerName
}}
</span>
<span>
{{ $t('customerEmployee.form.employerSelect.branchName') }}:
{{
scope.opt.customer.customerType === 'PERS'
? $t('formDialogCustomerName')
: $t('companyOwnerName')
}}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.personName
: scope.opt.customer.personName
$i18n.locale === 'eng'
? scope.opt.customer.firstNameEN ||
'-' + ' ' + scope.opt.customer.lastNameEN
: scope.opt.customer.firstName ||
'-' + ' ' + scope.opt.customer.lastName
}}
</span>
</div>
<div v-if="scope.opt.province" class="col">
{{ $t('address') }}
{{ $t('general.address') }}
{{
$i18n.locale === 'en-US'
? scope.opt.addressEN
: scope.opt.address
$i18n.locale === 'eng'
? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
: `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
}}
{{
$i18n.locale === 'en-US'
? scope.opt.subDistrict.nameEN
: scope.opt.subDistrict.name
}}
{{
$i18n.locale === 'en-US'
? scope.opt.district.nameEN
: scope.opt.district.name
}}
{{
$i18n.locale === 'en-US'
? scope.opt.province.nameEN
: scope.opt.province.name
}}
{{ scope.opt.zipCode }}
{{ scope.opt.subDistrict?.zipCode || '' }}
</div>
</div>
</div>
@ -235,90 +237,50 @@ onMounted(() => {
>
<div class="q-mr-sm">
{{ scope.opt.code }}
{{ $t('branchName') }}:
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
{{ $t('customerEmployee.form.employerSelect.branchName') }}:
{{
$i18n.locale === 'eng'
? scope.opt.registerNameEN
: scope.opt.registerName
}}
</div>
<div
class="text-caption app-text-muted-2"
v-if="scope.opt.customer && scope.opt.province"
>
{{ $t('customerBranchName') }}:
{{ $t('customerEmployee.form.employerSelect.branchName') }}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.customerNameEN
: scope.opt.customer.customerName
$i18n.locale === 'eng'
? scope.opt.customer.firstNameEN ||
'-' + ' ' + scope.opt.customer.lastNameEN
: scope.opt.customer.firstName ||
'-' + ' ' + scope.opt.customer.lastName
}}
{{ $t('general.address') }}
{{
scope.opt.customer.customerType === 'PERS'
? $t('formDialogCustomerName')
: $t('companyOwnerName')
}}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.personName
: scope.opt.customer.personName
$i18n.locale === 'eng'
? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
: `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
}}
{{ $t('address') }}
{{
$i18n.locale === 'en-US'
? scope.opt.addressEN
: scope.opt.address
}}
{{
$i18n.locale === 'en-US'
? scope.opt.subDistrict.nameEN
: scope.opt.subDistrict.name
}}
{{
$i18n.locale === 'en-US'
? scope.opt.district.nameEN
: scope.opt.district.name
}}
{{
$i18n.locale === 'en-US'
? scope.opt.province.nameEN
: scope.opt.province.name
}}
{{ scope.opt.zipCode }}
{{ scope.opt.subDistrict?.zipCode || '' }}
<q-tooltip v-if="scope.opt.customer && scope.opt.province">
{{ $t('customerBranchName') }}:
{{ $t('customerEmployee.form.employerSelect.branchName') }}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.customerNameEN
: scope.opt.customer.customerName
}}
{{
scope.opt.customer.customerType === 'PERS'
? $t('formDialogCustomerName')
: $t('companyOwnerName')
}}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.personName
: scope.opt.customer.personName
$i18n.locale === 'eng'
? scope.opt.customer.firstNameEN ||
'-' + ' ' + scope.opt.customer.lastNameEN
: scope.opt.customer.firstName ||
'-' + ' ' + scope.opt.customer.lastName
}}
{{ $t('address') }}
{{
$i18n.locale === 'en-US'
? scope.opt.addressEN
: scope.opt.address
$i18n.locale === 'eng'
? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
: `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
}}
{{
$i18n.locale === 'en-US'
? scope.opt.subDistrict.nameEN
: scope.opt.subDistrict.name
}}
{{
$i18n.locale === 'en-US'
? scope.opt.district.nameEN
: scope.opt.district.name
}}
{{
$i18n.locale === 'en-US'
? scope.opt.province.nameEN
: scope.opt.province.name
}}
{{ scope.opt.zipCode }}
{{ scope.opt.zipCode || '' }}
</q-tooltip>
</div>
</div>
@ -343,7 +305,7 @@ onMounted(() => {
:readonly="readonly"
:disable="!readonly"
class="col-3"
:label="$t('formDialogEmployeeID')"
:label="$t('customerEmployee.form.employeeCode')"
v-model="code"
/>
@ -356,7 +318,7 @@ onMounted(() => {
hide-bottom-space
:readonly="readonly"
class="col-6"
:label="$t('formDialogEmployeeNRCNo')"
:label="$t('customerEmployee.form.nrcNo')"
:model-value="readonly ? nrcNo || '-' : nrcNo"
@update:model-value="(v) => (typeof v === 'string' ? (nrcNo = v) : '')"
/>

43
src/components/04_product-service/BasicInfoProduct.vue
View file

@ -31,10 +31,10 @@ onMounted(async () => {
const resultOption = await fetch('/option/option.json');
const option = await resultOption.json();
if (locale.value === 'en-US') {
if (locale.value === 'eng') {
codeOption.value = option.eng.typeProduct;
}
if (locale.value === 'th-th') {
if (locale.value === 'tha') {
codeOption.value = option.tha.typeProduct;
}
});
@ -61,7 +61,7 @@ const branchFilter = selectFilterOptionRefMod(
name="mdi-office-building-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`formDialogTitleInformation`) }}
{{ $t(`form.field.basicInformation`) }}
</div>
<div class="col-12 row q-col-gutter-sm">
@ -76,7 +76,7 @@ const branchFilter = selectFilterOptionRefMod(
hide-bottom-space
input-debounce="0"
:disable="!readonly && disableCode"
class="col-3"
class="col-md-3 col-6"
v-model="code"
id="select-br-id"
option-label="label"
@ -85,15 +85,15 @@ const branchFilter = selectFilterOptionRefMod(
:dense="dense"
:readonly="readonly"
:options="codeOptions"
:label="$t('productCode')"
:label="$t('productService.product.code')"
:hide-dropdown-icon="readonly || disableCode"
:rules="[(val: string) => !!val]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
@filter="codeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -108,7 +108,7 @@ const branchFilter = selectFilterOptionRefMod(
hide-selected
hide-bottom-space
input-debounce="0"
class="col-3"
class="col-md-3 col-6"
option-value="id"
option-label="name"
lazy-rules="ondemand"
@ -118,14 +118,20 @@ const branchFilter = selectFilterOptionRefMod(
:readonly="readonly"
:options="branchOptions"
:hide-dropdown-icon="readonly"
:label="$t('registeredBranch')"
:label="$t('productService.product.registeredBranch')"
:rules="[
(val) => {
const roles = getRole() || [];
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
(role) => roles.includes(role),
);
return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
return (
isSpecialRole ||
!!val ||
$t('form.error.selectField', {
field: $t('productService.product.registeredBranch'),
})
);
},
]"
@filter="branchFilter"
@ -133,7 +139,7 @@ const branchFilter = selectFilterOptionRefMod(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -148,9 +154,9 @@ const branchFilter = selectFilterOptionRefMod(
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('productName')"
:label="$t('productService.product.name')"
v-model="name"
:rules="[(val: string) => !!val]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
<q-input
lazy-rules="ondemand"
@ -160,8 +166,8 @@ const branchFilter = selectFilterOptionRefMod(
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('productProcessingTime')"
class="col-md-3 col-6"
:label="$t('productService.product.processingTime')"
v-model="process"
type="number"
/>
@ -185,7 +191,7 @@ const branchFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly"
:borderless="readonly"
:label="$t('detail')"
:label="$t('general.detail')"
stack-label
dense
>
@ -196,7 +202,7 @@ const branchFilter = selectFilterOptionRefMod(
(v) => (typeof v === 'string' ? (detail = v) : '')
"
min-height="5rem"
class="full-width q-mt-sm q-mb-xs"
class="q-mt-sm q-mb-xs"
:flat="!readonly"
:readonly="readonly"
:toolbar-color="
@ -208,6 +214,7 @@ const branchFilter = selectFilterOptionRefMod(
color: var(--foreground);
border-color: var(--surface-3);
"
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
/>
</q-field>
</div>
@ -221,7 +228,7 @@ const branchFilter = selectFilterOptionRefMod(
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('formDialogInputRemark')"
:label="$t('general.remark')"
:model-value="readonly ? remark || '-' : remark"
@update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
/>

46
src/components/04_product-service/BasicInformation.vue
View file

@ -57,7 +57,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
name="mdi-office-building-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`formDialogTitleInformation`) }}
{{ $t(`form.field.basicInformation`) }}
</div>
<div v-if="!service" class="col-12 row q-col-gutter-sm">
<q-input
@ -69,9 +69,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
hide-bottom-space
class="col-6"
:label="
$t(
isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode',
)
$t(isType ? 'productService.type.code' : 'productService.group.code')
"
v-model="code"
/>
@ -83,12 +81,10 @@ const serviceCodeFilter = selectFilterOptionRefMod(
hide-bottom-space
class="col-6"
:label="
$t(
isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName',
)
$t(isType ? 'productService.type.name' : 'productService.group.name')
"
v-model="name"
:rules="[(val: string) => !!val || $t('pleaseInformation')]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
<q-input
lazy-rules="ondemand"
@ -98,7 +94,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('detail')"
:label="$t('general.detail')"
:model-value="readonly ? detail || '-' : detail"
@update:model-value="(v) => (typeof v === 'string' ? (detail = v) : '')"
:for="`input-detail`"
@ -111,7 +107,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('formDialogInputRemark')"
:label="$t('general.remark')"
:model-value="readonly ? remark || '-' : remark"
@update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
:for="`input-remark`"
@ -147,7 +143,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -161,10 +157,10 @@ const serviceCodeFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="$t('serviceCode')"
class="col-md-3 col-4"
:label="$t('productService.service.code')"
v-model="serviceCode"
:rules="[(val: string) => !!val || $t('pleaseInformation')]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
<q-select
@ -176,7 +172,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
map-options
hide-selected
hide-bottom-space
class="col-3"
class="col-md-3 col-8"
option-value="id"
option-label="name"
lazy-rules="ondemand"
@ -187,14 +183,20 @@ const serviceCodeFilter = selectFilterOptionRefMod(
:readonly="readonly"
:options="branchOptions"
:hide-dropdown-icon="readonly"
:label="$t('registeredBranch')"
:label="$t('productService.service.registeredBranch')"
:rules="[
(val) => {
const roles = getRole() || [];
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
(role) => roles.includes(role),
);
return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
return (
isSpecialRole ||
!!val ||
$t('form.error.selectField', {
field: $t('productService.service.registeredBranch'),
})
);
},
]"
@filter="branchFilter"
@ -202,7 +204,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -216,10 +218,10 @@ const serviceCodeFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('serviceName')"
class="col-md-6 col"
:label="$t('productService.service.name')"
v-model="serviceName"
:rules="[(val: string) => !!val || $t('pleaseInformation')]"
:rules="[(val: string) => !!val || $t('form.error.required')]"
/>
<q-input
lazy-rules="ondemand"
@ -231,7 +233,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('detail')"
:label="$t('general.detail')"
:model-value="readonly ? serviceDescription || '-' : serviceDescription"
@update:model-value="
(v) => (typeof v === 'string' ? (serviceDescription = v) : '')

10
src/components/04_product-service/FormServiceProperties.vue
View file

@ -23,7 +23,7 @@ defineEmits<{
class="text-weight-bold text-body1 flex items-center justify-between q-px-md q-py-sm"
style="background: hsla(var(--info-bg) / 0.1); min-height: 50px"
>
{{ $t(`serviceProperties`) }}
{{ $t(`productService.service.serviceProperties`) }}
<q-btn
v-if="!readonly"
@ -31,7 +31,7 @@ defineEmits<{
dense
flat
unelevated
class="q-px-sm"
class="q-px-sm text-capitalize"
color="info"
@click="$emit('serviceProperties')"
>
@ -41,7 +41,9 @@ defineEmits<{
class="q-mr-sm"
style="color: hsl(var(--info-bg))"
/>
{{ $t('serviceProperties') }}
<span v-if="$q.screen.gt.xs">
{{ $t('productService.service.serviceProperties') }}
</span>
</q-btn>
</div>
@ -61,7 +63,7 @@ defineEmits<{
</div>
<div v-else class="col flex items-center app-text-muted">
{{ $t('noProperties') }}
{{ $t('productService.service.noProperties') }}
</div>
</div>
</div>

8
src/components/04_product-service/FormServiceWork.vue
View file

@ -43,9 +43,9 @@ function confirmDelete(items: unknown[], index: number) {
dialog({
color: 'negative',
icon: 'mdi-alert',
title: t('deleteConfirmTitle'),
actionText: t('delete'),
message: t('deleteConfirmMessage'),
title: t('dialog.title.confirmDelete'),
actionText: t('general.delete'),
message: t('dialog.message.confirmDelete'),
action: async () => {
deleteItem(items, index);
},
@ -65,7 +65,7 @@ function confirmDelete(items: unknown[], index: number) {
name="mdi-briefcase-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`workInformation`) }}
{{ $t(`productService.service.workInformation`) }}
<AddButton
v-if="!readonly"
id="btn-add-work"

8
src/components/04_product-service/PriceDataComponent.vue
View file

@ -37,7 +37,7 @@ withDefaults(
name="mdi-cash"
style="background-color: var(--surface-3)"
/>
{{ $t('priceInformation') }}
{{ $t('productService.product.priceInformation') }}
</div>
<div class="col-12 row q-col-gutter-sm">
<q-input
@ -50,7 +50,7 @@ withDefaults(
hide-bottom-space
class="col-4"
type="number"
:label="$t('salePrice')"
:label="$t('productService.product.salePrice')"
v-model="price"
/>
@ -64,7 +64,7 @@ withDefaults(
hide-bottom-space
class="col-4"
type="number"
:label="$t('agentPrice')"
:label="$t('productService.product.agentPrice')"
v-model="agentPrice"
/>
@ -78,7 +78,7 @@ withDefaults(
hide-bottom-space
class="col-4"
type="number"
:label="$t('processingPrice')"
:label="$t('productService.product.processingPrice')"
v-model="serviceCharge"
/>
</div>

12
src/components/04_product-service/ProductCardComponent.vue
View file

@ -83,7 +83,7 @@ withDefaults(
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
{{ $t('general.viewDetail') }}
</span>
</q-item>
<q-item
@ -106,7 +106,7 @@ withDefaults(
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
{{ $t('general.edit') }}
</span>
</q-item>
<q-item
@ -126,7 +126,7 @@ withDefaults(
class="col-3 app-text-negative"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
{{ $t('general.delete') }}
</span>
</q-item>
<q-item dense>
@ -139,7 +139,7 @@ withDefaults(
/>
<span class="q-pl-md">
{{
!isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
!isDisabled ? $t('general.open') : $t('general.close')
}}
</span>
</div>
@ -199,8 +199,8 @@ withDefaults(
}
"
unelevated
class="q-px-sm"
:label="$t('detail')"
class="q-px-sm text-capitalize"
:label="$t('general.detail')"
style="
background-color: hsla(var(--blue-5-hsl) / 0.1);
color: var(--blue-5);

50
src/components/04_product-service/ServiceProperties.vue
View file

@ -209,9 +209,9 @@ function confirmDelete(items: unknown[], index: number) {
dialog({
color: 'negative',
icon: 'mdi-alert',
title: t('deleteConfirmTitle'),
actionText: t('delete'),
message: t('deleteConfirmMessage'),
title: t('dialog.title.confirmDelete'),
actionText: t('general.delete'),
message: t('dialog.message.confirmDelete'),
action: async () => {
deleteItem(items, index);
},
@ -227,8 +227,8 @@ function confirmDelete(items: unknown[], index: number) {
dense
unelevated
color="primary"
:label="$t('properties')"
class="q-px-sm q-mb-lg"
:label="$t('productService.service.properties')"
class="q-px-sm q-mb-lg text-capitalize"
menu-anchor="bottom end"
>
<q-list dense v-if="formServiceProperties && propertiesOption">
@ -251,7 +251,7 @@ function confirmDelete(items: unknown[], index: number) {
class="q-mr-sm"
style="color: hsl(var(--text-mute))"
/>
{{ $t('selectAll') }}
{{ $t('general.selectAll') }}
</div>
</q-item>
<q-separator />
@ -310,7 +310,7 @@ function confirmDelete(items: unknown[], index: number) {
index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
"
>
<div class="col row items-center">
<div class="col-md col-12 row items-center">
<q-btn
id="btn-move-up-product"
icon="mdi-arrow-up"
@ -318,6 +318,7 @@ function confirmDelete(items: unknown[], index: number) {
flat
round
:disable="index === 0"
:size="$q.screen.xs ? 'xs' : ''"
style="color: hsl(var(--text-mute-2))"
@click="moveItemUp(formServiceProperties.additional, index)"
/>
@ -327,13 +328,14 @@ function confirmDelete(items: unknown[], index: number) {
dense
flat
round
:size="$q.screen.xs ? 'xs' : ''"
:disable="index === formServiceProperties.additional.length - 1"
style="color: hsl(var(--text-mute-2))"
@click="moveItemDown(formServiceProperties.additional, index)"
/>
<q-avatar
size="md"
:size="$q.screen.xs ? 'sm' : 'md'"
class="q-mx-lg"
style="background-color: var(--surface-3)"
>
@ -348,8 +350,9 @@ function confirmDelete(items: unknown[], index: number) {
emit-value
map-options
hide-bottom-space
class="col q-mr-md"
:label="$t('propertiesName')"
class="col-md col-12 q-mr-md"
:class="{ 'q-my-sm': $q.screen.lt.md }"
:label="$t('productService.service.propertiesName')"
option-label="label"
option-value="value"
:options="propertiesOption"
@ -369,7 +372,7 @@ function confirmDelete(items: unknown[], index: number) {
</div>
<!-- type -->
<div class="col">
<div class="col-md col-12">
<q-select
lazy-rules="ondemand"
dense
@ -377,7 +380,7 @@ function confirmDelete(items: unknown[], index: number) {
emit-value
map-options
hide-bottom-space
:label="$t('type')"
:label="$t('general.type')"
option-value="value"
@update:model-value="
(t: 'string' | 'number' | 'date' | 'array') => {
@ -461,8 +464,13 @@ function confirmDelete(items: unknown[], index: number) {
<div v-if="p.type !== 'date' && p.type">
<q-item class="no-padding" style="font-size: 11px">
<q-item-section class="column q-py-sm" style="padding-left: 12px">
<span class="app-text-muted-2">{{ $t('additional') }}</span>
<q-item-section
class="column q-py-sm"
:style="{ 'padding-left: 12px': $q.screen.gt.xs }"
>
<span class="app-text-muted-2">
{{ $t('general.additional') }}
</span>
<div v-if="p.type === 'string'" class="q-gutter-y-sm">
<div class="row items-center">
@ -472,7 +480,7 @@ function confirmDelete(items: unknown[], index: number) {
v-model="p.isPhoneNumber"
size="xs"
/>
{{ $t('telephone') }}
{{ $t('general.telephone') }}
</div>
<q-input
lazy-rules="ondemand"
@ -482,7 +490,7 @@ function confirmDelete(items: unknown[], index: number) {
class="col additional-label"
dense
outlined
:label="$t('telMaxLength')"
:label="$t('form.maxLength')"
/>
</div>
</div>
@ -491,7 +499,7 @@ function confirmDelete(items: unknown[], index: number) {
<div class="row items-center">
<div class="col-md-4 col-12 surface-3 rounded">
<q-checkbox v-model="p.comma" size="xs" class="q-py-xs" />
{{ $t('useComma') }}
{{ $t('form.useComma') }}
</div>
<div
class="col-md-4 col-7 surface-3 rounded"
@ -505,7 +513,7 @@ function confirmDelete(items: unknown[], index: number) {
size="xs"
class="q-py-xs"
/>
{{ $t('decimal') }}
{{ $t('form.decimal') }}
</div>
<q-input
lazy-rules="ondemand"
@ -515,7 +523,7 @@ function confirmDelete(items: unknown[], index: number) {
input-class="text-caption"
dense
outlined
:label="$t('decimalPlace')"
:label="$t('form.decimalPlace')"
/>
</div>
</div>
@ -534,8 +542,8 @@ function confirmDelete(items: unknown[], index: number) {
dense
outlined
input-class="text-caption"
:label="$t('selection')"
:rules="[(val) => !!val || $t('pleaseInformation')]"
:label="$t('form.selection')"
:rules="[(val) => !!val || $t('form.error.required')]"
hide-bottom-space
/>
</div>

22
src/components/04_product-service/TotalProductCardComponent.vue
View file

@ -92,7 +92,7 @@ withDefaults(
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
{{ $t('general.viewDetail') }}
</span>
</q-item>
@ -112,7 +112,7 @@ withDefaults(
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
{{ $t('general.edit') }}
</span>
</q-item>
@ -126,7 +126,7 @@ withDefaults(
/>
<span class="q-pl-md">
{{
!isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
!isDisabled ? $t('general.open') : $t('general.close')
}}
</span>
</div>
@ -155,7 +155,9 @@ withDefaults(
class="bordered q-pa-xs row surface-0"
style="font-size: 12px; border-radius: 5px; width: 80px"
>
<div class="col ellipsis-2-lines">งาน</div>
<div class="col ellipsis-2-lines">
{{ $t('productService.service.work') }}
</div>
<q-space />
<div class="col text-center">{{ data?.work.length }}</div>
</div>
@ -166,10 +168,14 @@ withDefaults(
class="row full-width text-right"
style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
>
<div class="col" v-if="priceDisplay?.price">ราคาขาย</div>
<div class="col" v-if="priceDisplay?.agentPrice">ราคาตัวแทน</div>
<div class="col" v-if="priceDisplay?.price">
{{ $t('productService.product.salePrice') }}
</div>
<div class="col" v-if="priceDisplay?.agentPrice">
{{ $t('productService.product.agentPrice') }}
</div>
<div class="col" v-if="priceDisplay?.serviceCharge">
ราคาดำเนินการ
{{ $t('productService.product.processingPrice') }}
</div>
</div>
@ -249,7 +255,7 @@ withDefaults(
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px"
/>
{{ data?.process }} วัน
{{ data?.process }} {{ $t('general.day') }}
</div>
</div>
</div>

85
src/components/04_product-service/WorkManagementComponent.vue
View file

@ -102,20 +102,22 @@ defineEmits<{
@click="() => (readonly ? '' : fetchListOfWork())"
>
<span class="text-body2" style="color: var(--foreground)">
{{ $t('workNo') }} {{ index + 1 }} :
{{ $t('productService.service.work') }} {{ index + 1 }} :
<span class="app-text-muted-2">
{{ workName ? workName : $t('workName') }}
{{
workName ? workName : $t('productService.service.workName')
}}
</span>
</span>
<q-menu v-if="!readonly" fit anchor="bottom left" self="top left">
<q-item>
<div class="full-width flex items-center justify-between">
{{ $t('workName') }}
{{ $t('productService.service.workName') }}
<q-btn
dense
unelevated
class="bordered q-px-sm"
class="bordered q-px-sm text-capitalize"
style="
border-radius: var(--radius-2);
color: hsl(var(--info-bg));
@ -165,7 +167,7 @@ defineEmits<{
color="negative"
@click.stop="$emit('deleteWork')"
>
<q-tooltip>{{ $t('delete') }}</q-tooltip>
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
</q-btn>
</div>
</div>
@ -178,10 +180,14 @@ defineEmits<{
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
style="background-color: hsla(var(--info-bg) / 0.1)"
>
<span>{{ $t('propertiesInWork') }} {{ workIndex + 1 }}</span>
<span>
{{ $t('productService.service.propertiesInWork') }}
{{ workIndex + 1 }}
</span>
<q-btn
v-if="!readonly"
id="btn-add-work-product"
class="text-capitalize"
flat
dense
padding="0"
@ -194,14 +200,17 @@ defineEmits<{
class="q-mr-sm"
style="color: hsl(var(--info-bg))"
/>
{{ $t('properties') }}
<span v-if="$q.screen.gt.xs">
{{ $t('productService.service.properties') }}
</span>
</q-btn>
</div>
<div class="q-py-md q-px-md full-width">
<div
v-if="attributes.additional.length > 0"
class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm"
class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm scroll"
:style="$q.screen.xs ? 'max-height: 100px' : ''"
>
<div
v-for="(p, index) in attributes.additional"
@ -213,7 +222,7 @@ defineEmits<{
</div>
</div>
<div v-else class="app-text-muted">
{{ $t('noProperties') }}
{{ $t('productService.service.noProperties') }}
</div>
</div>
</div>
@ -225,11 +234,12 @@ defineEmits<{
style="background-color: hsla(var(--info-bg) / 0.1)"
>
<span>
{{ $t('productInWork') }} {{ workIndex + 1 }}
{{ $t('productService.service.productInWork') }}
{{ workIndex + 1 }}
<q-checkbox
size="xs"
class="q-pl-lg"
:class="$q.screen.gt.xs ? 'q-pl-lg' : 'q-pl-sm'"
v-model="attributes.showTotalPrice"
:label="$t('productService.service.showTotalPrice')"
style="color: hsl(var(--text-mute-2))"
@ -242,7 +252,10 @@ defineEmits<{
flat
dense
icon="mdi-plus"
:label="$t('serviceAddProduct')"
class="text-capitalize"
:label="
$q.screen.gt.xs ? $t('productService.product.addTitle') : ''
"
padding="0"
style="color: hsl(var(--info-bg))"
@click.stop="$emit('addProduct')"
@ -261,9 +274,12 @@ defineEmits<{
<div
class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
>
<div class="row items-center col no-wrap" v-if="productItems">
<div
class="row items-center col-md col-12 no-wrap"
v-if="productItems"
>
<q-btn
v-if="!readonly"
v-if="!readonly && $q.screen.gt.xs"
id="btn-product-up"
icon="mdi-arrow-up"
dense
@ -274,7 +290,7 @@ defineEmits<{
@click.stop="$emit('moveProductUp', productItems, index)"
/>
<q-btn
v-if="!readonly"
v-if="!readonly && $q.screen.gt.xs"
id="btn-product-down"
icon="mdi-arrow-down"
dense
@ -295,7 +311,10 @@ defineEmits<{
</q-avatar>
<div class="row no-wrap">
<div class="bordered q-mx-md col-3 image-box">
<div
v-if="$q.screen.gt.xs"
class="bordered q-mx-md col-3 image-box"
>
<q-img
:src="`${baseUrl}/product/${product?.id}/image`"
style="object-fit: cover; width: 100%; height: 100%"
@ -314,17 +333,9 @@ defineEmits<{
class="text-weight-bold ellipsis-2-lines"
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
>
{{
$i18n.locale === 'en-US'
? product.nameEn
: product.name
}}
{{ product.name }}
<q-tooltip>
{{
$i18n.locale === 'en-US'
? product.nameEn
: product.name
}}
{{ product.name }}
</q-tooltip>
</span>
<div
@ -337,7 +348,7 @@ defineEmits<{
</div>
</div>
<div class="row justify-end text-right col-5 q-pr-sm">
<div class="row justify-end text-right col-md-6 col-12 q-pr-sm">
<span
class="col-12 q-col-gutter-md row"
style="color: var(--teal-9)"
@ -347,7 +358,7 @@ defineEmits<{
class="col ellipsis price-orange text-weight-bold"
>
<div class="text-caption app-text-muted-2">
{{ $t('salePrice') }}
{{ $t('productService.product.salePrice') }}
</div>
฿{{ formatNumberDecimal(product.price, 2) }}
<q-tooltip
@ -363,7 +374,7 @@ defineEmits<{
class="col ellipsis price-purple text-weight-bold"
>
<div class="text-caption app-text-muted-2">
{{ $t('agentPrice') }}
{{ $t('productService.product.agentPrice') }}
</div>
฿{{ formatNumberDecimal(product.agentPrice, 2) }}
<q-tooltip
@ -379,7 +390,7 @@ defineEmits<{
class="col ellipsis price-pink column"
>
<div class="text-caption app-text-muted-2">
{{ $t('processingPrice') }}
{{ $t('productService.product.processingPrice') }}
</div>
฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
<q-tooltip
@ -393,10 +404,10 @@ defineEmits<{
</span>
<span class="col-9 q-mt-sm text-caption app-text-muted-2">
{{ $t('processTime') }}
{{ $t('productService.product.processingTime') }}
</span>
<span class="col-3 q-mt-sm text-caption app-text-muted-2">
{{ product.process }} {{ $t('day') }}
{{ product.process }} {{ $t('general.day') }}
</span>
</div>
</div>
@ -413,24 +424,26 @@ defineEmits<{
color="negative"
@click.stop="$emit('deleteProduct', productItems, index)"
>
<q-tooltip>{{ $t('delete') }}</q-tooltip>
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
</q-btn>
</div>
</div>
<div v-else class="app-text-muted q-py-md q-px-lg">
{{ $t('noProduct') }}
{{ $t('productService.product.noProduct') }}
</div>
</div>
</div>
</q-expansion-item>
<div class="q-py-sm q-px-md bordered-t row items-center justify-between">
<div>
{{ $t('totalProductWork') }}
{{ $t('productService.service.totalProductWork') }}
<span class="app-text-muted-2">
{{ workName }}
</span>
</div>
<div>{{ productItems?.length ?? 0 }} {{ $t('list') }}</div>
<div>
{{ productItems?.length ?? 0 }} {{ $t('productService.service.list') }}
</div>
</div>
</div>
</template>

61
src/components/04_product-service/WorkNameManagement.vue
View file

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { DeleteButton, EditButton, SaveButton, UndoButton } from '../button';
// import { useI18n } from 'vue-i18n';
// import { storeToRefs } from 'pinia';
@ -72,63 +73,37 @@ watch(
:readonly="!item.isEdit"
:outlined="item.isEdit"
></q-input>
<q-btn
<EditButton
v-if="!item.isEdit"
icon-only
id="btn-edit-work-name"
icon="mdi-pencil-outline"
:disable="isWorkNameEdit()"
dense
flat
round
color="primary"
:disabled="isWorkNameEdit()"
@click="item.isEdit = true"
>
<q-tooltip>{{ $t('edit') }}</q-tooltip>
</q-btn>
<q-btn
/>
<SaveButton
v-else
id="btn-edit-work-name"
icon="mdi-check"
dense
flat
round
color="primary"
icon-only
id="btn-save-work-name"
@click="
() => {
$emit('edit', item.id, { name: item.name }),
(item.isEdit = false);
}
"
>
<q-tooltip>{{ $t('save') }}</q-tooltip>
</q-btn>
<q-btn
/>
<DeleteButton
v-if="!item.isEdit"
icon-only
id="btn-delete-work-name"
:disable="isWorkNameEdit()"
icon="mdi-trash-can-outline"
dense
flat
round
class="q-ml-md"
color="negative"
:disabled="isWorkNameEdit()"
@click="$emit('delete', item.id)"
>
<q-tooltip>{{ $t('delete') }}</q-tooltip>
</q-btn>
<q-btn
/>
<UndoButton
v-else
id="btn-edit-work-name"
icon="mdi-undo"
dense
flat
round
class="q-ml-md"
color="negative"
icon-only
id="btn-undo-work-name"
@click="assignClone"
>
<q-tooltip>{{ $t('cancel') }}</q-tooltip>
</q-btn>
/>
</q-item>
</q-list>
<div v-else class="flex col justify-center items-center">
@ -148,7 +123,7 @@ watch(
>
<span class="q-px-lg flex items-center app-text-muted-2">
<q-icon name="mdi-plus" class="q-mr-md" />
{{ $t('addWork') }}
{{ $t('productService.service.addWork') }}
</span>
</q-item>
</div>

5
src/components/AddButton.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
defineProps<{
label?: string;
i18nArgs?: Record<string, unknown>;
}>();
</script>
@ -17,7 +18,9 @@ defineProps<{
round
/>
</div>
<div class="row q-mt-sm color-text" v-if="label">{{ $t(label) }}</div>
<div class="row q-mt-sm color-text" v-if="label">
{{ $t(label, { ...i18nArgs }) }}
</div>
</div>
</template>

2
src/components/DialogForm.vue
View file

@ -21,6 +21,7 @@ defineProps<{
edit?: boolean;
saveAmount?: number;
submitLabel?: string;
isEdit?: boolean;
tabsList?: { name: string; label: string }[];
@ -216,6 +217,7 @@ const currentTab = defineModel<string>('currentTab');
id="btn-form-submit"
type="submit"
solid
:label="submitLabel"
:amount="saveAmount"
/>
</div>

4
src/components/DrawerInfo.vue
View file

@ -109,8 +109,8 @@ function reset() {
>
{{
statusBranch === 'INACTIVE'
? $t('statusINACTIVE')
: $t('statusACTIVE')
? $t('status.INACTIVE')
: $t('status.ACTIVE')
}}
</text>
</div>

4
src/components/GlobalDialog.vue
View file

@ -72,7 +72,7 @@ defineProps<{
"
:class="{ 'full-width': !action }"
@click="cancel"
:label="cancelText || $t('cancel')"
:label="cancelText || $t('general.cancel')"
v-close-popup
/>
@ -83,7 +83,7 @@ defineProps<{
:class="{ 'full-width': !cancel }"
v-if="action"
@click="action"
:label="actionText || $t('agree')"
:label="actionText || $t('general.ok')"
:color="color || 'primary'"
v-close-popup
/>

2
src/components/GlobalLoading.vue
View file

@ -8,7 +8,7 @@ defineProps<{
<q-inner-loading :showing="visibility" class="loader q-gutter-y-xl">
<q-spinner size="80px" color="primary" />
<span class="text-h5 text-weight-bold text-primary">
{{ $t('loading') }}
{{ $t('general.loading') }}
</span>
</q-inner-loading>
</template>

6
src/components/NoData.vue
View file

@ -20,10 +20,10 @@ defineProps<{
text
? text
: notFound
? $t('notFound')
? $t('general.notFound')
: useField
? $t('noField')
: $t('noData')
? $t('general.noField')
: $t('general.noData')
}}
</div>
</div>

12
src/components/ProfileBanner.vue
View file

@ -21,7 +21,7 @@ defineProps<{
useToggle?: boolean;
menu?: { icon: string; color: string; bgColor: string }[];
tabsList?: { name: string; label: string }[];
tabsList?: { name: string | number; label: string }[];
}>();
defineEmits<{
@ -40,7 +40,7 @@ const toggleStatus = defineModel<string>('toggleStatus', {
default: 'CREATED',
});
const currentTab = defineModel<string>('currentTab');
const currentTab = defineModel<string | number>('currentTab');
const showOverlay = ref(false);
</script>
@ -161,7 +161,7 @@ const showOverlay = ref(false);
class="upload-overlay absolute-bottom flex items-center justify-center"
@click.stop="$emit('edit')"
>
{{ $t('editImage') }}
{{ $t('general.editImage') }}
</div>
</div>
</Transition>
@ -192,7 +192,11 @@ const showOverlay = ref(false);
</div>
<!-- icon -->
<div class="row items-center q-pr-lg" style="z-index: 1">
<div
v-if="$q.screen.gt.xs"
class="row items-center q-pr-lg"
style="z-index: 1"
>
<span
v-if="useToggle && toggleTitle"
class="q-mr-md app-text-muted-2"

10
src/components/TreeComponent.vue
View file

@ -152,7 +152,7 @@ defineEmits<{
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
{{ $t('general.viewDetail') }}
</span>
</q-item>
@ -173,7 +173,7 @@ defineEmits<{
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
{{ $t('general.edit') }}
</span>
</q-item>
<q-item
@ -198,7 +198,7 @@ defineEmits<{
}"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
{{ $t('general.delete') }}
</span>
</q-item>
@ -214,8 +214,8 @@ defineEmits<{
<span class="q-pl-md">
{{
node.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
? $t('general.open')
: $t('general.close')
}}
</span>
</div>

4
src/components/button/AddButton.vue
View file

@ -19,8 +19,8 @@ defineProps<{
v-bind="{ ...$props, ...$attrs }"
icon="mdi-plus"
color="var(--info-bg)"
:title="iconOnly ? $t('add') : undefined"
:title="iconOnly ? $t('general.add') : undefined"
>
{{ $t('add') }}
{{ $t('general.add') }}
</MainButton>
</template>

4
src/components/button/BackButton.vue
View file

@ -19,8 +19,8 @@ defineProps<{
v-bind="{ ...$props, ...$attrs }"
icon="mdi-arrow-left"
color="var(--info-bg)"
:title="iconOnly ? $t('back') : undefined"
:title="iconOnly ? $t('general.back') : undefined"
>
{{ $t('back') }}
{{ $t('general.back') }}
</MainButton>
</template>

4
src/components/button/CancelButton.vue
View file

@ -19,8 +19,8 @@ defineProps<{
v-bind="{ ...$props, ...$attrs }"
icon="mdi-close"
color="var(--negative-bg)"
:title="iconOnly ? $t('cancel') : undefined"
:title="iconOnly ? $t('general.cancel') : undefined"
>
{{ $t('cancel') }}
{{ $t('general.cancel') }}
</MainButton>
</template>

4
src/components/button/DeleteButton.vue
View file

@ -19,8 +19,8 @@ defineProps<{
v-bind="{ ...$props, ...$attrs }"
icon="mdi-trash-can-outline"
color="var(--negative-bg)"
:title="iconOnly ? $t('delete') : undefined"
:title="iconOnly ? $t('general.delete') : undefined"
>
{{ $t('delete') }}
{{ $t('general.delete') }}
</MainButton>
</template>

4
src/components/button/EditButton.vue
View file

@ -19,8 +19,8 @@ defineProps<{
v-bind="{ ...$props, ...$attrs }"
icon="mdi-pencil-outline"
color="var(--cyan-6-hsl)"
:title="iconOnly ? $t('edit') : undefined"
:title="iconOnly ? $t('general.edit') : undefined"
>
{{ $t('edit') }}
{{ $t('general.edit') }}
</MainButton>
</template>

7
src/components/button/SaveButton.vue
View file

@ -11,6 +11,8 @@ defineProps<{
disabled?: boolean;
dark?: boolean;
label?: string;
amount?: number;
}>();
</script>
@ -21,8 +23,9 @@ defineProps<{
v-bind="{ ...$props, ...$attrs }"
icon="mdi-content-save-outline"
color="207 96% 32%"
:title="iconOnly ? $t('save') : undefined"
:title="iconOnly ? $t('general.save') : undefined"
>
{{ $t('save') }} {{ amount && amount > 0 ? `(${amount})` : '' }}
{{ label || $t('general.save') }}
{{ amount && amount > 0 ? `(${amount})` : '' }}
</MainButton>
</template>

4
src/components/button/UndoButton.vue
View file

@ -19,8 +19,8 @@ defineProps<{
v-bind="{ ...$props, ...$attrs }"
icon="mdi-arrow-left"
color="var(--gray-8-hsl)"
:title="iconOnly ? $t('undo') : undefined"
:title="iconOnly ? $t('general.undo') : undefined"
>
{{ $t('undo') }}
{{ $t('general.undo') }}
</MainButton>
</template>

84
src/components/form/AddressForm.vue
View file

@ -164,7 +164,7 @@ watch(districtId, fetchSubDistrict);
style="background-color: var(--surface-3)"
/>
{{ title || $t('formDialogTitlePersonnelAddress') }}
{{ (title && $t(title)) || $t('form.field.address') }}
<div
v-if="employee"
@ -181,7 +181,7 @@ watch(districtId, fetchSubDistrict);
}"
@click="readonly ? '' : (sameWithEmployer = true)"
>
{{ $t('formDialogToggleSameAddress') }}
{{ $t('customerEmployee.form.addressSame') }}
</span>
<span
:id="`${prefixId}-custom`"
@ -193,7 +193,7 @@ watch(districtId, fetchSubDistrict);
}"
@click="readonly ? '' : (sameWithEmployer = false)"
>
{{ $t('formDialogToggleCustomAddress') }}
{{ $t('customerEmployee.form.addressCustom') }}
</span>
</div>
</div>
@ -201,7 +201,7 @@ watch(districtId, fetchSubDistrict);
<div class="col-12 row q-col-gutter-y-md">
<div class="col-12 app-text-muted-2">
<q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
{{ addressTitle || $t('formDialogTitleAddressPure') }}
{{ addressTitle || $t('form.address') }}
</div>
<div class="col-12 row q-col-gutter-sm">
<div class="row col-12" v-if="useWorkPlace">
@ -220,8 +220,7 @@ watch(districtId, fetchSubDistrict);
? []
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputAddressValidate'),
(val && val.length > 0) || $t('form.error.required'),
]
"
/>
@ -234,17 +233,13 @@ watch(districtId, fetchSubDistrict);
v-model="address"
lazy-rules="ondemand"
:dense="dense"
:label="$t('address')"
:label="$t('form.address')"
:readonly="readonly || sameWithEmployer"
:for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
:rules="
disabledRule
? []
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputAddressValidate'),
]
: [(val) => (val && val.length > 0) || $t('form.error.required')]
"
/>
<q-select
@ -264,7 +259,7 @@ watch(districtId, fetchSubDistrict);
lazy-rules="ondemand"
class="col-md-3 col-6"
:dense="dense"
:label="$t('province')"
:label="$t('form.province')"
:options="provinceOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
@ -275,7 +270,9 @@ watch(districtId, fetchSubDistrict);
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputProvinceValidate'),
$t('form.error.selectField', {
field: $t('form.province'),
}),
]
"
@filter="provinceFilter"
@ -284,7 +281,7 @@ watch(districtId, fetchSubDistrict);
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -307,7 +304,7 @@ watch(districtId, fetchSubDistrict);
lazy-rules="ondemand"
class="col-md-3 col-6"
:dense="dense"
:label="$t('district')"
:label="$t('form.district')"
:options="districtOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
@ -318,7 +315,9 @@ watch(districtId, fetchSubDistrict);
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputDistrictValidate'),
$t('form.error.selectField', {
field: $t('form.district'),
}),
]
"
@filter="districtFilter"
@ -327,7 +326,7 @@ watch(districtId, fetchSubDistrict);
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -349,7 +348,7 @@ watch(districtId, fetchSubDistrict);
class="col-md-3 col-6"
v-model="subDistrictId"
:dense="dense"
:label="$t('subDistrict')"
:label="$t('form.subDistrict')"
:options="subDistrictOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
@ -360,7 +359,9 @@ watch(districtId, fetchSubDistrict);
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputSubDistrictValidate'),
$t('form.error.selectField', {
field: $t('form.subDistrict'),
}),
]
"
@update:model-value="(v: string) => selectSubDistrict(v)"
@ -369,7 +370,7 @@ watch(districtId, fetchSubDistrict);
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -381,7 +382,7 @@ watch(districtId, fetchSubDistrict);
outlined
:disable="!readonly"
readonly
:label="$t('zipCode')"
:label="$t('form.zipCode')"
class="col-md-2 col-6"
:model-value="
addrOptions.subDistrictOps
@ -393,7 +394,7 @@ watch(districtId, fetchSubDistrict);
<div class="col-12 app-text-muted-2">
<q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
{{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
{{ addressTitleEN || $t('form.address', { suffix: '(EN)' }) }}
</div>
<div class="col-12 row q-col-gutter-sm">
<div class="row col-12" v-if="useWorkPlace">
@ -412,8 +413,7 @@ watch(districtId, fetchSubDistrict);
? []
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputAddressValidate'),
(val && val.length > 0) || $t('form.error.required'),
]
"
/>
@ -426,17 +426,13 @@ watch(districtId, fetchSubDistrict);
:readonly="readonly || sameWithEmployer"
outlined
hide-bottom-space
:label="$t('address')"
:label="$t('form.address', { suffix: '(EN)' })"
class="col-12"
v-model="addressEN"
:rules="
disabledRule
? []
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputAddressValidate'),
]
: [(val) => (val && val.length > 0) || $t('form.error.required')]
"
/>
<q-select
@ -456,7 +452,7 @@ watch(districtId, fetchSubDistrict);
option-label="nameEN"
class="col-md-3 col-6"
:dense="dense"
:label="$t('province')"
:label="$t('form.province')"
:options="provinceOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
@ -467,7 +463,9 @@ watch(districtId, fetchSubDistrict);
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputProvinceValidate'),
$t('form.error.selectField', {
field: $t('form.province'),
}),
]
"
@update:model-value="districtId = subDistrictId = zipCode = null"
@ -476,7 +474,7 @@ watch(districtId, fetchSubDistrict);
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -498,7 +496,7 @@ watch(districtId, fetchSubDistrict);
option-label="nameEN"
class="col-md-3 col-6"
:dense="dense"
:label="$t('district')"
:label="$t('form.district')"
:options="districtOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
@ -509,7 +507,9 @@ watch(districtId, fetchSubDistrict);
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputDistrictValidate'),
$t('form.error.selectField', {
field: $t('form.district'),
}),
]
"
@update:model-value="subDistrictId = zipCode = null"
@ -518,7 +518,7 @@ watch(districtId, fetchSubDistrict);
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -540,7 +540,7 @@ watch(districtId, fetchSubDistrict);
class="col-md-3 col-6"
v-model="subDistrictId"
:dense="dense"
:label="$t('subDistrict')"
:label="$t('form.subDistrict')"
:options="subDistrictOptions"
:readonly="readonly || sameWithEmployer"
:hide-dropdown-icon="readonly || sameWithEmployer"
@ -551,7 +551,9 @@ watch(districtId, fetchSubDistrict);
: [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputSubDistrictValidate'),
$t('form.error.selectField', {
field: $t('form.subDistrict'),
}),
]
"
@update:model-value="(v: string) => selectSubDistrict(v)"
@ -560,7 +562,7 @@ watch(districtId, fetchSubDistrict);
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
@ -574,7 +576,7 @@ watch(districtId, fetchSubDistrict);
readonly
:disable="!readonly"
zip="zip-en"
:label="$t('zipCode')"
:label="$t('form.zipCode')"
class="col-md-2 col-6"
:model-value="
addrOptions.subDistrictOps

6
src/components/shared/DatePicker.vue
View file

@ -62,16 +62,16 @@ function valueUpdate(value: string) {
:disabled-dates="disabledDates"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:locale="$i18n.locale === 'tha' ? 'th' : 'en'"
:enableTimePicker="false"
v-model="model"
class="col-2"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
{{ $i18n.locale === 'tha' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
{{ $i18n.locale === 'tha' ? value + 543 : value }}
</template>
<template #trigger>
<q-input

10
src/components/shared/PersonCard.vue
View file

@ -106,7 +106,7 @@ defineEmits<{
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
{{ $t('general.viewDetail') }}
</span>
</q-item>
<q-item
@ -124,7 +124,7 @@ defineEmits<{
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
{{ $t('general.edit') }}
</span>
</q-item>
<q-item
@ -139,7 +139,7 @@ defineEmits<{
class="col-3 app-text-negative"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
{{ $t('general.delete') }}
</span>
</q-item>
<q-item dense>
@ -151,9 +151,7 @@ defineEmits<{
@click="$emit('toggleStatus', disabled === false)"
/>
<span class="q-pl-md">
{{
!disabled ? $t('switchOnLabel') : $t('switchOffLabel')
}}
{{ !disabled ? $t('general.open') : $t('general.close') }}
</span>
</div>
</q-item-section>