From 912fb7c4c373d40cfb6d05bfde3551e19b5a78a7 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 2 Aug 2024 11:13:21 +0000
Subject: [PATCH] feat: bankbook & i18n

---
 public/option/option.json                     | 104 ++++++++
 .../01_branch-management/FormBank.vue         | 240 ++++++++++++++++++
 src/i18n/en-US/bank.ts                        |   8 +
 src/i18n/en-US/index.ts                       |   4 +
 src/i18n/th-th/bank.ts                        |   8 +
 src/i18n/th-th/index.ts                       |   4 +
 src/pages/01_branch-management/MainPage.vue   |  78 ++++--
 src/stores/branch/index.ts                    |  36 ++-
 src/stores/branch/types.ts                    |  10 +
 9 files changed, 458 insertions(+), 34 deletions(-)
 create mode 100644 src/components/01_branch-management/FormBank.vue
 create mode 100644 src/i18n/en-US/bank.ts
 create mode 100644 src/i18n/th-th/bank.ts

diff --git a/public/option/option.json b/public/option/option.json
index ff82d041..77579dc6 100644
--- a/public/option/option.json
+++ b/public/option/option.json
@@ -1,5 +1,57 @@
 {
   "eng": {
+    "bankBook": [
+      {
+        "label": "Bangkok Bank",
+        "value": "bbl"
+      },
+      {
+        "label": "Kasikorn Bank",
+        "value": "kbank"
+      },
+      {
+        "label": "Krungthai Bank",
+        "value": "ktb"
+      },
+      {
+        "label": "TMBThanachart Bank",
+        "value": "ttb"
+      },
+      {
+        "label": "Siam Commercial Bank",
+        "value": "scb"
+      },
+      {
+        "label": "UOB Bank",
+        "value": "uobt"
+      },
+      {
+        "label": "Krungsri Bank",
+        "value": "bay"
+      },
+      {
+        "label": "Government Savings Bank",
+        "value": "gsb"
+      },
+      {
+        "label": "Kiatnakin Phatra Bank",
+        "value": "kkp"
+      }
+    ],
+    "accountType": [
+      {
+        "label": "Savings Account",
+        "value": "savingAccount"
+      },
+      {
+        "label": "Fixed Deposit Account",
+        "value": "fixedDeposit"
+      },
+      {
+        "label": "Current Account",
+        "value": "currentAccount"
+      }
+    ],
     "typeProduct": [
       {
         "label": "DOE",
@@ -732,6 +784,58 @@
   },
 
   "tha": {
+    "bankBook": [
+      {
+        "label": "ธนาคารกรุงเทพ",
+        "value": "bbl"
+      },
+      {
+        "label": "ธนาคารกสิกรไทย",
+        "value": "kbank"
+      },
+      {
+        "label": "ธนาคารกรุงไทย",
+        "value": "ktb"
+      },
+      {
+        "label": "ธนาคารทหารไทยธนชาต",
+        "value": "ttb"
+      },
+      {
+        "label": "ธนาคารไทยพาณิชย์",
+        "value": "scb"
+      },
+      {
+        "label": "ธนาคารยูโอบี",
+        "value": "uobt"
+      },
+      {
+        "label": "ธนาคารกรุงศรีอยุธยา",
+        "value": "bay"
+      },
+      {
+        "label": "ธนาคารออมสิน",
+        "value": "gsb"
+      },
+      {
+        "label": "ธนาคารเกียรตินาคินภัทร",
+        "value": "kkp"
+      }
+    ],
+    "accountType": [
+      {
+        "label": "บัญชีเงินฝากออมทรัพย์",
+        "value": "savingAccount"
+      },
+      {
+        "label": "บัญชีเงินฝากประจำ",
+        "value": "fixedDeposit"
+      },
+      {
+        "label": "บัญชีเงินฝากกระแสรายวัน",
+        "value": "currentAccount"
+      }
+    ],
     "typeProduct": [
       {
         "label": "DOE",
diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
new file mode 100644
index 00000000..a5c61c16
--- /dev/null
+++ b/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>
diff --git a/src/i18n/en-US/bank.ts b/src/i18n/en-US/bank.ts
new file mode 100644
index 00000000..b2d2d1ac
--- /dev/null
+++ b/src/i18n/en-US/bank.ts
@@ -0,0 +1,8 @@
+export default {
+  accountNumber: 'Account Number',
+  bankBranch: 'Bank Branch',
+  accountName: 'Account Name',
+  bankType: 'Bank Type',
+  accountStatus: 'Account Status ',
+  bankBookNo: 'Bank Book',
+};
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 9c21d8d9..7edb7f05 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -11,6 +11,7 @@ import employerDialog from './employer-dialog';
 import otherDocument from './other-document';
 import productService from './product-service';
 import alertDialog from './alert-dialog';
+import bank from './bank';
 export default {
   ok: 'Confirm',
   agree: 'Ok',
@@ -69,6 +70,8 @@ export default {
   notRecorded: 'You have not yet saved.',
   editImage: 'Edit Image',
   bankBook: 'Bank Book',
+  use: 'In Use',
+  notUse: 'Not Use',
   ...status,
   ...main,
   ...address,
@@ -82,4 +85,5 @@ export default {
   ...otherDocument,
   ...productService,
   ...alertDialog,
+  ...bank,
 };
diff --git a/src/i18n/th-th/bank.ts b/src/i18n/th-th/bank.ts
new file mode 100644
index 00000000..b568fd8a
--- /dev/null
+++ b/src/i18n/th-th/bank.ts
@@ -0,0 +1,8 @@
+export default {
+  accountNumber: 'เลขที่บัญชี',
+  bankBranch: 'สาขาธนาคาร',
+  accountName: 'ชื่อบัญชี',
+  bankType: 'ประเภทของธนาคาร',
+  accountStatus: 'สถานะการใช้งาน ',
+  bankBookNo: 'ช่องทางที่',
+};
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index a1c2fba0..56ce2489 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -11,6 +11,7 @@ import employerDialog from './employer-dialog';
 import otherDocument from './other-document';
 import productService from './product-service';
 import alertDialog from './alert-dialog';
+import bank from './bank';
 export default {
   ok: 'ยืนยัน',
   agree: 'ตกลง',
@@ -72,6 +73,8 @@ export default {
   notRecorded: 'คุณยังไม่ได้บันทึก',
   editImage: 'แก้ไขรูป',
   bankBook: 'บัญชีธนาคาร',
+  use: 'ใช้งาน',
+  notUse: 'ไม่ใช้งาน',
   ...status,
   ...main,
   ...address,
@@ -85,4 +88,5 @@ export default {
   ...otherDocument,
   ...productService,
   ...alertDialog,
+  ...bank,
 };
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index b38808ed..921f484c 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -9,7 +9,12 @@ import type { QTableProps } from 'quasar';
 
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'src/stores/flow';
-import { BranchWithChildren, BranchCreate, Branch } from 'stores/branch/types';
+import {
+  BranchWithChildren,
+  BranchCreate,
+  Branch,
+  BankBook,
+} from 'stores/branch/types';
 import { Status } from 'src/stores/types';
 
 import useUtilsStore, { dialog } from 'src/stores/utils';
@@ -29,6 +34,7 @@ import TreeCompoent from 'src/components/TreeCompoent.vue';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import SideMenu from 'src/components/SideMenu.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
+import FormBank from 'src/components/01_branch-management/FormBank.vue';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -70,11 +76,6 @@ const hideStat = ref(false);
 const currentStatus = ref<Status | 'All'>('All');
 const expandedTree = ref<string[]>([]);
 const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
-  {
-    icon: 'mdi-office-building-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
   {
     icon: 'mdi-phone',
     color: 'hsl(var(--info-bg))',
@@ -90,15 +91,16 @@ const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
     color: 'hsl(var(--info-bg))',
     bgColor: 'var(--surface-1)',
   },
+]);
+
+const formBankBook = ref<BankBook[]>([
   {
-    icon: 'mdi-qrcode',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
-  },
-  {
-    icon: 'mdi-piggy-bank-outline',
-    color: 'hsl(var(--info-bg))',
-    bgColor: 'var(--surface-1)',
+    bankName: '',
+    accountNumber: '',
+    bankBranch: '',
+    accountName: '',
+    accountType: '',
+    currentlyUse: true,
   },
 ]);
 
@@ -294,6 +296,12 @@ async function fetchBranchById(id: string) {
     imageUrl.value = res.imageUrl;
     prevImageUrl.value = res.imageUrl;
 
+    const updatedBank = res.bank.map((item) => {
+      const { id: _id, branchId: _branchId, ...rest } = item;
+      return rest;
+    });
+    formBankBook.value = updatedBank;
+
     formData.value = {
       headOfficeId: res.headOfficeId,
       taxNo: res.taxNo,
@@ -326,6 +334,17 @@ function clearData() {
     code: '',
   };
   profileFile.value = undefined;
+
+  formBankBook.value = [
+    {
+      bankName: '',
+      accountNumber: '',
+      bankBranch: '',
+      accountName: '',
+      accountType: '',
+      currentlyUse: true,
+    }
+  ];
 }
 
 async function undo() {
@@ -473,6 +492,7 @@ async function onSubmit() {
       },
       profileFile.value,
       profileFileImg.value,
+      formBankBook.value,
     );
 
     await branchStore.fetchList({ pageSize: 99999 });
@@ -490,11 +510,14 @@ async function onSubmit() {
       delete formData.value['codeHeadOffice'];
     }
 
-    await branchStore.create({
-      ...formData.value,
-      qrCodeImage: profileFile.value,
-      imageUrl: profileFileImg.value,
-    });
+    await branchStore.create(
+      {
+        ...formData.value,
+        qrCodeImage: profileFile.value,
+        imageUrl: profileFileImg.value,
+      },
+      formBankBook.value,
+    );
 
     await branchStore.fetchList({ pageSize: 99999 });
     modal.value = false;
@@ -1484,7 +1507,7 @@ watch(currentHq, () => {
               },
               {
                 name: $t('bankBook'),
-                anchor: 'form-bankBook',
+                anchor: 'form-bank',
               },
             ]"
             background="transparent"
@@ -1559,6 +1582,12 @@ watch(currentHq, () => {
             }
           "
         />
+        <FormBank
+          id="form-bank"
+          title="bankBook"
+          dense
+          v-model:bank-book-list="formBankBook"
+        />
         <!-- <FormImage
           :readonly="formType === 'view'"
           v-model:image="imageUrl"
@@ -1639,7 +1668,7 @@ watch(currentHq, () => {
                 },
                 {
                   name: $t('bankBook'),
-                  anchor: 'info-bankBook',
+                  anchor: 'info-bank',
                 },
               ]"
               background="transparent"
@@ -1717,6 +1746,13 @@ watch(currentHq, () => {
               }
             "
           />
+          <FormBank
+            id="info-bank"
+            :readonly="formType === 'view'"
+            title="bankBook"
+            dense
+            v-model:bank-book-list="formBankBook"
+          />
           <!-- <FormImage
             @upload="
               () => {
diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts
index 8c9b03c2..9040071a 100644
--- a/src/stores/branch/index.ts
+++ b/src/stores/branch/index.ts
@@ -2,7 +2,7 @@ import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { Pagination } from '../types';
 import { api } from 'src/boot/axios';
-import { Branch, BranchCreate } from './types';
+import { BankBook, Branch, BranchCreate } from './types';
 import { BranchContact } from '../branch-contact/types';
 import axios from 'axios';
 import useFlowStore from '../flow';
@@ -120,6 +120,7 @@ const useBranchStore = defineStore('api-branch', () => {
 
   async function create(
     branch: BranchCreate,
+    bank?: BankBook[],
     flow?: {
       sessionId?: string;
       refTransactionId?: string;
@@ -134,13 +135,17 @@ const useBranchStore = defineStore('api-branch', () => {
         qrCodeImageUploadUrl: string;
         imageUploadUrl: string;
       }
-    >('/branch', payload, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
+    >(
+      '/branch',
+      { ...payload, bank: bank },
+      {
+        headers: {
+          'X-Session-Id': flow?.sessionId,
+          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+          'X-Tid': flow?.transactionId,
+        },
       },
-    });
+    );
 
     qrCodeImage &&
       (await axios
@@ -169,6 +174,7 @@ const useBranchStore = defineStore('api-branch', () => {
     data: Partial<BranchCreate & { status: 'ACTIVE' | 'INACTIVE' | 'CREATED' }>,
     qrCodeImage?: File | undefined,
     imageHq?: File | undefined,
+    bank?: BankBook[],
     flow?: {
       sessionId?: string;
       refTransactionId?: string;
@@ -178,13 +184,17 @@ const useBranchStore = defineStore('api-branch', () => {
     const { ...payload } = data;
     const res = await api.put<
       Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }
-    >(`/branch/${id}`, payload, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
+    >(
+      `/branch/${id}`,
+      { ...payload, bank: bank },
+      {
+        headers: {
+          'X-Session-Id': flow?.sessionId,
+          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+          'X-Tid': flow?.transactionId,
+        },
       },
-    });
+    );
 
     if (qrCodeImage) {
       await axios
diff --git a/src/stores/branch/types.ts b/src/stores/branch/types.ts
index 4743c014..928b0efa 100644
--- a/src/stores/branch/types.ts
+++ b/src/stores/branch/types.ts
@@ -2,6 +2,15 @@ import { District, Province, SubDistrict } from '../address';
 import { BranchContact } from '../branch-contact/types';
 import { Status } from '../types';
 
+export type BankBook = {
+  bankName: string;
+  accountNumber: string;
+  bankBranch: string;
+  accountName: string;
+  accountType: string;
+  currentlyUse: boolean;
+};
+
 export type Branch = {
   subDistrict: SubDistrict | null;
   district: District | null;
@@ -31,6 +40,7 @@ export type Branch = {
   id: string;
   code: string;
   telephoneNo: string;
+  bank: (BankBook & { id: string; branchId: string })[];
   lineId: string;
   contact: BranchContact[];
   _count: {