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

refactor: 03 Customer => improve responsive design across multiple components

Browse source
This commit is contained in:
puriphatt 2025-01-27 13:47:33 +07:00
parent b8eec6f494
commit d012bb4d70
7 changed files with 106 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/ProfileBanner.vue
View file

@ -343,7 +343,7 @@ const smallBanner = ref(false);
> >
<template #error> <template #error>
<div <div
class="full-width full-height flex items-center justify-center" class="full-width full-height flex items-center justify-center no-padding"
:style="{ :style="{
background: `${bgColor || 'var(--brand-1)'}`, background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`, color: `${color || 'white'}`,

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

@ -320,7 +320,7 @@ watchEffect(async () => {
<q-input <q-input
outlined outlined
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-12"
v-model="homeCode" v-model="homeCode"
mask="###########" mask="###########"
:dense="dense" :dense="dense"
@ -344,7 +344,7 @@ watchEffect(async () => {
<q-input <q-input
outlined outlined
hide-bottom-space hide-bottom-space
class="col" class="col-md col-12"
:model-value="office" :model-value="office"
:dense="dense" :dense="dense"
:label="$t('customer.form.employmentOffice')" :label="$t('customer.form.employmentOffice')"

37
src/pages/03_customer-management/BranchPage.vue
View file

@ -2,7 +2,7 @@
import { ref, onMounted, watch } from 'vue'; import { ref, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { QTableProps } from 'quasar'; import { QSelect, QTableProps } from 'quasar';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { baseUrl } from 'src/stores/utils'; import { baseUrl } from 'src/stores/utils';
@ -67,6 +67,7 @@ const currentCustomerUrlImage = defineModel<string | null>(
const { state: employeeFormState } = storeToRefs(employeeFormStore); const { state: employeeFormState } = storeToRefs(employeeFormStore);
const refFilter = ref<InstanceType<typeof QSelect>>();
const currentStatus = ref<Status | 'All'>('All'); const currentStatus = ref<Status | 'All'>('All');
const currentBtnOpen = ref<boolean[]>([]); const currentBtnOpen = ref<boolean[]>([]);
const totalBranch = ref(0); const totalBranch = ref(0);
@ -334,11 +335,11 @@ watch(
</div> </div>
</div> </div>
<div class="row items-center justify-end col-12 col-md q-py-sm no-wrap"> <div class="row items-center justify-between col-12 col-md q-py-sm no-wrap">
<q-input <q-input
outlined outlined
dense dense
class="col-6" class="col-md-6 col"
:label="$t('general.search')" :label="$t('general.search')"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
@ -347,9 +348,25 @@ watch(
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
id="select-status" id="select-status"
for="select-status" for="select-status"
v-model="currentStatus" v-model="currentStatus"
@ -657,7 +674,12 @@ watch(
totalEmployee: props.row._count?.employee, totalEmployee: props.row._count?.employee,
}" }"
:visible-columns="branchFieldSelected" :visible-columns="branchFieldSelected"
@view-detail="$emit('viewDetail', props.row, props.rowIndex)" @view-detail="
() => {
customerBranchFormStore.initForm('info', props.row.id);
customerBranchFormState.dialogModal = true;
}
"
/> />
</div> </div>
</template> </template>
@ -868,7 +890,11 @@ watch(
v-model:wage-rate="customerBranchFormData.wageRate" v-model:wage-rate="customerBranchFormData.wageRate"
v-model:wage-rate-text="customerBranchFormData.wageRateText" v-model:wage-rate-text="customerBranchFormData.wageRateText"
/> />
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address"> <div
v-if="customerType === 'CORP'"
class="row q-col-gutter-sm q-mb-sm"
id="employer-branch-address"
>
<div class="col-12 text-weight-bold text-body1 row items-center"> <div class="col-12 text-weight-bold text-body1 row items-center">
<q-icon <q-icon
flat flat
@ -882,6 +908,7 @@ watch(
</div> </div>
</div> </div>
<EmployerFormAuthorized <EmployerFormAuthorized
v-if="customerType === 'CORP'"
class="q-mb-xl" class="q-mb-xl"
prefix-id="employer-branch" prefix-id="employer-branch"
:readonly="customerBranchFormState.dialogType === 'info'" :readonly="customerBranchFormState.dialogType === 'info'"

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

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'; import { ref, watch, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { QSelect, useQuasar } from 'quasar';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { getUserId, getRole } from 'src/services/keycloak'; import { getUserId, getRole } from 'src/services/keycloak';
import { baseUrl, waitAll } from 'src/stores/utils'; import { baseUrl, waitAll } from 'src/stores/utils';
@ -101,6 +101,7 @@ const employeeFormStore = useEmployeeForm();
const optionStore = useOptionStore(); const optionStore = useOptionStore();
const ocrStore = useOcrStore(); const ocrStore = useOcrStore();
const refFilter = ref<InstanceType<typeof QSelect>>();
const statusEmployeeCreate = ref<boolean>(false); const statusEmployeeCreate = ref<boolean>(false);
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>(); const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>( const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
@ -197,7 +198,7 @@ const customerNameInfo = computed(() => {
const currentBtnOpen = ref<boolean[]>([]); const currentBtnOpen = ref<boolean[]>([]);
const employeeStats = ref(0); const employeeStats = ref(0);
const gridView = ref(false); const gridView = ref(false);
const splitPercent = ref(15); // Customer only const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
const currentPageCustomer = ref<number>(1); const currentPageCustomer = ref<number>(1);
const maxPageCustomer = ref<number>(1); const maxPageCustomer = ref<number>(1);
@ -906,7 +907,7 @@ const emptyCreateDialog = ref(false);
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
class="col-12 col-md-3" class="col col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="200" debounce="200"
@ -914,15 +915,26 @@ const emptyCreateDialog = ref(false);
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
<template v-if="$q.screen.lt.md" v-slot:append>
<span class="row">
<q-separator vertical />
<q-btn
icon="mdi-filter-variant"
unelevated
class="q-ml-sm"
padding="4px"
size="sm"
rounded
@click="refFilter?.showPopup"
/>
</span>
</template>
</q-input> </q-input>
<div <div class="row col-md-5" style="white-space: nowrap">
class="row col-md-5 col-12"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<!-- :class="{ 'offset-md-5': gridView }" -->
<q-select <q-select
v-show="$q.screen.gt.sm"
ref="refFilter"
id="select-status" id="select-status"
for="select-status" for="select-status"
v-model="currentStatus" v-model="currentStatus"
@ -931,6 +943,7 @@ const emptyCreateDialog = ref(false);
autocomplete="off" autocomplete="off"
option-value="value" option-value="value"
option-label="label" option-label="label"
:class="{ 'offset-md-5': gridView }"
class="col" class="col"
map-options map-options
emit-value emit-value
@ -943,6 +956,7 @@ const emptyCreateDialog = ref(false);
></q-select> ></q-select>
<!-- v-if="gridView === false" --> <!-- v-if="gridView === false" -->
<q-select <q-select
v-if="!gridView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="q-ml-sm col" class="q-ml-sm col"
@ -1077,6 +1091,33 @@ const emptyCreateDialog = ref(false);
</q-tab> </q-tab>
</q-tabs> </q-tabs>
</div> </div>
<div
v-if="$q.screen.lt.md && currentTab === 'employer'"
class="q-px-md row q-gutter-x-sm items-center"
>
<nav
class="col rounded q-pa-sm text-center app-text-muted"
:class="{
'active-tab-sm': customerTypeSelected.value === v,
'bordered surface-1': customerTypeSelected.value !== v,
}"
v-for="v in fieldCustomer"
:key="v"
@click="customerTypeSelected = { label: v, value: v }"
id="`btn-sm-${v}`"
>
{{
$t(
{
all: 'general.all',
customerLegalEntity: 'customer.employerLegalEntity',
customerNaturalPerson: 'customer.employerNaturalPerson',
}[v],
)
}}
</nav>
</div>
</div> </div>
<!-- body --> <!-- body -->
@ -1087,6 +1128,7 @@ const emptyCreateDialog = ref(false);
class="col full-width" class="col full-width"
before-class="overflow-hidden" before-class="overflow-hidden"
after-class="overflow-hidden" after-class="overflow-hidden"
:disable="$q.screen.lt.sm"
> >
<template v-slot:before> <template v-slot:before>
<div <div
@ -2096,7 +2138,7 @@ const emptyCreateDialog = ref(false);
class="col-12 col-md-10" class="col-12 col-md-10"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
id="customer-form-content" id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
@ -3922,7 +3964,7 @@ const emptyCreateDialog = ref(false);
'q-px-md q-pb-sm': !$q.screen.gt.sm, 'q-px-md q-pb-sm': !$q.screen.gt.sm,
}" }"
> >
<div class="col bg-red surface-1 rounded bordered row"> <div class="col full-width surface-1 rounded bordered row">
<div class="col full-height scroll" v-if="$q.screen.gt.sm"> <div class="col full-height scroll" v-if="$q.screen.gt.sm">
<div class="q-py-md q-pl-md q-pr-sm"> <div class="q-py-md q-pl-md q-pr-sm">
<SideMenu <SideMenu
@ -3981,7 +4023,7 @@ const emptyCreateDialog = ref(false);
class="col-12 col-md-10" class="col-12 col-md-10"
:class="{ :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm, 'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm,
}" }"
id="customer-form-content" id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
@ -5721,4 +5763,9 @@ const emptyCreateDialog = ref(false);
transform: rotate(90deg); transform: rotate(90deg);
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.active-tab-sm {
color: hsla(var(--info-bg) / 1);
background-color: hsla(var(--info-bg) / 0.1);
}
</style> </style>

20
src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
View file

@ -167,7 +167,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6 col-md-5" class="col-12 col-md-5"
:label="$t('customer.form.employerName')" :label="$t('customer.form.employerName')"
for="input-legal-person-no" for="input-legal-person-no"
:model-value="customerName" :model-value="customerName"
@ -224,7 +224,7 @@ watch(
<div class="col-12 row q-col-gutter-sm"> <div class="col-12 row q-col-gutter-sm">
<DatePicker <DatePicker
v-model="registerDate" v-model="registerDate"
class="col-6 col-md-2" class="col-12 col-md-2"
:id="`${prefixId}-input-register-date`" :id="`${prefixId}-input-register-date`"
:label="$t('customer.form.registerDate')" :label="$t('customer.form.registerDate')"
:readonly="readonly" :readonly="readonly"
@ -264,7 +264,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6 col-md-3" class="col-12 col-md-3"
:label="$t('customer.form.headQuarters.telephoneNo')" :label="$t('customer.form.headQuarters.telephoneNo')"
for="input-telephone-no" for="input-telephone-no"
:model-value="readonly ? telephoneNo || '-' : telephoneNo" :model-value="readonly ? telephoneNo || '-' : telephoneNo"
@ -285,7 +285,7 @@ watch(
</template> </template>
<template v-if="customerType === 'PERS'"> <template v-if="customerType === 'PERS'">
<div class="col-7 row q-col-gutter-sm"> <div class="col-md-7 col-12 row q-col-gutter-sm">
<q-input <q-input
dense dense
outlined outlined
@ -320,7 +320,7 @@ watch(
/> />
</div> </div>
<div class="col-9 row q-col-gutter-sm"> <div class="col-md-9 col-12 row q-col-gutter-sm">
<q-select <q-select
outlined outlined
use-input use-input
@ -360,7 +360,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col" class="col-md col-12"
:label="$t('personnel.form.firstName')" :label="$t('personnel.form.firstName')"
:model-value="firstName" :model-value="firstName"
@update:model-value=" @update:model-value="
@ -384,7 +384,7 @@ watch(
/> />
</div> </div>
<div class="col-9 row q-col-gutter-sm"> <div class="col-md-9 col-12 row q-col-gutter-sm">
<q-input <q-input
:for="`${prefixId}-input-prefix-name`" :for="`${prefixId}-input-prefix-name`"
dense dense
@ -411,7 +411,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col" class="col-md col-12"
label="Name" label="Name"
:model-value="firstNameEN" :model-value="firstNameEN"
@update:model-value=" @update:model-value="
@ -443,13 +443,13 @@ watch(
/> />
</div> </div>
<div class="row col-9 q-col-gutter-sm"> <div class="row col-md-9 col-12 q-col-gutter-sm">
<q-input <q-input
:for="`${prefixId}-input-telephone`" :for="`${prefixId}-input-telephone`"
dense dense
outlined outlined
:readonly="readonly" :readonly="readonly"
class="col-md col-6" class="col-md col-12"
:label="$t('form.telephone')" :label="$t('form.telephone')"
:mask="readonly ? '' : '##########'" :mask="readonly ? '' : '##########'"
:model-value="readonly ? telephoneNo || '-' : telephoneNo" :model-value="readonly ? telephoneNo || '-' : telephoneNo"

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

@ -96,7 +96,7 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
</div> </div>
<div class="col-12 row q-col-gutter-sm"> <div class="col-12 row q-col-gutter-sm">
<div class="col-12 row q-col-gutter-sm"> <div class="col-md-5 col-12">
<SelectBranch <SelectBranch
:for="`${prefixId}-input-source-registered-branch`" :for="`${prefixId}-input-source-registered-branch`"
class="col-md-6" class="col-md-6"

3
src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
View file

@ -25,8 +25,6 @@ import {
} from 'components/button'; } from 'components/button';
import { UploadFileGroup } from 'src/components/upload-file/'; import { UploadFileGroup } from 'src/components/upload-file/';
import { uploadFileListCustomer, columnsAttachment } from '../../constant'; import { uploadFileListCustomer, columnsAttachment } from '../../constant';
import { symOutlinedResume } from '@quasar/extras/material-symbols-outlined';
import { group } from 'console';
const ocrStore = useOcrStore(); const ocrStore = useOcrStore();
const customerStore = useCustomerStore(); const customerStore = useCustomerStore();
@ -114,6 +112,7 @@ withDefaults(
class="bordered-b" class="bordered-b"
active-color="primary" active-color="primary"
no-caps no-caps
mobile-arrows
style="color: hsl(var(--text-mute))" style="color: hsl(var(--text-mute))"
> >
<q-tab name="main" :label="$t('customerBranch.tab.main')" /> <q-tab name="main" :label="$t('customerBranch.tab.main')" />