fix

src/modules/18_command/components/Step/PerviewPDF.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import axios from "axios";
@@ -18,11 +18,16 @@ const dataFile = defineModel<DataFileDownload | undefined>("dataFile", {
   required: false,
 });
 
+// Computed properties for navigation
+const canGoPrevious = computed(() => page.value > 1);
+const canGoNext = computed(() => page.value < numOfPages.value);
+
 const pdfSrc = ref<any | undefined>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
-const vuePDFRef = ref<any>(null);
 const isLoadPDF = ref<boolean>(false);
+const currentObjectUrl = ref<string | null>(null);
+const title = ref<string>("");
 
 /**
  * function loafFile PDF
@@ -43,6 +48,7 @@ async function fetchPDF(url: string, type: string) {
     .then(async (res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
+      currentObjectUrl.value = objectUrl;
       const pdfData = usePDF(`${objectUrl}`);
       setTimeout(() => {
         pdfSrc.value = pdfData.pdf.value;
@@ -59,9 +65,36 @@ function onClose() {
   modal.value = false;
 }
 
+/** Navigate to previous page*/
+function goToPreviousPage() {
+  if (canGoPrevious.value) {
+    page.value--;
+  }
+}
+
+/** Navigate to next page*/
+function goToNextPage() {
+  if (canGoNext.value) {
+    page.value++;
+  }
+}
+
+function onDownloadFile() {
+  if (currentObjectUrl.value) {
+    const fileName = dataFile.value ? dataFile.value.fileName : "";
+    const link = document.createElement("a");
+    link.href = currentObjectUrl.value;
+    link.download = `${fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
 watch(modal, (val) => {
   if (val && dataFile.value) {
     fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
+    title.value = dataFile.value.fileName;
   } else {
     pdfSrc.value = undefined;
     page.value = 1;
@@ -78,9 +111,72 @@ watch(modal, (val) => {
     transition-show="slide-up"
     transition-hide="slide-down"
   >
-    <q-card>
-      <DialogHeader :close="onClose" />
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader :tittle="title" :close="onClose" class="bg-white" />
+
+      <q-separator />
+
+      <div
+        v-if="isLoadPDF"
+        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+      >
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-left"
+          :disable="!canGoPrevious"
+          @click="goToPreviousPage"
+          color="primary"
+        />
+
+        <q-chip
+          outline
+          color="primary"
+          label-color="grey-9"
+          class="q-px-lg text-weight-bold"
+        >
+          หน้า {{ page }} / {{ numOfPages || "-" }}
+        </q-chip>
+
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-right"
+          :disable="!canGoNext"
+          @click="goToNextPage"
+          color="primary"
+        />
+      </div>
+
       <q-card-section
+        v-if="isLoadPDF"
+        class="col scroll q-pa-md flex flex-center"
+      >
+        <div class="pdf-viewer-wrapper shadow-5">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+        </div>
+      </q-card-section>
+
+      <q-card-section v-else class="col flex flex-center">
+        <div class="text-center">
+          <q-spinner color="primary" size="4em" :thickness="10" />
+        </div>
+      </q-card-section>
+
+      <q-page-sticky position="bottom-right" :offset="[20, 20]">
+        <q-btn
+          fab
+          size="xl"
+          icon="mdi-download"
+          color="primary"
+          @click="onDownloadFile"
+          :loading="!isLoadPDF"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+        </q-btn>
+      </q-page-sticky>
+
+      <!-- <q-card-section
         v-if="isLoadPDF"
         bordered
         class="card-pdf q-ma-md q-pa-md scroll"
@@ -141,9 +237,9 @@ watch(modal, (val) => {
             <q-icon name="mdi-chevron-right" />
           </q-btn>
         </div>
-      </q-card-section>
+      </q-card-section> -->
 
-      <q-card-section v-else>
+      <!-- <q-card-section v-else>
         <div class="full-width row flex-center text-accent q-gutter-sm">
           <span
             ><div
@@ -160,9 +256,29 @@ watch(modal, (val) => {
             </div>
           </span>
         </div>
-      </q-card-section>
+      </q-card-section> -->
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
+  width: 100%;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
+}
+
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+</style>