update edit / login / responsive

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="<%= BASE_URL %>logo.png">
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-main class="bg-main">
-      <div class="d-block w-100 text-right pa-3">
+      <div class="d-block w-100 text-right pa-3 mb-5">
         <span class="img-logo">
           <router-link to="/">
             <span class="float-left">
@@ -11,15 +11,21 @@
                 width="80"
               ></v-img></span></router-link
         ></span>
+
+        <!-- {{ getUsernameFromLocalStorage }} -->
         <span
           ><v-btn
             icon="mdi-home-variant-outline"
             variant="text"
             href="/"
           ></v-btn
-          ><v-btn icon="mdi-account-outline" variant="text"></v-btn>
-          <v-btn variant="text"> Sign In </v-btn>
-          <v-btn elevated color="#F4C03F"> Get Started </v-btn></span
+          ><v-btn variant="text" v-if="getUsername" to="/profile">
+            <v-icon icon="mdi-account-outline" ></v-icon>{{ getUsername }}</v-btn
+          >
+          <v-btn variant="text" v-if="getUsername" @click="logout" class="mr-2"><v-icon icon="mdi-logout"></v-icon> Logout </v-btn>
+          <v-btn variant="text" class="mr-2" v-else to="/login" > <v-icon icon="mdi-login"></v-icon> Log In </v-btn>
+
+          <v-btn elevated color="#F4C03F" to="/check" href="#started" > Get Started </v-btn></span
         >
       </div>
       <router-view />
@@ -31,17 +37,40 @@
 import { client } from "./utils/trpc";
 client.info.getAllZones.query({}).then(console.log);
 // import MainVote from "./components/MainVote.vue";
-
+import { mapGetters } from "vuex";
 export default {
   name: "App",
-
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
   components: {
     // MainVote,
   },
 
   data: () => ({
-    //
+    username: "",
   }),
+  methods: {
+    logout() {
+      localStorage.clear();
+      // location.reload();
+      this.$store.commit("setUsername", "");
+      this.$router.push("/");
+    },
+  },
+  mounted() {
+    // this.$emitter.on("loginUser", (val) => {
+    //   console.log("user", val);
+    //   if (val) {
+    //     this.username = localStorage.getItem("username");
+    //   }
+    // });
+    this.username = localStorage.getItem("username");
+   if(this.getUsername==""){
+    this.$store.commit("setUsername", this.username);
+   } 
+    
+  },
 };
 </script>
 <style>
@@ -90,23 +119,23 @@ export default {
     display: none;
   }
   .text-title {
-    font-size: 28px;
+    font-size: 25px;
     font-weight: 500;
     /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
   }
   .text-normal {
-    font-size: 25px;
+    font-size: 22px;
   }
   .text-subtitle {
     font-size: 22px;
     font-weight: 600;
   }
   .text-sub {
-    font-size: 23px;
+    font-size: 21px;
     font-weight: 400;
   }
   .text-sub2 {
-    font-size: 20px;
+    font-size: 19px;
     /* font-weight: 500; */
   }
   .text-sub3 {

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
             @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,7 +20,7 @@
       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"
@@ -131,6 +131,36 @@
                   </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>
 
@@ -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,6 +510,12 @@ 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;
   }

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",
@@ -778,12 +845,47 @@ export default {
         .mutate(this.payload)
         .then((data) => {
           console.log("data", data);
+
+          localStorage.setItem("token", data.token);
+          if (this.file) {
+            this.uploadImage();
+          } else {
             alert("บันทึกข้อมูลสำเร็จ");
-          this.$router.push("/upload");
+          }
+          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: {
@@ -129,6 +133,9 @@ export default {
         // 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;

src/router/index.js

@@ -5,12 +5,20 @@ import QuestionList from "@/views/QuestionList.vue";
 import RegisterForm from "@/views/RegisterForm.vue";
 import SearchUser from "@/views/SearchUser.vue";
 import UploadImage from "@/views/UploadImage.vue";
+import LoginForm from "@/views/LoginForm.vue";
+import ProfileUser from "@/views/ProfileUser.vue";
+import CheckDetail from "@/views/CheckDetail.vue";
 const routes = [
   {
     path: "/",
     name: "HomePage",
     component: HomePage,
   },
+  {
+    path: "/login",
+    name: "LoginForm",
+    component: LoginForm,
+  },
   {
     path: "/check",
     component: CheckSurvey,
@@ -31,6 +39,14 @@ const routes = [
     path: "/upload",
     component: UploadImage,
   },
+  {
+    path: "/profile",
+    component: ProfileUser,
+  },
+  {
+    path: "/detail",
+    component: CheckDetail,
+  },
 ];
 
 const router = createRouter({

src/store/index.js

@@ -1,11 +1,27 @@
 import { createStore } from "vuex";
 
 export default createStore({
-  state: {},
-  getters: {},
-  mutations: {},
+  state: {
+    username:""
+  },
+  getters: {
+    getUsername: (state) => {
+      return state.username
+    },
+  },
+  mutations: {
+    setUsername: (state, payload) => {
+      state.username = payload;
+    },
+  },
   actions: {
-    
+    setLocalStorageValue(data) {
+      localStorage.setItem("username", data);
+    },
+    // getLocalStorageValue() {
+    //   const username = localStorage.getItem("username");
+    //   // ทำสิ่งที่คุณต้องการกับค่าที่ได้จาก Local Storage
+    // },
  },
   modules: {},
 });

src/views/CheckDetail.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="bg-yellow-page mt-5">
+    <v-container>
+      <div class="text-title text-center mt-10">
+        ตวรจเช็คคุณสมบัติ-ลักษณะต้องห้าม ของผู้ที่จะสมัคร สว.<br />
+        <!-- <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon> -->
+      </div>
+      <div class="text-center mb-10">
+        <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon>
+      </div>
+
+      <br />
+      <v-row>
+        <v-col cols="12" md="">
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/Group 195.png"
+            height="100%"
+            class="img-checkdetail"
+          ></v-img>
+        </v-col>
+        <v-col class="text-sub2 bline" cols="12" md="">
+          <div class="text-subtitle">
+            <v-icon icon="mdi-check-circle-outline" color="#4C884C"></v-icon>
+            คุณสมบัติของสมาชิกวุฒิสภา
+          </div>
+          <div class="text-sub">
+            สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
+            โดยมีคุณสมบัติดังนี้
+          </div>
+          <div class="d-flex align-center">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 196.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+
+            มีสัญชาติไทยโดยการเกิด
+          </div>
+          <div class="d-flex align-center">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 197.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img
+            >มีอายุไม่ต่ำกว่า 40 ปีในวันสมัครรับเลือก
+          </div>
+          <div class="d-flex align-start">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 198.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+            มีความรู้ ความเชี่ยวชาญ และประสบการณ์ หรือทำงานในด้าน
+            ที่สมัครไม่น้อยกว่าสิบปี ยกเว้น ผู้สมัครในกลุ่มสตรี ผู้สูงอายุ
+            คนพิการ
+          </div>
+          <div class="d-flex align-start">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 199.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+            ผู้สมัครต้องมีลักษณะอย่างใดอย่างหนึ่ง ดังต่อไปนี้ด้วย<br />(ก)
+            เป็นบุคคลซึ่งเกิดในอำเภอที่สมัครรับเลือก <br />(ข)
+            มีชื่ออยู่ในทะเบียนบ้านในอำเภอที่สมัครรับเลือกมาแล้วเป็นเวลา
+            ติดต่อกันไม่น้อยกว่า สองปีนับถึงวันสมัครรับเลือก <br />(ค)
+            ทำงานอยู่ในอำเภอที่สมัครรับเลือกมาแล้วเป็นเวลาติดต่อกัน
+            ไม่น้อยกว่าสองปี นับถึงวันสมัครรับเลือก <br />(ง)
+            เคยทำงานหรือเคยมีชื่ออยู่ในทะเบียนบ้านอยู่ในอำเภอที่สมัคร รับเลือก
+            แล้วแต่กรณี เป็นเวลาติดต่อกันไม่น้อยกว่าสองปี <br />(จ)
+            เคยศึกษาในสถานศึกษาที่ตั้งอยู่ในอำเภอที่สมัครรับเลือกเป็น
+            เวลาติดต่อกันไม่น้อยกว่า สองปีการศึกษา
+          </div>
+        </v-col>
+      </v-row>
+      <v-row class="my-10">
+        <v-col cols="12" md="" class="border-blue text-sub2 bline pa-5">
+          <div class="text-subtitle">
+            <v-icon icon="mdi-close-circle-outline" color="#DD3131"></v-icon>
+            ลักษณะต้องห้ามของสมาชิกวุฒิสภา
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            ติดยาเสพติดให้โทษ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นบุคคลล้มละลายหรือเคยเป็นบุคคลล้มละลายทุจริต
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นเจ้าของหรือผู้ถือหุ้นในกิจการหนังสือพิมพ์หรือสื่อมวลชนใด ๆ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นภิกษุ สามเณร นักพรต หรือนักบวช
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกต้ังไม่ว่าคดีนั้นจะถึงที่สุดแล้วหรือไม่
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            วิกลจริตหรือจิตฟั่นเฟือนไม่สมประกอบ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ระหว่างถูกระงับการใช้สิทธิสมัครรับเลือกตั้งเป็นการชั่วคราวหรือ
+            ถูกเพิกถอนสิทธิสมัครรับเลือกตั้ง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            ต้องคำพิพากษาให้จำคุกและถูกคุมขังอยู่โดยหมายของศาล
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยได้รับโทษจำคุกโดยได้พ้นโทษมายังไม่ถึงสิบปีนับถึงวันเลือกในระดับ
+            อำเภอ เว้นแต่ ในความผิดอันได้กระทำโดยประมาทหรือความผิดลหุโทษ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยถูกสั่งให้พ้นจากราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจเพราะ
+            ทุจริตต่อหน้าที่ หรือถือว่ากระทำการทุจริตหรือประพฤติมิชอบใน วงราชการ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาหรือคำสั่งของศาลอันถึงที่สุดให้ทรัพย์สินตกเป็น
+            ของแผ่นดินเพราะร่ำรวยผิดปกติ หรือเคยต้องคำพิพากษาอันถึงที่สุด
+            ให้ลงโทษจำคุกเพราะกระทำความผิดตามกฎหมายว่าด้วยการป้องกัน
+            และปราบปรามการทุจริต
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาอันถึงที่สุดว่ากระทำการอันเป็นการทุจริตในการเลือกตั้ง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยเป็นสมาชิกวุฒิสภาตามรัฐธรรมนูญนี้
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาอันถึงที่สุดว่ากระทำความผิดต่อตำแหน่งหน้าที่
+            ราชการหรือ ต่อตำแหน่งหน้าที่ในการยุติธรรม หรือกระทำความผิด
+            ตามกฎหมายว่าด้วยความผิดของพนักงานในองค์การ หรือหน่วยงาน ของรัฐ
+            หรือความผิดเกี่ยวกับทรัพย์ที่กระทำโดยทุจริตตามประมวล กฎหมายอาญา
+            ความผิดตามกฎหมายว่าด้วยการกู้ยืมเงินที่เป็น การฉ้อโกงประชาชน
+            กฎหมายว่าด้วยยาเสพติด ในความผิดฐานเป็นผู้ผลิต นำเข้า ส่งออก
+            หรือผู้ค้า กฎหมายว่าด้วยการพนันในความผิดฐานเป็นเจ้ามือ หรือเจ้าสำนัก
+            กฎหมายว่าด้วยการป้องกันและปราบปรามการค้ามนุษย์
+            หรือกฎหมายว่าด้วยการป้องกัน และปราบปรามการฟอกเงินในความผิด
+            ฐานฟอกเงิน
+          </div>
+        </v-col>
+        <v-col class="text-sub2 bline pa-5" cols="12" md="">
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ในระหว่างต้องห้ามมิให้ดำรงตำแหน่งทางการเมือง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นพนักงานหรือลูกจ้างของหน่วยราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจ
+            หรือเป็นเจ้าหน้าที่อื่นของรัฐ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นตุลาการศาลรัฐธรรมนูญ หรือผู้ดำรงตำแหน่งในองค์กรอิสระ
+          </div>
+
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยพ้นจากตำแหน่งเพราะศาลรัฐธรรมนูญวินิจฉัยว่ามีการเสนอ การแปรญัตติ
+            หรือ การกระทำด้วยประการใด ๆ ที่มีผลให้สมาชิก สภาผู้แทนราษฎร
+            สมาชิกวุฒิสภา หรือกรรมาธิการ มีส่วนไม่ว่า
+            โดยทางตรงหรือทางอ้อมในการใช้งบประมาณรายจ่าย
+          </div>
+
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยพ้นจากตำแหน่งเพราะศาลฎีกาหรือศาลฎีกาแผนกคดีอาญา
+            ของผู้ดำรงตำแหน่งทางการเมืองมีคำพิพากษาว่าเป็นผู้มี
+            พฤติการณ์ร่ำรวยผิดปกติ หรือกระทำความผิดฐานทุจริตต่อหน้าที่
+            หรือจงใจปฏิบัติหน้าที่หรือใช้อำนาจขัดต่อบทบัญญัติแห่ง
+            รัฐธรรมนูญหรือกฎหมาย หรือฝ่าฝืนหรือไม่ปฏิบัติ ตามมาตรฐาน
+            ทางจริยธรรมอย่างร้ายแรง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นข้าราชการ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นสมาชิกสภาผู้แทนราษฎร เว้นแต่ ได้พ้นจากการ
+            เป็นสมาชิกสภาผู้แทนราษฎร มาแล้วไม่น้อยกว่าห้าปีนับถึง
+            วันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นสมาชิกพรรคการเมือง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นผู้ดำรงตำแหน่งใดในพรรคการเมือง เว้นแต่
+            ได้พ้นจากการดำรงตำแหน่งในพรรคการเมืองมาแล้วไม่น้อยกว่า
+            ห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นรัฐมนตรี เว้นแต่ ได้พ้นจากการเป็นรัฐมนตรีมา
+            แล้วไม่น้อยกว่าห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นสมาชิกสภาท้องถิ่นหรอืผู้บริหารท้องถิ่น เว้นแต่
+            ได้พ้นจากการเป็นสมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่นมาแล้ว
+            ไม่น้อยกว่าห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตาแหน่งสมาชิกสภา ผู้แทนราษฎร
+            สมาชิกวุฒิสภา ข้าราชการการเมืองสมาชิกสภาท้องถิ่น
+            หรือผู้บริหารท้องถิ่น ผู้สมัครรับเลือกเป็นสมาชิกวุฒิสภาในคราว
+            เดียวกัน หรือผู้ดำรงตำแหน่งใดในศาลรัฐธรรมนูญหรือองค์กรอิสระ
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style>
+.bline div {
+  margin: 15px 0px;
+}
+.bg-yellow-page {
+  background: #f7d278;
+}
+.border-blue {
+  border-right: 5px solid #1b76ba;
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .border-blue {
+    border-right: 0px solid #1b76ba;
+  }
+  .img-checkdetail {
+    /* height: 250px !important; */
+  }
+}
+</style>

src/views/LoginForm.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <v-img
+      class="mx-auto"
+      :aspect-ratio="1"
+      src="@/assets/logo-title.png"
+      width="250"
+    ></v-img>
+    <v-card
+      class="mx-auto pa-12 pb-8"
+      elevation="8"
+      max-width="600"
+      rounded="lg"
+    >
+      <v-form fast-fail @submit.prevent v-model="form1">
+        <div class="text-subtitle-1 text-medium-emphasis">ID card number</div>
+
+        <v-text-field
+          density="compact"
+          placeholder="เลขประจำตัว 13 หลัก"
+          prepend-inner-icon="mdi-card-account-details"
+          variant="outlined"
+          color="#4c884c"
+          v-model="payload.cid"
+          :rules="rules.id"
+        ></v-text-field>
+        <!--   
+        <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
+          Password
+  
+          <a
+            class="text-caption text-decoration-none text-blue"
+            href="#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Forgot login password?</a>
+        </div> -->
+
+        <v-text-field
+          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
+          :type="visible ? 'text' : 'password'"
+          density="compact"
+          placeholder="เบอร์โทรศัพท์"
+          prepend-inner-icon="mdi-lock-outline"
+          variant="outlined"
+          @click:append-inner="visible = !visible"
+          v-model="payload.phone"
+          :rules="rules.tel"
+          color="#4c884c"
+        ></v-text-field>
+
+        <!-- <v-card
+          class="mb-12"
+          color="surface-variant"
+          variant="tonal"
+        >
+          <v-card-text class="text-medium-emphasis text-caption">
+            Warning: 
+          </v-card-text>
+        </v-card> -->
+
+        <v-btn
+          class="mb-8"
+          size="large"
+          variant="tonal"
+          block
+          @click="login"
+          color="#4c884c"
+          :disabled="!form1"
+        >
+          Log In
+        </v-btn>
+      </v-form>
+    </v-card>
+  </div>
+</template>
+<script>
+import { client } from "@/utils/trpc";
+export default {
+  data: () => ({
+    form1: false,
+    visible: false,
+    payload: { cid: "", phone: "" },
+    rules: {
+      tel: [
+        (v) =>
+          // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
+          /^([0-9]{10})$/.test(v) || "Invalid phone number",
+      ],
+      id: [
+        (v) => (parseInt(v) == v && v.length == 13) || "Invalid ID card number",
+      ],
+    },
+  }),
+  methods: {
+    getUser() {
+      client.user.getSelf
+        .mutate({})
+        .then((data) => {
+          localStorage.setItem("username", data.firstName);
+          this.$store.commit("setUsername", data.firstName);
+          //   this.$emitter.emit("loginUser", data.firstName );
+
+          this.$router.push("/");
+
+          //   location.reload();
+          // this.$store.dispatch('setLocalStorageValue',data.firstName)
+        })
+        .catch((error) => {
+          alert("ไม่สามารถโหลดข้อมูลได้");
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+    login() {
+      client.user.login
+        .mutate(this.payload)
+        .then((data) => {
+          console.log("data", data);
+
+          localStorage.setItem("token", data.token);
+          //   this.uploadImage();
+          this.getUser();
+
+          // this.provinceItems = data;
+        })
+        .catch((error) => {
+          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+  },
+};
+</script>

src/views/ProfileUser.vue

@@ -0,0 +1,13 @@
+<template lang="">
+    <div>
+      <FormMain />
+    </div>
+  </template>
+  <script>
+  import FormMain from "../components/edit/FormMainEdit.vue";
+  export default {
+    components: { FormMain },
+  };
+  </script>
+  <style lang=""></style>
+