refactor: add upload file acceptance

src/pages/05_quotation/QuotationForm.vue

@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
+import { QFile } from 'quasar';
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import {
   dialogCheckData,
@@ -168,7 +169,8 @@ const selectedWorker = ref<
   })[]
 >([]);
 const workerList = ref<Employee[]>([]);
-
+const fileAcceptance = ref<File | null>();
+const refQFileAcceptance = ref<InstanceType<typeof QFile>>();
 const selectedProductGroup = ref('');
 const selectedInstallmentNo = ref<number[]>([]);
 const installmentAmount = ref<number>(0);
@@ -908,6 +910,8 @@ async function getAttachment() {
   });
 
   if (attachment && attachment.length > 0) {
+    await checkFileAcceptance(attachment);
+
     attachmentData.value = attachmentData.value.filter((item) =>
       attachment.includes(item.name),
     );
@@ -1189,6 +1193,22 @@ async function getWorkerFromCriteria(
 
   return true;
 }
+
+async function checkFileAcceptance(attachment: string[]) {
+  const nameFile = `acceptance-${quotationFormData.value.id}`;
+
+  const isFound = attachment.findIndex((v) => v.includes(nameFile));
+  if (isFound !== -1) {
+    const blob = new Blob([''], { type: 'application/pdf' }); // สร้าง blob จำลอง
+    fileAcceptance.value = new File([blob], nameFile, {
+      type: 'application/pdf',
+    });
+  } else fileAcceptance.value = undefined;
+}
+
+function viewAttachment(url: string) {
+  window.open(url, '_blank');
+}
 </script>
 
 <template>
@@ -1630,6 +1650,77 @@ async function getWorkerFromCriteria(
                 />
               </div>
             </q-expansion-item>
+            <q-expansion-item
+              v-if="view === View.Accepted"
+              for="item-up"
+              id="item-up"
+              dense
+              class="overflow-hidden"
+              switch-toggle-side
+              default-opened
+              style="border-radius: var(--radius-2)"
+              expand-icon="mdi-chevron-down-circle"
+              header-class="surface-1"
+            >
+              <template v-slot:header>
+                <section class="row items-center full-width">
+                  <div class="row items-center q-pr-md q-py-sm">
+                    <span
+                      class="text-weight-medium q-mr-md"
+                      style="font-size: 18px"
+                    >
+                      {{ $t('quotation.letterOfAcceptance') }}
+                    </span>
+                  </div>
+                </section>
+              </template>
+
+              <div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
+                <q-file
+                  style="width: 200px"
+                  dense
+                  outlined
+                  ref="refQFileAcceptance"
+                  :model-value="fileAcceptance"
+                  @update:model-value="
+                    (file) => {
+                      fileAcceptance = file;
+                      console.log(file);
+                    }
+                  "
+                />
+                <MainButton
+                  outlined
+                  icon="mdi-play-box-outline"
+                  color="207 96% 32%"
+                  @click="
+                    async () => {
+                      if (fileAcceptance === undefined) return;
+                      const result = await api.get<string>(
+                        `quotation/${quotationFormData.id || ''}/attachment/${fileAcceptance?.name}`,
+                      );
+
+                      viewAttachment(result.data);
+                    }
+                  "
+                >
+                  {{ $t('general.view', { msg: $t('general.example') }) }}
+                </MainButton>
+                <MainButton
+                  solid
+                  icon="mdi-file-upload"
+                  color="207 96% 32%"
+                  @click="
+                    () => {
+                      if (!refQFileAcceptance) return;
+                      refQFileAcceptance.pickFiles();
+                    }
+                  "
+                >
+                  {{ $t('general.upload') }}
+                </MainButton>
+              </div>
+            </q-expansion-item>
 
             <q-expansion-item
               for="item-up"