feat: quotation doc view pdf

src/pages/05_quotation/preview/ViewForm.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
-import { onMounted, nextTick, ref, watch } from 'vue';
+import { onMounted, nextTick, ref, watch, toRaw } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
 import ThaiBahtText from 'thai-baht-text';
 
@@ -25,11 +25,13 @@ import {
 } from 'src/stores/quotations/types';
 
 // NOTE: Import Components
+import ViewPDF from './ViewPdf.vue';
 import ViewHeader from './ViewHeader.vue';
 import ViewFooter from './ViewFooter.vue';
 import BankComponents from './BankComponents.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
 import { convertTemplate } from 'src/utils/string-template';
+import { computed } from 'vue';
 
 const quotationForm = useQuotationForm();
 const optionStore = useOptionStore();
@@ -67,9 +69,9 @@ const elements = ref<HTMLElement[]>([]);
 const chunks = ref<Product[][]>([[]]);
 const attachmentList = ref<
   {
-    name: string;
-    typeFile: string;
     url: string;
+    isImage?: boolean;
+    isPDF?: boolean;
   }[]
 >([]);
 const data = ref<
@@ -90,16 +92,21 @@ async function getAttachment(quotationId: string) {
   });
 
   if (attachment) {
-    attachment.forEach(async (v) => {
-      attachmentList.value.push({
-        name: v,
-        typeFile: v.substring(v.lastIndexOf('.') + 1),
-        url: await quotationStore.getAttachment({
+    attachmentList.value = await Promise.all(
+      attachment.map(async (v) => {
+        const url = await quotationStore.getAttachment({
           parentId: quotationId,
           name: v,
-        }),
-      });
-    });
+        });
+        const ft = v.substring(v.lastIndexOf('.') + 1);
+
+        return {
+          url,
+          isImage: ['png', 'jpg', 'jpeg'].includes(ft),
+          isPDF: ft === 'pdf',
+        };
+      }),
+    );
   }
 }
 
@@ -531,11 +538,16 @@ function print() {
     </section>
 
     <section
-      v-for="v in attachmentList.filter((v) => v.typeFile !== 'pdf')"
+      v-for="item in attachmentList.filter((v) => v.isImage)"
       class="content"
     >
-      <q-img :src="v.url" />
+      <q-img :src="item.url" />
     </section>
+
+    <ViewPDF
+      v-for="item in attachmentList.filter((v) => v.isPDF)"
+      :url="item.url"
+    />
   </div>
 </template>
 
@@ -611,8 +623,7 @@ td {
   font-size: 95%;
 }
 
-.content,
-.container > :deep(.content) {
+.content {
   width: 100%;
   padding: 0.5in;
   align-items: center;

src/pages/05_quotation/preview/ViewPdf.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+const props = defineProps<{
+  url: string;
+}>();
+
+const { pdf, pages } = usePDF(props.url);
+</script>
+
+<template>
+  <section v-for="page in pages" class="content">
+    <VuePDF style="width: 100%" :pdf="pdf" :page="page" :scale="1.5" />
+  </section>
+</template>
+
+<style scoped>
+.content :deep(canvas) {
+  width: 100% !important;
+  height: auto !important;
+}
+
+@media print {
+  .content :deep(canvas) {
+    scale: 1.1;
+  }
+}
+</style>