refactor: quotation payment method select bank from register branch

src/pages/05_quotation/PaymentForm.vue

@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { baseUrl, dialog } from 'stores/utils';
+import { onMounted, reactive, ref } from 'vue';
+import { QFile, QMenu } from 'quasar';
 import { storeToRefs } from 'pinia';
-import { useConfigStore } from 'stores/config';
-import { formatNumberDecimal } from 'stores/utils';
-import { SaveButton, EditButton, UndoButton } from 'components/button';
-import SelectInput from 'src/components/shared/SelectInput.vue';
-
 import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-
-import { reactive, ref } from 'vue';
 import { useQuotationPayment } from 'src/stores/quotations';
 import {
   PaymentPayload,
@@ -19,16 +12,25 @@ import {
   QuotationPaymentData,
 } from 'src/stores/quotations/types';
 import { dateFormatJS } from 'src/utils/datetime';
-import { QFile, QMenu } from 'quasar';
-import UploadFileCard from 'src/components/upload-file/UploadFileCard.vue';
-import { onMounted } from 'vue';
 import { DebitNote } from 'src/stores/debit-note';
+import { baseUrl, dialog, formatNumberDecimal } from 'stores/utils';
+import { useConfigStore } from 'stores/config';
+import useBranchStore from 'src/stores/branch';
+import useOptionStore from 'src/stores/options';
 
+import UploadFileCard from 'src/components/upload-file/UploadFileCard.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';
+import { SaveButton, EditButton, UndoButton } from 'components/button';
+
+const { t } = useI18n();
+const { fetchListBankByBranch } = useBranchStore();
+const { mapOption } = useOptionStore();
 const configStore = useConfigStore();
 const quotationPayment = useQuotationPayment();
 const { data: config } = storeToRefs(configStore);
 
 const prop = defineProps<{
+  branchId: string;
   data?: Quotation | QuotationFull | DebitNote;
   readonly?: boolean;
   isDebitNote?: boolean;
@@ -39,6 +41,7 @@ const firstCodePayment = defineModel<string>('firstCodePayment');
 const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const refQMenu = ref<InstanceType<typeof QMenu>[]>([]);
 const paymentData = ref<QuotationPaymentData[]>([]);
+const accountOpt = ref<{ label: string; value: string }[]>([]);
 const formPaymentMethod = ref<
   {
     id: string;
@@ -248,8 +251,25 @@ async function fetchData() {
   }
 }
 
+async function fetchBankOption() {
+  const bankOption = await fetchListBankByBranch(prop.branchId);
+  accountOpt.value = bankOption
+    .map((b) => {
+      const name =
+        `${b.accountName} ${mapOption(b.bankName)} ${mapOption(b.accountType)} ${b.accountNumber}`.trim();
+      if (!name) return;
+
+      return {
+        label: name,
+        value: name,
+      };
+    })
+    .filter((i) => !!i);
+}
+
 onMounted(async () => {
   await fetchData();
+  await fetchBankOption();
 });
 </script>
 <template>
@@ -691,16 +711,17 @@ onMounted(async () => {
                 "
                 :label="$t('quotation.refNo')"
               />
-              <q-input
+              <SelectInput
                 v-if="formPaymentMethod[i].channel === 'BankTransfer'"
-                dense
+                id="select-payment-account"
-                outlined
+                for="select-payment-account"
-                class="col"
-                v-model="formPaymentMethod[i].account"
                 :readonly="
                   readonly ||
                   (!formPaymentMethod[i].isEdit && !!payment.channel)
                 "
+                v-model="formPaymentMethod[i].account"
+                class="col"
+                :option="accountOpt"
                 :label="$t('quotation.bankAccount')"
               />
               <div class="q-ml-auto">

src/pages/05_quotation/QuotationForm.vue

@@ -2009,6 +2009,7 @@ function covertToNode() {
                 view !== View.Receipt &&
                 view !== View.Complete
               "
+              :branch-id="quotationFull.registeredBranchId"
               :readonly="
                 isRoleInclude(['sale', 'head_of_sale']) ||
                 !canAccess('quotation', 'edit')

src/stores/branch/index.ts

@@ -447,6 +447,17 @@ const useBranchStore = defineStore('api-branch', () => {
     return false;
   }
 
+  async function fetchListBankByBranch(branchId: string) {
+    const res = await api.get(`/branch/${branchId}/bank`, {
+      headers: { 'X-Rtid': flowStore.rtid },
+    });
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+
+    return false;
+  }
+
   return {
     data,
     map,
@@ -475,6 +486,8 @@ const useBranchStore = defineStore('api-branch', () => {
     fetchByIdAttachment,
     putAttachment,
     deleteByIdAttachment,
+
+    fetchListBankByBranch,
   };
 });