From 0f7ec172f884d2683e42c8cbc954bfb56040cc74 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 24 Jul 2024 06:39:01 +0000
Subject: [PATCH] fix(02): resposive form and drawer

---
 .../02_personnel-management/FormByType.vue    | 67 +++++++++++++------
 .../FormInformation.vue                       | 10 +--
 .../02_personnel-management/FormPerson.vue    | 18 ++---
 3 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index d74accca..7f6d24fe 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -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">
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 1f7ccc38..2eea42af 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -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="[
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index c7864100..95a6fea5 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -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