feat: Personnel drawer info edit, delete, undo

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
@@ -26,7 +25,6 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
-const router = useRouter();
 const userStore = useUserStore();
 const branchStore = useBranchStore();
 const adrressStore = useAddressStore();
@@ -66,6 +64,8 @@ const defaultFormData = {
 };
 
 const currentUser = ref<User>();
+const infoPersonCardEdit = ref(false);
+const infoPersonId = ref<string>('');
 const infoPersonCard = ref();
 const infoDrawer = ref(false);
 const profileSubmit = ref(false);
@@ -151,6 +151,7 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
     modal.value = true;
   } else if (action === 'INFO') {
     infoDrawer.value = true;
+    infoPersonCardEdit.value = false;
     if (!userData.value) return;
     const user = userData.value.result.find((x) => x.id === idEdit);
     infoPersonCard.value = user
@@ -192,6 +193,12 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
   }
 }
 
+function undo() {
+  if (!infoPersonId) return;
+  infoPersonCardEdit.value = false;
+  assignFormData(infoPersonId.value);
+}
+
 function onClose() {
   code.value = '';
   hqId.value = '';
@@ -208,6 +215,8 @@ function onClose() {
 }
 
 async function onSubmit() {
+  console.log('hello');
+
   formData.value.profileImage = profileFile.value as File;
   if (isEdit.value === true && userId.value) {
     dialog({
@@ -326,6 +335,7 @@ async function assignFormData(idEdit: string) {
   const foundUser = userData.value.result.find((user) => user.id === idEdit);
   if (foundUser) {
     currentUser.value = foundUser;
+    infoPersonId.value = currentUser.value.id;
 
     formData.value = {
       provinceId: foundUser.provinceId,
@@ -589,16 +599,23 @@ watch(
   </div>
 
   <DrawerInfo
+    v-if="currentUser"
+    :isEdit="infoPersonCardEdit"
     :title="
       $i18n.locale === 'en-US'
-        ? `${formData.firstNameEN} ${formData.lastNameEN}`
-        : `${formData.firstName} ${formData.lastName}`
+        ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+        : `${currentUser.firstName} ${currentUser.lastName}`
     "
     v-model:drawerOpen="infoDrawer"
+    :deleteData="() => onDelete(infoPersonId)"
+    :submit="() => onSubmit()"
     :close="() => onClose()"
+    :undo="() => undo()"
+    :editData="() => (infoPersonCardEdit = true)"
   >
     <template #info>
       <infoForm
+        :readonly="!infoPersonCardEdit"
         v-model:address="formData.address"
         v-model:addressEN="formData.addressEN"
         v-model:provinceId="formData.provinceId"
@@ -625,6 +642,7 @@ watch(
             dense
             outlined
             separator
+            :readonly="!infoPersonCardEdit"
             :usernameReadonly="isEdit"
             v-model:hqId="hqId"
             v-model:brId="brId"
@@ -639,6 +657,7 @@ watch(
             dense
             outlined
             separator
+            :readonly="!infoPersonCardEdit"
             v-model:firstName="formData.firstName"
             v-model:lastName="formData.lastName"
             v-model:firstNameEN="formData.firstNameEN"
@@ -654,6 +673,7 @@ watch(
             dense
             outlined
             separator
+            :readonly="!infoPersonCardEdit"
             v-model:userType="formData.userType"
             v-model:registrationNo="formData.registrationNo"
             v-model:startDate="formData.startDate"

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

@@ -1,512 +0,0 @@
-<script lang="ts" setup>
-import { useRoute } from 'vue-router';
-import { onMounted, ref, watch } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useRouter } from 'vue-router';
-
-import useUserStore from 'stores/user';
-
-import { User } from 'stores/user/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/FormInformation.vue';
-import FormName from 'src/components/02_personnel-management/FormPerson.vue';
-import FormByType from 'src/components/02_personnel-management/FormByType.vue';
-import useAddressStore, {
-  District,
-  Province,
-  SubDistrict,
-} from 'src/stores/address';
-import { reactive } from 'vue';
-
-const route = useRoute();
-
-const router = useRouter();
-const userStore = useUserStore();
-const addrStore = useAddressStore();
-
-const { data: userData } = storeToRefs(userStore);
-
-const currentUser = ref<User>();
-const currentUserBranch = ref<Branch[]>([]);
-const currentHQ = ref<string | null>();
-const currentBR = ref<string | null>();
-const isEdit = ref(false);
-const formRef = ref();
-
-async function getCurrentUser() {
-  if (typeof route.params.id !== 'string') return;
-
-  const record = userData.value?.result.find((v) => v.id === route.params.id);
-
-  if (record) return (currentUser.value = record);
-
-  const res = await userStore.fetchById(route.params.id);
-
-  if (res) currentUser.value = res;
-}
-
-async function getUserBranch() {
-  if (!currentUser.value) return;
-
-  const res = await userStore.getBranch(currentUser.value.id);
-
-  if (!res) return;
-
-  currentUserBranch.value = res.result;
-
-  const mainBranch = currentUserBranch.value[0];
-
-  if (mainBranch && mainBranch.headOfficeId) {
-    currentHQ.value = mainBranch.headOfficeId;
-    currentBR.value = mainBranch.id;
-  } else {
-    currentHQ.value = mainBranch.id;
-  }
-}
-
-const opts = reactive<{
-  province: Province[];
-  district: District[];
-  subDistrict: SubDistrict[];
-}>({
-  province: [],
-  district: [],
-  subDistrict: [],
-});
-
-async function getProvince() {
-  const result = await addrStore.fetchProvince();
-  if (result) opts.province = result;
-}
-async function getDistrict() {
-  if (!currentUser.value?.provinceId) return;
-  const result = await addrStore.fetchDistrictByProvinceId(
-    currentUser.value?.provinceId,
-  );
-  if (result) opts.district = result;
-}
-async function getSubDistrict() {
-  if (!currentUser.value?.districtId) return;
-  const result = await addrStore.fetchSubDistrictByProvinceId(
-    currentUser.value?.districtId,
-  );
-  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 () => {
-  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.value?.provinceId, getDistrict);
-watch(() => currentUser.value?.districtId, getSubDistrict);
-</script>
-
-<template>
-  <div class="text-h6 text-weight-bold q-mb-md" v-if="currentUser">
-    <q-btn
-      flat
-      round
-      padding="xs"
-      icon="mdi-arrow-left"
-      style="color: hsl(var(--info-bg))"
-      @click="router.go(-1)"
-    />
-    {{
-      $i18n.locale === 'en-US'
-        ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
-        : `${currentUser.firstName} ${currentUser.lastName}`
-    }}
-  </div>
-  <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"
-        :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
-      >
-        <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-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
-          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>
-
-<style scoped lang="scss">
-.info-container {
-  --_group-label-color: currentColor;
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: var(--size-4);
-
-  .group-label {
-    color: var(--_group-label-color);
-  }
-
-  &.dark {
-    --_group-label-color: hsl(var(--info-bg));
-  }
-
-  &.desktop {
-    grid-template-columns: 1fr 4fr;
-  }
-}
-
-.info-bg {
-  background-color: var(--surface-1);
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.btn-edit {
-  color: white;
-  background-color: hsl(var(--info-bg));
-  border-radius: var(--radius-2);
-}
-
-.btn-delete {
-  color: hsl(var(--negative-bg));
-  background-color: var(--surface-1);
-  border-radius: var(--radius-2);
-  border: 1px solid hsl(var(--negative-bg));
-}
-</style>