sorvor-front/src/components/search/SearchMain.vue

<template>
  <div>
    <div class="text-center pb-8">
      <v-img
        class="mx-auto"
        :aspect-ratio="1"
        src="@/assets/logo-title.png"
        width="250"
      ></v-img>
      <div class="text-title txt-black">ค้นหาผู้สมัคร สว.</div>
      <div class="my-5 text-sub2">
        สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
        ที่ตัวเองเป็นผู้แสดงตน
      </div>
      <v-container>
        <!-- {{ checkdata }} -->
        <v-row>
          <v-col cols="12" md="4">
            <v-text-field
              v-if="province"
              label="จังหวัด"
              variant="solo"
              v-model="province"
              :value="province.name"
              readonly
            ></v-text-field>

            <!-- <v-autocomplete
              clearable
              label="จังหวัด"
              :items="provinceItems"
              variant="solo"
              item-title="name"
              item-value="id"
              v-model="province"
              placeholder="จังหวัด"
              @update:modelValue="filterData"
              hide-details
            ></v-autocomplete
          > -->
          </v-col>
          <v-col cols="12" md="4">
            <v-text-field
              v-if="province"
              label="อำเภอ / เขต"
              variant="solo"
              v-model="district"
              :value="district.name"
              readonly
            ></v-text-field>
            <!-- <v-autocomplete
              clearable
              label="อำเภอ / เขต"
              :items="districtItems"
              variant="solo"
              item-title="name"
              v-model="district"
              item-value="id"
              placeholder="อำเภอ / เขต"
              hide-details
              :disabled="province == null"
            ></v-autocomplete
          > -->
          </v-col>
          <v-col cols="12" md="4">
            <v-autocomplete
              clearable
              label="กลุ่มอาชีพ"
              :items="items"
              variant="solo"
              item-title="name"
              item-value="id"
              placeholder="กลุ่มอาชีพ"
              hide-details
              v-model="group"
            ></v-autocomplete>
          </v-col>
          <!-- <v-col cols="12" md="3">
            <v-text-field
              label="ชื่อ"
              variant="solo"
              hide-details
            ></v-text-field>
          </v-col> -->
        </v-row>
        <v-btn
          color="#DD6C31"
          class="mt-8"
          elevated
          size="large"
          @click="searchUserApi(0)"
          :loading="load"
        >
          <span class="text-sub">ค้นหา</span>
        </v-btn>
      </v-container>
      <!-- {{result}} -->
      <CardUser :dataProfile="result" v-if="result.length" />
      <!-- {{ show }} -->
      <div
        v-if="result.length == 0 && this.show"
        class="my-10 text-sub2 txt-black"
      >
        <v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
      </div>
      <!-- {{ count }}
      {{ Number(result.length)/ 2 }} -->

      <div class="text-center">
        <v-pagination
          v-if="count > 0"
          v-model="page"
          :length="Math.ceil(count / 10)"
          rounded="circle"
          @click="searchUser((this.page - 1) * 2)"
        ></v-pagination>
      </div>
    </div>
  </div>
</template>
<script>
// import Provinces from "@/components/form/provinces.json";
// import Districts from "@/components/form/districts.json";
import CardUser from "./CardUser.vue";
import { client } from "@/utils/trpc";

export default {
  components: {
    CardUser,
  },
  data() {
    return {
      checkdata: "",
      show: false,
      load: false,
      result: [],
      page: 1,
      province: null,
      district: null,
      districtItems: [],
      provinceItems: [],
      items: [],
      group: null,
      offset: 0,
      count: 0,
    };
  },
  methods: {
    searchUser(offset) {
      this.show = false;
      this.load = true;
      if (offset == 0) {
        this.page = 1;
      }
      let data = {
        offset: offset,
        limit: 10,
      };
      if (this.province) {
        data.province = this.province.id;
        // data.province = this.province;
      }
      if (this.group) {
        data.group = this.group;
      }
      if (this.district) {
        data.zone = this.district.id;
      }

      // console.log(data);
      client.user.getAllUser
        .query(data)
        .then((rs) => {
          this.result = rs;
          console.log(rs);
          this.load = false;
          if (rs.length == 0) {
            this.show = true;
          }

          // this.districtItems = rs;
        })
        .catch((error) => {
          this.load = false;

          alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
    searchUserApi(offset) {
      this.show = false;
      this.load = true;
      if (offset == 0) {
        this.page = 1;
      }
      // this.offset = (this.page - 1) * 10;
      let data = {
        offset: offset,
        limit: 10,
      };
      if (this.province) {
        data.province = this.province.id;
        // data.province = this.province;
      }
      if (this.group) {
        data.group = this.group;
      }
      if (this.district) {
        data.zone = this.district.id;
      }

      // console.log(data);
      client.user.getAllUserCount
        .query(data)
        .then((rs) => {
          this.count = rs;
        })
        .catch((error) => {
          alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });

      client.user.getAllUser
        .query(data)
        .then((rs) => {
          this.result = rs;
          console.log(rs);
          this.load = false;
          if (rs.length == 0) {
            this.show = true;
          }

          // this.districtItems = rs;
        })
        .catch((error) => {
          this.load = false;

          alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
    filterData() {
      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
      this.district = null;
      if (this.province) {
        client.info.getAllZones
          .query({ provice_id: this.province })
          .then((data) => {
            this.districtItems = data;
          })
          .catch((error) => {
            alert("ไม่สามารถโหลดข้อมูลได้");
            console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
          });
      }
    },
    getUser(datap) {
      client.user.getSelf
        .mutate({})
        .then((data) => {
          let province = datap.filter((x) => x.id === data.zone.province);
          this.province = province[0];
          this.district = data.zone;
          this.checkdata = { ...data };
        })
        .catch((error) => {
          alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
  },
  mounted() {
    client.info.getAllGroups
      .query({})
      .then((groups) => {
        this.items = groups;
      })
      .catch((error) => {
        alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });

    client.info.getAllProvinces
      .query({})
      .then((data) => {
        this.provinceItems = data;
        this.getUser(data);
      })
      .catch((error) => {
        alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });
  },
};
</script>
<style></style>