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"