refactor: edit layout ui input

src/components/02_personnel-management/FormPerson.vue

@@ -12,7 +12,7 @@ import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
 const optionStore = useOptionStore();
-
+const prefixNameTh = defineModel<string>('prefixName');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
 const firstNameEN = defineModel<string>('firstNameEN');
@@ -23,6 +23,13 @@ const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 
+const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+const prefixNameFilter = selectFilterOptionRefMod(
+  ref(optionStore.globalOption.prefix),
+  prefixNameOptions,
+  'label',
+);
+
 const genderOptions = ref<Record<string, unknown>[]>([]);
 const genderFilter = selectFilterOptionRefMod(
   ref(optionStore.globalOption.gender),
@@ -48,10 +55,52 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-md-3 col-12 app-text-muted">
+  <div class="row col-12">
-    • {{ title || $t('formDialogTitlePersonnel') }}
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-account"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
     </div>
-  <div class="col-md-9 col-12 row q-col-gutter-md">
+
+    <div class="col-12 row q-col-gutter-sm">
+      <div class="col-6 row">
+        <q-select
+          outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          v-model="prefixNameTh"
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          lazy-rules="ondemand"
+          class="col-2"
+          :dense="dense"
+          :readonly="readonly"
+          :options="prefixNameOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-prefix-name`"
+          :label="$t('formDialogInputPrefixName')"
+          @filter="prefixNameFilter"
+        >
+          <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"
           :for="`${prefixId}-input-first-name`"
@@ -59,7 +108,7 @@ defineProps<{
           outlined
           :readonly="readonly"
           hide-bottom-space
-      class="col-md-3 col-6"
+          class="col"
           :label="$t('formDialogInputFirstName')"
           v-model="firstName"
           :rules="[
@@ -73,11 +122,46 @@ defineProps<{
           outlined
           :readonly="readonly"
           hide-bottom-space
-      class="col-md-3 col-6"
+          class="col"
           :label="$t('formDialogInputLastName')"
           v-model="lastName"
-      :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
+          :rules="[
+            (val: string) => !!val || $t('formDialogInputLastNameValidate'),
+          ]"
         />
+      </div>
+
+      <q-select
+        outlined
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        v-model="prefixNameTh"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        class="col-1"
+        :dense="dense"
+        :readonly="readonly"
+        :options="prefixNameOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-prefix-name`"
+        :label="$t('formDialogInputPrefixName')"
+        @filter="prefixNameFilter"
+      >
+        <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"
         :for="`${prefixId}-input-first-name-en`"
@@ -85,7 +169,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-      class="col-md-3 col-6"
+        class="col-2"
         :label="$t('formDialogInputFirstNameEN')"
         v-model="firstNameEN"
         :rules="[
@@ -99,13 +183,14 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-      class="col-md-3 col-6"
+        class="col-2"
         :label="$t('formDialogInputLastNameEN')"
         v-model="lastNameEN"
         :rules="[
           (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
         ]"
       />
+
       <q-input
         lazy-rules="ondemand"
         v-if="!employee"
@@ -113,7 +198,7 @@ defineProps<{
         :dense="dense"
         outlined
         :readonly="readonly"
-      class="col-6"
+        class="col-3"
         :label="$t('formDialogInputTelephone')"
         v-model="telephoneNo"
         mask="##########"
@@ -126,13 +211,13 @@ defineProps<{
         outlined
         :readonly="readonly"
         :label="$t('formDialogInputEmail')"
-      class="col-6"
+        class="col-3"
         v-model="email"
       />
+
       <q-select
         v-if="!employee"
         outlined
-      clearable
         use-input
         fill-input
         emit-value
@@ -144,7 +229,7 @@ defineProps<{
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-      class="col-md-3 col-6"
+        class="col-1"
         :dense="dense"
         :readonly="readonly"
         :options="genderOptions"
@@ -174,7 +259,7 @@ defineProps<{
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
-      class="col-md-3 col-6"
+        class="col-2"
       >
         <template #year="{ value }">
           {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -212,7 +297,6 @@ defineProps<{
               }
             "
           >
-          <!-- v-model="birthDate" -->
             <template v-slot:prepend>
               <q-icon
                 size="xs"
@@ -232,7 +316,7 @@ defineProps<{
         outlined
         readonly
         :label="$t('formDialogInputAge')"
-      class="col-md-3 col-6"
+        class="col"
         :model-value="
           birthDate?.toString() === 'Invalid Date' ||
           birthDate?.toString() === undefined
@@ -240,6 +324,7 @@ defineProps<{
             : calculateAge(birthDate)
         "
       />
+
       <q-select
         v-if="employee"
         outlined
@@ -313,9 +398,5 @@ defineProps<{
         </template>
       </q-select>
     </div>
-  <q-separator
+  </div>
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
 </template>

src/components/TabComponent.vue

@@ -146,9 +146,10 @@ onMounted(() => {
             () => {
               if (v.statusSave) {
                 $emit('remove', index, v.id);
-              }
+              } else {
                 close(index);
               }
+            }
           "
         />
       </q-tab>

src/pages/02_personnel-management/MainPage.vue

@@ -32,7 +32,8 @@ import NoData from 'components/NoData.vue';
 import ProfileUpload from 'components/ProfileUpload.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import useOptionStore from 'src/stores/options';
-status;
+import ProfileBanner from 'src/components/ProfileBanner.vue';
+import SideMenu from 'src/components/SideMenu.vue';
 
 const { locale, t } = useI18n();
 const $q = useQuasar();
@@ -109,9 +110,29 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   },
 ]);
 
+const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
+  {
+    icon: 'mdi-account',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+
+  {
+    icon: 'mdi-map-marker-radius',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+  {
+    icon: 'mdi-briefcase',
+    color: 'hsl(var(--info-bg))',
+    bgColor: 'var(--surface-1)',
+  },
+]);
+
 const fieldSelected = ref<
   ('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
 >(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
+
 const fieldDisplay = ref();
 const hideStat = ref(false);
 const userCode = ref<string>();
@@ -175,20 +196,22 @@ const formData = ref<UserCreate>({
   status: 'CREATED',
 });
 
-const profileUrl = ref<string | null>('');
+const isImageEdit = ref<boolean>(false);
-const profileFile = ref<File | undefined>(undefined);
+const imageUrl = ref<string | null>('');
+const profileFileImg = ref<File | null>(null);
+const imageDialog = ref(false);
 
-const inputFile = (() => {
+const inputFileImg = (() => {
   const element = document.createElement('input');
   element.type = 'file';
   element.accept = 'image/*';
 
   const reader = new FileReader();
   reader.addEventListener('load', () => {
-    if (typeof reader.result === 'string') profileUrl.value = reader.result;
+    if (typeof reader.result === 'string') imageUrl.value = reader.result;
 
     if (infoDrawerEdit.value && currentUser.value)
-      currentUser.value.profileImageUrl = profileUrl.value as string;
+      currentUser.value.profileImageUrl = imageUrl.value as string;
     // profileUrl.value = currentUser.value?.profileImageUrl as string;
 
     // if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
@@ -196,9 +219,9 @@ const inputFile = (() => {
   });
 
   element.addEventListener('change', () => {
-    profileFile.value = element.files?.[0];
+    profileFileImg.value = element.files?.[0];
-    if (profileFile.value) {
+    if (profileFileImg.value) {
-      reader.readAsDataURL(profileFile.value);
+      reader.readAsDataURL(profileFileImg.value);
     }
   });
 
@@ -259,12 +282,12 @@ reader.addEventListener('load', () => {
   if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
 });
 
-watch(profileFile, () => {
+watch(profileFileImg, () => {
-  if (profileFile.value) reader.readAsDataURL(profileFile.value);
+  if (profileFileImg.value) reader.readAsDataURL(profileFileImg.value);
 });
 
-inputFile.addEventListener('change', (e) => {
+inputFileImg.addEventListener('change', (e) => {
-  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
+  profileFileImg.value = (e.currentTarget as HTMLInputElement).files?.[0];
 });
 
 const selectorList = computed(() => [
@@ -360,7 +383,7 @@ function onClose() {
   userId.value = '';
   userCode.value = '';
   urlProfile.value = undefined;
-  profileFile.value = undefined;
+  profileFileImg.value = null;
   infoDrawerEdit.value = false;
   agencyFile.value = [];
   modal.value = false;
@@ -375,7 +398,7 @@ function onClose() {
 
 async function onSubmit() {
   if (profileSubmit.value) {
-    formData.value.profileImage = profileFile.value as File;
+    formData.value.profileImage = profileFileImg.value as File;
   } else {
     formData.value.profileImage = null;
   }
@@ -520,7 +543,7 @@ async function assignFormData(idEdit: string) {
   if (foundUser) {
     currentUser.value = foundUser;
     infoPersonId.value = currentUser.value.id;
-    profileUrl.value = currentUser.value.profileImageUrl;
+    imageUrl.value = currentUser.value.profileImageUrl;
     formData.value = {
       branchId: foundUser.branch[0]?.id,
       provinceId: foundUser.provinceId,
@@ -568,7 +591,7 @@ async function assignFormData(idEdit: string) {
     userId.value = foundUser.id;
 
     if (foundUser.branch) {
-      if (foundUser.branch[0].isHeadOffice) {
+      if (foundUser.branch?.[0].isHeadOffice) {
         hqId.value = foundUser.branch[0].id as string;
       } else {
         hqId.value = foundUser.branch[0].headOfficeId as string;
@@ -593,6 +616,12 @@ async function assignFormData(idEdit: string) {
   }
 }
 
+function openImageDialog(isEdit?: boolean) {
+  if (isEdit) isImageEdit.value = true;
+  else isImageEdit.value = false;
+  imageDialog.value = true;
+}
+
 onMounted(async () => {
   utilsStore.currentTitle.title = 'personnelManagement';
   utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
@@ -1472,11 +1501,111 @@ watch(
       v-model:subDistrictId="formData.subDistrictId"
       v-model:zipCode="formData.zipCode"
     >
+      <div class="q-mx-lg q-mt-lg">
+        <ProfileBanner
+          active
+          hideFade
+          :img="
+            imageUrl ||
+            {
+              male: '/no-img-man.png',
+              female: '/no-img-female.png',
+            }[formData.gender]
+          "
+          :cover="imageUrl || null"
+          :title="`${formData.firstName} ${formData.lastName}`"
+          :caption="`${formData.firstNameEN} ${formData.lastNameEN}`"
+          color="hsla(var(--pink-6-hsl)/1)"
+          bgColor="hsla(var(--pink-6-hsl)/0.15)"
+          @view="openImageDialog"
+          @edit="inputFileImg.click()"
+          :readonly="!infoDrawerEdit"
+          :menu="formMenuIcon"
+        />
+      </div>
+      <!-- ย้อนกลับ -->
+
       <div
+        class="col surface-1 q-ma-lg rounded bordered scroll row"
+        id="personnel-form"
+      >
+        <div class="col">
+          <div style="position: sticky; top: 0" class="q-pa-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('formDialogTitleInformation'),
+                  anchor: 'form-information',
+                },
+                {
+                  name: $t('formDialogTitlePersonal'),
+                  anchor: 'form-personal',
+                },
+                {
+                  name: $t('formDialogTitleAddressPersonnel'),
+                  anchor: 'form-address',
+                },
+                {
+                  name: $t('formDialogTitleByType'),
+                  anchor: 'form-work',
+                },
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#personnel-form"
+            />
+          </div>
+        </div>
+
+        <div class="col-10 q-pa-md q-gutter-y-xl">
+          <FormInformation
+            id="form-information"
+            v-model:hq-id="hqId"
+            v-model:br-id="brId"
+            v-model:user-type="formData.userType"
+            v-model:user-role="formData.userRole"
+            v-model:username="formData.username"
+            v-model:user-code="userCode"
+            dense
+            outlined
+            separator
+            :title="$t('formDialogTitleInformation')"
+            :readonly="!infoDrawerEdit"
+            :usernameReadonly="isEdit"
+          />
+
+          <FormPerson
+            id="form-personal"
+            v-model:first-name="formData.firstName"
+            v-model:last-name="formData.lastName"
+            v-model:first-name-en="formData.firstNameEN"
+            v-model:last-name-en="formData.lastNameEN"
+            v-model:telephone-no="formData.telephoneNo"
+            v-model:email="formData.email"
+            v-model:gender="formData.gender"
+            v-model:birth-date="formData.birthDate"
+            :title="$t('formDialogTitlePersonal')"
+            prefix-id="drawer-info-personnel"
+            dense
+            outlined
+            separator
+            :readonly="!infoDrawerEdit"
+          />
+        </div>
+      </div>
+
+      <!-- <div
         class="col surface-1 q-ma-lg rounded bordered scroll row"
         id="branch-info"
       >
+     
         <div class="col-10 q-pa-md q-gutter-y-xl">
+
+    
+
           <ProfileUpload
             prefix-id="drawer-info-personnel"
             v-model:url-profile="profileUrl"
@@ -1485,7 +1614,7 @@ watch(
             @input-file="inputFile.click()"
             @cancel-file="inputFile.value = ''"
           />
-          <!-- <AppBox class="surface-1" style="padding: 0">
+          <AppBox class="surface-1" style="padding: 0">
               <PersonCard
                 :can-edit-profile="infoDrawerEdit"
                 :data="{
@@ -1503,7 +1632,7 @@ watch(
                 no-bg
                 @edit-profile="inputFile.click()"
               />
-            </AppBox> -->
+            </AppBox>
           <FormInformation
             dense
             outlined
@@ -1553,7 +1682,7 @@ watch(
             v-model:userId="userId"
           />
         </div>
-      </div>
+      </div>  -->
     </InfoForm>
   </DrawerInfo>
 
@@ -1581,8 +1710,8 @@ watch(
         v-model:url-profile="urlProfile"
         v-model:status-toggle="statusToggle"
         v-model:profile-submit="profileSubmit"
-        @input-file="inputFile.click()"
+        @input-file="inputFileImg.click()"
-        @cancel-file="inputFile.value = ''"
+        @cancel-file="inputFileImg.value = ''"
       />
     </template>