From cc69713602e81cc7d4fecb769442181e9957a630 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 11 Apr 2024 17:21:30 +0700
Subject: [PATCH] refactor: detail layout

---
 .../CardDetailsComponent.vue                  | 110 ++++++---------
 .../DetailBranchDrawerComponent.vue           | 130 +++++++++---------
 2 files changed, 105 insertions(+), 135 deletions(-)

diff --git a/src/components/01_branch-management/CardDetailsComponent.vue b/src/components/01_branch-management/CardDetailsComponent.vue
index ca374682..2a3505c1 100644
--- a/src/components/01_branch-management/CardDetailsComponent.vue
+++ b/src/components/01_branch-management/CardDetailsComponent.vue
@@ -36,77 +36,53 @@ defineProps<{
 
     <div class="row">
       <div class="col q-pa-sm card-details-variable">
-        <AppBox class="bordered column q-pa-sm" bordered>
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">รหัสสาขา</div>
-            <div class="col-2">{{ data?.code }}</div>
-            <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
-            <div class="col-3">{{ data?.taxNo }}</div>
-          </div>
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div>
-            <div class="col-2">{{ data?.name }}</div>
-            <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
-            <div class="col-3">{{ data?.nameEN }}</div>
+        <AppBox class="bordered row q-pa-sm" bordered>
+          <div class="col-4 color-text-static">รหัสสาขา</div>
+          <div class="col-8">{{ data?.code }}</div>
+          <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
+          <div class="col-8">{{ data?.taxNo }}</div>
+          <div class="col-4 color-text-static">ชื่อสาขา ภาษาไทย</div>
+          <div class="col-8">{{ data?.name }}</div>
+          <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
+          <div class="col-8">{{ data?.nameEN }}</div>
+
+          <div
+            class="color-card-text-code col-12 q-my-md text-weight-bold"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            ที่อยู่สาขา
           </div>
 
-          <div class="row q-pt-sm q-pb-md card-details-row-height">
-            <div
-              class="col color-card-text-code"
-              :class="{ dark: $q.dark.isActive }"
-            >
-              ที่อยู่สาขา
-            </div>
+          <div class="col-3 color-text-static">ที่อยู่</div>
+          <div class="col-9">{{ data?.address }}</div>
+          <div class="col-3 color-text-static">แขวง/ตำบล</div>
+          <div class="col-3">
+            {{ data?.subDistrict?.name }}
+          </div>
+          <div class="col-3 color-text-static">เขต/อำเภอ</div>
+          <div class="col-3">{{ data?.district?.name }}</div>
+          <div class="col-3 color-text-static">จังหวัด</div>
+          <div class="col-3">{{ data?.province?.name }}</div>
+          <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
+          <div class="col-3">{{ data?.zipCode }}</div>
+
+          <div
+            class="color-card-text-code col-12 q-my-md text-weight-bold"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            ที่อยู่สาขา ENG
           </div>
 
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">ที่อยู่</div>
-            <div class="col-2">{{ data?.address }}</div>
-            <div class="col-4 color-text-static">แขวง/ตำบล</div>
-            <div class="col-3">
-              {{ data?.subDistrict?.name }}
-            </div>
-          </div>
-
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">เขต/อำเภอ</div>
-            <div class="col-2">{{ data?.district?.name }}</div>
-            <div class="col-4 color-text-static">จังหวัด</div>
-            <div class="col-3">{{ data?.province?.name }}</div>
-          </div>
-
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
-            <div class="col-2">{{ data?.zipCode }}</div>
-          </div>
-
-          <div class="row q-pt-sm q-pb-md card-details-row-height">
-            <div
-              class="col color-card-text-code"
-              :class="{ dark: $q.dark.isActive }"
-            >
-              ที่อยู่สาขา ENG
-            </div>
-          </div>
-
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">Address</div>
-            <div class="col-2">{{ data?.addressEN }}</div>
-            <div class="col-4 color-text-static">Subdistrict</div>
-            <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
-          </div>
-
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">District</div>
-            <div class="col-2">{{ data?.district?.nameEN }}</div>
-            <div class="col-4 color-text-static">Province</div>
-            <div class="col-3">{{ data?.province?.nameEN }}</div>
-          </div>
-
-          <div class="row card-details-row-height">
-            <div class="col-3 color-text-static">Zip code</div>
-            <div class="col-2">{{ data?.zipCode }}</div>
-          </div>
+          <div class="col-3 color-text-static">Address</div>
+          <div class="col-9">{{ data?.addressEN }}</div>
+          <div class="col-3 color-text-static">Subdistrict</div>
+          <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
+          <div class="col-3 color-text-static">District</div>
+          <div class="col-3">{{ data?.district?.nameEN }}</div>
+          <div class="col-3 color-text-static">Province</div>
+          <div class="col-3">{{ data?.province?.nameEN }}</div>
+          <div class="col-3 color-text-static">Zip code</div>
+          <div class="col-3">{{ data?.zipCode }}</div>
         </AppBox>
       </div>
 
diff --git a/src/components/01_branch-management/DetailBranchDrawerComponent.vue b/src/components/01_branch-management/DetailBranchDrawerComponent.vue
index c190e5e4..aee56aa9 100644
--- a/src/components/01_branch-management/DetailBranchDrawerComponent.vue
+++ b/src/components/01_branch-management/DetailBranchDrawerComponent.vue
@@ -57,77 +57,53 @@ const open = defineModel('open', { type: Boolean, default: false });
     </q-toolbar>
 
     <section class="q-mb-md">
-      <AppBox class="column q-pa-sm" bordered>
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">รหัสสาขา</div>
-          <div class="col-2">{{ data?.code }}</div>
-          <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
-          <div class="col-3">{{ data?.taxNo }}</div>
-        </div>
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">ชื่อสาขา ภาษาไทย</div>
-          <div class="col-2">{{ data?.name }}</div>
-          <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
-          <div class="col-3">{{ data?.nameEN }}</div>
+      <AppBox class="row q-pa-sm" bordered>
+        <div class="col-4 color-text-static">รหัสสาขา</div>
+        <div class="col-8">{{ data?.code }}</div>
+        <div class="col-4 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
+        <div class="col-8">{{ data?.taxNo }}</div>
+        <div class="col-4 color-text-static">ชื่อสาขา ภาษาไทย</div>
+        <div class="col-8">{{ data?.name }}</div>
+        <div class="col-4 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
+        <div class="col-8">{{ data?.nameEN }}</div>
+
+        <div
+          class="color-card-text-code col-12 q-my-md text-weight-bolder"
+          :class="{ dark: $q.dark.isActive }"
+        >
+          ที่อยู่สาขา
         </div>
 
-        <div class="row q-pt-sm q-pb-md card-details-row-height">
-          <div
-            class="col color-card-text-code"
-            :class="{ dark: $q.dark.isActive }"
-          >
-            ที่อยู่สาขา
-          </div>
+        <div class="col-3 color-text-static">ที่อยู่</div>
+        <div class="col-9">{{ data?.address }}</div>
+        <div class="col-3 color-text-static">แขวง/ตำบล</div>
+        <div class="col-3">
+          {{ data?.subDistrict?.name }}
+        </div>
+        <div class="col-3 color-text-static">เขต/อำเภอ</div>
+        <div class="col-3">{{ data?.district?.name }}</div>
+        <div class="col-3 color-text-static">จังหวัด</div>
+        <div class="col-3">{{ data?.province?.name }}</div>
+        <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
+        <div class="col-3">{{ data?.zipCode }}</div>
+
+        <div
+          class="color-card-text-code col-12 q-my-md"
+          :class="{ dark: $q.dark.isActive }"
+        >
+          ที่อยู่สาขา ENG
         </div>
 
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">ที่อยู่</div>
-          <div class="col-2">{{ data?.address }}</div>
-          <div class="col-4 color-text-static">แขวง/ตำบล</div>
-          <div class="col-3">
-            {{ data?.subDistrict?.name }}
-          </div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">เขต/อำเภอ</div>
-          <div class="col-2">{{ data?.district?.name }}</div>
-          <div class="col-4 color-text-static">จังหวัด</div>
-          <div class="col-3">{{ data?.province?.name }}</div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
-          <div class="col-2">{{ data?.zipCode }}</div>
-        </div>
-
-        <div class="row q-pt-sm q-pb-md card-details-row-height">
-          <div
-            class="col color-card-text-code"
-            :class="{ dark: $q.dark.isActive }"
-          >
-            ที่อยู่สาขา ENG
-          </div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">Address</div>
-          <div class="col-2">{{ data?.addressEN }}</div>
-          <div class="col-4 color-text-static">Subdistrict</div>
-          <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">District</div>
-          <div class="col-2">{{ data?.district?.nameEN }}</div>
-          <div class="col-4 color-text-static">Province</div>
-          <div class="col-3">{{ data?.province?.nameEN }}</div>
-        </div>
-
-        <div class="row card-details-row-height">
-          <div class="col-3 color-text-static">Zip code</div>
-          <div class="col-2">{{ data?.zipCode }}</div>
-        </div>
+        <div class="col-3 color-text-static">Address</div>
+        <div class="col-9">{{ data?.addressEN }}</div>
+        <div class="col-3 color-text-static">Subdistrict</div>
+        <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
+        <div class="col-3 color-text-static">District</div>
+        <div class="col-3">{{ data?.district?.nameEN }}</div>
+        <div class="col-3 color-text-static">Province</div>
+        <div class="col-3">{{ data?.province?.nameEN }}</div>
+        <div class="col-3 color-text-static">Zip code</div>
+        <div class="col-3">{{ data?.zipCode }}</div>
       </AppBox>
     </section>
 
@@ -172,4 +148,22 @@ const open = defineModel('open', { type: Boolean, default: false });
   </q-drawer>
 </template>
 
-<style scoped></style>
+<style scoped>
+.color-card-text-code {
+  --_color-card-text-code: var(--gray-12);
+  color: var(--_color-card-text-code);
+
+  &.dark {
+    --_color-card-text-code: var(--cyan-6);
+  }
+}
+
+.color-text-static {
+  --_details-text-static-color: var(--gray-6);
+  color: var(--_details-text-static-color);
+}
+
+.card-details-row-height {
+  height: 40px;
+}
+</style>