refactor: view and view example receipt

quasar.config.ts

@@ -39,7 +39,7 @@ export default configure((ctx) => {
     },
     framework: {
       config: {},
-      plugins: ['Dark', 'Dialog', 'Notify'],
+      plugins: ['Dark', 'Dialog', 'Notify', 'Loading'],
       iconSet: 'mdi-v7',
       cssAddon: true,
     },

src/pages/05_quotation/QuotationForm.vue

@@ -17,7 +17,7 @@ import { useQuotationStore } from 'src/stores/quotations';
 import useProductServiceStore from 'stores/product-service';
 import { waitAll, calculateDaysUntilExpire, dialog } from 'src/stores/utils';
 import useEmployeeStore from 'stores/employee';
-import { useInvoice, useReceipt } from 'stores/payment';
+import { useInvoice, useReceipt, usePayment } from 'stores/payment';
 import useCustomerStore from 'stores/customer';
 import useOptionStore from 'stores/options';
 import { useQuotationForm } from './form';
@@ -112,6 +112,7 @@ const customerStore = useCustomerStore();
 const quotationForm = useQuotationForm();
 const quotationStore = useQuotationStore();
 const invoiceStore = useInvoice();
+const paymentStore = usePayment();
 const optionStore = useOptionStore();
 const { t, locale } = useI18n();
 const ocrStore = useOcrStore();
@@ -1213,6 +1214,16 @@ async function getWorkerFromCriteria(
 
   return true;
 }
+
+async function exampleReceipt(id: string) {
+  $q.loading.show();
+  const url = await paymentStore.getFlowAccount(id);
+
+  if (url) {
+    $q.loading.hide();
+    window.open(url.data.link, '_blank');
+  }
+}
 </script>
 
 <template>
@@ -2002,6 +2013,19 @@ async function getWorkerFromCriteria(
               :pay-type="quotationFormData.payCondition"
               :index="i"
               :pay-split-count="quotationFormData.paySplitCount || 0"
+              @view="
+                () => {
+                  selectedInstallmentNo = [v.invoice.installments[0].no];
+                  installmentAmount = v.invoice.amount;
+                  view = View.Quotation;
+                }
+              "
+              @example="
+                () => {
+                  console.log(v);
+                  exampleReceipt(v.id);
+                }
+              "
             />
           </template>
         </div>