feat(01): mock code branch

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 currentEdit = ref<{ id: string; code: string }>({ id: '', code: '' });
+const currentHq = ref<{ id: string; code: string; count?: number }>({
+  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>