refactor: create BankComponents

src/pages/05_quotation/peview/BankComponents.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { QSelect } from 'quasar';
+
+// NOTE: Import stores
+import { selectFilterOptionRefMod } from 'stores/utils';
+import useOptionStore from 'stores/options';
+
+// NOTE  Import Types
+import { BankBook } from 'stores/branch/types';
+
+// NOTE: Import Components
+
+const optionStore = useOptionStore();
+
+const bankBookOptions = ref<Record<string, unknown>[]>([]);
+let bankBoookFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+defineProps<{
+  bankBook: BankBook;
+}>();
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    bankBoookFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.bankBook),
+      bankBookOptions,
+      'label',
+    );
+  },
+);
+</script>
+
+<template>
+  <fieldset>
+    <legend>ช่องทางที่ 1</legend>
+
+    <div class="border-5 full-width row">
+      <div class="col column flex flex-center q-pa-sm" style="width: 20%">
+        <q-img class="text-center" src="/qrcode.png"></q-img>
+      </div>
+
+      <div class="column" style="width: 80%">
+        <div class="row">
+          <div class="col">
+            <q-select
+              outlined
+              clearable
+              use-input
+              emit-value
+              fill-input
+              map-options
+              hide-bottom-space
+              option-value="value"
+              input-debounce="0"
+              option-label="label"
+              class="col-12 col-md-4"
+              autocomplete="off"
+              dense
+              :label="$t('branch.form.bank')"
+              :options="bankBookOptions"
+              readonly
+              hide-dropdown-icon
+              for="select-bankbook"
+              :model-value="bankBook.bankName || '-'"
+              @update:model-value="
+                (v) => (typeof v === 'string' ? (bankBook.bankName = v) : '')
+              "
+              @filter="bankBoookFilter"
+              @clear="bankBook.bankName = ''"
+            >
+              <template v-slot:option="scope">
+                <q-item
+                  v-if="scope.opt"
+                  v-bind="scope.itemProps"
+                  class="row items-center"
+                >
+                  <q-item-section avatar>
+                    <q-img
+                      :src="`/img/bank/${scope.opt.value}.png`"
+                      class="bordered"
+                      style="border-radius: 50%"
+                    />
+                  </q-item-section>
+                  <q-item-section>
+                    {{ scope.opt.label }}
+                  </q-item-section>
+                </q-item>
+              </template>
+
+              <template v-slot:selected-item="scope">
+                <q-item-section
+                  v-if="scope.opt && bankBook.bankName"
+                  avatar
+                  class="q-py-sm"
+                >
+                  <q-img
+                    :src="`/img/bank/${scope.opt.value}.png`"
+                    class="bordered"
+                    style="border-radius: 50%"
+                  />
+                </q-item-section>
+              </template>
+
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    {{ $t('general.noData') }}
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div class="col">
+            <q-input
+              outlined
+              for="input-bankbook"
+              class="col-12 col-md-4"
+              hide-bottom-space
+              dense
+              readonly
+              :label="$t('branch.form.bankAccountNumber')"
+              :maxlength="15"
+              :model-value="bankBook.accountNumber || '-'"
+              @update:model-value="
+                (v) =>
+                  typeof v === 'string' ? (bankBook.accountNumber = v) : ''
+              "
+            />
+          </div>
+          <div class="col">
+            <q-input
+              outlined
+              for="input-bankbook"
+              class="col-12 col-md-4"
+              hide-bottom-space
+              dense
+              readonly
+              :label="$t('branch.form.bankAccountName')"
+              :model-value="bankBook.accountName || '-'"
+              @update:model-value="
+                (v) => (typeof v === 'string' ? (bankBook.accountName = v) : '')
+              "
+            />
+          </div>
+        </div>
+        <div class="row">
+          <q-input
+            outlined
+            for="input-bankbook"
+            class="col-md-4 col-12"
+            hide-bottom-space
+            dense
+            readonly
+            :label="$t('branch.form.bankBranch')"
+            :model-value="bankBook.bankBranch || '-'"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (bankBook.bankBranch = v) : '')
+            "
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+legend {
+  background-color: white;
+  padding: 5px 10px;
+}
+
+.bordered-2 {
+  border: 2px solid var(--border-color);
+}
+
+.border-5 {
+  border-radius: 5px;
+}
+</style>