hrms-mgt/src/modules/04_registryNew/components/registry/Search.vue

<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
    class="column full-width justify-center items-center inline-block bg-primary q-py-xl q-px-xl"
    style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
  >
    <span
      style="
        display: block;
        text-align: center;
        color: white;
        font-size: 20px;
        font-weight: bold;
      "
    >
      ค้นหาข้อมูลทะเบียนประวัติ
    </span>

    <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; 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
          flat
          color="grey"
          name="search"
          size="20px"
          dense
        />
        <q-input
          placeholder="ค้นหา"
          v-model="search"
          dense
          style="flex-grow: 1"
          borderless
        />
        <q-btn
          class="q-mr-md"
          outline
          color="blue"
          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>