From afed451400fcacad7d06e1e9b2c765551c3040aa Mon Sep 17 00:00:00 2001
From: Oat <oatkub402@gmail.com>
Date: Wed, 6 Mar 2024 10:34:43 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AD=E0=B8=B5=E0=B8=812tag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/registry/Search.vue            | 129 ++++++++++++++++--
 .../04_registryNew/interface/index/form.ts    |   7 +-
 src/modules/04_registryNew/views/list.vue     |   8 +-
 3 files changed, 130 insertions(+), 14 deletions(-)

diff --git a/src/modules/04_registryNew/components/registry/Search.vue b/src/modules/04_registryNew/components/registry/Search.vue
index 5f92a7679..6e099e1ec 100644
--- a/src/modules/04_registryNew/components/registry/Search.vue
+++ b/src/modules/04_registryNew/components/registry/Search.vue
@@ -2,7 +2,10 @@
 import { ref, reactive } from "vue";
 import SearchBanner from "@/assets/registry-banner.png";
 import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
-import type { FormData } from "@/modules/04_registryNew/interface/index/form";
+import type {
+  FormData,
+  YearRange,
+} from "@/modules/04_registryNew/interface/index/form";
 
 const search = ref<string>("");
 const dropdownInput = ref<boolean>(false);
@@ -16,6 +19,10 @@ const type = ref<string>("");
 const posNo = ref<string>("");
 const posOc = ref<string>("");
 
+const rangeYear = ref<YearRange>({
+  min: 0,
+  max: 60,
+});
 const formData = reactive<FormData>({
   citizenId: "",
   fullName: "",
@@ -102,7 +109,7 @@ function onSubmit() {
       ค้นหาข้อมูลทะเบียนประวัติ
     </span>
 
-    <div class="row q-col-gutter-md">
+    <div class="row q-col-gutter-x-md q-col-gutter-y-lg">
       <div class="col-2">
         <q-select
           outlined
@@ -140,7 +147,7 @@ function onSubmit() {
         </q-input>
       </div>
       <div class="col-1">
-        <q-btn color="blue" unelevated label="ค้นหา" @click="onSubmit" />
+        <q-btn color="blue" label="ค้นหา" @click="onSubmit" />
       </div>
       <div class="col">
         <q-select
@@ -150,15 +157,16 @@ function onSubmit() {
           emit-value
           clearable
           emit-option
-          class="custom-select"
+          class="custom-select custom-arrow"
           label-color="white"
           option-label="name"
           option-value="id"
           map-options
           v-model="type"
           :options="TypeOption"
-          label="ประเภทตำแหน่ง"
-        />
+          label="ประเภท"
+        >
+        </q-select>
       </div>
       <div class="col">
         <q-select
@@ -196,7 +204,7 @@ function onSubmit() {
           label="ระดับตำแหน่ง"
         />
       </div>
-      <div class="col">
+      <div class="col-2">
         <q-select
           rounded
           outlined
@@ -206,6 +214,7 @@ function onSubmit() {
           emit-option
           class="custom-select"
           clearable
+          input-class="text-white"
           option-label="name"
           option-value="id"
           map-options
@@ -216,7 +225,6 @@ function onSubmit() {
       </div>
       <div class="col">
         <datepicker
-          class="col-2"
           menu-class-name="modalfix"
           v-model="retireYear"
           :locale="'th'"
@@ -237,6 +245,7 @@ function onSubmit() {
               label-color="white"
               outlined
               dense
+              input-style="color:white;"
               lazy-rules
               borderless
               :model-value="retireYear === null ? null : retireYear + 543"
@@ -254,7 +263,91 @@ function onSubmit() {
           </template>
         </datepicker>
       </div>
+      <div>
+        <q-btn-dropdown
+          rounded
+          outline
+          class="custom-btn"
+          clearable
+          :label="`อายุราชการ (${rangeYear.min} - ${rangeYear.max} ปี)`"
+          label-color="white"
+          style="height: 40px"
+        >
+          <div
+            class="row no-wrap q-px-md q-pt-xs"
+            style="border: 1px #ededed solid"
+          >
+            <div
+              class="column q-py-sm q-px-md text-center"
+              style="width: 250px"
+            >
+              <div class="q-mb-sm">
+                <span>จำนวนปี</span>
+                <span
+                  class="q-px-sm q-ml-sm"
+                  style="
+                    background-color: #f2f2f2;
+                    border-radius: 5px;
+                    border: 1px #ededed solid;
+                    letter-spacing: 1px;
+                  "
+                >
+                  {{ `${rangeYear.min}-${rangeYear.max}` }}
+                </span>
+              </div>
+              <q-range
+                class="q-mt-lg"
+                v-model="rangeYear"
+                :min="0"
+                :max="60"
+                :step="1"
+                label-always
+                color="primary"
+                selection-color="blue"
+                label-color="primary"
+                thumb-color="blue"
+              />
+            </div>
+          </div>
+        </q-btn-dropdown>
+      </div>
+      <div class="col">
+        <q-btn-dropdown
+          rounded
+          outline
+          class="custom-btn"
+          clearable
+          label="เงื่อนไขอื่นๆ"
+          label-color="white"
+          style="height: 40px"
+        >
+          <div class="row no-wrap q-px-md">
+            <div class="column text-center">
+              <div
+                class="flex"
+                style="
+                  align-content: flex-end;
+                  flex-direction: row-reverse;
+                  gap: 0.5rem;
+                "
+              >
+                <q-toggle
+                  v-model="formData.isShowRetire"
+                  color="primary"
+                  label="แสดงข้อมูลผู้พ้นจากราชการ"
+                />
+                <q-toggle
+                  v-model="formData.isProbation"
+                  color="primary"
+                  label="ทดลองปฏิบัติหน้าที่ราชการ"
+                />
+              </div>
+            </div>
+          </div>
+        </q-btn-dropdown>
+      </div>
     </div>
+
     <div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
       <div
         class="flex full-width items-center bg-white"
@@ -279,7 +372,7 @@ function onSubmit() {
               border: 1px solid gainsboro;
             "
           >
-            <div class="row q-gutter-md q-mb-md">
+            <div class="row q-gutter--md q-mb-md">
               <div class="col">
                 <q-select
                   outlined
@@ -440,10 +533,24 @@ function onSubmit() {
 
 <style lang="scss" scoped>
 :deep(.custom-select.q-field--outlined .q-field__control::before) {
-  border: 2px solid #ffffff !important;
+  border: 2px solid #fff;
 }
 
 :deep(.custom-select.q-field--outlined .q-field__control) {
-  color: white !important;
+  color: white;
+  background-color: #36969f;
+
+  .q-select__dropdown-icon {
+    color: white;
+  }
+}
+
+:deep(.custom-btn.q-btn--outline) {
+  color: white;
+}
+
+:deep(.custom-btn.q-btn--outline::before) {
+  border: 2px solid #ffffff;
+  background-color: #36969f;
 }
 </style>
diff --git a/src/modules/04_registryNew/interface/index/form.ts b/src/modules/04_registryNew/interface/index/form.ts
index 8c9244f0b..658e7c43e 100644
--- a/src/modules/04_registryNew/interface/index/form.ts
+++ b/src/modules/04_registryNew/interface/index/form.ts
@@ -11,4 +11,9 @@ interface FormData {
     isProbation: boolean,
 }
 
-export type { FormData }
\ No newline at end of file
+interface YearRange {
+min:number,
+max:number
+}
+
+export type { FormData , YearRange}
\ No newline at end of file
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index f871455e5..d7af51d47 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -186,16 +186,20 @@ const visibleColumns = ref<string[]>([
             <template v-slot:table>
               <q-icon
                 name="format_list_bulleted"
-                :color="mode === 'table' ? 'dark' : 'grey-5'"
                 size="24px"
+                :style="{
+                  color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+                }"
               />
             </template>
 
             <template v-slot:card>
               <q-icon
                 name="mdi-view-grid-outline"
-                :color="mode === 'card' ? 'dark' : 'grey-5'"
                 size="24px"
+                :style="{
+                  color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+                }"
               />
             </template>
           </q-btn-toggle>