feat: add sort numbers

src/components/TabComponent.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { CustomerBranchCreate } from 'stores/customer/types';
+import { onMounted } from 'vue';
 
-defineProps<{
+const props = defineProps<{
   readonly?: boolean;
   edit?: boolean;
   prefixId: string;
@@ -12,15 +13,17 @@ const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
   default: [],
 });
 
+const statBranchNo = defineModel<number>('statBranchNo', {
+  default: 0,
+});
+
 const tab = defineModel<number>('tabIndex', { required: true });
 
-const index = ref<number>(0);
-
 function addData() {
-  index.value++;
+  const currentNo = (customerBranch.value.at(-1)?.branchNo || 0) + 1;
   customerBranch.value.push({
     code: '',
-    branchNo: undefined,
+    branchNo: currentNo,
     address: '',
     addressEN: '',
     provinceId: '',
@@ -65,7 +68,18 @@ function close(index: number) {
     }
   }
   customerBranch.value.splice(index, 1);
+
+  customerBranch.value.forEach((v, i) => {
+    if (!!v.branchNo && v.branchNo >= index + 1) {
+      v.branchNo = v.branchNo - 1;
     }
+  });
+}
+
+onMounted(() => {
+  customerBranch.value[0].branchNo =
+    statBranchNo.value !== 0 ? statBranchNo.value : 1;
+});
 </script>
 <template>
   <div class="row no-wrap full-width">
@@ -98,7 +112,7 @@ function close(index: number) {
         v-for="(v, index) in customerBranch"
         :key="index"
         :name="index"
-        :label="`${$t('customerBranchFormTab')} `"
+        :label="`${customerBranch[index].name !== '' ? customerBranch[index].name : $t('customerBranchFormTab')} `"
         :disable="tab !== index && edit"
         @click="tab = index"
         no-caps

src/pages/03_customer-management/MainPage.vue

@@ -474,6 +474,7 @@ const statsCustomerType = ref<CustomerStats>({
 const currentCustomerId = ref<string>('');
 const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
+const statBranchNo = ref<number>(0);
 
 const currentBranch = ref<{ name: string; code: string }>({
   name: '',
@@ -927,6 +928,7 @@ async function onSubmitCustomerBranch() {
     currentCustomerName.value = result.customerName;
     currentCustomerUrlImage.value = result.imageUrl;
     branch.value = result.branch;
+    statBranchNo.value = result.branch.length;
   }
   flowStore.rotate();
 }
@@ -1163,7 +1165,11 @@ const prevCustomer = ref<CustomerCreate>({
   registeredBranchId: '',
 });
 
-async function assignFormData(customerId: string, branch?: CustomerBranch) {
+async function assignFormData(
+  customerId: string,
+  branch?: CustomerBranch,
+  tabNo: number = 0,
+) {
   let data;
   const res = await fetchListById(customerId);
   if (res) {
@@ -1172,6 +1178,8 @@ async function assignFormData(customerId: string, branch?: CustomerBranch) {
 
   if (!data) return;
 
+  indexTab.value = tabNo;
+
   prevCustomer.value = {
     registeredBranchId: data.registeredBranchId,
     status: data.status,
@@ -1185,8 +1193,6 @@ async function assignFormData(customerId: string, branch?: CustomerBranch) {
   };
 
   data.branch.forEach((v) => {
-    console.log(v.taxNo);
-
     prevCustomer.value.customerBranch?.push({
       code: v.code,
       branchNo: v.branchNo,
@@ -1666,6 +1672,9 @@ watch(isMainPage, () => {
         @click="
           () => {
             indexTab = 0;
+
+            console.log(statBranchNo);
+
             dialogInputCustomerBranchForm = true;
           }
         "
@@ -2047,6 +2056,8 @@ watch(isMainPage, () => {
                             const { branch, ...payload } = props.row;
                             currentCustomer = payload;
 
+                            statBranchNo =
+                              branch[branch.length - 1].branchNo + 1;
                             isMainPage = false;
                           }
                         "
@@ -2128,6 +2139,7 @@ watch(isMainPage, () => {
 
                                 currentCustomerId = props.row.id;
                                 customerType = props.row.customerType;
+
                                 assignFormData(props.row.id);
                                 openDialogInputForm('INFO', props.row.id);
                               }
@@ -2339,6 +2351,8 @@ watch(isMainPage, () => {
 
                               const { branch, ...payload } = props.row;
                               currentCustomer = payload;
+                              statBranchNo =
+                                branch[branch.length - 1].branchNo + 1;
                               isMainPage = false;
                             }
                           "
@@ -2901,6 +2915,8 @@ watch(isMainPage, () => {
         @back="
           () => {
             isMainPage = true;
+            statBranchNo = 1;
+            indexTab = 0;
             currentCustomerUrlImage = null;
             clearForm();
           }
@@ -2908,7 +2924,6 @@ watch(isMainPage, () => {
         @viewDetail="
           async (v, i) => {
             currentBranchId = v.id;
-            indexTab = i;
 
             statusToggle = v.status === 'INACTIVE' ? false : true;
 
@@ -2917,7 +2932,7 @@ watch(isMainPage, () => {
               code: v.code,
             };
 
-            if (currentCustomer) assignFormData(currentCustomer.id, v);
+            if (currentCustomer) assignFormData(currentCustomer.id, v, i);
 
             await fetchListOfOptionBranch();
 
@@ -3010,6 +3025,8 @@ watch(isMainPage, () => {
       <div class="col-12 row bordered q-pt-none rounded">
         <TabComponent
           prefix-id="form-dialog"
+          v-model:branch-no="statBranchNo"
+          v-model:stat-branch-no="statBranchNo"
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
         >
@@ -3300,6 +3317,7 @@ watch(isMainPage, () => {
       <div class="col-12 row bordered q-pt-none rounded">
         <TabComponent
           prefix-id="form-dialog-branch"
+          v-model:stat-branch-no="statBranchNo"
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
         >
@@ -3437,6 +3455,7 @@ watch(isMainPage, () => {
       <div class="col-12 row bordered q-pt-none rounded">
         <TabComponent
           prefix-id="form-dialog"
+          :stat-branch-no="statBranchNo"
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
         >
@@ -3633,6 +3652,7 @@ watch(isMainPage, () => {
           <div class="col-12 row bordered q-pt-none rounded">
             <TabComponent
               prefix-id="drawer-info-customer"
+              :stat-branch-no="statBranchNo"
               :readonly="!infoDrawerEdit"
               v-model:customer-branch="formData.customerBranch"
               v-model:tab-index="indexTab"
@@ -3862,6 +3882,7 @@ watch(isMainPage, () => {
 
           <div class="col-12 row bordered q-pt-none rounded">
             <TabComponent
+              :stat-branch-no="statBranchNo"
               prefix-id="drawer-info-customer-branch"
               :edit="true"
               :readonly="true"