update edit / login / responsive

src/components/HeaderHome.vue

@@ -32,7 +32,7 @@
     </div>
     <div style="position: relative" class="bg-curve" id="started">
       <v-row style="height: 100%" align="center" class="text-center">
-        <v-col cols="12" md="4">
+        <v-col cols="12" md="">
           <div style="position: relative">
             <v-btn
               elevated
@@ -54,7 +54,7 @@
             </v-btn>
           </div>
         </v-col>
-        <v-col cols="12" md="4" class="mt-0 mt-md-10  mt-lg-10">
+        <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" v-if="getUsername==''||getUsername==null||getUsername==undefined">
           <v-btn
             elevated
             color="#DD6C31"
@@ -72,7 +72,8 @@
             แสดงตนเป็นผู้สมัคร
           </v-btn>
         </v-col>
-        <v-col cols="12" md="4">
+        <!-- {{ getUsername }} -->
+        <v-col cols="12" md="" v-if="getUsername">
           <v-btn
             elevated
             color="#DD6C31"
@@ -96,7 +97,13 @@
   </div>
 </template>
 <script>
-export default {};
+import { mapGetters } from "vuex";
+
+export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
+};
 </script>
 <style>
 .text-normal .v-btn--size-large {

src/components/Section2Green.vue

@@ -3,27 +3,27 @@
     <div class="text-center text-white py-5">
       <div class="text-title my-3">มาศึกษาก่อนจะเป็น สว.</div>
       <v-row>
-        <v-col class="border-green">
+        <v-col class="border-green" cols="12" md="">
           <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
           <div>ใครสมัครสว.ได้บ้าง</div>
         </v-col>
-        <v-col class="border-green">
+        <v-col class="border-green" cols="12" md="">
           <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
 
           <div>หน้าที่ของสว.</div>
         </v-col>
-        <v-col>
+        <v-col cols="12" md="">
           <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
 
           <div>กระบวนการเลือก สมาชิกวุฒิสภา</div>
         </v-col>
       </v-row>
       <v-row>
-        <v-col>
+        <v-col cols="12" md="">
           <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
           <div>ขั้นตอนการเลือกสว.</div>
         </v-col>
-        <v-col>
+        <v-col cols="12" md="">
           <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
 
           <div>กลุ่มอาชีพ ผู้สมัครรับเลือกสว.</div>
@@ -46,5 +46,10 @@ export default {};
 .border-green{
   border-right: 5px solid #b2c573;
 }
-
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .bg-green-curve {
+  min-height: 700px;
+  
+}
+}
 </style>

src/components/Section3Base.vue

@@ -7,7 +7,7 @@
         โดยมีคุณสมบัติดังนี้
       </div>
       <div>เช็คคุณสมบัติกันเลย !</div>
-      <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80">
+      <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
         ตรวจสอบคุณสมบัติการเป็น สว.
       </v-btn>
     </div>

src/components/Section7GreenTab.vue

@@ -1,7 +1,7 @@
 <template>
-  <div style="position: relative" class="bg-green-full text-normal py-7">
+  <div style="position: relative" class="bg-green-full text-normal py-2">
     <div id="scroll-container">
-      <div id="scroll-text" class="text-sub">
+      <div id="scroll-text" class="text-sub d-none">
         <v-icon icon="mdi-circle" size="20"></v-icon>
         กลุ่มบริหารราชการแผ่นดินและความมั่นคง
         <v-icon icon="mdi-circle" size="20"></v-icon>

src/components/Section8Base.vue

@@ -38,16 +38,28 @@
                 {{ item.text }}
               </div>
             </v-card-item>
-          </v-card>
-          <v-btn
+    
+            <v-btn
             @click="count++"
-            style="top: -55px"
-            class="float-right"
+            class=" pa-4 mb-5 mr-5 btn-phone"
             icon="mdi-skip-next"
             rounded="circle"
-            size="lg"
+            size="xl"
+            
             color="#4c884c"
           ></v-btn>
+          </v-card>
+         
+          <!-- <v-btn
+            @click="count++"
+            style="top:-100px; right: 25px;"
+            class="float-right pa-4 mb-5 mr-5 "
+            icon="mdi-skip-next"
+            rounded="circle"
+            size="xl"
+            
+            color="#4c884c"
+          ></v-btn> -->
         </v-col>
       </v-row>
     </div>

src/components/check/CheckList.vue

@@ -12,7 +12,7 @@
     <br />
     <div class="text-sub ma-auto" style="width: 90%">
       อยากลงสมัครสว. แต่ไม่แน่ใจว่าเราสามารถสมัครได้หรือไม่
-      เราสามารถมาร่วมกันเช็คคุณสมบัติ เช็คเราามารถสมัครกลุ่มไหน เขตอำเภอไหนบ้าง
+      เราสามารถตรวจสอบคุณสมบัติ เช็คว่าสามารถสมัครกลุ่มไหน เขตอำเภอไหนบ้าง
       ในการลงสมัคร สว. กัน !
     </div>
     <v-btn
@@ -31,9 +31,10 @@
       class="mx-auto"
       src="@/assets/Group 51.png"
       width="230"
+  
     ></v-img>
-    <v-btn variant="text" append color="#3ba8c8" size="lg"
-      ><div class="text-wrap text-sub3" style="width: 100%; margin: auto">
+    <v-btn variant="text" append color="#168fb3" size="lg"     to="/detail"
+      ><div class="text-wrap text-sub" style="width: 100%; margin: auto">
         ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
       </div></v-btn
     >

src/components/check/QuestionList.vue

@@ -8,7 +8,7 @@
     <v-btn
       @click="model++"
       style="z-index: 999"
-      class="float-right btn-r"
+      class="float-right btn-r btn-desk"
       rounded="circle"
       size="lg"
       color="white"
@@ -20,14 +20,14 @@
       v-if="model > 0"
       @click="model--"
       style="z-index: 999"
-      class="float-right btn-l"
+      class="float-right btn-l btn-desk"
       rounded="circle"
       size="lg"
       color="white"
       ><v-icon icon="mdi-menu-left" size="70" color="#F4C03F"></v-icon
     ></v-btn>
 
-   <!-- hide-delimiters -->
+    <!-- hide-delimiters -->
     <v-carousel
       style="height: auto; min-height: 100vh"
       progress="#f4c03f"
@@ -131,11 +131,41 @@
                   </div>
                 </div>
               </div>
+              <div class="text-center my-10 next-phone">
+                <v-btn
+                  v-if="model > 0"
+                  @click="model--"
+                  style="z-index: 999"
+                  rounded="circle"
+                  size="lg"
+                  color="white"
+                  class="mr-5"
+                  ><v-icon
+                    icon="mdi-menu-left"
+                    size="70"
+                    color="#F4C03F"
+                  ></v-icon
+                ></v-btn>
+                <v-btn
+                  @click="model++"
+                  style="z-index: 999"
+                  rounded="circle"
+                  size="lg"
+                  color="white"
+                  v-if="model < 17"
+                  ><v-icon
+                    icon="mdi-menu-right"
+                    size="70"
+                    color="#F4C03F"
+                  ></v-icon
+                ></v-btn>
+                <!-- v-if="model > 0" -->
+              </div>
             </div>
           </v-container>
 
           <div
-            v-if="model > 16 && checkNull.length==17"
+            v-if="model > 16 && checkNull.length == 17"
             class="text-sub text-white py-8 d-block"
           >
             <v-icon icon="mdi-alert-circle-outline"></v-icon>
@@ -181,14 +211,25 @@
               <div class="text-center mt-5">
                 <v-btn
                   elevated
-                  color="#DD6C31"
-                  class="mt-4"
+                  color="#1B76BA"
+                  class="mt-4 mr-2"
                   stacked
                   height="60"
                   to="/"
                 >
                   <span class="text-sub">เสร็จสิ้น</span>
                 </v-btn>
+                <v-btn
+                  elevated
+                  color="#DD6C31"
+                  stacked
+                  height="60"
+                  to="/forms"
+                  class="mt-4 mr-2"
+                  v-if="getUsername == ''"
+                >
+                  <span class="text-sub">แสดงตนเป็นผู้สมัคร</span>
+                </v-btn>
               </div>
             </v-container>
           </div>
@@ -232,6 +273,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   watch: {
     model() {
@@ -239,6 +281,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters(["getUsername"]),
     checkNull() {
       let slides = this.slides;
       let data = slides.filter((x) => x.check === null);
@@ -393,7 +436,7 @@ export default {
           vmodel: null,
         },
         {
-          txt: "คุณเคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปีถ้าเป็นกรณีต่อไปนี้ ให้ตอบว่า “ไม่เคย”",
+          txt: "คุณเคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปีถ้าเป็นกรณีต่อไปนี้ ให้ตอบว่า “ไม่ใช่”",
           subtxt:
             "คดีนั้นรอลงอาญา / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดจากการกระทำโดยประมาท / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดลหุโทษ (ความผิดที่กฎหมายกำหนดโทษจำคุกไม่เกินหนึ่งเดือน ปรับไม่เกิน 10,000 บาท)",
           color: "#4C884C",
@@ -429,6 +472,12 @@ export default {
 </script>
 
 <style>
+.btn-desk {
+  display: block;
+}
+.next-phone {
+  display: none;
+}
 .parent-container {
   position: relative; /* ตั้งค่าเพื่อให้ .btn-r สามารถตั้งอยู่ส่วนมากในพื้นที่นี้ */
   display: flex; /* ให้พาเนลหลักของพื้นที่ตรงกลางแนวตั้ง */
@@ -461,16 +510,22 @@ export default {
   margin: auto;
 }
 @media only screen and (min-width: 0px) and (max-width: 700px) {
+  .btn-desk {
+    display: none;
+  }
+  .next-phone {
+    display: block;
+  }
   .btn-r {
- background-color: transparent !important;
-}
-.btn-l {
-  background-color: transparent !important;
+    background-color: transparent !important;
+  }
+  .btn-l {
+    background-color: transparent !important;
 
-  position: absolute;
-  left: 0px;
-  margin: 15px;
-  margin: 15px;
-}
+    position: absolute;
+    left: 0px;
+    margin: 15px;
+    margin: 15px;
+  }
 }
 </style>

src/components/edit/FormMainEdit.vue

@@ -0,0 +1,33 @@
+<template lang="">
+  <div>
+    <div class="hearder-form-edit text-center pb-6 mt-2">
+        <v-img
+        class="mx-auto"
+              :aspect-ratio="1"
+              src="@/assets/logo-title.png"
+              width="200"
+    
+            ></v-img>
+            <div class="text-title txt-black">
+                ข้อมูลส่วนตัว
+            </div>
+            <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon>
+    </div>
+    <FormSteper/>
+  </div>
+</template>
+<script>
+import FormSteper from './FormSteperEdit.vue';
+export default {
+    components:{
+        FormSteper
+    }
+};
+</script>
+<style>
+.hearder-form-edit {
+  background-color: #B2C573;
+  width: 100%;
+  height: auto;
+}
+</style>

src/components/form/FormSteper.vue

@@ -34,7 +34,7 @@
               <!-- {{ form1 }} -->
               <v-form fast-fail @submit.prevent v-model="form1">
                 <v-row class="px-2">
-                  <v-col class="py-3" cols="12" md="12">
+                  <v-col class="py-3" cols="12" md="6">
                     <v-text-field
                       label="ชื่อ / Name"
                       variant="solo"
@@ -71,6 +71,7 @@
                           variant="solo"
                           type="number"
                           min="40"
+                          :rules="rules.age"
                           v-model.number="payload.age"
                         ></v-text-field>
                       </v-col>
@@ -99,7 +100,7 @@
                     ></v-text-field>
                   </v-col>
 
-                  <v-col class="d-none">
+                  <v-col class="">
                     <v-card
                       color="#4C884C"
                       class="pa-5 text-center h-100"
@@ -123,7 +124,8 @@
                         prepend-icon=""
                         variant="solo-filled"
                         class="mt-5"
-                        @change="Preview_image"
+                        :rules="rules.files"
+                        @change="onFileChanged($event)"
                         v-model="image"
                       ></v-file-input>
                     </v-card>
@@ -387,6 +389,25 @@
                       bg-color="#F2EBD1"
                       v-model="payload.vision"
                     ></v-textarea>
+
+                    <div class="btn-next">
+                      <v-btn @click="e1--" variant="text" class="float-left"
+                        >Previous</v-btn
+                      >
+                      <!-- <v-spacer></v-spacer> -->
+
+                      <v-btn
+                        @click="e1++"
+                        :disabled="
+                          !(checkOpt1.count == checkOpt1.checkcount) ||
+                          payload.vision == null
+                        "
+                        variant="tonal"
+                        class="float-right"
+                        >next</v-btn
+                      >
+                    </div>
+                    <!-- {{ checkOpt1 }} -->
                   </v-card>
                 </v-col>
               </v-row>
@@ -427,6 +448,7 @@
                         label="โทรศัพท์"
                         v-model="payload.public_phone"
                         :rules="rules.tel"
+                        class="d-none"
                       ></v-text-field
                     ></v-col>
                   </v-row>
@@ -522,9 +544,9 @@
               </div>
             </v-stepper-window-item>
           </v-stepper-window>
-
+          <!-- v-show="e1 == 3 || el == 4"  -->
           <v-stepper-actions
-            v-show="e1 == 3 || el == 4"
+            v-show="e1 == 4"
             :disabled="disabled"
             @click:next="next"
             @click:prev="prev"
@@ -537,7 +559,9 @@
 <script>
 // import Provinces from "./provinces.json";
 // import Districts from "./districts.json";
+
 import { client } from "@/utils/trpc";
+import { createFormData } from "@/utils/fileUpload";
 import validateThaiID from "thai-id-validator";
 // client.info.getAllGroups.query({}).then(console.log);
 export default {
@@ -563,13 +587,14 @@ export default {
         ? "next"
         : undefined;
     },
-    //  isIdCardValid() {
-    //   return this.$refs.form.validate();
-    // },
-    // // ถ้าเลขบัตรประชาชนไม่ถูกต้องให้ปุ่ม Next ถูก disable
-    // isNextDisabled() {
-    //   return !this.isIdCardValid;
-    // }
+    checkOpt1() {
+      let dataOption = [...this.option1, ...this.option2];
+      const filteredItems = dataOption.filter(
+        (item) => item.choice !== null && item.choice !== undefined
+      );
+
+      return { count: dataOption.length, checkcount: filteredItems.length };
+    },
   },
 
   data() {
@@ -580,6 +605,12 @@ export default {
       form3: false,
       form4: false,
       rules: {
+        files: [
+          (files) =>
+            !files ||
+            !files.some((file) => file.size > 3_097_152) ||
+            "Avatar size should be less than 3 MB!",
+        ],
         // ^[a-zA-Z0-9?><;,{}[\]\-_+=!@#$%\^&*|']*$
         space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
         username: (v) =>
@@ -621,6 +652,7 @@ export default {
             (parseInt(v) == v && v.length == 13 && validateThaiID(v)) ||
             "Invalid ID card number",
         ],
+        age: [(v) => parseInt(v) >= 40 || "Age must be over 40"],
         email: [
           (value) => {
             const pattern =
@@ -660,6 +692,7 @@ export default {
 
       url: null,
       image: null,
+      file: null,
       province: null,
       district: null,
       districtItems: [],
@@ -730,6 +763,40 @@ export default {
     };
   },
   methods: {
+    onFileChanged(event) {
+      const file = event.target.files[0];
+      this.file = file;
+      if (this.file && this.file !== null) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          console.log(event.target.result);
+          this.url = event.target.result;
+        };
+        reader.readAsDataURL(this.file);
+        console.log();
+      } else {
+        this.url = null;
+      }
+    },
+
+    async uploadImage() {
+      if (!this.file) {
+        return;
+      }
+      let request = await client.user.requestChangeImage.mutate({
+        imageName: this.file.name,
+        contentType: this.file.type,
+      });
+      let formData = createFormData(request, this.file);
+      await fetch(request.postURL, {
+        method: "POST",
+        body: formData,
+      }).then(() => {
+        client.user.confirmChangeImage.mutate();
+        alert("บันทึกข้อมูลสำเร็จ");
+      });
+      console.log("done");
+    },
     submit() {
       let dataOption = [...this.option1, ...this.option2];
       const filterOpt = dataOption.map((item) => {
@@ -745,10 +812,10 @@ export default {
       // console.log("opppp", filterOpt, filterOpt2);
 
       // let payload = {
-      //   firstName: "ธรรมนูญ",
+      //   firstName: "ธรรมนูญ2",
       //   lastName: "สังขวรรณ",
       //   title: "",
-      //   cid: "1189900247580",
+      //   cid: "3180600024176",
       //   age: 60,
       //   phone: "0819444825",
       //   public_phone: "0819444885",
@@ -772,18 +839,53 @@ export default {
       //   //   },
       //   // ],
       // };
-     
+
       // console.log("this.payload", this.payload);
       client.user.createUser
         .mutate(this.payload)
         .then((data) => {
           console.log("data", data);
-          alert("บันทึกข้อมูลสำเร็จ");
-          this.$router.push("/upload");
+
+          localStorage.setItem("token", data.token);
+          if (this.file) {
+            this.uploadImage();
+          } else {
+            alert("บันทึกข้อมูลสำเร็จ");
+          }
+          this.getUser();
+          // this.$router.push("/upload");
           // this.provinceItems = data;
         })
         .catch((error) => {
-          alert("ไม่สามารถอัปโหลดข้อมูลได้");
+          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+    login(payload) {
+      client.user.login
+        .mutate(payload)
+        .then((data) => {
+          console.log("data", data);
+
+          localStorage.setItem("token", data.token);
+          this.$router.push("/");
+        })
+        .catch((error) => {
+          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+    getUser() {
+      client.user.getSelf
+        .mutate({})
+        .then((data) => {
+          this.login({ cid: data.cid, phone: data.phone });
+          localStorage.setItem("username", data.firstName);
+          this.$store.commit("setUsername", data.firstName);
+          // this.$store.dispatch('setLocalStorageValue',data.firstName)
+        })
+        .catch((error) => {
+          alert("ไม่สามารถโหลดข้อมูลได้");
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },
@@ -802,12 +904,6 @@ export default {
       }
     },
     filterData() {
-      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
-      // if (this.province && this.province.provinceCode) {
-      //   this.districtItems = [...Districts].filter(
-      //     (item) => item.provinceCode === this.province.provinceCode
-      //   );
-      // }
       this.payload.zone = null;
       client.info.getAllZones
         .query({ provice_id: this.payload.province })

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;