feat(01): mock code branch

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

@@ -261,16 +261,18 @@ watch(
         :readonly="readonly"
         :label="$t('branch.form.bankAccountNumber')"
         :maxlength="13"
-        :rules="[
-          (val: string) =>
-            (val.length >= 7 && val.length <= 13) ||
-            $t('form.error.please', { msg: $t('accountNumber') }),
-        ]"
         :model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
         @update:model-value="
           (v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
         "
       />
+      <!--         :rules="[
+          (val: string) =>
+            (val.length >= 7 && val.length <= 13) ||
+            $t('form.error.please', {
+              msg: $t('branch.form.bankAccountNumber'),
+            }),
+        ]" -->
 
       <q-input
         outlined

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const code = defineModel<string>('code');
+const branchCount = defineModel<number>('branchCount', { default: 0 });
 const codeSubBranch = defineModel<string>('codeSubBranch');
 const taxNo = defineModel<string>('taxNo');
 const name = defineModel<string>('name');
@@ -13,12 +14,13 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   view?: boolean;
+  onCreate?: boolean;
 }>();
 
 function formatCode(input: string | undefined, type: 'code' | 'number') {
   if (!input) return;
-  const code = input.slice(0, -6);
+  const code = input.slice(0, -5);
-  const number = input.slice(-6);
+  const number = input.slice(-5);
   if (type === 'code') return code;
   if (type === 'number') return number;
 }
@@ -67,10 +69,22 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           class="col-md col-7"
           :label="$t('branch.form.code')"
           for="input-code"
-          :model-value="view ? formatCode(code, 'number') : code"
+          :model-value="
+            typeBranch === 'headOffice'
+              ? view
+                ? formatCode(code, 'number')
+                : '00000'
+              : view
+                ? onCreate
+                  ? (branchCount + 1).toString().padStart(5, '0')
+                  : formatCode(codeSubBranch, 'number')
+                : codeSubBranch
+          "
           @update:model-value="(v) => (code = v as string)"
         />
-        <q-input
+
+        <!--  view ? `${formatCode(code, 'number')}${branchCount}` : code -->
+        <!-- <q-input
           lazy-rules="ondemand"
           v-if="typeBranch !== 'headOffice'"
           :dense="dense"
@@ -85,7 +99,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             view ? formatCode(codeSubBranch, 'number') : codeSubBranch
           "
           @update:model-value="(v) => (codeSubBranch = v as string)"
-        />
+        /> -->
 
         <q-input
           lazy-rules="ondemand"

src/i18n/tha/index.ts

@@ -183,7 +183,7 @@ export default {
       abbrev: 'ชื่อย่อ',
       code: 'รหัสสำนักงานใหญ่',
       codeBranch: 'รหัสสาขา',
-      taxNo: 'เลขประจำตัวผู้เสียภาษี',
+      taxNo: 'ทะเบียนนิติบุคคลเลขที่',
       contactName: 'ชื่อผู้ติดต่อ',
       contactTelephone: 'เบอร์ผู้ติดต่อ',
       branchName: 'ชื่อสาขา',

src/pages/01_branch-management/MainPage.vue

@@ -130,6 +130,7 @@ const imageDialog = ref(false);
 
 const profileFile = ref<File | undefined>(undefined);
 const qrCodeimageUrl = ref<string | null>('');
+const formBranchCount = ref<number>(0);
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -295,8 +296,14 @@ const formDialogRef = ref();
 
 const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
 const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
-const currentHq = ref<{ id: string; code: string }>({ id: '', code: '' });
+const currentHq = ref<{ id: string; code: string; count?: number }>({
-const currentEdit = ref<{ id: string; code: string }>({ id: '', code: '' });
+  id: '',
+  code: '',
+});
+const currentEdit = ref<{ id: string; code: string; count?: number }>({
+  id: '',
+  code: '',
+});
 const formData = ref<
   Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
 >(structuredClone(defaultFormData));
@@ -386,6 +393,7 @@ function triggerCreate(
   type: 'headOffice' | 'subBranch',
   id?: string,
   code?: string,
+  count?: number,
 ) {
   clearData();
 
@@ -395,6 +403,7 @@ function triggerCreate(
     currentHq.value = {
       id: id ?? '',
       code: code ?? '',
+      count: count,
     };
   }
 
@@ -403,6 +412,7 @@ function triggerCreate(
     formData.value.headOfficeId = id;
     formData.value.code = code;
     formData.value.codeHeadOffice = code;
+    formBranchCount.value = count;
   }
 
   formType.value = 'create';
@@ -447,6 +457,7 @@ async function triggerEdit(
   currentEdit.value = {
     id: currentRecord.id,
     code: currentRecord.code,
+    count: currentRecord._count,
   };
 
   if (typeBranch === 'subBranch') {
@@ -459,6 +470,7 @@ async function triggerEdit(
     if (currentRecordHead) {
       currentHq.value.id = currentRecordHead.id;
       currentHq.value.code = currentRecordHead.code;
+      currentHq.value.count = currentRecordHead._count.branch;
     } else {
       currentHq.value = currentEdit.value;
     }
@@ -577,7 +589,7 @@ async function onSubmit() {
       );
 
       formData.value.headOfficeId = currentRecord?.id;
-      formData.value.code = formData.value.code?.slice(0, -6);
+      formData.value.code = formData.value.code?.slice(0, -5);
       delete formData.value['codeHeadOffice'];
       await createBranch();
     } else {
@@ -585,7 +597,7 @@ async function onSubmit() {
         color: 'info',
         icon: 'mdi-message-processing-outline',
         message: t('form.info.cantChange', {
-          field: t('formDialogHqAbbreviation'),
+          field: t('branch.form.abbrev'),
           name: formData.value.code,
         }),
         actionText: t('agree'),
@@ -789,6 +801,7 @@ watch(currentHq, () => {
                             'subBranch',
                             currentHq.id,
                             currentHq.code,
+                            currentHq.count,
                           );
                         }
                       }
@@ -843,6 +856,7 @@ watch(currentHq, () => {
                             currentHq = {
                               id: v.id,
                               code: v.code,
+                              count: v._count.branch,
                             };
                             beforeBranch = {
                               id: '',
@@ -851,7 +865,15 @@ watch(currentHq, () => {
                           }
                         }
                       "
-                      @create="(v) => triggerCreate('subBranch', v.id, v.code)"
+                      @create="
+                        (v) =>
+                          triggerCreate(
+                            'subBranch',
+                            v.id,
+                            v.code,
+                            v._count.branch,
+                          )
+                      "
                       @view="
                         (v) => {
                           if (v.isHeadOffice) {
@@ -1100,6 +1122,7 @@ watch(currentHq, () => {
                               currentHq = {
                                 id: props.row.id,
                                 code: props.row.code,
+                                count: props.row._count.branch,
                               };
                               beforeBranch = {
                                 id: '',
@@ -1263,6 +1286,7 @@ watch(currentHq, () => {
                                 currentHq = {
                                   id: props.row.id,
                                   code: props.row.code,
+                                  count: props.row._count.branch,
                                 };
                                 beforeBranch = {
                                   id: '',
@@ -1386,6 +1410,7 @@ watch(currentHq, () => {
     "
     :close="
       () => (
+        (formBranchCount = 0),
         (modal = false),
         (profileFileImg = undefined),
         (isImageEdit = false),
@@ -1400,7 +1425,12 @@ watch(currentHq, () => {
         active
         useToggle
         :title="formData.name"
-        :caption="formData.codeHeadOffice"
+        :toggleTitle="$t('status.title')"
+        :caption="
+          formTypeBranch === 'headOffice'
+            ? `${formData.code}00000`
+            : `${formData.code?.slice(0, -5)}${(formBranchCount + 1).toString().padStart(5, '0')}`
+        "
         v-model:toggle-status="formData.status"
         v-model:cover-url="imageUrl"
         :hideFade="imageUrl === '' || imageUrl === null"
@@ -1479,6 +1509,7 @@ watch(currentHq, () => {
       <div class="col-md-10 col-12 q-pa-md q-gutter-y-xl">
         <FormBranchInformation
           id="form-information"
+          v-model:branchCount="formBranchCount"
           v-model:abbreviation="formData.code"
           v-model:code="formData.codeHeadOffice"
           v-model:code-sub-branch="currentEdit.code"
@@ -1489,8 +1520,9 @@ watch(currentHq, () => {
           :dense="true"
           :outlined="true"
           :readonly="formType === 'view'"
-          :view="isSubCreate"
           title="form.field.basicInformation"
+          :view="isSubCreate"
+          onCreate
         />
         <FormBranchContact
           id="form-contact"
@@ -1583,6 +1615,7 @@ watch(currentHq, () => {
           :active="formData.status !== 'INACTIVE'"
           useToggle
           v-model:cover-url="imageUrl"
+          :toggleTitle="$t('status.title')"
           :hideFade="imageUrl === '' || imageUrl === null"
           :img="imageUrl || null"
           :cover="imageUrl || null"
@@ -1810,7 +1843,12 @@ watch(currentHq, () => {
           v-ripple
           v-close-popup
           @click.stop="
-            triggerCreate('subBranch', currentNode.id, currentNode.code)
+            triggerCreate(
+              'subBranch',
+              currentNode.id,
+              currentNode.code,
+              currentNode._count.branch,
+            )
           "
         >
           <q-item-section avatar>