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

refactor: responsive

Browse source
This commit is contained in:
Methapon Metanipat 2024-08-23 09:19:23 +07:00
parent c9f9d849e2
commit 10acfd9d0c
1 changed files with 11 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

143
src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
View file

@ -179,7 +179,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
/>
</div>
<div class="col-12 row">
<div class="col-12 row q-col-gutter-sm">
<q-select
outlined
clearable
@ -190,7 +190,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
hide-selected
hide-bottom-space
dense
class="col-12 col-md-9"
class="col-12 col-md-7"
option-value="id"
input-debounce="0"
option-label="name"
@ -239,7 +239,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
option-value="value"
lazy-rules="ondemand"
hide-dropdown-icon
class="col-1"
class="col-12 col-md-2"
dense
:readonly="readonly"
:options="prefixNameOptions"
@ -269,7 +269,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-12 col-md-5"
:label="$t('customer.form.firstName')"
for="input-first-name"
v-model="firstName"
@ -280,7 +280,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-12 col-md-5"
:label="$t('customer.form.lastName')"
for="input-last-name"
v-model="lastName"
@ -295,7 +295,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
disable
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-1"
class="col-12 col-md-2"
:label="$t('customer.form.prefixName')"
for="input-prefix-name"
:model-value="
@ -309,7 +309,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-12 col-md-5"
:label="$t('customer.form.firstNameEN')"
for="input-first-name-en"
v-model="firstNameEN"
@ -320,7 +320,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-12 col-md-5"
:label="$t('customer.form.lastNameEN')"
for="input-last-name-en"
v-model="lastNameEN"
@ -340,7 +340,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
option-label="label"
option-value="value"
lazy-rules="ondemand"
class="col-2"
class="col-12 col-md-2"
dense
:readonly="readonly"
:options="genderOptions"
@ -373,7 +373,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-2"
class="col-12 col-md-3"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
@ -431,7 +431,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
:label="$t('formDialogInputAge')"
class="col-2"
class="col-12 col-md-2"
:model-value="
birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined
@ -440,126 +440,5 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
"
/>
</div>
<!-- <q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
dense
class="col-12 col-md-4"
option-value="id"
input-debounce="0"
option-label="name"
lazy-rules="ondemand"
v-model="registeredBranchId"
:readonly="readonly"
:options="filteredBranchOptions"
:hide-dropdown-icon="readonly"
:label="$t('registeredBranch')"
:for="`${prefixId}-input-source-nationality`"
:rules="[
(val) => {
const roles = getRole() || [];
return (
['admin', 'system', 'head_of_admin'].some((v) =>
roles.includes(v),
) ||
!!val ||
$t('form.error.required')
);
},
]"
@filter="branchFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
lazy-rules="ondemand"
dense
outlined
:disable="!readonly && !create"
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
:label="$t('customer.form.codeAbbrev')"
for="input-abbreviation"
:model-value="!create ? formatCode(code, 'code') : code"
:rules="[
(val: string) =>
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
$t('formDialogInputHqAbbreviation'),
]"
@update:model-value="(v: string) => (code = v)"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
readonly
:disable="!readonly"
hide-bottom-space
class="col-12 col-md-4"
:label="$t('customer.form.codeNumber')"
for="input-code"
:model-value="!create ? formatCode(code, 'number') : ''"
@update:model-value="(v: string) => (code = v)"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
hide-bottom-space
:label="$t('customer.form.customerName')"
v-model="customerName"
class="col-12 col-md-4"
:readonly="readonly"
:for="`${prefixId}-input-company-name`"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:readonly="readonly"
hide-bottom-space
:label="$t('customer.form.customerNameEN')"
v-model="customerNameEN"
:for="`${prefixId}-input-company-name-en`"
class="col-12 col-md-4"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
:readonly="readonly"
hide-bottom-space
v-model="personName"
:label="$t('customer.form.personName')"
:for="`${prefixId}-input-person-name`"
:rules="[(v: string) => !!v || $t('form.error.required')]"
class="col-12 col-md-4"
/>
<q-input
lazy-rules="ondemand"
dense
outlined
v-if="customerType === 'PERS'"
:readonly="readonly"
hide-bottom-space
:label="$t('customer.form.taxIdentificationNumber')"
v-model="taxNo"
:for="`${prefixId}-input-tax-no`"
class="col-12 col-md-4"
/> -->
</div>
</template>