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

fix(02): resposive form and drawer

Browse source
This commit is contained in:
puriphatt 2024-07-24 06:39:01 +00:00
parent 45398061c0
commit 0f7ec172f8
3 changed files with 60 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import useUserStore from 'src/stores/user';
import { UserAttachmentDelete } from 'src/stores/user/types'; import { UserAttachmentDelete } from 'src/stores/user/types';
import { dialog } from 'src/stores/utils'; import { dialog } from 'src/stores/utils';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime'; import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { locale } = useI18n(); const { locale } = useI18n();
@ -11,8 +12,8 @@ const userStore = useUserStore();
const userId = defineModel<string>('userId'); const userId = defineModel<string>('userId');
const userType = defineModel<string>('userType'); const userType = defineModel<string>('userType');
const registrationNo = defineModel<string | null>('registrationNo'); const registrationNo = defineModel<string | null>('registrationNo');
const startDate = defineModel<Date | null>('startDate'); const startDate = defineModel<Date | null | string>('startDate');
const retireDate = defineModel<Date | null>('retireDate'); const retireDate = defineModel<Date | null | string>('retireDate');
const responsibleArea = defineModel<string | null | undefined>( const responsibleArea = defineModel<string | null | undefined>(
'responsibleArea', 'responsibleArea',
); );
@ -32,6 +33,8 @@ const agencyFile = defineModel<File[]>('agencyFile');
const agencyFileList = const agencyFileList =
defineModel<{ name: string; url: string }[]>('agencyFileList'); defineModel<{ name: string; url: string }[]>('agencyFileList');
const attachmentRef = ref();
defineProps<{ defineProps<{
dense?: boolean; dense?: boolean;
outlined?: boolean; outlined?: boolean;
@ -66,10 +69,10 @@ function deleteFile(name: string) {
</script> </script>
<template> <template>
<div class="row col-12"> <div class="row col-12">
<div v-if="userType" class="col-3 app-text-muted"> <div v-if="userType" class="col-md-3 col-12 app-text-muted q-mb-md">
• {{ $t('formDialogTitleByType') }} • {{ $t('formDialogTitleByType') }}
</div> </div>
<div class="col-9 row q-col-gutter-md"> <div class="col-md-9 col-12 row q-col-gutter-md">
<div <div
v-if="userType === 'USER' || userType === 'MESSENGER'" v-if="userType === 'USER' || userType === 'MESSENGER'"
class="row col-12 q-col-gutter-md" class="row col-12 q-col-gutter-md"
@ -112,9 +115,11 @@ function deleteFile(name: string) {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
startDate && readonly startDate
? readonly
? dateFormat(startDate) ? dateFormat(startDate)
: dateFormat(startDate, false, false, true) : dateFormat(startDate, false, false, true)
: ''
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -135,9 +140,9 @@ function deleteFile(name: string) {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="startDate && !readonly" v-if="startDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="startDate = undefined" @click="startDate = undefined"
/> />
</template> </template>
@ -172,9 +177,11 @@ function deleteFile(name: string) {
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
retireDate && readonly retireDate
? readonly
? dateFormat(retireDate) ? dateFormat(retireDate)
: dateFormat(retireDate, false, false, true) : dateFormat(retireDate, false, false, true)
: ''
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
@ -195,9 +202,9 @@ function deleteFile(name: string) {
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="retireDate && !readonly" v-if="retireDate && !readonly"
name="mdi-close" name="mdi-close-circle"
class="cursor-pointer" class="cursor-pointer app-text-muted"
size="xs" size="sm"
@click="retireDate = undefined" @click="retireDate = undefined"
/> />
</template> </template>
@ -253,7 +260,7 @@ function deleteFile(name: string) {
map-options map-options
options-dense options-dense
:label="$t('formDialogInputSourceNationality')" :label="$t('formDialogInputSourceNationality')"
class="col-3" class="col-md-3 col-6"
option-label="label" option-label="label"
option-value="label" option-value="label"
v-model="sourceNationality" v-model="sourceNationality"
@ -269,7 +276,7 @@ function deleteFile(name: string) {
map-options map-options
options-dense options-dense
:label="$t('formDialogInputImportNationality')" :label="$t('formDialogInputImportNationality')"
class="col-3" class="col-md-3 col-6"
option-label="label" option-label="label"
option-value="label" option-value="label"
v-model="importNationality" v-model="importNationality"
@ -285,7 +292,7 @@ function deleteFile(name: string) {
map-options map-options
options-dense options-dense
:label="$t('formDialogInputTrainingPlace')" :label="$t('formDialogInputTrainingPlace')"
class="col-6" class="col-md-6 col-12"
option-label="label" option-label="label"
option-value="label" option-value="label"
v-model="trainingPlace" v-model="trainingPlace"
@ -310,7 +317,8 @@ function deleteFile(name: string) {
v-model="checkpointEN" v-model="checkpointEN"
/> />
<q-file <q-file
for="input-attchment" ref="attachmentRef"
for="input-attachment"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
@ -319,7 +327,24 @@ function deleteFile(name: string) {
:label="$t('formDialogAttachment')" :label="$t('formDialogAttachment')"
class="col-12" class="col-12"
v-model="agencyFile" v-model="agencyFile"
>
<template v-slot:file="file">
<div class="row full-width items-center">
<span class="col ellipsis">
{{ file.file.name }}
</span>
<q-btn
dense
rounded
flat
padding="2 2"
class="app-text-muted"
icon="mdi-close-circle"
@click.stop="attachmentRef.removeAtIndex(file.index)"
/> />
</div>
</template>
</q-file>
<div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12"> <div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
<q-list bordered separator class="rounded" style="padding: 0"> <q-list bordered separator class="rounded" style="padding: 0">

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

@ -35,10 +35,10 @@ onMounted(async () => {
}); });
</script> </script>
<template> <template>
<div class="col-3 app-text-muted"> <div class="col-md-3 col-12 app-text-muted">
• {{ $t('formDialogTitleInformation') }} • {{ $t('formDialogTitleInformation') }}
</div> </div>
<div class="col-9 row q-col-gutter-md"> <div class="col-md-9 col-12 row q-col-gutter-md">
<q-select <q-select
id="select-hq-id" id="select-hq-id"
:dense="dense" :dense="dense"
@ -49,7 +49,7 @@ onMounted(async () => {
map-options map-options
options-dense options-dense
hide-bottom-space hide-bottom-space
class="col-4" class="col-md-4 col-6"
v-model="hqId" v-model="hqId"
option-label="label" option-label="label"
option-value="value" option-value="value"
@ -69,7 +69,7 @@ onMounted(async () => {
options-dense options-dense
clearable clearable
hide-bottom-space hide-bottom-space
class="col-4" class="col-md-4 col-6"
v-model="brId" v-model="brId"
:label="$t('formDialogInputBrId')" :label="$t('formDialogInputBrId')"
option-label="label" option-label="label"
@ -85,7 +85,7 @@ onMounted(async () => {
map-options map-options
options-dense options-dense
hide-bottom-space hide-bottom-space
class="col-4" class="col-md-4 col-12"
:label="$t('formDialogInputUsername')" :label="$t('formDialogInputUsername')"
v-model="username" v-model="username"
:rules="[ :rules="[

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

@ -31,17 +31,17 @@ defineProps<{
}>(); }>();
</script> </script>
<template> <template>
<div class="col-3 app-text-muted"> <div class="col-md-3 col-12 app-text-muted">
• {{ title || $t('formDialogTitlePersonnel') }} • {{ title || $t('formDialogTitlePersonnel') }}
</div> </div>
<div class="col-9 row q-col-gutter-md"> <div class="col-md-9 col-12 row q-col-gutter-md">
<q-input <q-input
for="input-first-name" for="input-first-name"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputFirstName')" :label="$t('formDialogInputFirstName')"
v-model="firstName" v-model="firstName"
:rules="[ :rules="[
@ -54,7 +54,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputLastName')" :label="$t('formDialogInputLastName')"
v-model="lastName" v-model="lastName"
:rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]" :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
@ -65,7 +65,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputFirstNameEN')" :label="$t('formDialogInputFirstNameEN')"
v-model="firstNameEN" v-model="firstNameEN"
:rules="[ :rules="[
@ -78,7 +78,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputLastNameEN')" :label="$t('formDialogInputLastNameEN')"
v-model="lastNameEN" v-model="lastNameEN"
:rules="[ :rules="[
@ -116,7 +116,7 @@ defineProps<{
emit-value emit-value
map-options map-options
:label="$t('formDialogInputGender')" :label="$t('formDialogInputGender')"
class="col-3" class="col-md-3 col-6"
option-label="label" option-label="label"
option-value="value" option-value="value"
v-model="gender" v-model="gender"
@ -135,7 +135,7 @@ defineProps<{
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'" :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false" :enableTimePicker="false"
:disabled="readonly" :disabled="readonly"
class="col-3" class="col-md-3 col-6"
> >
<template #year="{ value }"> <template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@ -190,7 +190,7 @@ defineProps<{
outlined outlined
readonly readonly
:label="$t('formDialogInputAge')" :label="$t('formDialogInputAge')"
class="col-3" class="col-md-3 col-6"
:model-value=" :model-value="
birthDate?.toString() === 'Invalid Date' || birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined birthDate?.toString() === undefined