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() {