refactor: show file in peview quotation

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

@@ -13,6 +13,7 @@ import useBranchStore from 'stores/branch';
 import { baseUrl } from 'stores/utils';
 import useCustomerStore from 'stores/customer';
 import { commaInput } from 'stores/utils';
+import { useQuotationStore } from 'src/stores/quotations';
 
 // NOTE  Import Types
 import { CustomerBranch } from 'stores/customer/types';
@@ -35,7 +36,7 @@ const optionStore = useOptionStore();
 const configStore = useConfigStore();
 const branchStore = useBranchStore();
 const customerStore = useCustomerStore();
-
+const quotationStore = useQuotationStore();
 const { data: config } = storeToRefs(configStore);
 
 type Product = {
@@ -64,8 +65,15 @@ const bankList = ref<BankBook[]>([]);
 
 const elements = ref<HTMLElement[]>([]);
 const chunks = ref<Product[][]>([[]]);
+const attachmentList = ref<
+  {
+    name: string;
+    typeFile: string;
+    url: string;
+  }[]
+>([]);
 const data = ref<
-  QuotationPayload & { customerBranch: CustomerBranchRelation }
+  QuotationPayload & { customerBranch: CustomerBranchRelation; id: string }
 >();
 
 const summaryPrice = ref<SummaryPrice>({
@@ -76,6 +84,25 @@ const summaryPrice = ref<SummaryPrice>({
   finalPrice: 0,
 });
 
+async function getAttachment(quotationId: string) {
+  const attachment = await quotationStore.listAttachment({
+    parentId: quotationId,
+  });
+
+  if (attachment) {
+    attachment.forEach(async (v) => {
+      attachmentList.value.push({
+        name: v,
+        typeFile: v.substring(v.lastIndexOf('.') + 1),
+        url: await quotationStore.getAttachment({
+          parentId: quotationId,
+          name: v,
+        }),
+      });
+    });
+  }
+}
+
 async function assignData() {
   for (let i = 0; i < productList.value.length; i++) {
     let el = elements.value.at(-1);
@@ -148,6 +175,8 @@ onMounted(async () => {
   data.value = 'data' in parsed ? parsed.data : undefined;
 
   if (data.value) {
+    await getAttachment(data.value.id);
+
     const resCustomerBranch = await customerStore.getBranchById(
       data.value.customerBranchId,
     );
@@ -236,9 +265,7 @@ onMounted(async () => {
   assignData();
 });
 
-watch(elements, () => {
+watch(elements, () => {});
-  console.log(elements.value);
-});
 
 function print() {
   window.print();
@@ -502,6 +529,13 @@ function print() {
         }"
       />
     </section>
+
+    <section
+      v-for="v in attachmentList.filter((v) => v.typeFile !== 'pdf')"
+      class="content"
+    >
+      <q-img :src="v.url" />
+    </section>
   </div>
 </template>
 
@@ -532,6 +566,7 @@ function print() {
   padding: 1rem;
   background: white;
   border-bottom: 1px solid var(--gray-3);
+  z-index: 99999;
 }
 
 table {
@@ -576,7 +611,8 @@ td {
   font-size: 95%;
 }
 
-.content {
+.content,
+.container > :deep(.content) {
   width: 100%;
   padding: 0.5in;
   align-items: center;