ข้อมูลที่อยู่ (แยกข้อมูลที่อยู่)

src/modules/10_registry/01_Information/03_Address.vue

@@ -5,7 +5,6 @@ import { ref, reactive, onMounted } from "vue";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
@@ -279,13 +278,19 @@ onMounted(() => {
       </q-btn>
     </q-toolbar>
 
-    <q-card bordered class="bg-grey-1 q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12 col-md-6">
+        <q-card bordered class="bg-grey-1">
+          <q-toolbar>
+            <q-toolbar-title class="text-subtitle2 text-bold"
+              >ที่อยู่ตามทะเบียนบ้าน</q-toolbar-title
+            >
+          </q-toolbar>
+          <q-separator />
+          <div class="row q-pa-md">
+            <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
               <div class="row">
-        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+                <div class="col-5 text-grey-6 text-weight-medium">ที่อยู่</div>
-          <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">
-              ที่อยู่ตามทะเบียนบ้าน
-            </div>
                 <div class="col-7">
                   {{
                     formData.registrationAddress
@@ -307,7 +312,9 @@ onMounted(() => {
               </div>
 
               <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
+                <div class="col-5 text-grey-6 text-weight-medium">
+                  เขต / อำเภอ
+                </div>
                 <div class="col-7">
                   {{
                     formData.registrationDistrict
@@ -318,7 +325,9 @@ onMounted(() => {
               </div>
 
               <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
+                <div class="col-5 text-grey-6 text-weight-medium">
+                  แขวง / ตำบล
+                </div>
                 <div class="col-7">
                   {{
                     formData.registrationSubDistrict
@@ -329,7 +338,9 @@ onMounted(() => {
               </div>
 
               <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
+                <div class="col-5 text-grey-6 text-weight-medium">
+                  รหัสไปรษณีย์
+                </div>
                 <div class="col-7">
                   {{
                     formData.registrationZipCode
@@ -339,11 +350,22 @@ onMounted(() => {
                 </div>
               </div>
             </div>
-
+          </div>
-        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+        </q-card>
+      </div>
+      <div class="col-12 col-md-6">
+        <q-card bordered class="bg-grey-1">
+          <q-toolbar>
+            <q-toolbar-title class="text-subtitle2 text-bold"
+              >ที่อยู่ปัจจุบัน</q-toolbar-title
+            >
+          </q-toolbar>
+          <q-separator />
+          <div class="row q-pa-md">
+            <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">
-              ที่อยู่ปัจจุบัน
+                  ที่อยู่
                 </div>
                 <div class="col-7">
                   {{ formData.currentAddress ? formData.currentAddress : "-" }}
@@ -351,26 +373,38 @@ onMounted(() => {
               </div>
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
-            <div class="col-7">
-              {{ formData.currentProvince ? formData.currentProvince : "-" }}
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
-            <div class="col-7">
-              {{ formData.currentDistrict ? formData.currentDistrict : "-" }}
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
                 <div class="col-7">
                   {{
-                formData.currentSubDistrict ? formData.currentSubDistrict : "-"
+                    formData.currentProvince ? formData.currentProvince : "-"
                   }}
                 </div>
               </div>
               <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
+                <div class="col-5 text-grey-6 text-weight-medium">
+                  เขต / อำเภอ
+                </div>
+                <div class="col-7">
+                  {{
+                    formData.currentDistrict ? formData.currentDistrict : "-"
+                  }}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 text-grey-6 text-weight-medium">
+                  แขวง / ตำบล
+                </div>
+                <div class="col-7">
+                  {{
+                    formData.currentSubDistrict
+                      ? formData.currentSubDistrict
+                      : "-"
+                  }}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-5 text-grey-6 text-weight-medium">
+                  รหัสไปรษณีย์
+                </div>
                 <div class="col-7">
                   {{ formData.currentZipCode ? formData.currentZipCode : "-" }}
                 </div>
@@ -379,6 +413,8 @@ onMounted(() => {
           </div>
         </q-card>
       </div>
+    </div>
+  </div>
 
   <DialogHistory
     v-model:modal="modalHistory"