refactor: edit ui

src/pages/05_quotation/QuotationForm.vue

@@ -2,7 +2,6 @@
 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,
@@ -169,8 +168,7 @@ 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);
@@ -910,8 +908,6 @@ async function getAttachment() {
   });
 
   if (attachment && attachment.length > 0) {
-    await checkFileAcceptance(attachment);
-
     attachmentData.value = attachmentData.value.filter((item) =>
       attachment.includes(item.name),
     );
@@ -1193,22 +1189,6 @@ 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>
@@ -1676,48 +1656,31 @@ function viewAttachment(url: string) {
               </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);
-                    }
-                  "
+                <SelectInput
+                  style="max-width: 250px"
+                  class=""
+                  incremental
+                  v-model="templateForm"
+                  id="quotation-branch"
+                  :option="templateFormOption"
+                  :label="$t('quotation.templateForm')"
+                  :option-label="locale === 'eng' ? 'labelEN' : 'label'"
                 />
                 <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);
-                    }
-                  "
+                  @click="() => {}"
                 >
                   {{ $t('general.view', { msg: $t('general.example') }) }}
                 </MainButton>
                 <MainButton
                   solid
-                  icon="mdi-file-upload"
+                  icon="mdi-pencil-outline"
                   color="207 96% 32%"
-                  @click="
-                    () => {
-                      if (!refQFileAcceptance) return;
-                      refQFileAcceptance.pickFiles();
-                    }
-                  "
+                  @click="() => {}"
                 >
-                  {{ $t('general.upload') }}
+                  {{ $t('general.designForm') }}
                 </MainButton>
               </div>
             </q-expansion-item>