From 0eb8e4208656d837ed8e12312658b893d953ac42 Mon Sep 17 00:00:00 2001
From: Jarinya Jusing <jarinya.jusing@gmail.com>
Date: Sat, 18 May 2024 01:13:03 +0700
Subject: [PATCH] limit api search user + add loadding

---
 src/components/MainVote.vue             | 31 +++++++++++++-----------
 src/components/Section2Green.vue        | 32 ++++++++++++++-----------
 src/components/search/CardUser.vue      | 11 +++++++--
 src/components/search/CardUserGroup.vue | 23 +++++++++++-------
 src/components/search/SearchMain.vue    | 27 ++++++++++++++++-----
 5 files changed, 79 insertions(+), 45 deletions(-)

diff --git a/src/components/MainVote.vue b/src/components/MainVote.vue
index df691ab..e69ab60 100644
--- a/src/components/MainVote.vue
+++ b/src/components/MainVote.vue
@@ -3,12 +3,12 @@
     <Header />
     <Section2Green />
     <!-- <Section3Base /> -->
-    <Section4White/>
-    <Section5Green/>
-    <Section6Base/>
-    <Section7GreenTab/>
-    <Section8Base/>
-    <FooterPage/>
+    <Section4White />
+    <Section5Green />
+    <Section6Base />
+    <Section7GreenTab />
+    <Section8Base />
+    <FooterPage />
   </div>
 </template>
 <script>
@@ -25,7 +25,8 @@ import Section8Base from "./Section8Base.vue";
 import FooterPage from "./FooterPage.vue";
 export default {
   computed: {
-    ...mapGetters(["getUsername"]),},
+    ...mapGetters(["getUsername"]),
+  },
   components: {
     Header,
     Section2Green,
@@ -35,9 +36,7 @@ export default {
     Section6Base,
     Section7GreenTab,
     Section8Base,
-    FooterPage
-
-
+    FooterPage,
   },
   mounted() {
     // if(this.getUsername){
@@ -56,15 +55,19 @@ export default {
     //     });
     //     this.$store.commit("setCheckLogin", true);
     // }
-
-     
   },
 };
 </script>
-<style >
+<style>
 .bg-main {
   background: #f6ebd5;
   min-height: 100vh;
-  height:auto;
+  height: auto;
+  overflow-x: hidden;
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .bg-main {
+    overflow-x: hidden;
+  }
 }
 </style>
diff --git a/src/components/Section2Green.vue b/src/components/Section2Green.vue
index eac9a2b..c1299b5 100644
--- a/src/components/Section2Green.vue
+++ b/src/components/Section2Green.vue
@@ -1,20 +1,21 @@
 <template>
-  <div style="position: relative" class="text-normal bg-curve my-auto" >
+  <div style="position: relative" class="text-normal bg-curve my-auto">
     <div
-     style="width: 90%"
-      class="text-center text-white py-10  mx-auto my-auto"
+      style="width: 90%"
+      class="text-center text-white py-10 mx-auto my-auto"
       v-if="
         getUsername == '' || getUsername == null || getUsername == undefined
       "
     >
-    <div class="text-subtitle mx-10 text-center  box-order mx-auto my-5 d-none"  style="color:#ffffff;">
-              ขั้นตอนที่
-              <v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
-            </div>
-      <div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div>
-      <div class="mb-8">
-        ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น สมัคร สว.
+      <div
+        class="text-subtitle mx-10 text-center box-order mx-auto my-5 d-none"
+        style="color: #ffffff"
+      >
+        ขั้นตอนที่
+        <v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
       </div>
+      <div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div>
+      <div class="mb-8">ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น สมัคร สว.</div>
 
       <v-btn
         elevated
@@ -33,11 +34,14 @@
         <span class="text-normal"> ลงทะเบียนผู้สมัคร</span>
       </v-btn>
     </div>
-    <div class="text-center text-white py-10 pb-20 mx-auto" v-if="getUsername"  style="width: 90%">
+    <div
+      class="text-center text-white py-10 pb-20 mx-auto"
+      v-if="getUsername"
+      style="width: 90%"
+    >
       <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
       <div class="mb-8">
-        ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
-        ที่ตัวเองเป็นผู้แสดงตน
+        ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/อำเภอ ที่ตัวเองเป็นผู้แสดงตน
       </div>
       <v-btn
         elevated
@@ -73,7 +77,7 @@ export default {
   height: auto;
   background-position: center bottom;
   background-color: white;
-  background-size: cover; 
+  background-size: cover;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
 .bg-green-black {
diff --git a/src/components/search/CardUser.vue b/src/components/search/CardUser.vue
index 9dcc245..c03bea3 100644
--- a/src/components/search/CardUser.vue
+++ b/src/components/search/CardUser.vue
@@ -47,7 +47,7 @@
                   <v-row>
                     <v-col>
                       <div class="box-group">
-                        <div>กลุ่มที่</div>
+                        <div class="t-md">กลุ่มที่</div>
                         <div
                           class="font-weight-bold"
                           style="font-size: xxx-large"
@@ -58,7 +58,7 @@
                     </v-col>
                     <v-col>
                       <div class="box-group">
-                        <div>หมายเลขผู้สมัคร</div>
+                        <div class="t-md">หมายเลขผู้สมัคร</div>
                         <div style="font-size: xxx-large">
                           <div class="font-weight-bold" v-if="item.registerno">
                             {{ item.registerno }}
@@ -426,3 +426,10 @@ export default {
   }
 }
 </style>
+<style scoped>
+@media only screen and (min-width: 900px) and (max-width: 1290px) {
+  .t-md {
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/components/search/CardUserGroup.vue b/src/components/search/CardUserGroup.vue
index b99ff22..4a5c089 100644
--- a/src/components/search/CardUserGroup.vue
+++ b/src/components/search/CardUserGroup.vue
@@ -13,13 +13,13 @@
     >
       <div class="text-subtitle text-left mb-md-3">
         <v-row align="center">
-          <v-col cols="auto" class="pa-0 pl-2 pt-2"> <v-avatar color="#3d763d" class="text-normal" size="50"
-          >{{ group.id }}
-        </v-avatar></v-col>
-          <v-col  >    {{ group.name }}</v-col>
+          <v-col cols="auto" class="pa-0 pl-2 pt-2">
+            <v-avatar color="#3d763d" class="text-normal" size="50"
+              >{{ group.id }}
+            </v-avatar></v-col
+          >
+          <v-col> {{ group.name }}</v-col>
         </v-row>
-        
-     
       </div>
       <!-- {{ result }} -->
       <v-container>
@@ -238,6 +238,8 @@ export default {
     };
   },
   mounted() {
+    this.$emit("valueSent", true);
+    // this.load2 = true;
     let data = {};
     if (this.province && this.province.id) {
       data.province = this.province.id;
@@ -248,6 +250,7 @@ export default {
     if (this.group) {
       data.group = this.group.id;
     }
+    data.limit = 5;
     if (data) {
       client.user.getAllUser
         .query(data)
@@ -293,7 +296,8 @@ export default {
           if (rs.length == 0) {
             this.show = true;
           }
-
+          this.$emit("valueSent", false);
+          // this.load2 = false;
           // this.districtItems = rs;
         })
         .catch((error) => {
@@ -378,6 +382,7 @@ div.v-window__container
   width: -webkit-fill-available;
   /* width: fit-content; */
 }
+
 @media only screen and (min-width: 0px) and (max-width: 700px) {
   div.v-window__container
     > div.v-window-item.v-window-item--active.v-carousel-item
@@ -400,7 +405,7 @@ div.v-window__container
   }
   div.font-weight-bold.my-2.text-md-left > div.text-sub2.text-left.mt-5 {
     margin-top: 0px !important;
-    line-height: 21px;
+    line-height: 24px;
   }
   div.v-window__container
     > div.v-window-item.v-window-item--active.v-carousel-item
@@ -432,7 +437,7 @@ div.v-window__container
     border-radius: 10px;
     width: -webkit-fill-available;
     /* width: fit-content; */
-    min-width: 100%;
+    /* min-width: 90%; */
     padding: 5px 0px;
     height: 85px;
     line-height: 37px;
diff --git a/src/components/search/SearchMain.vue b/src/components/search/SearchMain.vue
index a5b55e5..791fee6 100644
--- a/src/components/search/SearchMain.vue
+++ b/src/components/search/SearchMain.vue
@@ -95,6 +95,7 @@
           </v-col>
         </v-row>
         <v-btn
+         v-if="province"
           color="#e23972"
           class="mt-8"
           elevated
@@ -103,7 +104,7 @@
             searchUserApi(0, '');
             showGroup = false;
           "
-          :loading="load"
+          :loading="load || load2"
           width="300"
           height="52px"
         >
@@ -111,13 +112,14 @@
         </v-btn>
         <!-- @click="searchUserApi(0, 'all')" -->
         <v-btn
+         v-if="province"
           color="#4c884c"
           class="mx-5 mt-8"
           elevated
           size="large"
           width="300"
           @click="showGroup = true"
-          :loading="load"
+          :loading="load || load2"
           height="52px"
         >
           <span class="text-sub">ค้นหาทุกกลุ่มอาชีพ</span>
@@ -148,19 +150,25 @@
       </div>
       <!-- <v-container class="my-0 py-0"> -->
       <div>
-        <!-- v-if="showGroup" -->
+        <v-progress-linear
+          v-if="showGroup && load2"
+          class="px-7 mt-5"
+          style="width: 90%"
+          color="green"
+          :indeterminate="load2"
+        ></v-progress-linear>
         <v-checkbox
-        v-if="showGroup"
+          v-if="showGroup"
           v-model="checkbox1"
           label="ดูเฉพาะกลุ่มอาชีพที่มีข้อมูล"
           size="large"
           class="px-7 mt-5 check-card text-subtitle"
           color="#3d763d"
           hide-details
-          
         ></v-checkbox>
       </div>
-    <!-- </v-container>  -->
+      <!-- </v-container>  -->
+
       <div v-for="(group, i) in apiGroup" :key="i">
         <CardUserGroup
           :check="checkbox1"
@@ -168,6 +176,7 @@
           :province="province"
           :district="district"
           v-if="showGroup"
+          @value-sent="handleValueSent"
         />
       </div>
     </div>
@@ -187,6 +196,7 @@ export default {
   },
   data() {
     return {
+      load2: false,
       checkbox1: true,
       showGroup: false,
       apiGroup: [],
@@ -207,6 +217,11 @@ export default {
     };
   },
   methods: {
+    handleValueSent(value) {
+      this.load2 = value;
+      console.log("Received value from child:", value);
+      // ทำงานกับค่าที่ได้รับ
+    },
     searchUser(offset) {
       this.show = false;
       this.load = true;