From 42585c859c158c7b1afe20a829e64b9a9f2abd9f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 10 Dec 2024 14:22:15 +0700
Subject: [PATCH] fix: sort selected field

---
 .../01_branch-management/BranchCard.vue        | 18 +++++++++++++-----
 src/pages/03_customer-management/MainPage.vue  | 18 ++++++++++++------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 8b956f0f..83c268ba 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -101,11 +101,19 @@ defineProps<{
     <slot name="data"></slot>
     <template v-if="!$slots.data">
       <div
-        v-for="key in fieldSelected || [
-          'branchLabelAddress',
-          'branchLabelTel',
-          'branchLabelType',
-        ]"
+        v-for="key in (
+          fieldSelected || [
+            'branchLabelAddress',
+            'branchLabelTel',
+            'branchLabelType',
+          ]
+        ).sort((lhs, rhs) => {
+          let order = Object.keys(data);
+          return (
+            order.findIndex((i) => i === lhs) -
+            order.findIndex((i) => i === rhs)
+          );
+        })"
         :key="key"
         class="branch-card__data"
       >
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 11296360..36e7b9c0 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1603,17 +1603,23 @@ const emptyCreateDialog = ref(false);
                               <div
                                 class="col-12 q-py-sm row"
                                 v-for="key in fieldSelected
-                                  .filter((v) => {
-                                    return columnsCustomer.some(
-                                      (c) => c.name === v,
-                                    );
-                                  })
                                   .filter((v) => {
                                     return (
                                       v !== 'orderNumber' &&
                                       v !== 'titleName' &&
                                       v !== 'address' &&
-                                      v !== 'contactName'
+                                      v !== 'contactName' &&
+                                      columnsCustomer.some((c) => c.name === v)
+                                    );
+                                  })
+                                  .sort((lhs, rhs) => {
+                                    const fields = [
+                                      ...columnsEmployee,
+                                      ...columnsCustomer,
+                                    ];
+                                    return (
+                                      fields.findIndex((i) => i.name === lhs) -
+                                      fields.findIndex((i) => i.name === rhs)
                                     );
                                   })"
                                 :key="key"