feat: bankbook & i18n

src/components/01_branch-management/FormBank.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { BankBook } from 'src/stores/branch/types';
+import useOptionStore from 'src/stores/options';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { onMounted, ref, watch } from 'vue';
+import { deleteItem } from 'src/stores/utils';
+import { QSelect } from 'quasar';
+
+const optionStore = useOptionStore();
+
+const bankBookList = defineModel<BankBook[]>('bankBookList', { default: [] });
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  view?: boolean;
+}>();
+
+const bankBookOptions = ref<Record<string, unknown>[]>([]);
+let bankBoookFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const accountTypeOptions = ref<Record<string, unknown>[]>([]);
+let accountTypeFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+function addBankBook() {
+  bankBookList.value?.push({
+    bankName: '',
+    accountNumber: '',
+    bankBranch: '',
+    accountName: '',
+    accountType: '',
+    currentlyUse: true,
+  });
+}
+
+onMounted(() => {
+  if (optionStore.globalOption) {
+    bankBoookFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.bankBook),
+      bankBookOptions,
+      'label',
+    );
+
+    accountTypeFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.accountType),
+      accountTypeOptions,
+      'label',
+    );
+  }
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    bankBoookFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.bankBook),
+      bankBookOptions,
+      'label',
+    );
+
+    accountTypeFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.accountType),
+      accountTypeOptions,
+      'label',
+    );
+  },
+);
+</script>
+<template>
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-bank"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
+      <q-btn icon="mdi-plus" flat dense @click="addBankBook" v-if="!readonly" />
+    </div>
+
+    <div
+      v-for="(book, i) in bankBookList"
+      class="col-12 row q-col-gutter-sm"
+      :class="{ 'q-pt-lg': i !== 0 }"
+      :key="i"
+    >
+      <span class="col-12 app-text-muted-2 flex justify-between items-center">
+        {{ `${$t('bankBookNo')} ${i + 1}` }}
+        <q-btn
+          v-if="bankBookList.length !== 1 && !readonly"
+          flat
+          dense
+          size="sm"
+          color="negative"
+          icon="mdi-trash-can-outline"
+          @click="deleteItem(bankBookList, i)"
+        />
+      </span>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        option-value="value"
+        input-debounce="0"
+        option-label="label"
+        v-model="book.bankName"
+        lazy-rules="ondemand"
+        class="col-3"
+        :dense="dense"
+        :label="$t('bankBook')"
+        :options="bankBookOptions"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        for="select-bankbook"
+        @filter="bankBoookFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-input
+        outlined
+        for="input-bankbook"
+        class="col-3"
+        lazy-rules="ondemand"
+        hide-bottom-space
+        v-model="book.accountNumber"
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('accountNumber')"
+      />
+      <q-input
+        outlined
+        for="input-bankbook"
+        class="col-3"
+        lazy-rules="ondemand"
+        hide-bottom-space
+        v-model="book.bankBranch"
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('bankBranch')"
+      />
+      <q-input
+        outlined
+        for="input-bankbook"
+        class="col-3"
+        lazy-rules="ondemand"
+        hide-bottom-space
+        v-model="book.accountName"
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('accountName')"
+      />
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        option-value="value"
+        input-debounce="0"
+        option-label="label"
+        v-model="book.accountType"
+        lazy-rules="ondemand"
+        class="col-4"
+        :dense="dense"
+        :label="$t('bankType')"
+        :options="accountTypeOptions"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        for="select-bankbook"
+        @filter="accountTypeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        option-value="value"
+        input-debounce="0"
+        option-label="label"
+        v-model="book.currentlyUse"
+        lazy-rules="ondemand"
+        class="col-3"
+        :dense="dense"
+        :label="$t('accountStatus')"
+        :options="[
+          { label: $t('use'), value: true },
+          { label: $t('notUse'), value: false },
+        ]"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        for="select-bankbook"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+  </div>
+</template>