refactor: personnel main

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

@@ -42,7 +42,7 @@ const defaultFormData = {
   licenseExpireDate: null,
   licenseIssueDate: null,
   licenseNo: null,
-  discountCondition: '',
+  discountCondition: null,
   retireDate: null,
   startDate: null,
   registrationNo: null,
@@ -54,9 +54,11 @@ const defaultFormData = {
   userType: '',
   profileImage: null,
   birthDate: null,
-  responsibleArea: '',
+  responsibleArea: null,
+  username: '',
 };
 
+const profileSubmit = ref(false);
 const urlProfile = ref<string>();
 const isEdit = ref(false);
 const modal = ref(false);
@@ -65,7 +67,6 @@ const userId = ref('');
 const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
-const username = ref('');
 const code = ref('');
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
@@ -98,7 +99,10 @@ const formData = ref<UserCreate>({
   userType: '',
   profileImage: null,
   birthDate: null,
-  responsibleArea: '',
+  responsibleArea: null,
+  checkpoint: null,
+  checkpointEN: null,
+  username: '',
 });
 
 const profileFile = ref<File | undefined>(undefined);
@@ -131,6 +135,7 @@ const selectorList = computed(() => [
 
 async function openDialog(idEdit?: string) {
   modal.value = true;
+  profileSubmit.value = false;
   userStore.userOption.brOpts = [];
 
   userStore.userOption.hqOpts.length === 0
@@ -166,6 +171,7 @@ async function openDialog(idEdit?: string) {
         firstName: foundUser.firstName,
         userRole: foundUser.userRole,
         userType: foundUser.userType,
+        username: foundUser.username,
         responsibleArea: foundUser.responsibleArea,
         licenseExpireDate:
           (foundUser.licenseExpireDate &&
@@ -192,9 +198,10 @@ async function openDialog(idEdit?: string) {
       code.value = foundUser.code;
       urlProfile.value = foundUser.profileImageUrl;
       isEdit.value = true;
+      profileSubmit.value = true;
       await userStore.fetchBrOption(hqId.value);
-      await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
+      // await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
-      await formDialogRef.value.fetchDistrict(formData.value.provinceId);
+      // await formDialogRef.value.fetchDistrict(formData.value.provinceId);
     }
   }
 }
@@ -204,13 +211,13 @@ function onClose() {
   hqId.value = '';
   brId.value = '';
   userId.value = '';
-  username.value = '';
   urlProfile.value = '';
+  profileSubmit.value = false;
   modal.value = false;
   status.value = false;
   isEdit.value = false;
-  mapUserType(selectorLabel.value);
   Object.assign(formData.value, defaultFormData);
+  mapUserType(selectorLabel.value);
 }
 
 async function onSubmit() {
@@ -270,15 +277,14 @@ function cardClick(id: string) {
 }
 
 function mapUserType(label: string) {
-  if (label === 'personnelSelector1') {
+  const userTypeMap: { [key: string]: string } = {
-    formData.value.userType = 'USER';
+    USER: 'USER',
-  } else if (label === 'personnelSelector2') {
+    MESSENGER: 'MESSENGER',
-    formData.value.userType = 'MESSENGER';
+    DELEGATE: 'DELEGATE',
-  } else if (label === 'personnelSelector3') {
+    AGENCY: 'AGENCY',
-    formData.value.userType = 'DELEGATE';
+  };
-  } else if (label === 'personnelSelector4') {
+
-    formData.value.userType = 'AGENCY';
+  formData.value.userType = userTypeMap[label];
-  }
 }
 
 onMounted(async () => {
@@ -377,14 +383,6 @@ watch(
             female: v.gender === 'female',
             detail: [
               { label: 'ประเภท', value: $t(v.userType) },
-              {
-                label: 'ตำแหน่ง',
-                value: v.userRole
-                  ? userStore.userOption.roleOpts.find(
-                      (r) => r.value === v.userRole,
-                    )?.label || ''
-                  : '',
-              },
               { label: 'โทรศัพท์', value: v.telephoneNo },
               {
                 label: 'อายุ',
@@ -427,15 +425,17 @@ watch(
   <!-- form -->
   <FormDialog
     ref="formDialogRef"
-    v-model:formData="formData"
-    v-model:modal="modal"
-    v-model:hqId="hqId"
-    v-model:brId="brId"
-    v-model:username="username"
-    v-model:code="code"
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
     addressENTitle="ที่อยู่พนักงาน ENG"
+    v-model:modal="modal"
+    v-model:address="formData.address"
+    v-model:addressEN="formData.addressEN"
+    v-model:provinceId="formData.provinceId"
+    v-model:districtId="formData.districtId"
+    v-model:subDistrictId="formData.subDistrictId"
+    v-model:zipCode="formData.zipCode"
+    :addressSeparator="formData.userType !== ''"
     :submit="() => onSubmit()"
     :close="() => onClose()"
   >
@@ -454,33 +454,61 @@ watch(
             style="color: var(--border-color)"
           />
         </div>
+        <div
+          v-if="urlProfile && !profileSubmit"
+          class="col-12 row q-mt-md q-col-gutter-x-md"
+        >
+          <div class="col-6">
+            <q-btn
+              dense
+              unelevated
+              outlined
+              padding="8px"
+              class="cancel-img-btn full-width"
+              label="ยกเลิก"
+              @click="urlProfile = ''"
+            />
+          </div>
+          <div class="col-6">
+            <q-btn
+              dense
+              unelevated
+              outlined
+              padding="8px"
+              class="submit-img-btn full-width"
+              label="บันทึก"
+              @click="profileSubmit = true"
+            />
+          </div>
+        </div>
         <q-btn
-          v-if="urlProfile"
+          v-else-if="urlProfile && profileSubmit"
           dense
           unelevated
           outlined
           padding="8px"
           icon="mdi-pencil-outline"
-          class="edit-img-btn q-my-md full-width"
+          class="edit-img-btn q-mt-md full-width"
           label="แก้ไขโปรไฟล์"
-          @click="inputFile.click()"
+          @click.prevent="inputFile.click(), (profileSubmit = false)"
         />
+
         <q-btn
           v-else
           dense
           unelevated
           outlined
           padding="8px"
-          class="upload-img-btn q-my-md full-width"
+          class="upload-img-btn q-mt-md full-width"
           label="อัปโหลดรูปภาพ"
           :class="{ dark: $q.dark.isActive }"
           @click="inputFile.click()"
         />
-        <div class="text-left">
+        <q-separator class="col-12 q-my-md" />
+        <div class="text-left q-pt-md">
           <q-toggle
             dense
             size="md"
-            color="primary"
             v-model="status"
             padding="none"
             class="q-pr-md"
@@ -495,12 +523,12 @@ watch(
         dense
         outlined
         separator
-        :addressSeparator="formData.userType"
+        :usernameReadonly="isEdit"
         v-model:hqId="hqId"
         v-model:brId="brId"
         v-model:userType="formData.userType"
         v-model:userRole="formData.userRole"
-        v-model:userName="username"
+        v-model:username="formData.username"
         v-model:userCode="code"
       />
     </template>
@@ -538,14 +566,11 @@ watch(
   </FormDialog>
 </template>
 <style>
-.bg-white {
-  background-color: var(--surface-1) !important;
-}
-
 .upload-img-preview {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-2);
   height: 12vw;
+  background-color: var(--surface-1);
 }
 
 .upload-img-btn {
@@ -565,4 +590,18 @@ watch(
   background-color: transparent;
   border-radius: var(--radius-2);
 }
+
+.cancel-img-btn {
+  color: hsl(var(--negative-bg));
+  border: 1px solid hsl(var(--negative-bg));
+  background-color: transparent;
+  border-radius: var(--radius-2);
+}
+
+.submit-img-btn {
+  color: var(--surface-1);
+  border: 1px solid hsl(var(--positive-bg));
+  background-color: hsl(var(--positive-bg));
+  border-radius: var(--radius-2);
+}
 </style>