chamomind/jws-frontend
chamomind/jws-frontend
7
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

67
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 { dialog } from 'src/stores/utils';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
@ -11,8 +12,8 @@ const userStore = useUserStore();
const userId = defineModel<string>('userId');
const userType = defineModel<string>('userType');
const registrationNo = defineModel<string | null>('registrationNo');
const startDate = defineModel<Date | null>('startDate');
const retireDate = defineModel<Date | null>('retireDate');
const startDate = defineModel<Date | null | string>('startDate');
const retireDate = defineModel<Date | null | string>('retireDate');
const responsibleArea = defineModel<string | null | undefined>(
'responsibleArea',
);
@ -32,6 +33,8 @@ const agencyFile = defineModel<File[]>('agencyFile');
const agencyFileList =
defineModel<{ name: string; url: string }[]>('agencyFileList');
const attachmentRef = ref();
defineProps<{
dense?: boolean;
outlined?: boolean;
@ -66,10 +69,10 @@ function deleteFile(name: string) {
</script>
<template>
<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') }}
</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-9 col-12 row q-col-gutter-md">
<div
v-if="userType === 'USER' || userType === 'MESSENGER'"
class="row col-12 q-col-gutter-md"
@ -112,9 +115,11 @@ function deleteFile(name: string) {
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
startDate && readonly
? dateFormat(startDate)
: dateFormat(startDate, false, false, true)
startDate
? readonly
? dateFormat(startDate)
: dateFormat(startDate, false, false, true)
: ''
"
@update:model-value="
(v) => {
@ -135,9 +140,9 @@ function deleteFile(name: string) {
<template v-slot:append>
<q-icon
v-if="startDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click="startDate = undefined"
/>
</template>
@ -172,9 +177,11 @@ function deleteFile(name: string) {
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
retireDate && readonly
? dateFormat(retireDate)
: dateFormat(retireDate, false, false, true)
retireDate
? readonly
? dateFormat(retireDate)
: dateFormat(retireDate, false, false, true)
: ''
"
@update:model-value="
(v) => {
@ -195,9 +202,9 @@ function deleteFile(name: string) {
<template v-slot:append>
<q-icon
v-if="retireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click="retireDate = undefined"
/>
</template>
@ -253,7 +260,7 @@ function deleteFile(name: string) {
map-options
options-dense
:label="$t('formDialogInputSourceNationality')"
class="col-3"
class="col-md-3 col-6"
option-label="label"
option-value="label"
v-model="sourceNationality"
@ -269,7 +276,7 @@ function deleteFile(name: string) {
map-options
options-dense
:label="$t('formDialogInputImportNationality')"
class="col-3"
class="col-md-3 col-6"
option-label="label"
option-value="label"
v-model="importNationality"
@ -285,7 +292,7 @@ function deleteFile(name: string) {
map-options
options-dense
:label="$t('formDialogInputTrainingPlace')"
class="col-6"
class="col-md-6 col-12"
option-label="label"
option-value="label"
v-model="trainingPlace"
@ -310,7 +317,8 @@ function deleteFile(name: string) {
v-model="checkpointEN"
/>
<q-file
for="input-attchment"
ref="attachmentRef"
for="input-attachment"
:dense="dense"
outlined
:readonly="readonly"
@ -319,7 +327,24 @@ function deleteFile(name: string) {
:label="$t('formDialogAttachment')"
class="col-12"
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">
<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>
<template>
<div class="col-3 app-text-muted">
<div class="col-md-3 col-12 app-text-muted">
• {{ $t('formDialogTitleInformation') }}
</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-select
id="select-hq-id"
:dense="dense"
@ -49,7 +49,7 @@ onMounted(async () => {
map-options
options-dense
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
v-model="hqId"
option-label="label"
option-value="value"
@ -69,7 +69,7 @@ onMounted(async () => {
options-dense
clearable
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
v-model="brId"
:label="$t('formDialogInputBrId')"
option-label="label"
@ -85,7 +85,7 @@ onMounted(async () => {
map-options
options-dense
hide-bottom-space
class="col-4"
class="col-md-4 col-12"
:label="$t('formDialogInputUsername')"
v-model="username"
:rules="[

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

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