feat: receipt view (#41)

* refactor: handle show form  receipt

* refactor: fetch receipt

* fix: i18n

* refactor: quotation receipt components

* refactor: by data Receipt

* refactor: delete  btn peview

* fix: wrong view condition

* rfactor: send Queery quotationId

* refactor: edit condition view

---------

Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>
Co-authored-by: puriphatt <puriphat@frappet.com>

src/pages/05_quotation/QuotationForm.vue

@@ -20,6 +20,8 @@ import {
   calculateDaysUntilExpire,
   dialog,
 } from 'src/stores/utils';
+
+import { useReceipt } from 'stores/payment';
 import useCustomerStore from 'stores/customer';
 import useOptionStore from 'stores/options';
 import { useQuotationForm } from './form';
@@ -31,6 +33,7 @@ import { runOcr, parseResultMRZ } from 'src/utils/ocr';
 import { QuotationPayload } from 'src/stores/quotations/types';
 import { EmployeeWorker } from 'src/stores/quotations/types';
 import { Employee } from 'src/stores/employee/types';
+import { Receipt } from 'src/stores/payment/types';
 import {
   ProductGroup,
   Product,
@@ -59,6 +62,7 @@ import {
   CloseButton,
   MainButton,
 } from 'components/button';
+import QuotationFormReceipt from './QuotationFormReceipt.vue';
 import QuotationFormProductSelect from './QuotationFormProductSelect.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
 import ProfileBanner from 'components/ProfileBanner.vue';
@@ -87,6 +91,7 @@ type Node = {
 
 type ProductGroupId = string;
 
+const useReceiptStore = useReceipt();
 const configStore = useConfigStore();
 const productServiceStore = useProductServiceStore();
 const employeeFormStore = useEmployeeForm();
@@ -110,6 +115,8 @@ const {
 
 const { data: config } = storeToRefs(configStore);
 
+const receiptList = ref<Receipt[]>([]);
+
 const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 const toggleWorker = ref(true);
@@ -296,6 +303,7 @@ async function fetchStatus() {
       title: 'ใบเสร็จรับเงิน',
       status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
       handler: () => {
+        fetchReceipt();
         view.value =
           quotationFormData.value.payCondition === 'Full' ||
           quotationFormData.value.payCondition === 'BillFull'
@@ -330,6 +338,16 @@ async function fetchQuotation() {
   await fetchStatus();
 }
 
+async function fetchReceipt() {
+  const res = await useReceiptStore.getReceiptList({
+    quotationId: quotationFormData.value.id,
+  });
+
+  if (res) {
+    receiptList.value = res.result;
+  }
+}
+
 async function closeTab() {
   if (quotationFormState.value.mode === 'edit') {
     quotationForm.resetForm();
@@ -922,7 +940,7 @@ const view = ref<View>(View.Quotation);
 
       <div
         v-if="quotationFormState.mode !== 'create'"
-        class="column col-2"
+        class="column col-2 q-ml-auto"
         style="gap: 10px"
       >
         <div class="row justify-end">
@@ -1004,8 +1022,7 @@ const view = ref<View>(View.Quotation);
             v-if="
               view === View.Quotation ||
               view === View.Accepted ||
-              view === View.Invoice ||
-              view === View.Receipt
+              view === View.Invoice
             "
           >
             <q-expansion-item
@@ -1199,6 +1216,7 @@ const view = ref<View>(View.Quotation);
                 />
               </div>
             </q-expansion-item>
+
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -1242,6 +1260,7 @@ const view = ref<View>(View.Quotation);
                 </template>
               </div>
             </q-expansion-item>
+
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -1300,7 +1319,11 @@ const view = ref<View>(View.Quotation);
           </template>
           <template v-else>
             <PaymentForm
-              v-if="view !== View.InvoicePre"
+              v-if="
+                view !== View.InvoicePre &&
+                view !== View.ReceiptPre &&
+                view !== View.Receipt
+              "
               :data="quotationFormState.source"
               @view="
                 (invoiceId) => {
@@ -1312,8 +1335,8 @@ const view = ref<View>(View.Quotation);
                 }
               "
             />
-
             <q-expansion-item
+              v-if="view === View.InvoicePre"
               for="item-up"
               id="item-up"
               dense
@@ -1419,9 +1442,16 @@ const view = ref<View>(View.Quotation);
                   </template>
                 </SwitchItem>
               </div>
-              .
             </q-expansion-item>
           </template>
+
+          <QuotationFormReceipt
+            v-if="view === View.ReceiptPre || view === View.Receipt"
+            v-for="v in receiptList"
+            :amount="v.amount"
+            :date="v.date"
+            :pay-type="quotationFormData.payCondition"
+          />
         </div>
       </section>
     </article>