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

refactor: 03 Employee => enhance responsive layout for employee management forms

Browse source
This commit is contained in:
puriphatt 2025-01-27 15:43:05 +07:00
parent a4bc6e4884
commit debfa874f3
8 changed files with 210 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -406,7 +406,7 @@ watch(
outlined
readonly
:label="$t('personnel.age')"
class="col-md-2 col-12"
class="col-md-2 col-6"
:model-value="
birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined
@ -470,7 +470,7 @@ watch(
input-debounce="0"
option-label="label"
option-value="value"
class="col-2"
class="col-md-2 col-6"
:dense="dense"
v-model="gender"
:readonly="readonly"
@ -504,7 +504,7 @@ watch(
option-label="label"
option-value="value"
v-model="nationality"
class="col-2"
class="col-md-2 col-6"
:dense="dense"
:readonly="readonly"
:options="nationalityOptions"

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

@ -266,7 +266,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:for="`${prefixId}-input-hospital`"
/>
<div class="col">
<div class="col-md col-6">
<DatePicker
v-model="checkup.coverageStartDate"
:id="`${prefixId}-input-coverage-start-date`"
@ -301,7 +301,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
map-options
hide-selected
hide-bottom-space
class="col-6"
class="col-md-6 col-12"
input-debounce="0"
option-value="value"
option-label="label"

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

@ -79,7 +79,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
:label="$t('customerEmployee.formFamily.citizenId')"
class="col-4"
class="col-md-4 col-12"
v-model="employeeOther.citizenId"
/>
@ -90,7 +90,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
:label="$t('customerEmployee.formFamily.telephoneNo')"
class="col-3"
class="col-md-3 col-12"
v-model="employeeOther.telephoneNo"
/>
</div>

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

@ -220,7 +220,7 @@ watch(
</div>
</div>
<div class="row q-col-gutter-sm">
<div class="q-col-gutter-sm" :class="{ row: $q.screen.gt.sm }">
<div
class="col row justify-center q-col-gutter-sml"
style="max-height: 50%"
@ -252,7 +252,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
class="col-6"
class="col-md-6 col-12"
:dense="dense"
:readonly="readonly"
:options="workerStatusOptions"
@ -283,7 +283,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
class="col-md-6 col-12"
:label="$t('customerEmployee.form.previousPassportNumber')"
v-model="previousPassportRef"
:rules="[
@ -306,7 +306,7 @@ watch(
option-label="label"
option-value="value"
hide-dropdown-icon
class="col-2"
class="col-md-2 col-6"
:dense="dense"
:readonly="readonly"
:options="prefixNameOptions"
@ -334,7 +334,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col"
class="col-md col-6"
:label="$t('form.firstName')"
:model-value="readonly ? firstName || '-' : firstName"
@update:model-value="
@ -388,7 +388,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('form.firstNameEN')"
:model-value="readonly ? firstNameEN || '-' : firstNameEN"
@update:model-value="
@ -405,7 +405,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('form.middleNameEN')"
:model-value="readonly ? middleNameEN || '-' : middleNameEN"
@update:model-value="
@ -419,7 +419,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('form.lastNameEN')"
:model-value="readonly ? lastNameEN || '-' : lastNameEN"
@update:model-value="
@ -453,7 +453,7 @@ watch(
input-debounce="0"
option-label="label"
option-value="value"
class="col-2"
class="col-md-2 col-4"
dense
:readonly="readonly"
:options="genderOptions"
@ -482,7 +482,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-6 col-md-3"
class="col-8 col-md-3"
:label="$t('customerEmployee.form.passportNo')"
v-model="passportNumber"
:rules="[
@ -494,7 +494,7 @@ watch(
<DatePicker
v-model="birthDate"
class="col-2"
class="col-md-2 col-6"
:id="`${prefixId}-input-birth-date`"
:readonly="readonly"
:label="$t('form.birthDate')"
@ -513,7 +513,7 @@ watch(
outlined
readonly
:label="$t('personnel.age')"
class="col-2"
class="col-md-2 col-6"
:model-value="
birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined
@ -534,7 +534,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
class="col"
class="col-md col-6"
:dense="dense"
:readonly="readonly"
:options="nationalityOptions"
@ -567,7 +567,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.form.placeOfBirth')"
:model-value="optionStore.mapOption(birthCountry || '')"
@update:model-value="
@ -621,7 +621,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.form.passportPlace')"
:model-value="
readonly

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

@ -147,8 +147,13 @@ watch(
<slot name="button"></slot>
</div>
</div>
<div class="row">
<div v-if="!ocr" class="col row justify-center" style="max-height: 50%">
<div :class="{ row: $q.screen.gt.sm }">
<div
v-if="!ocr"
class="col row justify-center"
:class="{ 'q-mb-md': $q.screen.lt.md }"
style="max-height: 50%"
>
<q-avatar
style="border: 1px dashed; border-color: black"
square
@ -175,7 +180,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
:dense="dense"
:readonly="readonly"
:options="workerTypeOptions"
@ -207,7 +212,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
:label="$t('customerEmployee.form.visaNo')"
:model-value="readonly ? number || '-' : number"
@update:model-value="
@ -221,7 +226,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-12': !ocr, 'col-6': ocr }"
:label="$t('customerEmployee.form.visaPlace')"
:model-value="readonly ? issuePlace || '-' : issuePlace"
@update:model-value="
@ -280,7 +285,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
:dense="dense"
:readonly="readonly"
:options="visaTypeOptions"
@ -303,7 +308,7 @@ watch(
</template>
</q-select>
<div class="col">
<div class="col-md col-6">
<DatePicker
:id="`${prefixId}-date-picker-visa-issuance`"
:readonly="readonly"
@ -362,7 +367,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-12"
:label="$t('customerEmployee.form.arrivalCardNo')"
:model-value="readonly ? arrivalTMNo || '-' : arrivalTMNo"
@update:model-value="
@ -374,7 +379,7 @@ watch(
/>
<DatePicker
class="col-4"
class="col-md-4 col-12"
:id="`${prefixId}-date-picker-visa-enter`"
:readonly="readonly"
:label="$t('customerEmployee.form.visaEnter')"
@ -391,7 +396,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-12"
:label="$t('customerEmployee.form.visaCheckpoint')"
:model-value="readonly ? arrivalAt || '-' : arrivalAt"
@update:model-value="
@ -414,7 +419,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
class="col-4"
class="col-md-4 col-6"
:dense="dense"
:readonly="readonly"
:options="visaTypeOptions"
@ -446,7 +451,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.form.entryCount')"
v-model="entryCount"
type="number"

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

@ -237,7 +237,7 @@ const workplaceFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
class="col-md-4 col-12"
:label="$t('customerEmployee.formWorkHistory.identityNo')"
v-model="work.identityNo"
mask="#############"
@ -256,7 +256,7 @@ const workplaceFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.formWorkHistory.permitNo')"
v-model="work.workPermitNo"
/>
@ -266,7 +266,7 @@ const workplaceFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.formWorkHistory.permitIssuedAt')"
v-model="work.workPermitIssueAt"
/>
@ -274,7 +274,7 @@ const workplaceFilter = selectFilterOptionRefMod(
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
v-model="work.workPermitIssueDate"
class="col-3"
class="col-md-3 col-6"
:id="`${prefixId}-date-picker-work-permit-issue-date`"
:readonly="readonly || work.statusSave"
clearable
@ -282,7 +282,7 @@ const workplaceFilter = selectFilterOptionRefMod(
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
v-model="work.workPermitExpireDate"
class="col-3"
class="col-md-3 col-6"
:id="`${prefixId}-date-picker-work-permit-expire-date`"
:readonly="readonly || work.statusSave"
:disabled-dates="

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

@ -289,7 +289,7 @@ defineEmits<{
hide-bottom-space
:readonly="readonly"
:disable="!readonly"
class="col-3"
class="col-md-3 col-12"
:label="$t('customerEmployee.form.employeeCode')"
v-model="code"
/>
@ -301,7 +301,7 @@ defineEmits<{
outlined
hide-bottom-space
:readonly="readonly"
class="col-6"
class="col-md-6 col-12"
:label="$t('customerEmployee.form.nrcNo')"
:model-value="nrcNo"
@update:model-value="(v) => (typeof v === 'string' ? (nrcNo = v) : '')"