From 3542df9c09e469386d03574ec73364384fa9aa00 Mon Sep 17 00:00:00 2001
From: Oat <oatkub402@gmail.com>
Date: Tue, 5 Mar 2024 10:51:02 +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=A1dropdown+=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/registry/Search.vue            | 205 +++++++++++++++++-
 .../components/registry/TableView.vue         |   4 +-
 src/modules/04_registryNew/views/list.vue     |   4 +-
 3 files changed, 209 insertions(+), 4 deletions(-)

diff --git a/src/modules/04_registryNew/components/registry/Search.vue b/src/modules/04_registryNew/components/registry/Search.vue
index 1d581afd3..2b8d5b540 100644
--- a/src/modules/04_registryNew/components/registry/Search.vue
+++ b/src/modules/04_registryNew/components/registry/Search.vue
@@ -1,6 +1,18 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
 const search = ref<string>("");
+const dropdownInput = ref<boolean>(false);
+const name = ref<string>("");
+const citizenId = ref<number>();
+const retireYear = ref<number>();
+const year = ref<number>();
+const level = ref<number>();
+const posNo = ref<string>("");
+const posOc = ref<string>("");
+
+const isActive1 = ref<boolean>(false);
+const isActive2 = ref<boolean>(false);
 </script>
 <template>
   <div
@@ -22,8 +34,128 @@ const search = ref<string>("");
     <div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
       <div
         class="flex full-width items-center bg-white"
-        style="flex-grow: 1; border-radius: 0.5rem"
+        style="flex-grow: 1; border-radius: 0.5rem; position: relative"
       >
+        <div
+          v-if="dropdownInput"
+          class="full-width bg-white q-pa-md"
+          style="
+            top: 85%;
+            position: absolute;
+            border-bottom-left-radius: 0.5rem;
+            border-bottom-right-radius: 0.5rem;
+            z-index: 10;
+          "
+        >
+          <div
+            class="q-pa-md"
+            style="
+              border-radius: 0.5rem;
+              background-color: whitesmoke;
+              border: 1px solid gainsboro;
+            "
+          >
+            <div class="row q-gutter-md q-mb-md">
+              <div class="col">
+                <q-input
+                  outlined
+                  dense
+                  v-model="name"
+                  label="ข้าราชการ กทม.สามัญ"
+                  class="bg-white"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  outlined
+                  dense
+                  v-model="citizenId"
+                  label="เลขประจำตัวประชาชน"
+                  class="bg-white"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  outlined
+                  dense
+                  v-model="citizenId"
+                  label="เลขประจำตัวประชาชน"
+                  class="bg-white"
+                />
+              </div>
+            </div>
+            <div class="row q-gutter-md">
+              <div class="col-2">
+                <q-input
+                  outlined
+                  dense
+                  v-model="retireYear"
+                  label="ปีเกษียณ"
+                  class="bg-white"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  outlined
+                  dense
+                  v-model="year"
+                  label="อายุราชการ (ปี)"
+                  class="bg-white"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  outlined
+                  dense
+                  v-model="level"
+                  label="ระดับ"
+                  class="bg-white"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  outlined
+                  dense
+                  v-model="posNo"
+                  label="ตำแหน่งเลขที่"
+                  class="bg-white"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  outlined
+                  dense
+                  v-model="posOc"
+                  label="ตำแหน่งทางการบริหาร"
+                  class="bg-white"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex q-mt-xs"
+            style="align-content: flex-end; flex-direction: row-reverse"
+          >
+            <div class="q-pa-sm bg-white weight-medium">
+              <div class="row no-wrap items-center q-my-sm">
+                <label class="toggle-control">
+                  <input type="checkbox" dense v-model="isActive1" @change="" />
+                  <span class="control"></span>
+                </label>
+                <p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
+              </div>
+            </div>
+            <div class="q-pa-sm bg-white weight-medium">
+              <div class="row no-wrap items-center q-my-sm q-mr-lg">
+                <label class="toggle-control">
+                  <input type="checkbox" dense v-model="isActive2" @change="" />
+                  <span class="control"></span>
+                </label>
+                <p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
+              </div>
+            </div>
+          </div>
+        </div>
         <q-icon
           class="q-mx-md"
           round
@@ -47,9 +179,80 @@ const search = ref<string>("");
           icon="filter_list"
           dense
           size="12px"
+          @click="() => (dropdownInput = !dropdownInput)"
         />
       </div>
       <q-btn class="q-ml-lg q-px-lg" color="blue" unelevated label="ค้นหา" />
     </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/04_registryNew/components/registry/TableView.vue b/src/modules/04_registryNew/components/registry/TableView.vue
index 8bcbe3a28..b9a9fd044 100644
--- a/src/modules/04_registryNew/components/registry/TableView.vue
+++ b/src/modules/04_registryNew/components/registry/TableView.vue
@@ -11,6 +11,7 @@ const rows = [
   {
     no: 1,
     fullName: "นางสาวกัณฐิมา กานสิน",
+    citizenId: "1231231231234",
     posNo: "สกก.1",
     position: "นักบริหาร",
     posPath: "บริหาร",
@@ -23,6 +24,7 @@ const rows = [
   {
     no: 2,
     fullName: "นายธามไทย คนคูเมือง",
+    citizenId: "5555555555555",
     posNo: "สกก.5",
     position: "นักจัดการงานทั่วไป",
     posPath: "จัดการงานทั่วไป",
@@ -73,7 +75,7 @@ const rows = [
 
               <q-item-section>
                 <div class="text-weight-medium">{{ props.row.fullName }}</div>
-                <div class="text-weight-light">123123123123123</div>
+                <div class="text-weight-light">{{ props.row.citizenId }}</div>
               </q-item-section>
             </q-item>
           </template>
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index 9caf5c801..ec351e066 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -4,7 +4,7 @@ import Search from "@/modules/04_registryNew/components/registry/Search.vue";
 import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
 import CardView from "@/modules/04_registryNew/components/registry/CardView.vue";
 import { useQuasar } from "quasar";
-import type { QTableColumn, QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 
 const $q = useQuasar();
 const mode = ref<"table" | "card">("table");
@@ -33,7 +33,7 @@ const columns = [
   },
   {
     name: "posNo",
-    align: "center",
+    align: "left",
     label: "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",