From 51fd9e0c84c7633a9c953d9cec9fc90875437fe4 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:36:13 +0700
Subject: [PATCH] refactor: add Spinners

---
 src/components/upload-file/UploadFile.vue | 39 ++++++++++++++---------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 75fa09a2..994e3261 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -16,6 +16,7 @@ const file = defineModel<
 });
 
 const currentFile = computed(() => file.value.at(currentIndex.value));
+const statusOcr = defineModel<boolean>('statusOcr', { default: false });
 const currentIndex = ref(0);
 
 const scale = ref(1);
@@ -25,7 +26,7 @@ const currentIndexDropdownList = ref(0);
 
 const props = withDefaults(
   defineProps<{
-    treeFile: { lable: string; file: { lable: string }[] }[];
+    treeFile: { label: string; file: { label: string }[] }[];
     dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
   }>(),
@@ -70,6 +71,8 @@ function change(e: Event) {
       });
     }
 
+    statusOcr.value = true;
+
     emit(
       'sendOcr',
       props.dropdownList?.[currentIndexDropdownList.value].value || '',
@@ -121,8 +124,8 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       <div class="full-height bordered-l bordered-b q-pa-sm">
         <q-tree
           :nodes="treeFile || []"
-          node-key="lable"
-          label-key="lable"
+          node-key="label"
+          label-key="label"
           children-key="file"
           selected-color="primary"
           v-model:selected="currentFileSelected"
@@ -185,22 +188,28 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       <div
         class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
       >
-        <VuePDF
-          v-if="
-            currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
-            currentFile?.file?.type === 'application/pdf'
-          "
-          class="q-py-md"
-          :pdf="pdf"
-          :page="page"
-          :scale="scale"
-        />
+        <template v-if="statusOcr">
+          <q-spinner color="primary" size="3em" :thickness="2" />
+        </template>
 
-        <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
+        <template v-else>
+          <VuePDF
+            v-if="
+              currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
+              currentFile?.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="currentFile?.url" />
+        </template>
       </div>
     </div>
 
-    <div class="col-4">
+    <div class="col-5">
       <div
         class="bordered row items-center justify-between q-pa-sm"
         style="height: 50px"