From 8d87368a7cc7fe82deb0057bb96faa0151e295c6 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 21 Oct 2024 13:51:18 +0700
Subject: [PATCH] fix: receipt dialog

---
 src/pages/05_quotation/ReceiptDialog.vue | 113 ++++++++++++++++++-----
 src/stores/quotations/index.ts           |  58 +++++++++++-
 2 files changed, 149 insertions(+), 22 deletions(-)

diff --git a/src/pages/05_quotation/ReceiptDialog.vue b/src/pages/05_quotation/ReceiptDialog.vue
index c1451245..5edc3764 100644
--- a/src/pages/05_quotation/ReceiptDialog.vue
+++ b/src/pages/05_quotation/ReceiptDialog.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useConfigStore } from 'stores/config';
-import { formatNumberDecimal, commaInput } from 'stores/utils';
+import { formatNumberDecimal, commaInput, deleteItem } from 'stores/utils';
 import DialogForm from 'src/components/DialogForm.vue';
 import { reactive, ref, watch } from 'vue';
 import { useQuotationPayment } from 'src/stores/quotations';
 import { Quotation, QuotationPaymentData } from 'src/stores/quotations/types';
 import { dateFormat } from 'src/utils/datetime';
+import { QFile } from 'quasar';
 
 const configStore = useConfigStore();
 const quotationPayment = useQuotationPayment();
@@ -19,8 +20,16 @@ defineEmits<{
 const model = defineModel<boolean>({ default: false, required: true });
 const data = defineModel<Quotation | undefined>('data', { required: true });
 
+const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const paymentData = ref<QuotationPaymentData[]>([]);
 const payAll = ref<boolean>(false);
+const slipFile = ref<
+  {
+    quotationId: string;
+    paymentId: string;
+    file: File[];
+  }[]
+>([]);
 
 const state = reactive({
   waitExpansion: true,
@@ -33,6 +42,10 @@ function monthDisplay(date: Date | string) {
   return arr.join(' ');
 }
 
+function pickFile(index: number) {
+  refQFile.value[index].pickFiles();
+}
+
 watch(
   () => model.value,
   async (open) => {
@@ -43,6 +56,14 @@ watch(
       const ret = await quotationPayment.getQuotationPayment(data.value.id);
       if (ret) {
         paymentData.value = ret.quotationPaymentData;
+        slipFile.value = paymentData.value.map((v) => ({
+          quotationId: ret.id,
+          paymentId: v.id,
+          file: [],
+        }));
+        console.log(ret);
+        console.log(paymentData.value);
+        console.log(slipFile.value);
       }
     }
   },
@@ -393,23 +414,6 @@ watch(
                 </div>
               </template>
 
-              <!-- <div
-                class="q-px-md q-py-xs text-weight-medium row items-center"
-                style="background-color: hsla(var(--info-bg) / 0.1)"
-              >
-                งานที่ดำเนินการในงวดนี้
-                <q-btn
-                  dense
-                  flat
-                  padding="0px 8px"
-                  label="เพิ่มงาน"
-                  class="q-ml-auto app-text-info"
-                ></q-btn>
-              </div>
-              <div class="q-px-md q-py-sm">
-                <span class="app-text-muted">ยังไม่พบงาน</span>
-              </div> -->
-
               <div
                 class="q-px-md q-py-xs text-weight-medium row items-center"
                 style="background-color: hsla(var(--info-bg) / 0.1)"
@@ -420,8 +424,10 @@ watch(
                   })
                 }}
               </div>
-              <div class="surface-2" style="height: 200px">
-                <div class="column full-height items-center justify-center">
+              <div class="surface-2 q-pa-md">
+                <div
+                  class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap"
+                >
                   <q-img src="/images/upload.png" width="150px" />
                   {{ $t('general.upload', { msg: ' E-slip' }) }}
                   {{
@@ -436,10 +442,70 @@ watch(
                     :label="$t('general.upload')"
                     rounded
                     class="app-bg-info q-mt-sm"
-                    @click.stop="$emit('upload', i)"
+                    @click.stop="() => pickFile(i)"
+                  />
+                  <q-file
+                    ref="refQFile"
+                    v-show="false"
+                    v-model="slipFile[i].file"
+                    label="Pick files"
+                    filled
+                    multiple
+                    append
+                    style="max-width: 300px"
                   />
                 </div>
               </div>
+
+              <section class="surface-2 row q-px-md">
+                <div
+                  v-for="(file, j) in slipFile[i].file"
+                  :key="j"
+                  class="col-12 q-pa-md bordered rounded row items-center"
+                  :class="{ 'q-mb-md': i === 5, 'q-mb-sm': i < 5 }"
+                >
+                  <q-icon
+                    name="mdi-file-image-outline"
+                    size="lg"
+                    class="app-text-muted"
+                  />
+                  <article class="col column q-pl-md">
+                    {{ console.log(file) }}
+                    <span>{{ file.name }}</span>
+                    <span class="text-caption app-text-muted-2">
+                      {{ file.size }} •
+                      <q-spinner-ios
+                        v-if="i % 2 === 0"
+                        class="q-mx-xs"
+                        color="primary"
+                        size="1.5em"
+                      />
+                      <q-icon
+                        v-else
+                        name="mdi-check-circle"
+                        color="positive"
+                        size="1rem"
+                      />
+                      Uploading...
+                    </span>
+                  </article>
+                  <q-btn
+                    icon="mdi-close"
+                    flat
+                    rounded
+                    size="sm"
+                    padding="0"
+                    class="q-ml-auto self-start"
+                    style="color: hsl(var(--text-mute))"
+                    @click="deleteItem(slipFile[i].file, j)"
+                  />
+                  <q-linear-progress
+                    :value="40"
+                    class="q-mt-sm rounded"
+                    color="info"
+                  />
+                </div>
+              </section>
             </q-expansion-item>
           </div>
         </section>
@@ -511,4 +577,9 @@ watch(
 .dark .badge-card__Split {
   --_color: var(--blue-10-hsl);
 }
+
+.upload-section {
+  border: 3px solid var(--border-color);
+  border-style: dashed;
+}
 </style>
diff --git a/src/stores/quotations/index.ts b/src/stores/quotations/index.ts
index 168f52e2..f17dc4de 100644
--- a/src/stores/quotations/index.ts
+++ b/src/stores/quotations/index.ts
@@ -11,6 +11,7 @@ import {
   QuotationStats,
 } from './types';
 import { PaginationResult } from 'src/types';
+import { AxiosInstance } from 'axios';
 
 export const useQuotationStore = defineStore('quotation-store', () => {
   const data = ref<Quotation[]>([]);
@@ -25,7 +26,7 @@ export const useQuotationStore = defineStore('quotation-store', () => {
   });
 
   async function getQuotationStats() {
-    const res = await api.get<QuotationStats>(`/quotation/stats`);
+    const res = await api.get<QuotationStats>('/quotation/stats');
     if (res.status < 400) {
       return res.data;
     }
@@ -128,6 +129,61 @@ export const useQuotationStore = defineStore('quotation-store', () => {
   };
 });
 
+function managePaymentFile(api: AxiosInstance) {
+  return {
+    listFile: async (opts: { quotationId: string; paymentId: string }) => {
+      const res = await api.get<string[]>(`/${base}/${opts.quotationId}/file`);
+      if (res.status >= 400) return false;
+      return res.data;
+    },
+    getFile: async (opts: {
+      group: T;
+      parentId: string;
+      fileId: string;
+      download?: boolean;
+    }) => {
+      const url = `/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`;
+      const res = await api.get<string>(url);
+      if (opts.download) {
+        fetch(res.data)
+          .then(async (res) => await res.blob())
+          .then((blob) => {
+            const a = document.createElement('a');
+            a.download = opts.fileId;
+            a.href = window.URL.createObjectURL(blob);
+            a.click();
+            a.remove();
+          });
+      }
+      return res.data;
+    },
+    putFile: async (opts: {
+      group: T;
+      parentId: string;
+      fileId: string;
+      file: File;
+    }) => {
+      const res = await api.put(
+        `/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
+        opts.file,
+        {
+          headers: { 'Content-Type': opts.file.type },
+          onUploadProgress: (e) => console.log(e),
+        },
+      );
+      if (res.status < 400) return true;
+      return false;
+    },
+    delFile: async (opts: { group: T; parentId: string; fileId: string }) => {
+      const res = await api.delete(
+        `/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
+      );
+      if (res.status < 400) return true;
+      return false;
+    },
+  };
+}
+
 export const useQuotationPayment = defineStore('quotation-payment', () => {
   async function getQuotationPayment(quotationId: string) {
     const res = await api.get<