feat: form ดูรายละเอียด

src/pages/01_branch-management/MainPage.vue

@@ -17,6 +17,8 @@ import FormLocation from 'src/components/01_branch-management/FormLocation.vue';
 import FormQr from 'src/components/01_branch-management/FormQr.vue';
 import FormBranchContact from 'src/components/01_branch-management/FormBranchContact.vue';
 import FormImage from 'src/components/01_branch-management/FormImage.vue';
+import DrawerInfo from 'src/components/DrawerInfo.vue';
+import infoForm from 'src/components/02_personnel-management/infoForm.vue';
 
 import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
 import { watch } from 'vue';
@@ -157,10 +159,21 @@ const formDialogRef = ref();
 const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
 const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
 const codeHq = ref<{ id: string; code: string }>({ id: '', code: '' });
+const codeSubBranch = ref<{ id: string; code: string }>({ id: '', code: '' });
 const formData = ref<Omit<BranchCreate, 'qrCodeImage' | 'imageUrl'>>(
   structuredClone(defaultFormData),
 );
 
+const prevFormData = ref<Omit<BranchCreate, 'qrCodeImage' | 'imageUrl'>>(
+  structuredClone(defaultFormData),
+);
+
+const modalDrawer = ref<boolean>(false);
+
+function openDrawer() {
+  modalDrawer.value = true;
+}
+
 function openDialog() {
   modal.value = true;
 }
@@ -171,6 +184,10 @@ async function fetchBranchById(id: string) {
   if (res) {
     qrCodeimageUrl.value = res.qrCodeImageUrl;
     imageUrl.value = res.imageUrl;
+    codeSubBranch.value = {
+      id: res.id,
+      code: res.code,
+    };
     formData.value = {
       headOfficeId: res.headOfficeId,
       taxNo: res.taxNo,
@@ -198,21 +215,42 @@ function clearData() {
   formData.value = structuredClone(defaultFormData);
   imageUrl.value = null;
   qrCodeimageUrl.value = null;
+  codeSubBranch.value = {
+    id: '',
+    code: '',
+  };
   profileFile.value = undefined;
 }
 
-function triggerView(id: string, code?: string) {
+function triggerView(
+  id: string,
+  typeBranch: 'headOffice' | 'subBranch',
+  code?: string,
+) {
   fetchBranchById(id);
-  if (id && code) {
+  if (id && code && typeBranch === 'headOffice') {
     codeHq.value = {
       id: id,
       code: code,
     };
   }
 
+  formTypeBranch.value = typeBranch;
   formType.value = 'view';
 
-  openDialog();
+  openDrawer();
+}
+
+function drawerEdit() {
+  formType.value = 'edit';
+  prevFormData.value = {
+    ...formData.value,
+  };
+}
+
+async function undo() {
+  formType.value = 'view';
+  formData.value = prevFormData.value;
 }
 
 function triggerCreate(type: string, id?: string, code?: string) {
@@ -235,7 +273,7 @@ function triggerCreate(type: string, id?: string, code?: string) {
 
 function triggerEdit(type: string, id: string, code?: string) {
   fetchBranchById(id);
-  if (id && code) {
+  if (id && code && type === 'headOffice') {
     codeHq.value = {
       id: id,
       code: code,
@@ -265,6 +303,7 @@ function triggerDelete(id: string) {
       action: async () => {
         await branchStore.deleteById(id);
         await branchStore.fetchList({ pageSize: 99999 });
+        modalDrawer.value = false;
       },
       cancel: () => {},
     });
@@ -273,15 +312,37 @@ function triggerDelete(id: string) {
 
 async function onSubmit() {
   if (formType.value === 'edit') {
-    await branchStore.editById(
+    if (modalDrawer.value) {
-      codeHq.value.id,
+      dialog({
-      formData.value,
+        color: 'primary',
-      profileFile.value,
+        icon: 'mdi-pencil-outline',
-      profileFileImg.value,
+        title: 'ยืนยันการแก้ไขข้อมูล',
-    );
+        actionText: 'ตกลง',
+        persistent: true,
+        message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
+        action: async () => {
+          await branchStore.editById(
+            codeHq.value.id,
+            formData.value,
+            profileFile.value,
+            profileFileImg.value,
+          );
+          await branchStore.fetchList({ pageSize: 99999 });
+          formType.value = 'view';
+        },
+        cancel: () => {},
+      });
+    } else {
+      await branchStore.editById(
+        codeHq.value.id,
+        formData.value,
+        profileFile.value,
+        profileFileImg.value,
+      );
 
-    await branchStore.fetchList({ pageSize: 99999 });
+      await branchStore.fetchList({ pageSize: 99999 });
-    modal.value = false;
+      modal.value = false;
+    }
   }
 
   if (formTypeBranch.value === 'headOffice') {
@@ -326,12 +387,16 @@ function changeTitle(
   if (typeBranch === 'headOffice') {
     return formType === 'create'
       ? t('formDialogTitleCreateHeadOffice')
-      : t('formDialogTitleEditHeadOffice');
+      : formType === 'view'
+        ? t('formDialogTitleViewHeadOffice')
+        : t('formDialogTitleEditHeadOffice');
   }
   if (typeBranch === 'subBranch') {
     return formType === 'create'
       ? t('formDialogTitleCreateSubBranch')
-      : t('formDialogTitleEditSubBranch');
+      : formType === 'view'
+        ? t('formDialogTitleViewSubBranch')
+        : t('formDialogTitleEditSubBranch');
   }
   return '';
 }
@@ -740,7 +805,16 @@ watch(locale, () => {
                 :data="item"
                 :field-selected="fieldSelected"
                 :inactive="item.status === 'INACTIVE'"
-                @view-detail="(b) => triggerView(b.id, b.branchLabelCode)"
+                @view-detail="
+                  (b) => {
+                    console.log(b);
+                    if (b.hq) {
+                      triggerView(b.id, 'headOffice', b.branchLabelCode);
+                    } else {
+                      triggerView(b.id, 'subBranch', b.branchLabelCode);
+                    }
+                  }
+                "
               />
             </div>
           </div>
@@ -757,7 +831,7 @@ watch(locale, () => {
     v-model:province-id="formData.provinceId"
     v-model:district-id="formData.districtId"
     v-model:sub-district-id="formData.subDistrictId"
-    :title="changeTitle(formType, formTypeBranch)"
+    :title="changeTitle(formType, formTypeBranch) + ' ' + codeSubBranch.code"
     :titleFormAddress="$t('formDialogTitleAddress')"
     :addressSeparator="true"
     :submit="
@@ -769,6 +843,7 @@ watch(locale, () => {
     <template #information>
       <FormBranchInformation
         v-model:code="codeHq.code"
+        v-model:code-sub-branch="codeSubBranch.code"
         v-model:taxNo="formData.taxNo"
         v-model:name="formData.name"
         v-model:nameEN="formData.nameEN"
@@ -776,6 +851,8 @@ watch(locale, () => {
         :separator="true"
         :dense="true"
         :outlined="true"
+        :readonly="formType === 'view'"
+        :view="formType === 'view'"
         title="formDialogTitleInformation"
       />
     </template>
@@ -799,6 +876,7 @@ watch(locale, () => {
         title="QR Code"
         :separator="true"
         :qr="qrCodeimageUrl"
+        :readonly="formType === 'view'"
         @upload="
           () => {
             inputFile.click();
@@ -809,6 +887,7 @@ watch(locale, () => {
 
     <template #location>
       <FormLocation
+        :readonly="formType === 'view'"
         :separator="true"
         v-model:latitude="formData.latitude"
         v-model:longitude="formData.longitude"
@@ -818,6 +897,7 @@ watch(locale, () => {
 
     <template #by-type>
       <FormImage
+        :readonly="formType === 'view'"
         v-model:image="imageUrl"
         @upload="
           () => {
@@ -828,6 +908,100 @@ watch(locale, () => {
       />
     </template>
   </FormDialog>
+
+  <DrawerInfo
+    ref="formDialogRef"
+    v-model:drawerOpen="modalDrawer"
+    :title="changeTitle(formType, formTypeBranch) + ' ' + codeSubBranch.code"
+    :titleFormAddress="$t('formDialogTitleAddress')"
+    :addressSeparator="true"
+    :undo="() => undo()"
+    :isEdit="formType === 'edit'"
+    :editData="() => drawerEdit()"
+    :submit="() => onSubmit()"
+    :delete-data="() => triggerDelete(codeSubBranch.id)"
+  >
+    <template #info>
+      <infoForm
+        v-model:address="formData.address"
+        v-model:addressEN="formData.addressEN"
+        v-model:province-id="formData.provinceId"
+        v-model:district-id="formData.districtId"
+        v-model:sub-district-id="formData.subDistrictId"
+        :readonly="formType === 'view'"
+      >
+        <template #information>
+          <FormBranchInformation
+            v-model:code="codeHq.code"
+            v-model:code-sub-branch="codeSubBranch.code"
+            v-model:taxNo="formData.taxNo"
+            v-model:name="formData.name"
+            v-model:nameEN="formData.nameEN"
+            v-model:type-branch="formTypeBranch"
+            :separator="true"
+            :dense="true"
+            :outlined="true"
+            :readonly="formType === 'view'"
+            :view="formType === 'view'"
+            title="formDialogTitleInformation"
+          />
+        </template>
+
+        <template #person>
+          <FormBranchContact
+            title="formDialogTitleContact"
+            v-model:telephone-no="formData.telephoneNo"
+            v-model:contact="formData.contact"
+            v-model:email="formData.email"
+            v-model:contact-name="formData.contactName"
+            v-model:line-id="formData.lineId"
+            :readonly="formType === 'view'"
+            :view="formType === 'view'"
+            :separator="true"
+            :dense="true"
+            :outlined="true"
+          />
+        </template>
+
+        <template #qr-code>
+          <FormQr
+            :readonly="formType === 'view'"
+            title="QR Code"
+            :separator="true"
+            :qr="qrCodeimageUrl"
+            @upload="
+              () => {
+                inputFile.click();
+              }
+            "
+          />
+        </template>
+
+        <template #location>
+          <FormLocation
+            title="formDialogTitleLocation"
+            v-model:latitude="formData.latitude"
+            v-model:longitude="formData.longitude"
+            :readonly="formType === 'view'"
+            :separator="true"
+          />
+        </template>
+
+        <template #by-type>
+          <FormImage
+            @upload="
+              () => {
+                inputFileImg.click();
+              }
+            "
+            v-model:image="imageUrl"
+            :title="$t('formDialogTitleImg')"
+            :readonly="formType === 'view'"
+          />
+        </template>
+      </infoForm>
+    </template>
+  </DrawerInfo>
 </template>
 
 <style scoped>