From f308f6da3ce35a12eae5661bc617dd79532b1e5f Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Mon, 26 Aug 2024 18:04:04 +0700
Subject: [PATCH] refactor: add UploadFile

---
 src/components/upload-file/UploadFile.vue     | 216 ++++++++++++++++++
 src/components/upload-file/index.ts           |   1 +
 src/pages/03_customer-management/MainPage.vue |  26 ++-
 3 files changed, 242 insertions(+), 1 deletion(-)
 create mode 100644 src/components/upload-file/UploadFile.vue
 create mode 100644 src/components/upload-file/index.ts

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
new file mode 100644
index 00000000..8b5949e0
--- /dev/null
+++ b/src/components/upload-file/UploadFile.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { SaveButton, UndoButton } from 'components/button';
+
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+
+const currentFileUrl = defineModel<string>('currentFileUrl');
+const { pdf, pages } = usePDF(currentFileUrl);
+
+const selected = defineModel<string>('selected');
+const file = defineModel<File | null>('file');
+
+const scale = ref(1);
+const page = ref(1);
+
+const currentTab = ref<string>('information');
+
+const currentIndexDropdownList = ref(0);
+
+const props = withDefaults(
+  defineProps<{
+    tree?: { label: string; children: { label: string }[] }[];
+    dropdownList?: string[];
+  }>(),
+  {
+    tree: () => [],
+  },
+);
+
+function browse() {
+  inputFile?.click();
+}
+
+const inputFile = (() => {
+  const _element = document.createElement('input');
+  _element.type = 'file';
+  _element.accept = 'image/jpeg,image/png';
+  _element.addEventListener('change', change);
+  return _element;
+})();
+
+function change(e: Event) {
+  const _element = e.target as HTMLInputElement | null;
+  const _file = _element?.files?.[0];
+
+  if (_file) {
+    const reader = new FileReader();
+    reader.readAsDataURL(_file);
+    reader.onload = () => {
+      currentFileUrl.value = reader.result as string;
+    };
+
+    if (_file) file.value = _file;
+
+    emit(
+      'sendOcr',
+      props.dropdownList?.[currentIndexDropdownList.value] || '',
+      inputFile?.files?.[0],
+    );
+  }
+}
+
+const tabsList = [
+  {
+    label: 'information',
+    name: 'information',
+  },
+  {
+    label: 'document',
+    name: 'document',
+  },
+];
+
+const emit = defineEmits<{
+  (e: 'sendOcr', dropdown: string, file?: File): void;
+}>();
+</script>
+
+<template>
+  <div class="full-height full-width row">
+    <div>
+      <div class="q-pa-sm text-center bordered" style="height: 50px">
+        <q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
+          <q-list v-for="(v, i) in dropdownList" :key="v">
+            <q-item
+              clickable
+              v-close-popup
+              @click="
+                () => {
+                  currentIndexDropdownList = i;
+                  browse();
+                }
+              "
+            >
+              <q-item-section>
+                <q-item-label>{{ v }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+      </div>
+
+      <div class="full-height bordered-l bordered-b q-pa-sm">
+        <q-tree
+          :nodes="tree || []"
+          node-key="label"
+          selected-color="primary"
+          v-model:selected="selected"
+          default-expand-all
+        />
+      </div>
+    </div>
+
+    <div class="col">
+      <div
+        class="bordered row items-center justify-evenly q-pa-sm"
+        style="height: 50px"
+      >
+        <q-btn
+          @click="page = page > 1 ? page - 1 : page"
+          class="btn-next"
+          icon="mdi-chevron-left"
+          unelevated
+          dense
+          id="btn-prev-page-top"
+        />
+
+        <div>Page {{ page }} of {{ pages }}</div>
+
+        <q-btn
+          @click="scale = scale > 0.25 ? scale - 0.25 : scale"
+          flat
+          dense
+          round
+          size="12px"
+          icon="mdi-magnify-minus-outline"
+          class="app-text-dark"
+        >
+          <q-tooltip>{{ $t('zoomOut') }}</q-tooltip>
+        </q-btn>
+        <div>{{ scale * 100 }}%</div>
+
+        <q-btn
+          flat
+          dense
+          round
+          size="12px"
+          class="app-text-dark"
+          icon="mdi-magnify-plus-outline"
+          @click="scale = scale < 2 ? scale + 0.25 : scale"
+        >
+          <q-tooltip>{{ $t('zoomIn') }}</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          @click="page = page < pages ? page + 1 : page"
+          class="btn-next"
+          icon="mdi-chevron-right"
+          unelevated
+          dense
+          id="btn-prev-page-top"
+        />
+      </div>
+
+      <div
+        class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
+      >
+        <VuePDF
+          v-if="file?.type === 'application/pdf'"
+          class="q-py-md"
+          :pdf="pdf"
+          :page="page"
+          :scale="scale"
+        />
+        <q-img v-else class="q-py-md full-width" :src="currentFileUrl" />
+      </div>
+    </div>
+
+    <div class="col-4">
+      <div
+        class="bordered row items-center justify-between q-pa-sm"
+        style="height: 50px"
+      >
+        ข้อมูลหนังสือเดินทาง
+
+        <div class="row">
+          <UndoButton icon-only type="button" />
+          <SaveButton icon-only type="button" />
+        </div>
+      </div>
+
+      <div class="bordered-r bordered-b full-height">
+        <q-tabs
+          dense
+          inline-label
+          mobile-arrows
+          v-model="currentTab"
+          active-class="active-tab text-weight-bold"
+          class="app-text-muted full-width"
+          align="left"
+        >
+          <q-tab
+            :id="`tab-${tab.label}`"
+            v-for="tab in tabsList"
+            v-bind:key="tab.name"
+            class="content-tab text-capitalize"
+            :name="tab.name"
+            :label="$t(tab.label)"
+          />
+        </q-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss"></style>
diff --git a/src/components/upload-file/index.ts b/src/components/upload-file/index.ts
new file mode 100644
index 00000000..18f798a5
--- /dev/null
+++ b/src/components/upload-file/index.ts
@@ -0,0 +1 @@
+export { default as UploadFile } from './UploadFile.vue';
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index a7a4b77f..77612af4 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -6,6 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { baseUrl } from 'src/stores/utils';
 
+import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
@@ -47,10 +48,13 @@ import SideMenu from 'components/SideMenu.vue';
 import { AddButton } from 'components/button';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
 
+import { UploadFile } from 'components/upload-file';
+
 import {
   columnsCustomer,
   columnsEmployee,
   formMenuIconEmployee,
+  uploadFileList,
 } from './constant';
 import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
@@ -75,6 +79,7 @@ const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
 const optionStore = useOptionStore();
+const ocrStore = useOcrStore();
 
 const filtdRequire = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>({
   main: ['citizenId', 'legalPersonNo', 'registerName'],
@@ -2629,7 +2634,7 @@ const emptyCreateDialog = ref(false);
                 :key="idx"
               >
                 <q-form
-                  class="full-width"
+                  class="full-width q-mb-xl"
                   v-if="customerFormData.customerBranch"
                   greedy
                   @submit.prevent="
@@ -2877,6 +2882,13 @@ const emptyCreateDialog = ref(false);
                       anchor: 'drawer-form-visa',
                       tab: 'personalInfo',
                     },
+
+                    {
+                      name: $t('อัปโหลดไฟล์'),
+                      anchor: 'drawer-upload-file',
+                      tab: 'personalInfo',
+                    },
+
                     ...(currentFromDataEmployee.employeeCheckup?.map(
                       (v, i) => ({
                         name: $t('general.times', { number: i + 1 }),
@@ -3058,6 +3070,18 @@ const emptyCreateDialog = ref(false);
                 v-model:entry-date="currentFromDataEmployee.entryDate"
                 class="q-mb-xl"
               />
+
+              <UploadFile
+                :tree="[]"
+                :dropdown-list="uploadFileList"
+                @send-ocr="
+                  async (v: any, f: any) => {
+                    console.log(v, f);
+
+                    await ocrStore.sendOcr({ file: f });
+                  }
+                "
+              />
             </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
               <FormEmployeeHealthCheck