From 1fb7bfd1e6f8e9540d41e3472b0c8b05cfe3ea5c Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 27 Jul 2023 13:36:02 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=88=E0=B8=B1=E0=B8=94?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=80=E0=B8=95=E0=B8=B4=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/person/District.vue            | 36 ++++++++---
 .../components/person/SubDistrict.vue         | 37 +++++++----
 .../views/02_qualify/manageDetail.vue         | 61 ++++++++++---------
 3 files changed, 84 insertions(+), 50 deletions(-)

diff --git a/src/modules/01_metadata/components/person/District.vue b/src/modules/01_metadata/components/person/District.vue
index cd90fdb26..ec0f5a9e8 100644
--- a/src/modules/01_metadata/components/person/District.vue
+++ b/src/modules/01_metadata/components/person/District.vue
@@ -1,21 +1,39 @@
 <!-- tab เขต/อำเภอ หน้าจัดการข้อมูลหลัก/ข้อมูลเกี่ยวกับบุคคล -->
 <template>
   <div class="row items-center q-mb-sm q-mr-md q-ml-sm">
-    <q-btn icon="chevron_left" color="grey" flat dense @click="goToManage()">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="goToManage()"
+    >
       <q-tooltip>กลับ</q-tooltip>
     </q-btn>
+    
 
-    <div class="text-body1 text-weight-bold">การจัดการข้อมูลเขต</div>
+    <div class="text-h6 text-dark text-weight-bold">การจัดการข้อมูลเขต</div>
     <q-space />
-    <div @click="goToManage()" class="cursor-pointer">
-      การจัดการข้อมูลจังหวัด
-      <span class="text-primary text-weight-bold"> {{ provinceName }}</span>
-    </div>
+    <q-breadcrumbs class="text-grey" active-color="blue">
+      <template v-slot:separator>
+        <q-icon
+          size="1.2em"
+          name="chevron_right"
+          color="blue"
+        />
+      </template>
+
+      <q-breadcrumbs-el  to="/metadata"  label="การจัดการข้อมูลจังหวัด" />
+      <q-breadcrumbs-el label="การจัดการข้อมูลเขต" />
+    </q-breadcrumbs>
   </div>
   <q-form ref="myForm">
-    <q-card flat bordered class="q-pa-md row col-12">
+    <q-card flat bordered class=" row col-12">
       <div class="col-xs-12">
-        <div class="q-mt-md">
+        <div class="q-mt-sm">
           <data-table
             :rows="rows"
             :columns="columns"
@@ -80,7 +98,7 @@
                   />
                   <q-icon
                     size="30px"
-                    color="grey-8"
+                    color="grey-7"
                     name="chevron_right"
                     @click="clickRow(props.row.id)"
                   />
diff --git a/src/modules/01_metadata/components/person/SubDistrict.vue b/src/modules/01_metadata/components/person/SubDistrict.vue
index 270b8d48d..8b12362b3 100644
--- a/src/modules/01_metadata/components/person/SubDistrict.vue
+++ b/src/modules/01_metadata/components/person/SubDistrict.vue
@@ -1,23 +1,38 @@
 <!-- tab แขวง/ตำบล หน้าจัดการข้อมูลหลัก/ข้อมูลเกี่ยวกับบุคคล -->
 <template>
   <div class="row items-center q-mb-sm q-mr-md q-ml-sm">
-    <q-btn icon="chevron_left" color="grey" flat dense @click="goToProvince()">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="goToProvince()"
+    >
       <q-tooltip>กลับ</q-tooltip>
     </q-btn>
 
-    <div class="text-body1 text-weight-bold">การจัดการข้อมูลแขวง/ตำบล</div>
+    <div class="text-h6 text-dark text-weight-bold">การจัดการข้อมูลแขวง/ตำบล</div>
     <q-space />
-    <div @click="goToManage()" class="cursor-pointer">
-      การจัดการข้อมูลจังหวัด /
-    </div>
-    <div @click="goToProvince()" class="cursor-pointer">
-      จัดการข้อมูลเขต/อำเภอ
-      <span class="text-primary text-weight-bold"> {{ districtName }}</span>
-    </div>
+    <q-breadcrumbs class="text-grey" active-color="blue">
+      <template v-slot:separator>
+        <q-icon
+          size="1.2em"
+          name="chevron_right"
+          color="blue"
+        />
+      </template>
+
+      <q-breadcrumbs-el to="/metadata"  label="การจัดการข้อมูลจังหวัด" />
+      <q-breadcrumbs-el @click="goToProvince()" class="cursor-pointer" label="การจัดการข้อมูลเขต" />
+      <q-breadcrumbs-el label="การจัดการข้อมูลแขวง/ตำบล" />
+    </q-breadcrumbs>
   </div>
-  <q-card flat bordered class="q-pa-md row col-12">
+  <q-card flat bordered class="row col-12">
     <div class="col-xs-12">
-      <div class="q-mt-md">
+      <div class="q-mt-sm">
         <q-form ref="myForm">
           <data-table
             :rows="rows"
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 74b8776c2..9489f7fa4 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -34,13 +34,12 @@
   <q-slide-transition>
     <q-card class="row col-12 q-mb-sm" v-show="visible">
       <div class="col-12 row">
-        <div class="q-py-md row col-12 no-wrap">
+        <div class="q-pa-md row col-12 no-wrap">
           <!-- การ์ดแสดงจำนวนข้อมูล -->
           <div class="col-12 row">
-            <div class="text-grey-7 row text-weight-medium col-12 q-pl-md">
-              สรุปจำนวนผู้สมัครคัดเลือก
+            <div class="text-grey-7 q-pb-sm row text-weight-medium col-12 items-center">
+              <!-- สรุปจำนวนผู้สมัครคัดเลือก -->
               <datepicker
-                class="q-pl-sm"
                 v-model="dateFilter"
                 :locale="'th'"
                 autoApply
@@ -76,22 +75,22 @@
                 </template>
               </datepicker>
               <q-btn
-                size="md"
                 icon="mdi-download"
                 round
                 flat
                 color="primary"
                 @click="downloadFileDashboard"
+                class="q-ml-sm"
               >
                 <q-tooltip>ดาวน์โหลดสรุปข้อมูลสมัครสอบ</q-tooltip>
               </q-btn>
 
               <q-btn
                 dense
-                size="12px"
                 flat
                 round
                 color="green"
+                class="q-ml-sm"
                 @click.stop.prevent="clickCandidateList()"
                 icon="mdi-clipboard-arrow-down"
               >
@@ -100,40 +99,42 @@
 
               <q-btn
                 dense
-                size="12px"
                 flat
                 round
                 color="indigo"
+                class="q-ml-sm"
                 @click.stop.prevent="clickPassExam()"
                 icon="mdi-clipboard-arrow-down"
               >
                 <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
               </q-btn>
             </div>
-            <div class="row col-12 q-col-gutter-md fit q-pa-md">
-              <div
-                style="width: 25%"
-                v-for="(num, index) in dataNum"
-                :key="index"
-              >
-                <q-card bordered flat class="row fit cardNum items-center">
-                  <div class="col-12 row items-center q-pa-sm">
-                    <div
-                      :class="
-                        'col-12 text-h5 text-weight-bold text-' + `${num.color}`
-                      "
-                    >
-                      {{
-                        num.count != null
-                          ? num.count.toLocaleString("en-US")
-                          : ""
-                      }}
+            <div class="col-12">
+              <div class="row col-12 q-col-gutter-sm fit">
+                <div
+                  style="width: 25%"
+                  v-for="(num, index) in dataNum"
+                  :key="index"
+                >
+                  <q-card bordered flat class="row fit cardNum items-center">
+                    <div class="col-12 row items-center q-pa-sm">
+                      <div
+                        :class="
+                          'col-12 text-h5 text-weight-bold text-' + `${num.color}`
+                        "
+                      >
+                        {{
+                          num.count != null
+                            ? num.count.toLocaleString("en-US")
+                            : ""
+                        }}
+                      </div>
+                      <div class="col-12 text-dark ellipsis">
+                        {{ num.name }}
+                      </div>
                     </div>
-                    <div class="col-12 text-dark ellipsis">
-                      {{ num.name }}
-                    </div>
-                  </div>
-                </q-card>
+                  </q-card>
+                </div>
               </div>
             </div>
           </div>