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 hq = ref<Branch[]>([]);
-const br = ref<Branch[]>([]);
+const isEdit = ref(false);
+const formRef = ref();
 
 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();
-  getHQ();
-  getProvince();
+  await getCurrentUser();
+  await getUserBranch();
+  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>
@@ -149,339 +172,303 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
     class="q-pa-md info-bg"
     :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
   >
-    <div
-      class="info-container"
-      :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
+    <q-form
+      greedy
+      ref="formRef"
+      id="formId"
+      @submit.prevent
+      @validation-success="onSubmit"
     >
-      <div>
-        <PersonCard
-          :list="[
-            {
-              id: currentUser.id,
-              img: `${currentUser.profileImageUrl}`,
-              name:
-                $i18n.locale === 'en-US'
-                  ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
-                  : `${currentUser.firstName} ${currentUser.lastName}`,
-              male: currentUser.gender === 'male',
-              female: currentUser.gender === 'female',
-              detail: [
-                { label: 'ตำแหน่ง', value: currentUser.userType },
-                { label: 'โทรศัพท์', value: currentUser.telephoneNo },
-                { label: 'อีเมล', value: currentUser.email },
-              ],
-              badge: currentUser.code,
-              disabled: currentUser.status === 'INACTIVE',
-            },
-          ]"
-          v-if="currentUser"
-          :grid-columns="1"
-          no-hover
-          no-action
-          style="box-shadow: var(--shadow-2)"
-        />
-        <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-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
-              <span class="text-caption">แก้ไขข้อมูล</span>
-            </q-btn>
-          </div>
-          <div class="col-6">
-            <q-btn class="btn-delete full-width" padding="8px 8px">
-              <q-icon
-                size="16px"
-                name="mdi-trash-can-outline"
-                class="q-pr-xs"
-              />
-              <span class="text-caption">ลบข้อมูล</span>
-            </q-btn>
-          </div>
-        </div>
-      </div>
-
-      <AppBox
-        class="surface-1"
-        rounded
-        bordered
-        v-if="currentUser"
-        style="box-shadow: var(--shadow-2); overflow-y: auto; max-height: 50vw"
+      <div
+        class="info-container"
+        :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
       >
-        <div class="row q-col-gutter-md">
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            class="col-6"
-            option-value="id"
-            option-label="code"
-            id="selectHQ"
-            v-model="currentHQ"
-            @update:model-value="currentBR = null"
-            :label="$t('branchHQLabel')"
-            :options="hq"
-          />
-          <q-select
-            v-model="currentBR"
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            class="col-6"
-            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>
+          <PersonCard
+            :list="[
+              {
+                id: currentUser.id,
+                img: `${currentUser.profileImageUrl}`,
+                name:
+                  $i18n.locale === 'en-US'
+                    ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+                    : `${currentUser.firstName} ${currentUser.lastName}`,
+                male: currentUser.gender === 'male',
+                female: currentUser.gender === 'female',
+                detail: [
+                  { 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: userStore.calculateAge(
+                      currentUser.birthDate as Date,
+                    ),
+                  },
+                ],
+                badge: currentUser.code,
+                disabled: currentUser.status === 'INACTIVE',
+              },
+            ]"
+            v-if="currentUser"
+            :grid-columns="1"
+            no-hover
+            no-action
+            style="box-shadow: var(--shadow-2)"
           />
+          <div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
+            <div class="col-6">
+              <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>แก้ไขข้อมูล</span>
+              </q-btn>
+              <q-btn
+                v-else
+                dense
+                class="btn-edit full-width"
+                label="บันทึกข้อมูล"
+                type="submit"
+              />
+            </div>
 
-          <div class="col-12 group-label">{{ $t('address') }}</div>
-
-          <q-input
-            dense
-            borderless
-            readonly
-            id="address"
-            label="ที่อยู่"
-            class="col-12"
-            v-model="currentUser.addressEN"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            id="selectProvince"
-            v-model="currentUser.provinceId"
-            option-value="id"
-            option-label="name"
-            :label="$t('province')"
-            class="col-3"
-            @update:model-value="
-              (currentUser.districtId = null),
-                (currentUser.subDistrictId = null)
-            "
-            :options="opts.province"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            readonly
-            hide-dropdown-icon
-            id="selectDistrict"
-            v-model="currentUser.districtId"
-            option-value="id"
-            option-label="name"
-            :label="$t('district')"
-            class="col-3"
-            @update:model-value="currentUser.subDistrictId = null"
-            :options="opts.district"
-          />
-          <q-select
-            dense
-            borderless
-            readonly
-            emit-value
-            map-options
-            hide-dropdown-icon
-            id="SelectSubDistrict"
-            v-model="currentUser.subDistrictId"
-            option-value="id"
-            option-label="name"
-            :label="$t('subDistrict')"
-            class="col-3"
-            :options="opts.subDistrict"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            :label="$t('zipCode')"
-            class="col-3"
-            v-model="currentUser.zipCode"
-          />
-
-          <div class="col-12 group-label">{{ $t('address') }} EN</div>
-
-          <q-input
-            dense
-            borderless
-            hide-dropdown-icon
-            readonly
-            id="addressEN"
-            label="ที่อยู่"
-            class="col-12"
-            v-model="currentUser.addressEN"
-          />
-          <q-select
-            dense
-            borderless
-            emit-value
-            map-options
-            hide-dropdown-icon
-            readonly
-            id="selectProvinceEN"
-            v-model="currentUser.provinceId"
-            option-value="id"
-            option-label="nameEN"
-            :label="$t('province')"
-            class="col-3"
-            @update:model-value="
-              (currentUser.districtId = null),
-                (currentUser.subDistrictId = null)
-            "
-            :options="opts.province"
-          />
-          <q-select
-            dense
-            emit-value
-            map-options
-            borderless
-            readonly
-            hide-dropdown-icon
-            id="selectDistrictEN"
-            v-model="currentUser.districtId"
-            option-value="id"
-            option-label="nameEN"
-            :label="$t('district')"
-            class="col-3"
-            @update:model-value="currentUser.subDistrictId = null"
-            :options="opts.district"
-          />
-          <q-select
-            dense
-            borderless
-            readonly
-            hide-dropdown-icon
-            emit-value
-            map-options
-            id="SelectSubDistrictEN"
-            v-model="currentUser.subDistrictId"
-            option-value="id"
-            option-label="nameEN"
-            :label="$t('subDistrict')"
-            class="col-3"
-            :options="opts.subDistrict"
-          />
-          <q-input
-            dense
-            readonly
-            borderless
-            zip="zipEN"
-            :label="$t('zipCode')"
-            class="col-3"
-            v-model="currentUser.zipCode"
-          />
+            <div class="col-6">
+              <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>ลบข้อมูล</span>
+              </q-btn>
+              <q-btn
+                v-else
+                dense
+                class="btn-delete full-width"
+                label="ยกเลิก"
+                type="reset"
+                @click="isEdit = false"
+              />
+            </div>
+          </div>
         </div>
-      </AppBox>
-    </div>
+
+        <AppBox
+          class="surface-1"
+          rounded
+          bordered
+          v-if="currentUser"
+          style="
+            box-shadow: var(--shadow-2);
+            overflow-y: auto;
+            max-height: 50vw;
+          "
+        >
+          <div class="row q-col-gutter-md">
+            <FormTop
+              dense
+              outlined
+              :readonly="!isEdit"
+              v-model:hqId="currentHQ"
+              v-model:brId="currentBR"
+              v-model:userType="currentUser.userType"
+              v-model:userRole="currentUser.userRole"
+              v-model:userCode="currentUser.code"
+            />
+            <FormName
+              dense
+              outlined
+              :readonly="!isEdit"
+              v-model:firstName="currentUser.firstName"
+              v-model:lastName="currentUser.lastName"
+              v-model:firstNameEN="currentUser.firstNameEN"
+              v-model:lastNameEN="currentUser.lastNameEN"
+            />
+            <div class="col-12 group-label">{{ $t('address') }}</div>
+
+            <q-input
+              dense
+              outlined
+              :readonly="!isEdit"
+              id="address"
+              label="ที่อยู่"
+              class="col-12"
+              v-model="currentUser.address"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectProvince"
+              v-model="currentUser.provinceId"
+              option-value="id"
+              option-label="name"
+              :label="$t('province')"
+              class="col-3"
+              @update:model-value="
+                currentUser
+                  ? { ...currentUser, districtId: null, subDistrictId: null }
+                  : ''
+              "
+              :options="opts.province"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectDistrict"
+              v-model="currentUser.districtId"
+              option-value="id"
+              option-label="name"
+              :label="$t('district')"
+              class="col-3"
+              @update:model-value="
+                currentUser ? (currentUser.subDistrictId = null) : ''
+              "
+              :options="opts.district"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="SelectSubDistrict"
+              v-model="currentUser.subDistrictId"
+              option-value="id"
+              option-label="name"
+              :label="$t('subDistrict')"
+              class="col-3"
+              :options="opts.subDistrict"
+            />
+            <q-input
+              dense
+              outlined
+              :readonly="!isEdit"
+              :label="$t('zipCode')"
+              class="col-3"
+              v-model="currentUser.zipCode"
+            />
+
+            <div class="col-12 group-label">{{ $t('address') }} EN</div>
+
+            <q-input
+              dense
+              outlined
+              :readonly="!isEdit"
+              hide-dropdown-icon
+              id="addressEN"
+              label="ที่อยู่"
+              class="col-12"
+              v-model="currentUser.addressEN"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectProvinceEN"
+              v-model="currentUser.provinceId"
+              option-value="id"
+              option-label="nameEN"
+              :label="$t('province')"
+              class="col-3"
+              @update:model-value="
+                currentUser
+                  ? { ...currentUser, districtId: null, subDistrictId: null }
+                  : ''
+              "
+              :options="opts.province"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              emit-value
+              map-options
+              hide-dropdown-icon
+              id="selectDistrictEN"
+              v-model="currentUser.districtId"
+              option-value="id"
+              option-label="nameEN"
+              :label="$t('district')"
+              class="col-3"
+              @update:model-value="
+                currentUser ? (currentUser.subDistrictId = null) : ''
+              "
+              :options="opts.district"
+            />
+            <q-select
+              dense
+              outlined
+              :readonly="!isEdit"
+              hide-dropdown-icon
+              emit-value
+              map-options
+              id="SelectSubDistrictEN"
+              v-model="currentUser.subDistrictId"
+              option-value="id"
+              option-label="nameEN"
+              :label="$t('subDistrict')"
+              class="col-3"
+              :options="opts.subDistrict"
+            />
+            <q-input
+              dense
+              outlined
+              :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);