From 17782c32b8e6189bb3e724a0cb30f8d7e39c4501 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 3 Jul 2023 17:21:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20pdf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/step/step01.vue | 10 +---
 .../components/OrderPlacement/step/step02.vue |  2 +-
 .../components/OrderPlacement/step/step03.vue |  4 +-
 .../components/OrderPlacement/step/step04.vue | 57 ++++++++++++-------
 4 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index e272fa47f..80d650866 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -370,12 +370,8 @@
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="next"
-      ><!-- icon="mdi-content-save-outline"
+      <q-btn unelevated label="บันทึก" color="public" @click="next"
+        ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
@@ -389,7 +385,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main.ts";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
 
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 4328510a6..a8a6f79c1 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -325,7 +325,7 @@ const selectData = (row: any) => {};
 
 const refresh = () => {};
 
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   //   if (props.paging == true)
   //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
   //   else
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 66da2ed48..3f8dd9f8b 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -334,7 +334,7 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import type { QInput, QForm } from "quasar";
-import type { treeTab } from "@/modules/05_placement/interface/index/Main.ts";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -614,7 +614,7 @@ onMounted(async () => {
   await nodeTree();
 });
 
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   //   if (props.paging == true)
   //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
   //   else
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index 6f1b50480..e10dbd022 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -83,13 +83,8 @@
                 </q-btn>
               </div>
               <div class="pdfWidth">
-                <!-- <VuePDF
-                  ref="vuePDFRef"
-                  :pdf="pdfData"
-                  :page="page"
-                  fit-parent
-                /> -->
-                <VuePdf :key="page" :src="pdfSrc" :page="page" />
+                <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+                <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
               </div>
               <div
                 class="justify-between items-center align-center q-py-sm row"
@@ -198,27 +193,42 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-// import { VuePDF, usePDF } from "@tato30/vue-pdf";
-// import type { PDFDocumentLoadingTask } from "@tato30/vue-pdf";
-import { VuePdf, createLoadingTask } from "vue3-pdfjs/esm";
-import { VuePdfPropsType } from "vue3-pdfjs/components/vue-pdf/vue-pdf-props"; // Prop type definitions can also be imported
-import { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
+import { ref, onMounted, onUnmounted } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
 import type { QForm } from "quasar";
 
-onMounted(() => {
-  const loadingTask = createLoadingTask(pdfSrc.value);
-  loadingTask.promise.then((pdf: PDFDocumentProxy) => {
-    numOfPages.value = pdf.numPages;
+onUnmounted(() => {
+  window.removeEventListener("resize", (e: any) => {
+    myEventHandler(e);
   });
 });
 
-const pdfSrc = ref<VuePdfPropsType["src"]>(
-  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-);
-const numOfPages = ref<number>(0);
+onMounted(async () => {
+  window.addEventListener("resize", (e: any) => {
+    myEventHandler(e);
+  });
 
+  const pdfData = usePDF(
+    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  );
+
+  console.log("pdfData.pages.value", pdfData);
+  console.log("pdfData.pages.value", pdfData.pages);
+  console.log("pdfData.pages.value", pdfData.pages.value);
+});
+
+const myEventHandler = (e: any) => {
+  console.log("e", e.target.innerWidth);
+  //   if (vuePDFRef !== null) {
+  //     vuePDFRef.value.reload();
+  //   }
+};
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
 const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
 
 const myForm = ref<QForm | null>(null);
 
@@ -242,7 +252,10 @@ const fileOrder = ref<any>(null);
 const fileTailer = ref<any>(null);
 
 const onchangePage = (val: any) => {
-  console.log(val);
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
 };
 
 const save = () => {