update style upload / connect api

src/components/search/SearchMain.vue

@@ -12,11 +12,12 @@
         <v-row>
           <v-col cols="12" md="3">
             <v-autocomplete
+              clearable
               label="จังหวัด"
               :items="provinceItems"
               variant="solo"
-              item-title="provinceNameTh"
-              return-object
+              item-title="name"
+              item-value="id"
               v-model="province"
               placeholder="จังหวัด"
               @update:modelValue="filterData"
@@ -25,25 +26,29 @@
           ></v-col>
           <v-col cols="12" md="3">
             <v-autocomplete
+              clearable
               label="อำเภอ / เขต"
               :items="districtItems"
               variant="solo"
-              item-title="districtNameTh"
-              return-object
+              item-title="name"
               v-model="district"
+              item-value="id"
               placeholder="อำเภอ / เขต"
               hide-details
+              :disabled="province == null"
             ></v-autocomplete
           ></v-col>
           <v-col cols="12" md="3">
             <v-autocomplete
+              clearable
               label="กลุ่มอาชีพ"
               :items="items"
               variant="solo"
-              item-title="text"
-              return-object
+              item-title="name"
+              item-value="id"
               placeholder="กลุ่มอาชีพ"
               hide-details
+              v-model="group"
             ></v-autocomplete>
           </v-col>
           <v-col cols="12" md="3">
@@ -54,74 +59,144 @@
             ></v-text-field>
           </v-col>
         </v-row>
-        <v-btn color="#DD6C31" class="mt-8" elevated size="large">
+        <v-btn
+          color="#DD6C31"
+          class="mt-8"
+          elevated
+          size="large"
+          @click="searchUser(0)"
+          :loading="load"
+        >
           <span class="text-sub">ค้นหา</span>
         </v-btn>
       </v-container>
-      <ResultMain />
+      <!-- {{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>
+      <div class="text-center">
+        <v-pagination
+          v-model="page"
+          :length="result.length / 10"
+          rounded="circle"
+          @click="searchUser((this.page - 1) * 10)"
+        ></v-pagination>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import Provinces from "@/components/form/provinces.json";
-import Districts from "@/components/form/districts.json";
-import ResultMain from "./ResultMain.vue";
+// 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: {
-    ResultMain,
+    CardUser,
   },
   data() {
     return {
+      show: false,
+      load: false,
+      result: [],
+      page: 1,
       province: null,
       district: null,
       districtItems: [],
-      provinceItems: Provinces,
-      items: [
-        { text: "กลุ่มบริหารราชการแผ่นดินและความมั่นคง", idx: 1 },
-        { text: "กลุ่มกฎหมายกระบวนการยุติธรรม", idx: 2 },
-        { text: "กลุ่มการศึกษา", idx: 3 },
-        { text: "กลุ่มการสาธารณสุข", idx: 4 },
-        { text: "กลุ่มอาชีพทำนา ปลูกพืชล้มลุก", idx: 5 },
-        { text: "กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง", idx: 6 },
-        { text: "กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)", idx: 7 },
-        {
-          text: "กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน",
-          idx: 8,
-        },
-        { text: "กลุ่มผู้ประกอบกิจการ หรือ SME", idx: 9 },
-        { text: "กลุ่มผู้ประกอบกิจการอื่นนอกจากข้อ (9)", idx: 10 },
-        { text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
-        { text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
-        {
-          text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
-          idx: 13,
-        },
-        { text: "กลุ่มสตรี", idx: 14 },
-        {
-          text: "กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น",
-          idx: 15,
-        },
-        { text: "กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง", idx: 16 },
-        { text: "กลุ่มประชาสังคม องค์กรสาธารณประโยชน์", idx: 17 },
-        { text: "กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม", idx: 18 },
-        { text: "กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ", idx: 19 },
-        { text: "กลุ่มอื่นๆ", idx: 20 },
-        // { text: "Real-Time" },
-        // { text: "Audience" },
-      ],
+      provinceItems: [],
+      items: [],
+      group: null,
+      offset: 0,
     };
   },
   methods: {
+    searchUser(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,
+        // group: this.group,
+        // zone: this.district,
+      };
+      if (this.group) {
+        data.group = this.group;
+      }
+      if (this.district) {
+        data.zone = this.district;
+      }
+      // for (const key in data) {
+      //   if (data[key] === null) {
+      //     delete data[key];
+      //   }
+      // }
+      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);
+        });
+    },
     filterData() {
       // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
-
-      if (this.province && this.province.provinceCode) {
-        this.districtItems = [...Districts].filter(
-          (item) => item.provinceCode === this.province.provinceCode
-        );
+      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);
+          });
       }
     },
   },
+  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;
+      })
+      .catch((error) => {
+        alert("ไม่สามารถโหลดข้อมูลได้");
+        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+      });
+  },
 };
 </script>
 <style></style>