update edit / login / responsive

src/components/search/SearchMain.vue

@@ -10,7 +10,7 @@
       <div class="text-title txt-black">ค้นหาผู้สมัครสว.</div>
       <v-container>
         <v-row>
-          <v-col cols="12" md="3">
+          <v-col cols="12" md="4">
             <v-autocomplete
               clearable
               label="จังหวัด"
@@ -24,7 +24,7 @@
               hide-details
             ></v-autocomplete
           ></v-col>
-          <v-col cols="12" md="3">
+          <v-col cols="12" md="4">
             <v-autocomplete
               clearable
               label="อำเภอ / เขต"
@@ -38,7 +38,7 @@
               :disabled="province == null"
             ></v-autocomplete
           ></v-col>
-          <v-col cols="12" md="3">
+          <v-col cols="12" md="4">
             <v-autocomplete
               clearable
               label="กลุ่มอาชีพ"
@@ -51,20 +51,20 @@
               v-model="group"
             ></v-autocomplete>
           </v-col>
-          <v-col cols="12" md="3">
+          <!-- <v-col cols="12" md="3">
             <v-text-field
               label="ชื่อ"
               variant="solo"
               hide-details
             ></v-text-field>
-          </v-col>
+          </v-col> -->
         </v-row>
         <v-btn
           color="#DD6C31"
           class="mt-8"
           elevated
           size="large"
-          @click="searchUser(0)"
+          @click="searchUserApi(0)"
           :loading="load"
         >
           <span class="text-sub">ค้นหา</span>
@@ -79,12 +79,15 @@
       >
         <v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
       </div>
+      <!-- {{ count }}
+      {{ Number(result.length)/ 2 }} -->
+      
       <div class="text-center">
         <v-pagination
           v-model="page"
-          :length="result.length / 10"
+          :length="Math.ceil(count/ 10)"
           rounded="circle"
-          @click="searchUser((this.page - 1) * 10)"
+          @click="searchUser((this.page - 1) * 2)"
         ></v-pagination>
       </div>
     </div>
@@ -113,6 +116,7 @@ export default {
       items: [],
       group: null,
       offset: 0,
+      count:0,
     };
   },
   methods: {
@@ -125,10 +129,13 @@ export default {
       // this.offset = (this.page - 1) * 10;
       let data = {
         offset: offset,
-        limit: 10,
+       limit: 10,
         // group: this.group,
         // zone: this.district,
       };
+      if (this.province) {
+        data.province = this.province;
+      }
       if (this.group) {
         data.group = this.group;
       }
@@ -160,6 +167,59 @@ export default {
           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,
+        // group: this.group,
+        // zone: this.district,
+      };
+      if (this.province) {
+        data.province = this.province;
+      }
+      if (this.group) {
+        data.group = this.group;
+      }
+      if (this.district) {
+        data.zone = this.district;
+      }
+     
+      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;