refactor: add ocr

src/components/upload-file/UploadFileGroup.vue

@@ -28,7 +28,14 @@ const splitAttachment = ref(50);
 const currentIndex = ref(-1);
 
 const props = defineProps<{
-  ocr?: (group: any, file: File) => void | Promise<void>;
+  ocr?: (
+    group: any,
+    file: File,
+  ) => void | Promise<{
+    status: boolean;
+    group: string;
+    meta: { name: string; value: string }[];
+  }>;
   getFileList?: (group: any) => Promise<typeof obj.value>;
   deleteItem?: (obj: any) => void | Promise<boolean>;
   download?: (obj: any) => void;
@@ -80,7 +87,7 @@ const inputFile = (() => {
 
 const selectedMenu = ref<NonNullable<typeof props.menu>[number]>();
 
-function change(e: Event) {
+async function change(e: Event) {
   const _element = e.target as HTMLInputElement | null;
   const _file = _element?.files?.[0];
 
@@ -104,9 +111,50 @@ function change(e: Event) {
         obj.value[currentIndex.value].url = reader.result as string;
       }
     };
-  }
 
-  modalDialog.value = true;
+    const statusOcr = await props.ocr?.(selectedMenu.value?.value, _file);
+
+    if (statusOcr?.status) {
+      modalDialog.value = true;
+      const map = statusOcr.meta.reduce<Record<string, string>>((a, c) => {
+        a[c.name] = c.value;
+        return a;
+      }, {});
+
+      if (statusOcr.group === 'citizen') {
+        obj.value[currentIndex.value]._meta = {
+          citizenId: map['citizen_id'],
+          firstName: map['firstname'],
+          lastName: map['lastname'],
+          firstNameEN: map['firstname_en'],
+          lastNameEN: map['lastname_en'],
+          birthDate: map['birth_date'],
+          religion: map['religion'],
+          issueDate: map['issue_date'],
+          expireDate: map['expire_date'],
+        };
+      }
+
+      if (statusOcr.group === 'passport') {
+        obj.value[currentIndex.value]._meta = {
+          type: map['type'],
+          number: map['passport_no'],
+          issueDate: map['issue_date'],
+          expireDate: map['expire_date'],
+        };
+      }
+
+      if (statusOcr.group === 'visa') {
+        obj.value[currentIndex.value]._meta = {
+          type: map['visa_type'],
+          number: map['visa_no'],
+          issueDate: map['valid_until'],
+          expireDate: map['expire_date'],
+          issuePlace: map['issue_place'],
+        };
+      }
+    }
+  }
 }
 
 async function fileList() {

src/pages/03_customer-management/MainPage.vue

@@ -2539,6 +2539,25 @@ const emptyCreateDialog = ref(false);
                 :group-list="uploadFileListEmployee"
                 :menu="uploadFileListEmployee"
                 :columns="columnsAttachment"
+                :ocr="
+                  async (group, file) => {
+                    const res = await ocrStore.sendOcr({
+                      file: file,
+                      category: group,
+                    });
+
+                    if (res) {
+                      const tempValue = {
+                        status: true,
+                        group,
+                        meta: res.fields,
+                      };
+
+                      return tempValue;
+                    }
+                    return { status: false, group, meta: [] };
+                  }
+                "
                 :auto-save="currentFromDataEmployee.id !== ''"
                 :download="
                   (obj) => {
@@ -3731,6 +3750,25 @@ const emptyCreateDialog = ref(false);
                   :group-list="uploadFileListEmployee"
                   :menu="uploadFileListEmployee"
                   :columns="columnsAttachment"
+                  :ocr="
+                    async (group, file) => {
+                      const res = await ocrStore.sendOcr({
+                        file: file,
+                        category: group,
+                      });
+
+                      if (res) {
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: res.fields,
+                        };
+
+                        return tempValue;
+                      }
+                      return { status: false, group, meta: [] };
+                    }
+                  "
                   auto-save
                   :download="
                     (obj) => {

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -8,14 +8,11 @@ import EmployerFormAbout from './EmployerFormAbout.vue';
 import EmployerFormAuthorized from './EmployerFormAuthorized.vue';
 import { useCustomerForm } from 'src/pages/03_customer-management/form';
 import { waitAll } from 'src/stores/utils';
-const customerFormStore = useCustomerForm();
 import { FormCitizen } from 'components/upload-file/';
 
 import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
 
-const customerStore = useCustomerStore();
-const ocrStore = useOcrStore();
 import {
   SaveButton,
   EditButton,
@@ -24,11 +21,10 @@ import {
 } from 'components/button';
 import { UploadFileGroup } from 'src/components/upload-file/';
 import { uploadFileListCustomer, columnsAttachment } from '../../constant';
+import { group } from 'node:console';
 
-const statusOcr = ref(false);
+const ocrStore = useOcrStore();
-
+const customerStore = useCustomerStore();
-const customer = defineModel<CustomerCreate>('customer', { required: true });
-
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
   { required: true },
@@ -217,6 +213,25 @@ withDefaults(
             v-model:current-id="item.id"
             v-model="item.file"
             hide-action
+            :ocr="
+              async (group, file) => {
+                const res = await ocrStore.sendOcr({
+                  file: file,
+                  category: group,
+                });
+
+                if (res) {
+                  const tempValue = {
+                    status: true,
+                    group,
+                    meta: res.fields,
+                  };
+
+                  return tempValue;
+                }
+                return { status: false, group, meta: [] };
+              }
+            "
             :menu="uploadFileListCustomer"
             :columns="columnsAttachment"
             :auto-save="item.id !== ''"
@@ -303,26 +318,28 @@ withDefaults(
                   | 'power-of-attorney',
               ) => {
                 if (!!item.id) {
-                  const resMeta = await customerStore.getMetaList({
+                  if (group === 'citizen') {
-                    parentId: item.id,
+                    const resMeta = await customerStore.getMetaList({
-                    group,
+                      parentId: item.id,
-                  });
+                      group,
+                    });
 
-                  const tempValue = resMeta.map(async (v: any) => {
+                    const tempValue = resMeta.map(async (v: any) => {
-                    return {
+                      return {
-                      _meta: { ...v },
+                        _meta: { ...v },
-                      name: v.id || '',
+                        name: v.id || '',
-                      group: group,
+                        group: group,
-                      url: await customerStore.getFile({
+                        url: await customerStore.getFile({
-                        parentId: item.id || '',
+                          parentId: item.id || '',
-                        group,
+                          group,
-                        fileId: v.id,
+                          fileId: v.id,
-                      }),
+                        }),
-                      file: undefined,
+                        file: undefined,
-                    };
+                      };
-                  });
+                    });
 
-                  return await waitAll(tempValue);
+                    return await waitAll(tempValue);
+                  }
                 }
                 return [];
               }