feat: Personnel info form and btn

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

@@ -8,10 +8,14 @@ import useUserStore from 'stores/user';
 import useBranchStore from 'stores/branch';
 
 import { User } from 'stores/user/types';
-import { Branch, BranchWithChildren } from 'stores/branch/types';
+import { Branch } from 'stores/branch/types';
+import { dialog } from 'src/stores/utils';
 
 import PersonCard from 'components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
+import FormTop from 'src/components/02_personnel-management/FormTop.vue';
+import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 import useAddressStore, {
   District,
   Province,
@@ -32,9 +36,8 @@ const currentUser = ref<User>();
 const currentUserBranch = ref<Branch[]>([]);
 const currentHQ = ref<string | null>();
 const currentBR = ref<string | null>();
-
+const isEdit = ref(false);
-const hq = ref<Branch[]>([]);
+const formRef = ref();
-const br = ref<Branch[]>([]);
 
 async function getCurrentUser() {
   if (typeof route.params.id !== 'string') return;
@@ -67,23 +70,6 @@ async function getUserBranch() {
   }
 }
 
-async function getHQ() {
-  const res = await branchStore.fetchList({
-    filter: 'head',
-    pageSize: 9999,
-  });
-  if (res) hq.value = res.result;
-}
-
-async function getBR() {
-  if (!currentHQ.value) return;
-
-  const res = await branchStore.fetchById<BranchWithChildren>(currentHQ.value, {
-    includeSubBranch: true,
-  });
-  if (res) br.value = res.branch;
-}
-
 const opts = reactive<{
   province: Province[];
   district: District[];
@@ -113,18 +99,55 @@ async function getSubDistrict() {
   if (result) opts.subDistrict = result;
 }
 
+function triggerEdit(id?: string) {
+  if (!id) return;
+  isEdit.value = true;
+  console.log('Edit!');
+}
+
+function onSubmit() {
+  dialog({
+    color: 'primary',
+    icon: 'mdi-pencil-outline',
+    title: 'ยืนยันการแก้ไขข้อมูล',
+    actionText: 'ตกลง',
+    persistent: true,
+    message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
+    action: async () => {
+      console.log('Submit!');
+    },
+  });
+}
+
+function onDelete(id?: string) {
+  if (!id) return;
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: 'ยืนยันการลบข้อมูล',
+    actionText: 'ตกลง',
+    persistent: true,
+    message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
+    action: async () => {
+      console.log('Delete!');
+    },
+  });
+}
+
 onMounted(async () => {
-  getCurrentUser();
+  await getCurrentUser();
-  getHQ();
+  await getUserBranch();
-  getProvince();
+  await userStore.fetchHqOption();
+  if (!currentHQ.value) return;
+  await userStore.fetchBrOption(currentHQ.value);
+  await getProvince();
+
   if (userStore.userOption.roleOpts.length === 0) {
     userStore.fetchRoleOption();
   }
 });
 
 watch(() => route.params.id, getCurrentUser);
-watch(currentUser, getUserBranch);
-watch(currentHQ, getBR);
 watch(() => currentUser.value?.provinceId, getDistrict);
 watch(() => currentUser.value?.districtId, getSubDistrict);
 </script>
@@ -148,6 +171,13 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
   <div
     class="q-pa-md info-bg"
     :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
+  >
+    <q-form
+      greedy
+      ref="formRef"
+      id="formId"
+      @submit.prevent
+      @validation-success="onSubmit"
     >
       <div
         class="info-container"
@@ -166,9 +196,22 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
                 male: currentUser.gender === 'male',
                 female: currentUser.gender === 'female',
                 detail: [
-                { label: 'ตำแหน่ง', value: currentUser.userType },
+                  { label: 'ประเภท', value: $t(currentUser.userType) },
+                  {
+                    label: 'ตำแหน่ง',
+                    value: currentUser.userRole
+                      ? userStore.userOption.roleOpts.find(
+                          (r) => r.value === currentUser?.userRole,
+                        )?.label || ''
+                      : '',
+                  },
                   { label: 'โทรศัพท์', value: currentUser.telephoneNo },
-                { label: 'อีเมล', value: currentUser.email },
+                  {
+                    label: 'อายุ',
+                    value: userStore.calculateAge(
+                      currentUser.birthDate as Date,
+                    ),
+                  },
                 ],
                 badge: currentUser.code,
                 disabled: currentUser.status === 'INACTIVE',
@@ -182,20 +225,46 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           />
           <div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
             <div class="col-6">
-            <q-btn class="btn-edt full-width" padding="8px 8px">
+              <q-btn
+                v-if="!isEdit"
+                dense
+                class="btn-edit full-width"
+                @click="triggerEdit(currentUser?.id)"
+              >
                 <q-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
-              <span class="text-caption">แก้ไขข้อมูล</span>
+                <span>แก้ไขข้อมูล</span>
               </q-btn>
+              <q-btn
+                v-else
+                dense
+                class="btn-edit full-width"
+                label="บันทึกข้อมูล"
+                type="submit"
+              />
             </div>
+
             <div class="col-6">
-            <q-btn class="btn-delete full-width" padding="8px 8px">
+              <q-btn
+                v-if="!isEdit"
+                dense
+                class="btn-delete full-width"
+                @click="onDelete(currentUser?.id)"
+              >
                 <q-icon
                   size="16px"
                   name="mdi-trash-can-outline"
                   class="q-pr-xs"
                 />
-              <span class="text-caption">ลบข้อมูล</span>
+                <span>ลบข้อมูล</span>
               </q-btn>
+              <q-btn
+                v-else
+                dense
+                class="btn-delete full-width"
+                label="ยกเลิก"
+                type="reset"
+                @click="isEdit = false"
+              />
             </div>
           </div>
         </div>
@@ -205,156 +274,49 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           rounded
           bordered
           v-if="currentUser"
-        style="box-shadow: var(--shadow-2); overflow-y: auto; max-height: 50vw"
+          style="
+            box-shadow: var(--shadow-2);
+            overflow-y: auto;
+            max-height: 50vw;
+          "
         >
           <div class="row q-col-gutter-md">
-          <q-select
+            <FormTop
               dense
-            borderless
+              outlined
-            emit-value
+              :readonly="!isEdit"
-            map-options
+              v-model:hqId="currentHQ"
-            readonly
+              v-model:brId="currentBR"
-            hide-dropdown-icon
+              v-model:userType="currentUser.userType"
-            class="col-6"
+              v-model:userRole="currentUser.userRole"
-            option-value="id"
+              v-model:userCode="currentUser.code"
-            option-label="code"
-            id="selectHQ"
-            v-model="currentHQ"
-            @update:model-value="currentBR = null"
-            :label="$t('branchHQLabel')"
-            :options="hq"
             />
-          <q-select
+            <FormName
-            v-model="currentBR"
               dense
-            borderless
+              outlined
-            emit-value
+              :readonly="!isEdit"
-            map-options
+              v-model:firstName="currentUser.firstName"
-            readonly
+              v-model:lastName="currentUser.lastName"
-            hide-dropdown-icon
+              v-model:firstNameEN="currentUser.firstNameEN"
-            class="col-6"
+              v-model:lastNameEN="currentUser.lastNameEN"
-            id="selectBR"
-            option-value="id"
-            option-label="code"
-            :label="$t('branchLabel')"
-            :options="br"
             />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            options-dense
-            hide-bottom-space
-            readonly
-            hide-dropdown-icon
-            class="col-3"
-            option-value="value"
-            option-label="label"
-            :label="$t('userType')"
-            v-model="currentUser.userType"
-            :options="userStore.userOption.userTypeOpts"
-            :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            options-dense
-            hide-bottom-space
-            readonly
-            hide-dropdown-icon
-            class="col-3"
-            :label="$t('userRole')"
-            option-label="label"
-            option-value="value"
-            v-model="currentUser.userRole"
-            :options="userStore.userOption.roleOpts"
-            :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            :label="$t('userCode')"
-            class="col-6"
-            v-model="currentUser.code"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="ชื่อ ภาษาไทย"
-            v-model="currentUser.firstName"
-            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="นามสกุล ภาษาไทย"
-            v-model="currentUser.lastName"
-            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="ชื่อ ภาษาอังกฤษ"
-            v-model="currentUser.firstNameEN"
-            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
-          />
-          <q-input
-            dense
-            borderless
-            hide-bottom-space
-            readonly
-            class="col-3"
-            label="นามสกุล ภาษาอังกฤษ"
-            v-model="currentUser.lastNameEN"
-            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            label="เบอร์โทร"
-            class="col-6"
-            v-model="currentUser.zipCode"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            label="อีเมล"
-            class="col-6"
-            v-model="currentUser.zipCode"
-          />
-
             <div class="col-12 group-label">{{ $t('address') }}</div>
 
             <q-input
               dense
-            borderless
+              outlined
-            readonly
+              :readonly="!isEdit"
               id="address"
               label="ที่อยู่"
               class="col-12"
-            v-model="currentUser.addressEN"
+              v-model="currentUser.address"
             />
             <q-select
               dense
-            borderless
+              outlined
+              :readonly="!isEdit"
               emit-value
               map-options
-            readonly
               hide-dropdown-icon
               id="selectProvince"
               v-model="currentUser.provinceId"
@@ -363,17 +325,18 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
               :label="$t('province')"
               class="col-3"
               @update:model-value="
-              (currentUser.districtId = null),
+                currentUser
-                (currentUser.subDistrictId = null)
+                  ? { ...currentUser, districtId: null, subDistrictId: null }
+                  : ''
               "
               :options="opts.province"
             />
             <q-select
               dense
-            borderless
+              outlined
+              :readonly="!isEdit"
               emit-value
               map-options
-            readonly
               hide-dropdown-icon
               id="selectDistrict"
               v-model="currentUser.districtId"
@@ -381,13 +344,15 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
               option-label="name"
               :label="$t('district')"
               class="col-3"
-            @update:model-value="currentUser.subDistrictId = null"
+              @update:model-value="
+                currentUser ? (currentUser.subDistrictId = null) : ''
+              "
               :options="opts.district"
             />
             <q-select
               dense
-            borderless
+              outlined
-            readonly
+              :readonly="!isEdit"
               emit-value
               map-options
               hide-dropdown-icon
@@ -401,8 +366,8 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
             />
             <q-input
               dense
-            readonly
+              outlined
-            borderless
+              :readonly="!isEdit"
               :label="$t('zipCode')"
               class="col-3"
               v-model="currentUser.zipCode"
@@ -412,9 +377,9 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
 
             <q-input
               dense
-            borderless
+              outlined
+              :readonly="!isEdit"
               hide-dropdown-icon
-            readonly
               id="addressEN"
               label="ที่อยู่"
               class="col-12"
@@ -422,11 +387,11 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
             />
             <q-select
               dense
-            borderless
+              outlined
+              :readonly="!isEdit"
               emit-value
               map-options
               hide-dropdown-icon
-            readonly
               id="selectProvinceEN"
               v-model="currentUser.provinceId"
               option-value="id"
@@ -434,17 +399,18 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
               :label="$t('province')"
               class="col-3"
               @update:model-value="
-              (currentUser.districtId = null),
+                currentUser
-                (currentUser.subDistrictId = null)
+                  ? { ...currentUser, districtId: null, subDistrictId: null }
+                  : ''
               "
               :options="opts.province"
             />
             <q-select
               dense
+              outlined
+              :readonly="!isEdit"
               emit-value
               map-options
-            borderless
-            readonly
               hide-dropdown-icon
               id="selectDistrictEN"
               v-model="currentUser.districtId"
@@ -452,13 +418,15 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
               option-label="nameEN"
               :label="$t('district')"
               class="col-3"
-            @update:model-value="currentUser.subDistrictId = null"
+              @update:model-value="
+                currentUser ? (currentUser.subDistrictId = null) : ''
+              "
               :options="opts.district"
             />
             <q-select
               dense
-            borderless
+              outlined
-            readonly
+              :readonly="!isEdit"
               hide-dropdown-icon
               emit-value
               map-options
@@ -472,16 +440,35 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
             />
             <q-input
               dense
-            readonly
+              outlined
-            borderless
+              :readonly="!isEdit"
               zip="zipEN"
               :label="$t('zipCode')"
               class="col-3"
               v-model="currentUser.zipCode"
             />
+            <FormByType
+              dense
+              outlined
+              :readonly="!isEdit"
+              v-model:userType="currentUser.userType"
+              v-model:telephoneNo="currentUser.telephoneNo"
+              v-model:gender="currentUser.gender"
+              v-model:email="currentUser.email"
+              v-model:registrationNo="currentUser.registrationNo"
+              v-model:startDate="currentUser.startDate"
+              v-model:retireDate="currentUser.retireDate"
+              v-model:birthDate="currentUser.birthDate"
+              v-model:responsibleArea="currentUser.responsibleArea"
+              v-model:discountCondition="currentUser.discountCondition"
+              v-model:sourceNationality="currentUser.sourceNationality"
+              v-model:importNationality="currentUser.importNationality"
+              v-model:trainingPlace="currentUser.trainingPlace"
+            />
           </div>
         </AppBox>
       </div>
+    </q-form>
   </div>
 </template>
 
@@ -512,7 +499,7 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
   background-size: cover;
 }
 
-.btn-edt {
+.btn-edit {
   color: white;
   background-color: hsl(var(--info-bg));
   border-radius: var(--radius-2);