แก้ไข UI / UX ทำ function search ใหม่ ตามบรีฟพี่อาร์ม

src/App.vue

@@ -15,18 +15,68 @@
         <!-- {{ getUsernameFromLocalStorage }} -->
         <span
           ><v-btn
-            icon="mdi-home-variant-outline"
             variant="text"
             href="/"
-          ></v-btn
+            class="mr-3"
-          ><v-btn variant="text" v-if="getUsername" to="/profile">
+          >  <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></v-btn
-            <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" v-if="getUsername" to="/profile">
-          <v-btn variant="text" class="mr-2" v-else to="/login" > <v-icon icon="mdi-login"></v-icon> Log In </v-btn>
+            <v-icon icon="mdi-account-outline"></v-icon>{{ getUsername }}</v-btn
-
+          > -->
-          <v-btn elevated color="#F4C03F" to="/check" href="#started" > Get Started </v-btn></span
+          <!-- <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-if="
+              getUsername == '' ||
+              getUsername == null ||
+              getUsername == undefined
+            "
+            to="/login"
+            style="font-size: medium;"
+          >
+            <v-icon icon="mdi-login"  size="25"></v-icon> เข้าสู่ระบบ
+          </v-btn>
+          <v-menu transition="slide-x-transition" v-if="getUsername">
+            <template v-slot:activator="{ props }">
+              <v-btn elevated color="#F4C03F" v-bind="props" height="40">
+                <v-avatar
+                  color="#635d56"
+                  v-if="getImg"
+                  :image="getImg"
+                  size="30"
+                >
+                </v-avatar
+                ><v-avatar size="40" v-else>
+                  <v-icon
+                    icon="mdi-account-circle"
+                    color="white"
+                    size="30"
+                  ></v-icon>
+                </v-avatar>
+                <span class="ml-3" style="font-size: medium;">{{ getUsername }}</span>
+              </v-btn></template
+            >
+            <v-list>
+              <v-list-item
+                :key="0"
+                :value="0"
+                @click="$router.push('/profile')"
+              >
+                <v-list-item-title>
+                  <v-icon icon="mdi-account-edit"></v-icon> แก้ไขข้อมูลส่วนตัว
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item :key="1" :value="1" @click="logout">
+                <v-list-item-title>
+                  <v-icon icon="mdi-logout"></v-icon> ออกจากระบบ
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </span>
       </div>
       <router-view />
     </v-main>
@@ -41,20 +91,26 @@ import { mapGetters } from "vuex";
 export default {
   name: "App",
   computed: {
-    ...mapGetters(["getUsername"]),
+    ...mapGetters(["getUsername", "getImg"]),
   },
   components: {
     // MainVote,
   },
 
   data: () => ({
+    img: "",
     username: "",
+    items: [
+      { title: "แก้ไขข้อมูลส่วนตัว", icon: "mdi-account-edit", to: "/profile" },
+      { title: "ออกจากระบบ", icon: "mdi-logout", to: "/profile" },
+    ],
   }),
   methods: {
     logout() {
       localStorage.clear();
       // location.reload();
       this.$store.commit("setUsername", "");
+      this.$store.commit("setImg", "");
       this.$router.push("/");
     },
   },
@@ -66,10 +122,13 @@ export default {
     //   }
     // });
     this.username = localStorage.getItem("username");
-   if(this.getUsername==""){
+    this.img = localStorage.getItem("img");
-    this.$store.commit("setUsername", this.username);
+    if (this.getUsername == "") {
-   } 
+      this.$store.commit("setUsername", this.username);
-    
+    }
+    if (this.getImg == "") {
+      this.$store.commit("setImg", this.img);
+    }
   },
 };
 </script>

src/components/FooterPage.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="bg-curve-2">
+    </div>
+  </template>
+  <script>
+
+  export default {
+   
+  };
+  </script>
+  <style>
+
+  .bg-curve-2 {
+    padding-top: 90px;
+    background-image: url("/src/assets/Path\ 18.png");
+    height: 300px;
+    background-position: center top;
+    /* background: #2b2b26 0% 0% no-repeat padding-box; */
+  }
+  </style>
+  

src/components/HeaderHome.vue

@@ -7,7 +7,8 @@
             <v-img
               :aspect-ratio="1"
               src="../assets/logo-title.png"
-              width="600"
+              width="600"  
+              @click="$router.push('/')"
             ></v-img>
           </v-col>
           <v-col align-self="center" align="center">
@@ -19,42 +20,52 @@
             <v-btn
               elevated
               color="#B2C573"
-              class="mt-4"
+              class="mt-4 text-normal"
               style="color: #0f470f"
               size="large"
-              href="#started"
+              height="80"
+              to="/login"
             >
-              มาเริ่มกันเลย
+              <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
             </v-btn>
           </v-col>
         </v-row>
       </div>
     </div>
     <div style="position: relative" class="bg-curve" id="started">
-      <v-row style="height: 100%" align="center" class="text-center">
+      <v-row style="height: 100%;width: 90%;" align="center" class="text-center ma-auto" >
-        <v-col cols="12" md="">
+        <v-col cols="12" md="" class="text-normal mb-10">
+          <div class="text-center text-white py-5">
+            <div class="text-title my-3">ใครสมัคร สว.ได้บ้าง</div>
+            <div>
+              สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
+              โดยมีคุณสมบัติดังนี้
+            </div>
+            <div>เช็คคุณสมบัติกันเลย !</div>
+            <!-- <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
+        ตรวจสอบคุณสมบัติการเป็น  สว.
+      </v-btn> -->
+          </div>
           <div style="position: relative">
             <v-btn
               elevated
               color="#DD6C31"
               class="text-normal"
-              stacked
+              height="85"
-              height="110"
               to="/check"
             >
-              ตรวจสอบคุณสมบัติ
+              <span class="text-normal"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
-              <br />
-              การเป็น สว.
               <v-img
                 :aspect-ratio="1"
                 src="../assets/Group 9.png"
                 width="70"
-                style="position: absolute; bottom: -25px; left: -20px"
+                style="position: absolute; bottom: -27px; left: -30px"
               ></v-img>
             </v-btn>
           </div>
+          <br>
         </v-col>
-        <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" v-if="getUsername==''||getUsername==null||getUsername==undefined">
+        <!-- <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" >
           <v-btn
             elevated
             color="#DD6C31"
@@ -62,6 +73,7 @@
             stacked
             height="110"
             to="/forms"
+            :disabled="getUsername!==''||getUsername!==null||getUsername!==undefined"
           >
             <v-img
               :aspect-ratio="1"
@@ -72,8 +84,8 @@
             แสดงตนเป็นผู้สมัคร
           </v-btn>
         </v-col>
-        <!-- {{ getUsername }} -->
+
-        <v-col cols="12" md="" v-if="getUsername">
+        <v-col cols="12" md="">
           <v-btn
             elevated
             color="#DD6C31"
@@ -82,6 +94,7 @@
             width="300"
             height="110"
             to="/search"
+            :disabled="!getUsername"
           >
             <v-img
               :aspect-ratio="1"
@@ -89,9 +102,9 @@
               width="100"
               style="position: absolute; top: -40px; right: 0px"
             ></v-img>
-            ค้นหาผู้สมัคร สว.
+            ค้นหาผู้สมัคร  สว.
           </v-btn>
-        </v-col>
+        </v-col> -->
       </v-row>
     </div>
   </div>
@@ -124,9 +137,9 @@ export default {
   transform: translate(-50%, -50%);
 }
 .bg-curve {
+  padding-top: 90px;
   background-image: url("/src/assets/Path\ 14.png");
-  height: 400px;
+  height: 465px;
-
   background-position: center top;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }

src/components/MainVote.vue

@@ -2,33 +2,36 @@
   <div class="bg-main">
     <Header />
     <Section2Green />
-    <Section3Base />
+    <!-- <Section3Base /> -->
     <Section4White/>
     <Section5Green/>
     <Section6Base/>
     <Section7GreenTab/>
     <Section8Base/>
+    <FooterPage/>
   </div>
 </template>
 <script>
 import Header from "./HeaderHome.vue";
 import Section2Green from "./Section2Green.vue";
-import Section3Base from "./Section3Base.vue";
+// import Section3Base from "./Section3Base.vue";
 import Section4White from "./Section4White.vue";
 import Section5Green from "./Section5Green.vue";
 import Section6Base from "./Section6Base.vue";
 import Section7GreenTab from "./Section7GreenTab.vue";
 import Section8Base from "./Section8Base.vue";
+import FooterPage from "./FooterPage.vue";
 export default {
   components: {
     Header,
     Section2Green,
-    Section3Base,
+    // Section3Base,
     Section4White,
     Section5Green,
     Section6Base,
     Section7GreenTab,
-    Section8Base
+    Section8Base,
+    FooterPage
 
 
   },

src/components/Section2Green.vue

@@ -1,55 +1,92 @@
 <template>
-  <div style="position: relative" class="bg-green-curve text-normal">
+  <div style="position: relative" class="bg-green-curve text-normal " >
-    <div class="text-center text-white py-5">
+    <div
-      <div class="text-title my-3">มาศึกษาก่อนจะเป็น สว.</div>
+     style="width: 90%"
-      <v-row>
+      class="text-center text-white py-10 pb-20 ma-auto"
-        <v-col class="border-green" cols="12" md="">
+      v-if="
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+        getUsername == '' || getUsername == null || getUsername == undefined
-          <div>ใครสมัครสว.ได้บ้าง</div>
+      "
-        </v-col>
+    >
-        <v-col class="border-green" cols="12" md="">
+      <div class="text-title my-3">มาลองสร้างตัวตนก่อนลงสมัคร สว.</div>
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+      <div class="mb-8">
+        ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น ก่อนลงสมัคร สว. รอบจริง
+      </div>
 
-          <div>หน้าที่ของสว.</div>
+      <v-btn
-        </v-col>
+        elevated
-        <v-col cols="12" md="">
+        color="#DD6C31"
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+        class="text-normal btn-w"
-
+        height="85"
-          <div>กระบวนการเลือก สมาชิกวุฒิสภา</div>
+        width="470"
-        </v-col>
+        to="/forms"
-      </v-row>
+      >
-      <v-row>
+        <v-img
-        <v-col cols="12" md="">
+          :aspect-ratio="1"
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+          src="../assets/Group 23.png"
-          <div>ขั้นตอนการเลือกสว.</div>
+          width="80"
-        </v-col>
+          style="position: absolute; bottom: -40px; right: 0"
-        <v-col cols="12" md="">
+        ></v-img>
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+        <span class="text-normal"> แสดงตนเป็นผู้สมัคร</span>
-
+      </v-btn>
-          <div>กลุ่มอาชีพ ผู้สมัครรับเลือกสว.</div>
+    </div>
-        </v-col>
+    <div class="text-center text-white py-10 pb-20" v-if="getUsername">
-      </v-row>
+      <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
+      <div class="mb-8">
+        ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
+        ที่ตัวเองเป็นผู้แสดงตน
+      </div>
+      <v-btn
+        elevated
+        color="#DD6C31"
+        class="text-normal btn-w"
+        height="85"
+        width="470"
+        to="/search"
+      >
+        <v-img
+          :aspect-ratio="1"
+          src="../assets/search.png"
+          width="100"
+          style="position: absolute; bottom: -20px; right: 0px"
+        ></v-img>
+        <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
+      </v-btn>
     </div>
   </div>
 </template>
 <script>
-export default {};
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
+};
 </script>
 <style>
 .bg-green-curve {
   background-image: url("/src/assets/Rectangle\ 3.png");
-  min-height: 600px;
+  min-height: 510px;
   height: auto;
   background-position: center bottom;
+  background-color: white;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
-.border-green{
+.bg-green-black {
+  /* min-height: 600px; */
+  height: auto;
+  background-color: #4c884c;
+  /* background: #2b2b26 0% 0% no-repeat padding-box; */
+}
+.border-green {
   border-right: 5px solid #b2c573;
 }
 @media only screen and (min-width: 0px) and (max-width: 700px) {
   .bg-green-curve {
-  min-height: 700px;
+    min-height: 420px;
-  
+    background-position: center bottom;
-}
+  }
+  .btn-w.v-btn {
+    width: 370px !important;
+  }
 }
 </style>

src/components/Section3Base.vue

@@ -1,14 +1,14 @@
 <template>
   <div style="position: relative" class="text-normal mb-10">
     <div class="text-center txt-black py-5">
-      <div class="text-title my-3">ใครสมัครสว.ได้บ้าง</div>
+      <div class="text-title my-3">ใครสมัคร สว.ได้บ้าง</div>
       <div>
         สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
         โดยมีคุณสมบัติดังนี้
       </div>
       <div>เช็คคุณสมบัติกันเลย !</div>
       <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
-        ตรวจสอบคุณสมบัติการเป็น สว.
+        ตรวจสอบคุณสมบัติการเป็น  สว.
       </v-btn>
     </div>
   </div>

src/components/Section4White.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="position: relative" class="bg-white text-normal pb-10">
-    <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
+    <div class="text-center txt-black py-5 ma-auto" style="width: 90%">
-      <div class="text-title my-3">หน้าที่ของสว.</div>
+      <div class="text-title my-3">หน้าที่ของ สว.</div>
       <v-row align="center" justify="center">
         <v-col
           class="border-dot"

src/components/Section5Green.vue

@@ -19,7 +19,7 @@
             <span>2</span>
           </template>
           <div class="d-flex">
-            <div>เปิดสมัครรับเลือกสว.โดยมี ระยะเวลารับสมัคร 5 - 7 วัน</div>
+            <div>เปิดสมัครรับเลือก สว.โดยมี ระยะเวลารับสมัคร 5 - 7 วัน</div>
           </div>
         </v-timeline-item>
 
@@ -37,7 +37,7 @@
             <span>4</span>
           </template>
           <div class="d-flex">
-            <div>เลือกสว. ระดับอำเภอ (ภายใน 20 วัน)</div>
+            <div>เลือก สว. ระดับอำเภอ (ภายใน 20 วัน)</div>
           </div>
         </v-timeline-item>
         <v-timeline-item fill-dot size="large" dot-color="white">
@@ -45,7 +45,7 @@
             <span  style="color: #4c884c;">5</span>
           </template>
           <div class="d-flex">
-            <div>เลือกสว. ระดับจังหวัด (+ 7 วัน )</div>
+            <div>เลือก สว. ระดับจังหวัด (+ 7 วัน )</div>
           </div>
         </v-timeline-item>
 
@@ -54,7 +54,7 @@
             <span>6</span>
           </template>
           <div class="d-flex">
-            <div>เลือกสว.ระดับประเทศ (+ 10 วัน )</div>
+            <div>เลือก สว.ระดับประเทศ (+ 10 วัน )</div>
           </div>
         </v-timeline-item>
 
@@ -63,7 +63,7 @@
             <span  style="color: #4c884c;" >7</span>
           </template>
           <div class="d-flex">
-            <div>กกต. ประกาศผล การเลือกสว.</div>
+            <div>กกต. ประกาศผล การเลือก สว.</div>
           </div>
         </v-timeline-item>
       </v-timeline>

src/components/Section6Base.vue

@@ -2,7 +2,7 @@
   <div style="position: relative" class="text-normal pb-10">
     <!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
     <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
-      <div class="text-title my-3">ขั้นตอนการเลือกสว.</div>
+      <div class="text-title my-3">ขั้นตอนการเลือก สว.</div>
       <v-row class="text-left">
         <v-col cols="12" md="6">
           <v-row align="center"
@@ -11,13 +11,13 @@
               <!-- <v-icon icon="mdi-flag-triangle"  color="#F4C03F"></v-icon> -->
               <div class="line-flag">
                 <div class="text-subtitle">
-                  ประกาศให้มีการเลือกสว.
+                  ประกาศให้มีการเลือก สว.
                   <v-icon size="50" color="#F4C03F">mdi-menu-left</v-icon>
                   <v-avatar color="#F4C03F"> 1</v-avatar>
                 </div>
                 <div class="text-sub2">
-                  ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือกสว.
+                  ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือก สว.
-                  ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกอระดับอำเภอ ระดับจังหวัด
+                  ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกระดับอำเภอ ระดับจังหวัด
                   ระดับประเทศ
                 </div>
                 <!-- <br> -->
@@ -45,13 +45,13 @@
             <v-col cols="12" md="7">
               <div>
                 <div class="text-subtitle">
-                  การสมัครรับเลือกสว.
+                  การสมัครรับเลือก สว.
                   <v-icon size="50" color="#37332F">mdi-menu-left</v-icon>
                   <v-avatar color="#37332F"> 2</v-avatar>
                 </div>
                 <div class="text-sub2">
                   รับสมัครไม่เกิน 15 วันนับแต่วันที่พระราชกฤษฎีกาให้มี
-                  การเลือกสว.ใช้บังคับ และกำหนดวันรับสมัครไม่น้อยกว่า 5 วัน
+                  การเลือก สว.ใช้บังคับ และกำหนดวันรับสมัครไม่น้อยกว่า 5 วัน
                   แต่ต้องไม่เกิน 7 วัน
                 </div>
               </div>
@@ -88,7 +88,7 @@
                 <div class="text-subtitle">
                   <v-icon size="50" color="#B2C573">mdi-menu-right</v-icon>
                   <v-avatar color="#B2C573" class="mr-2"> 3</v-avatar>
-                  การเลือกสว. ระดับอำเภอ
+                  การเลือก สว. ระดับอำเภอ
                 </div>
 
                 <div class="text-sub2">
@@ -104,7 +104,7 @@
                   <div style="color: #4c884c; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 3 ลำดับแรก ของแต่ละกลุ่ม
+                  ผู้ได้คะแนนสูงสุด 3 ลำดับแรก ของแต่ละกลุ่ม
                   เป็นผู้ได้รับเลือกระดับอำเภอ สำหรับกลุ่มนั้น
                 </div>
               </div>
@@ -117,7 +117,7 @@
             <v-col  cols="12" md="7">
               <div>
                 <div class="text-subtitle">
-                  การเลือกสว. ระดับจังหวัด
+                  การเลือก สว. ระดับจังหวัด
                   <v-icon size="50" color="#dd6c31">mdi-menu-left</v-icon>
                   <v-avatar color="#dd6c31"> 4</v-avatar>
                 </div>
@@ -133,7 +133,7 @@
                   <div style="color: #dd6c31; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 2 ลำดับแรก ของแต่ละกลุ่ม
+                  ผู้ได้คะแนนสูงสุด 2 ลำดับแรก ของแต่ละกลุ่ม
                   เป็นผู้ได้รับเลือกระดับจังหวัด สำหรับกลุ่มนั้น
                 </div>
               </div>
@@ -166,7 +166,7 @@
           <v-row>
             <v-col  cols="12" md="7">
               <div>
-                <div class="text-subtitle">การเลือกสว. ระดับประเทศ    
+                <div class="text-subtitle">การเลือก สว. ระดับประเทศ    
                   <v-icon size="50" color="#1b76ba">mdi-menu-left</v-icon>
                   <v-avatar color="#1b76ba"> 5</v-avatar></div>
                 <div class="text-sub2">
@@ -182,7 +182,7 @@
                   <div style="color: #1b76ba; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 1-10 เป็นสว. และ ลำดับที่ 11-15
+                  ผู้ได้คะแนนสูงสุดลำดับ 1-10 เป็น สว. และ ลำดับที่ 11-15
                   อยู่ในบัญชีสำรองของกลุ่มนั้น
                 </div>
               </div>
@@ -213,7 +213,7 @@
               </div>
             </v-col>
             <v-col cols="12">
-              <div class="text-subtitle">ประกาศผลเลือกสว. <v-icon size="50" color="#4C884C">mdi-menu-left</v-icon>
+              <div class="text-subtitle">ประกาศผลเลือก สว. <v-icon size="50" color="#4C884C">mdi-menu-left</v-icon>
                   <v-avatar color="#4C884C"> 6</v-avatar></div>
               <div class="text-sub2">
                 เมื่อกกต. ได้รับรายงานจากผู้อำนวยการการเลือกระดับประเทศแล้ว

src/components/Section8Base.vue

@@ -2,19 +2,37 @@
   <div style="position: relative" class="text-normal pb-10">
     <!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
     <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
-      <!-- <div class="text-title my-3">ขั้นตอนการเลือกสว.</div> -->
+      <!-- <div class="text-title my-3">ขั้นตอนการเลือก สว.</div> -->
       <br />
       <v-row>
         <v-col cols="12" md="6">
           <div style="width: 90%; margin: auto">
-            <div class="text-title">กลุ่มอาชีพผู้สมัครรับเลือกสว.</div>
+            <div class="text-title">กลุ่มอาชีพผู้สมัครรับเลือก สว.</div>
             <br />
             <div>
-              ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม
+              ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม มีสิทธิสมัครรับเลือกเป็น
-              มีสิทธิสมัครรับเลือกเปนสว. ในกลุ่มใดกลุ่มหนึง ในกลุ่มอาชีพ 20
+              สว. ในกลุ่มใดกลุ่มหนึ่ง ในกลุ่มอาชีพ 20 กลุ่ม ดังนี้.
-              กลุ่ม ดังนี้.
             </div>
           </div>
+          <v-btn
+            variant="text"
+            append
+            color="#168fb3"
+            size="lg"
+            class="mt-10"
+            to="/detail"
+            ><div
+              class="text-wrap text-sub"
+              style="
+                width: 100%;
+                text-decoration: underline;
+                text-decoration-color: #168fb3;
+                margin: auto;
+              "
+            >
+              คู่มือตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
+            </div></v-btn
+          >
         </v-col>
         <v-col cols="12" md="6">
           <v-card
@@ -38,18 +56,17 @@
                 {{ item.text }}
               </div>
             </v-card-item>
-    
+
             <v-btn
-            @click="count++"
+              @click="count++"
-            class=" pa-4 mb-5 mr-5 btn-phone"
+              class="pa-4 mb-5 mr-5 btn-phone"
-            icon="mdi-skip-next"
+              icon="mdi-skip-next"
-            rounded="circle"
+              rounded="circle"
-            size="xl"
+              size="xl"
-            
+              color="#4c884c"
-            color="#4c884c"
+            ></v-btn>
-          ></v-btn>
           </v-card>
-         
+
           <!-- <v-btn
             @click="count++"
             style="top:-100px; right: 25px;"
@@ -106,7 +123,7 @@ export default {
       { text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
       { text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
       {
-        text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
+        text: "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
         idx: 13,
       },
       { text: "กลุ่มสตรี", idx: 14 },

src/components/check/CheckList.vue

@@ -1,6 +1,6 @@
 <template>
-   <v-container class="text-center">
+  <v-container class="text-center">
-    <div class="text-title">ใครสมัครสว.ได้บ้าง</div>
+    <div class="text-title">ใครสมัคร สว.ได้บ้าง</div>
     <div>
       <v-img
         :aspect-ratio="1"
@@ -11,7 +11,7 @@
     </div>
     <br />
     <div class="text-sub ma-auto" style="width: 90%">
-      อยากลงสมัครสว. แต่ไม่แน่ใจว่าเราสามารถสมัครได้หรือไม่
+      อยากลงสมัคร สว. แต่ไม่แน่ใจว่าเราสามารถสมัครได้หรือไม่
       เราสามารถตรวจสอบคุณสมบัติ เช็คว่าสามารถสมัครกลุ่มไหน เขตอำเภอไหนบ้าง
       ในการลงสมัคร สว. กัน !
     </div>
@@ -31,22 +31,25 @@
       class="mx-auto"
       src="@/assets/Group 51.png"
       width="230"
-  
     ></v-img>
-    <v-btn variant="text" append color="#168fb3" size="lg"     to="/detail"
+    <v-btn variant="text" append color="#168fb3" size="lg" to="/detail"
-      ><div class="text-wrap text-sub" style="width: 100%; margin: auto">
+      ><div
-        ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
+        class="text-wrap text-sub"
+        style="
+          width: 100%;
+          text-decoration: underline;
+          text-decoration-color: #168fb3;
+          margin: auto;
+        "
+      >
+        คู่มือตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
       </div></v-btn
     >
   </v-container>
 </template>
 
 <script>
-export default {
+export default {};
-
-}
 </script>
 
-<style>
+<style></style>
-
-</style>

src/components/check/QuestionList.vue

@@ -3,8 +3,6 @@
     style="height: auto; min-height: 100vh"
     class="d-flex justify-center parent-container"
   >
-    <!-- {{ model }} -->
-    <!-- {{ slides }} -->
     <v-btn
       @click="model++"
       style="z-index: 999"
@@ -15,7 +13,7 @@
       v-if="model < 17"
       ><v-icon icon="mdi-menu-right" size="70" color="#F4C03F"></v-icon
     ></v-btn>
-    <!-- v-if="model > 0" -->
+
     <v-btn
       v-if="model > 0"
       @click="model--"
@@ -27,7 +25,6 @@
       ><v-icon icon="mdi-menu-left" size="70" color="#F4C03F"></v-icon
     ></v-btn>
 
-    <!-- hide-delimiters -->
     <v-carousel
       style="height: auto; min-height: 100vh"
       progress="#f4c03f"
@@ -58,6 +55,8 @@
               <div class="border-white my-2"></div>
               <br />
               <p class="text-title">{{ slide.txt }}</p>
+
+              <p class="text-normal mt-3">{{ slide.subtxt }}</p>
               <a
                 :href="slide.link"
                 target="_blank"
@@ -66,7 +65,6 @@
               >
                 {{ slide.link }}</a
               >
-              <p class="text-normal">{{ slide.subtxt }}</p>
 
               <br />
               <div class="d-flex justify-center align-center">
@@ -163,14 +161,8 @@
               </div>
             </div>
           </v-container>
+          <!-- {{ checkNull.length }} -->
 
-          <div
-            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>
-            กรุณาตอบคำถามให้ครบ
-          </div>
           <div
             class="py-7 parent-container"
             v-if="model > 16 && checkPass.length == 17"
@@ -226,7 +218,11 @@
                   height="60"
                   to="/forms"
                   class="mt-4 mr-2"
-                  v-if="getUsername==''||getUsername==null||getUsername==undefined"
+                  v-if="
+                    getUsername == '' ||
+                    getUsername == null ||
+                    getUsername == undefined
+                  "
                 >
                   <span class="text-sub">แสดงตนเป็นผู้สมัคร</span>
                 </v-btn>
@@ -234,27 +230,57 @@
             </v-container>
           </div>
 
-          <div class="py-7 text-center" v-if="model > 16 && alertList.length">
+          <div
-            <v-container class="text-black">
+            class="py-7 text-center"
+            v-if="
+              (model > 16 && checkNull.length > 0) ||
+              (model > 16 && alertList.length)
+            "
+          >
+            <v-container class="txt-black">
               <div class="text-title mb-2">สรุปผล</div>
               <div class="border-white mb-5"></div>
-              <v-icon icon="mdi-close-circle" size="60" color="red"></v-icon>
-              <div class="text-sub">มีคุณสมบัติที่ไม่ผ่าน</div>
-              <!-- {{ alertList }} -->
-              <div
-                v-for="(txt, i) in alertList"
-                :key="i"
-                class="text-left my-3 text-sub2"
-              >
-                <v-avatar color="#4c884c" size="35">
-                  {{ i + 1 }}
-                </v-avatar>
 
-                {{ txt.not }}
+      
+                <div class="text-sub py-8 d-block" v-if="checkNull.length > 0">
+                  <v-icon icon="mdi-alert-circle-outline mr-2"     color="white"></v-icon>
+                  กรุณาตอบคำถามให้ครบ
+                  <div class="text-sub2">
+                    ไม่ได้ตอบข้อ
+                    <span v-for="(choice, i) in checkNull" :key="i"
+                      >{{ choice.idx }} ,
+                    </span>
+                  </div>
+                </div>  
+
+              <div v-if="model > 16 && alertList.length">
+                <v-card  class="mx-auto my-10" elevation="6" rounded="xl">
+                <v-card-item>
+                  <br>
+                <v-icon
+                  icon="mdi-close-circle"
+                  size="60"
+                  color="#ca2234"
+                ></v-icon>
+                <div class="text-sub">มีคุณสมบัติที่ไม่ผ่าน</div>
+                <div
+                  v-for="(txt, i) in alertList"
+                  :key="i"
+                  class="text-left my-3 text-sub2"
+                >
+                  <v-avatar color="#4c884c" size="35">
+                    {{ i + 1 }}
+                  </v-avatar>
+
+                  {{ txt.not }}
+                </div>
+                <br>
+                </v-card-item>
+                </v-card>
               </div>
               <v-btn
                 elevated
-                color="#DD6C31"
+                color="#1B76BA"
                 class="mt-4"
                 stacked
                 height="60"
@@ -411,23 +437,24 @@ export default {
           vmodel: null,
         },
         {
-          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
+          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกจากตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
           color: "#8aa042",
-          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
+          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
           check: null,
           idx: 14,
           vmodel: null,
         },
         {
-          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัครสว. ในปี 2567?",
+          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัคร สว. ในปี 2567?",
           color: "#4C884C",
-          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัครสว. ในปี 2567 (ในครอบครัวนึงให้เลือกลงสมัครได้คนเดียวนะ)",
+          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัคร สว. ในปี 2567 (ในครอบครัวนึงให้เลือกลงสมัครได้คนเดียวนะ)",
           check: null,
           idx: 15,
           vmodel: null,
         },
         {
-          txt: "คุณถูกจำกัดสิทธิสมัคร สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้งตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
+          txt: "คุณถูกจำกัดสิทธิสมัคร  สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือ ไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้ง  ",
+          subtxt: "ตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
           link: "https://boraservices.bora.dopa.go.th/election/absvote/",
           color: "#8aa042",
           not: "ไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 โดยไม่ได้แจ้งเหตุ",

src/components/edit/FormMainEdit.vue

@@ -5,8 +5,8 @@
         class="mx-auto"
               :aspect-ratio="1"
               src="@/assets/logo-title.png"
-              width="200"
+              width="200" 
-    
+              @click="$router.push('/')"
             ></v-img>
             <div class="text-title txt-black">
                 ข้อมูลส่วนตัว

src/components/edit/FormSteperEdit.vue

@@ -154,7 +154,7 @@
               >
                 <div>ช่วงที่ 2</div>
                 <div class="text-subtitle">
-                  ข้อมูลการสมัครสว.
+                  ข้อมูลการสมัคร สว.
                   <hr class="my-3" />
                 </div>
                 <v-row class="">
@@ -272,7 +272,7 @@
             >
               <div>ช่วงที่ 3</div>
               <div class="text-subtitle">
-                จุดยืนในฐานะสมาชิกรัฐสภา (สว.)
+                จุดยืนในฐานะสมาชิกรัฐสภา ( สว.)
                 <hr class="my-3" />
               </div>
               <v-row>
@@ -429,7 +429,7 @@
               <div>
                 <div>ช่วงที่ 4</div>
                 <div class="text-subtitle">
-                  คำถามอื่นเกี่ยวกับสว.
+                  คำถามอื่นเกี่ยวกับ สว.
                   <hr class="my-3" />
                 </div>
                 <v-card class="mt-8 text-sub">
@@ -437,7 +437,7 @@
                     แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
                   </div>
                   <v-textarea
-                    label="เหตุผลความตั้งใจในการลงสมัคร สว. ครั้งนี้"
+                    label="เหตุผลความตั้งใจในการลงสมัคร  สว. ครั้งนี้"
                     variant="solo"
                     bg-color="#F2EBD1"
                     v-model="payload.reason"
@@ -529,7 +529,7 @@
                     ข้าพเจ้าขอสาบานตนต่อสิ่งศักดิ์สิทธิ์ทั้งหลายที่ข้าพเจ้านับถือ
                     และ/หรือหลักการใดๆ ที่ข้าพเจ้ายึดถือว่า
                     ข้อมูลที่ข้าพเจ้าได้ให้ไว้นั้นเป็นความสัตย์จริง ทั้งสิ้น
-                    และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา (สว.) ในครั้งนี้
+                    และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา ( สว.) ในครั้งนี้
                     จะทำหน้าที่ต่างๆ
                     โดยยึดเอาหลักการประชาธิปไตยและประชาชนเป็นที่ตั้ง
                     หากข้าพเจ้าให้ความเท็จหรือกระทำการใดอันขัดต่อหลักประชาธิปไตยและสิทธิมนุษยชน
@@ -616,7 +616,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!'],
+        files: [
+          (files) =>
+            !files ||
+            !files.some((file) => file.size > 3_097_152) ||
+            "Avatar size should be less than 3 MB!",
+        ],
         space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
         username: (v) =>
           /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%&*|']*$/.test(v) ||
@@ -722,7 +727,7 @@ export default {
         },
       ],
       opnitem1: [
-        { text: "สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
+        { text: " สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
         { text: "แก้ไขรัฐธรรมนูญ 2560", idx: 2, check: null },
         { text: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ” ", idx: 3, check: null },
         {
@@ -736,7 +741,7 @@ export default {
           check: null,
         },
         {
-          text: "แก้ไขที่มาของสว. ยกเลิกสว. ใช้ระบบสภาเดี่ยว",
+          text: "แก้ไขที่มาของ สว. ยกเลิก สว. ใช้ระบบสภาเดี่ยว",
           idx: 6,
           check: null,
         },
@@ -761,7 +766,7 @@ export default {
         },
         { text: "กระจายอำนาจ เพิ่มงบประมาณให้ท้องถิ่น", idx: 13, check: null },
         {
-          text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการสว.",
+          text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการ สว.",
           idx: 14,
         },
       ],
@@ -804,13 +809,13 @@ export default {
         });
         this.option1 = mappedData.filter((item) => item.name !== null);
         this.option2 = mappedData2.filter((item) => item.name !== null);
-        console.log("mappedData", mappedData, opinions1);
+        // console.log("mappedData", mappedData, opinions1);
       }
     },
     onFileChanged(event) {
       const file = event.target.files[0];
       this.file = file;
-      
+
       if (this.file && this.file !== null) {
         const reader = new FileReader();
         reader.onload = (event) => {
@@ -823,9 +828,20 @@ export default {
         this.url = null;
       }
     },
+    getUserAfterEdit() {
+      client.user.getSelf.mutate({}).then((data) => {
+        localStorage.setItem("username", data.firstName);
+        localStorage.setItem("img", data.image);
+        this.$store.commit("setUsername", data.firstName);
+        this.$store.commit("setImg", data.image);
+        alert("บันทึกข้อมูลสำเร็จ");
+        this.$router.push("/");
+      });
+    },
 
     async uploadImage() {
       if (!this.file) {
+        this.getUserAfterEdit();
         return;
       }
       let request = await client.user.requestChangeImage.mutate({
@@ -837,7 +853,9 @@ export default {
         method: "POST",
         body: formData,
       }).then(() => {
-        client.user.confirmChangeImage.mutate();
+        client.user.confirmChangeImage.mutate().then(() => {
+          this.getUserAfterEdit();
+        });
         // alert("บันทึกข้อมูลสำเร็จ");
       });
       console.log("done");
@@ -860,12 +878,6 @@ export default {
         };
       });
 
-      // const filterOpt2 = filterOpt.filter((item) => item.choice !== null);
-      // if (filterOpt2.length) {
-      //   this.payload.opinions = filterOpt2;
-      // }
-      console.log("opppp", dataOption, checkOption, changedChoices, filterOpt);
-      // let data1 =this.checkdata
       let data2 = this.payload;
       // data1.group =data1.group.id
       // data1.zone =data1.zone.id
@@ -876,8 +888,8 @@ export default {
       filterOpt.map((x) => {
         client.user.changeOpinion
           .mutate(x)
-          .then((data) => {
+          .then(() => {
-            console.log("data", data);
+            this.getUser();
           })
           .catch((error) => {
             alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
@@ -887,12 +899,14 @@ export default {
 
       client.user.updateUser
         .mutate(data2)
-        .then((data) => {
+        .then(() => {
-          console.log("data", data);
+          // console.log("data", data);
           this.uploadImage();
-          this.getUser();
+          // if (!this.file) {
-          alert("บันทึกข้อมูลสำเร็จ");
+          //   this.getUser("to");
-          this.$router.push("/");
+          // } else {
+          //   this.uploadImage();
+          // }
         })
         .catch((error) => {
           alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
@@ -923,6 +937,7 @@ export default {
           this.optMapData();
           this.url = data.image;
           this.$store.commit("setUsername", data.firstName);
+          this.$store.commit("setImg", data.image);
         })
         .catch((error) => {
           alert("ไม่สามารถโหลดข้อมูลได้");

src/components/form/FormMain.vue

@@ -6,7 +6,7 @@
               :aspect-ratio="1"
               src="@/assets/logo-title.png"
               width="250"
-    
+              @click="$router.push('/')"
             ></v-img>
             <div class="text-title txt-black">
                 แสดงตนเป็นผู้สมัคร

src/components/form/FormSteper.vue

@@ -152,7 +152,7 @@
               >
                 <div>ช่วงที่ 2</div>
                 <div class="text-subtitle">
-                  ข้อมูลการสมัครสว.
+                  ข้อมูลการสมัคร สว.
                   <hr class="my-3" />
                 </div>
                 <v-row class="">
@@ -269,7 +269,7 @@
             >
               <div>ช่วงที่ 3</div>
               <div class="text-subtitle">
-                จุดยืนในฐานะสมาชิกรัฐสภา (สว.)
+                จุดยืนในฐานะสมาชิกรัฐสภา ( สว.)
                 <hr class="my-3" />
               </div>
               <v-row>
@@ -422,7 +422,7 @@
               <div>
                 <div>ช่วงที่ 4</div>
                 <div class="text-subtitle">
-                  คำถามอื่นเกี่ยวกับสว.
+                  คำถามอื่นเกี่ยวกับ สว.
                   <hr class="my-3" />
                 </div>
                 <v-card class="mt-8 text-sub">
@@ -430,7 +430,7 @@
                     แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
                   </div>
                   <v-textarea
-                    label="เหตุผลความตั้งใจในการลงสมัคร สว. ครั้งนี้"
+                    label="เหตุผลความตั้งใจในการลงสมัคร  สว. ครั้งนี้"
                     variant="solo"
                     bg-color="#F2EBD1"
                     v-model="payload.reason"
@@ -522,12 +522,12 @@
                     ข้าพเจ้าขอสาบานตนต่อสิ่งศักดิ์สิทธิ์ทั้งหลายที่ข้าพเจ้านับถือ
                     และ/หรือหลักการใดๆ ที่ข้าพเจ้ายึดถือว่า
                     ข้อมูลที่ข้าพเจ้าได้ให้ไว้นั้นเป็นความสัตย์จริง ทั้งสิ้น
-                    และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา (สว.) ในครั้งนี้
+                    และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา ( สว.) ในครั้งนี้
                     จะทำหน้าที่ต่างๆ
                     โดยยึดเอาหลักการประชาธิปไตยและประชาชนเป็นที่ตั้ง
                     หากข้าพเจ้าให้ความเท็จหรือกระทำการใดอันขัดต่อหลักประชาธิปไตยและสิทธิมนุษยชน
                     ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
-                    *ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
+                    *ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น  สว.67
                   </div>
                   <div class="text-center mb-5">
                     <v-btn
@@ -716,7 +716,7 @@ export default {
         },
       ],
       opnitem1: [
-        { text: "สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
+        { text: " สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
         { text: "แก้ไขรัฐธรรมนูญ 2560", idx: 2, check: null },
         { text: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ” ", idx: 3, check: null },
         {
@@ -730,7 +730,7 @@ export default {
           check: null,
         },
         {
-          text: "แก้ไขที่มาของสว. ยกเลิกสว. ใช้ระบบสภาเดี่ยว",
+          text: "แก้ไขที่มาของ สว. ยกเลิก สว. ใช้ระบบสภาเดี่ยว",
           idx: 6,
           check: null,
         },
@@ -755,7 +755,7 @@ export default {
         },
         { text: "กระจายอำนาจ เพิ่มงบประมาณให้ท้องถิ่น", idx: 13, check: null },
         {
-          text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการสว.",
+          text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการ สว.",
           idx: 14,
         },
       ],
@@ -879,8 +879,10 @@ export default {
         .then((data) => {
           this.login({ cid: data.cid, phone: data.phone });
           localStorage.setItem("username", data.firstName);
+          localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
-          // this.$store.dispatch('setLocalStorageValue',data.firstName)
+          this.$store.commit("setImg", data.image);
+
         })
         .catch((error) => {
           alert("ไม่สามารถโหลดข้อมูลได้"+ error.message);

src/components/search/CardUser.vue

@@ -203,7 +203,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -227,7 +227,7 @@ export default {
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
               "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -250,7 +250,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -273,7 +273,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -296,7 +296,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -319,7 +319,7 @@ export default {
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
               "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -342,7 +342,7 @@ export default {
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
               "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
       ],

src/components/search/SearchMain.vue

@@ -7,11 +7,25 @@
         src="@/assets/logo-title.png"
         width="250"
       ></v-img>
-      <div class="text-title txt-black">ค้นหาผู้สมัครสว.</div>
+      <div class="text-title txt-black">ค้นหาผู้สมัคร สว.</div>
+      <div class="my-5 text-sub2">
+        สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
+        ที่ตัวเองเป็นผู้แสดงตน
+      </div>
       <v-container>
+        <!-- {{ checkdata }} -->
         <v-row>
           <v-col cols="12" md="4">
-            <v-autocomplete
+            <v-text-field
+              v-if="province"
+              label="จังหวัด"
+              variant="solo"
+              v-model="province"
+              :value="province.name"
+              readonly
+            ></v-text-field>
+
+            <!-- <v-autocomplete
               clearable
               label="จังหวัด"
               :items="provinceItems"
@@ -23,9 +37,18 @@
               @update:modelValue="filterData"
               hide-details
             ></v-autocomplete
-          ></v-col>
+          > -->
+          </v-col>
           <v-col cols="12" md="4">
-            <v-autocomplete
+            <v-text-field
+              v-if="province"
+              label="อำเภอ / เขต"
+              variant="solo"
+              v-model="district"
+              :value="district.name"
+              readonly
+            ></v-text-field>
+            <!-- <v-autocomplete
               clearable
               label="อำเภอ / เขต"
               :items="districtItems"
@@ -37,7 +60,8 @@
               hide-details
               :disabled="province == null"
             ></v-autocomplete
-          ></v-col>
+          > -->
+          </v-col>
           <v-col cols="12" md="4">
             <v-autocomplete
               clearable
@@ -81,11 +105,12 @@
       </div>
       <!-- {{ count }}
       {{ Number(result.length)/ 2 }} -->
-      
+
       <div class="text-center">
         <v-pagination
+          v-if="count > 0"
           v-model="page"
-          :length="Math.ceil(count/ 10)"
+          :length="Math.ceil(count / 10)"
           rounded="circle"
           @click="searchUser((this.page - 1) * 2)"
         ></v-pagination>
@@ -105,6 +130,7 @@ export default {
   },
   data() {
     return {
+      checkdata: "",
       show: false,
       load: false,
       result: [],
@@ -116,7 +142,7 @@ export default {
       items: [],
       group: null,
       offset: 0,
-      count:0,
+      count: 0,
     };
   },
   methods: {
@@ -126,28 +152,22 @@ export default {
       if (offset == 0) {
         this.page = 1;
       }
-      // 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;
+        data.province = this.province.id;
+        // data.province = this.province;
       }
       if (this.group) {
         data.group = this.group;
       }
       if (this.district) {
-        data.zone = this.district;
+        data.zone = this.district.id;
       }
-      // for (const key in data) {
+
-      //   if (data[key] === null) {
+      // console.log(data);
-      //     delete data[key];
-      //   }
-      // }
-      console.log(data);
       client.user.getAllUser
         .query(data)
         .then((rs) => {
@@ -176,25 +196,24 @@ 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;
+        data.province = this.province.id;
+        // data.province = this.province;
       }
       if (this.group) {
         data.group = this.group;
       }
       if (this.district) {
-        data.zone = this.district;
+        data.zone = this.district.id;
       }
-     
+
-      console.log(data);
+      // console.log(data);
       client.user.getAllUserCount
         .query(data)
         .then((rs) => {
-          this.count = rs;        
+          this.count = rs;
         })
         .catch((error) => {
           alert("ไม่สามารถโหลดข้อมูลได้");
@@ -235,6 +254,20 @@ export default {
           });
       }
     },
+    getUser(datap) {
+      client.user.getSelf
+        .mutate({})
+        .then((data) => {
+          let province = datap.filter((x) => x.id === data.zone.province);
+          this.province = province[0];
+          this.district = data.zone;
+          this.checkdata = { ...data };
+        })
+        .catch((error) => {
+          alert("ไม่สามารถโหลดข้อมูลได้");
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
   },
   mounted() {
     client.info.getAllGroups
@@ -251,6 +284,7 @@ export default {
       .query({})
       .then((data) => {
         this.provinceItems = data;
+        this.getUser(data);
       })
       .catch((error) => {
         alert("ไม่สามารถโหลดข้อมูลได้");

src/store/index.js

@@ -2,17 +2,24 @@ import { createStore } from "vuex";
 
 export default createStore({
   state: {
-    username:""
+    username:"",
+    img:""
   },
   getters: {
     getUsername: (state) => {
       return state.username
     },
+    getImg: (state) => {
+      return state.img
+    },
   },
   mutations: {
     setUsername: (state, payload) => {
       state.username = payload;
     },
+    setImg: (state, payload) => {
+      state.img = payload;
+    },
   },
   actions: {
     setLocalStorageValue(data) {

src/views/CheckDetail.vue

@@ -2,7 +2,7 @@
   <div class="bg-yellow-page mt-5">
     <v-container>
       <div class="text-title text-center mt-10">
-        ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้าม ของผู้ที่จะสมัคร สว.<br />
+        ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้าม ของผู้ที่จะสมัคร  สว.<br />
         <!-- <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon> -->
       </div>
       <div class="text-center mb-10">
@@ -106,7 +106,7 @@
           </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>
@@ -167,7 +167,7 @@
           </div>
           <div>
             <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
-            เป็นพนักงานหรือลูกจ้างของหน่วยราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจ
+            เป็นพนักงานหรือลูกจ้างของหน่วยงานราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจ
             หรือเป็นเจ้าหน้าที่อื่นของรัฐ
           </div>
           <div>
@@ -219,13 +219,13 @@
           </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>
-            เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตาแหน่งสมาชิกสภา ผู้แทนราษฎร
+            เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตำแหน่งสมาชิกสภา ผู้แทนราษฎร
             สมาชิกวุฒิสภา ข้าราชการการเมืองสมาชิกสภาท้องถิ่น
             หรือผู้บริหารท้องถิ่น ผู้สมัครรับเลือกเป็นสมาชิกวุฒิสภาในคราว
             เดียวกัน หรือผู้ดำรงตำแหน่งใดในศาลรัฐธรรมนูญหรือองค์กรอิสระ

src/views/CheckSurvey.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-
   <MainCheckVue/>
   </div>
 </template>

src/views/LoginForm.vue

@@ -1,30 +1,36 @@
 <template>
   <div>
-    <v-img
+    <div
-      class="mx-auto"
+      n
-      :aspect-ratio="1"
+      v-if="
-      src="@/assets/logo-title.png"
+        getUsername == '' || getUsername == null || getUsername == undefined
-      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">
+      <v-img
-        <div class="text-subtitle-1 text-medium-emphasis">ID card number</div>
+        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
+          <v-text-field
-          density="compact"
+            density="compact"
-          placeholder="เลขประจำตัว 13 หลัก"
+            placeholder="เลขประจำตัว 13 หลัก"
-          prepend-inner-icon="mdi-card-account-details"
+            prepend-inner-icon="mdi-card-account-details"
-          variant="outlined"
+            variant="outlined"
-          color="#4c884c"
+            color="#4c884c"
-          v-model="payload.cid"
+            v-model="payload.cid"
-          :rules="rules.id"
+            :rules="rules.id"
-        ></v-text-field>
+          ></v-text-field>
-        <!--   
+          <!--   
         <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
           Password
   
@@ -37,20 +43,20 @@
             Forgot login password?</a>
         </div> -->
 
-        <v-text-field
+          <v-text-field
-          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
+            :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
-          :type="visible ? 'text' : 'password'"
+            :type="visible ? 'text' : 'password'"
-          density="compact"
+            density="compact"
-          placeholder="เบอร์โทรศัพท์"
+            placeholder="เบอร์โทรศัพท์"
-          prepend-inner-icon="mdi-lock-outline"
+            prepend-inner-icon="mdi-lock-outline"
-          variant="outlined"
+            variant="outlined"
-          @click:append-inner="visible = !visible"
+            @click:append-inner="visible = !visible"
-          v-model="payload.phone"
+            v-model="payload.phone"
-          :rules="rules.tel"
+            :rules="rules.tel"
-          color="#4c884c"
+            color="#4c884c"
-        ></v-text-field>
+          ></v-text-field>
 
-        <!-- <v-card
+          <!-- <v-card
           class="mb-12"
           color="surface-variant"
           variant="tonal"
@@ -60,24 +66,65 @@
           </v-card-text>
         </v-card> -->
 
-        <v-btn
+          <v-btn
-          class="mb-8"
+            class="mb-8"
-          size="large"
+            size="large"
-          variant="tonal"
+            variant="tonal"
-          block
+            block
-          @click="login"
+            @click="login"
-          color="#4c884c"
+            color="#4c884c"
-          :disabled="!form1"
+            :disabled="!form1"
-        >
+          >
-          Log In
+            Log In
+          </v-btn>
+        </v-form>
+      </v-card>
+    </div>
+    <div v-if="getUsername" class="text-normal text-center py-10">
+      <v-icon
+        icon="mdi-alert-circle-outline"
+        size="35"
+        color="#4c884c"
+      ></v-icon>
+      คุณเข้าสู่ระบบอยู่แล้ว
+
+      <div class="mt-10">
+        <v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/">
+          <span class="text-normal"> กลับหน้าหลัก</span>
+
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/logo.png"
+            width="85"
+            style="position: absolute; bottom: -40px; left: -30px"
+          ></v-img>
         </v-btn>
-      </v-form>
+        <v-btn
-    </v-card>
+          elevated
+          color="#DD6C31"
+          class="text-normal btn-w ma-6"
+          height="85"
+          to="/search"
+        >
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/search.png"
+            width="90"
+            style="position: absolute; bottom: -45px; right: 0px"
+          ></v-img>
+          <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
+        </v-btn>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import { mapGetters } from "vuex";
 import { client } from "@/utils/trpc";
 export default {
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
   data: () => ({
     form1: false,
     visible: false,
@@ -99,7 +146,9 @@ export default {
         .mutate({})
         .then((data) => {
           localStorage.setItem("username", data.firstName);
+          localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
+          this.$store.commit("setImg", data.image);
           //   this.$emitter.emit("loginUser", data.firstName );
 
           this.$router.push("/");

src/views/ProfileUser.vue

@@ -1,13 +1,26 @@
 <template lang="">
-    <div>
+  <div>
-      <FormMain />
+    <FormMain v-if="getUsername" />
+    <div
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
     </div>
-  </template>
+  </div>
-  <script>
+</template>
-  import FormMain from "../components/edit/FormMainEdit.vue";
+<script>
-  export default {
+import FormMain from "../components/edit/FormMainEdit.vue";
-    components: { FormMain },
+import { mapGetters } from "vuex";
-  };
+
-  </script>
+export default {
-  <style lang=""></style>
+  components: { FormMain },
-  
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
+};
+</script>
+<style lang=""></style>

src/views/RegisterForm.vue

@@ -1,12 +1,26 @@
 <template lang="">
   <div>
-    <FormMain />
+    <FormMain v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "/>
+      <div
+      v-if="
+        getUsername"
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ คุณลงทะเบียนแสดงตัวตนแล้ว 
+    </div>
   </div>
 </template>
 <script>
+import { mapGetters } from "vuex";
 import FormMain from "../components/form/FormMain.vue";
 export default {
   components: { FormMain },
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
 };
 </script>
 <style lang=""></style>

src/views/SearchUser.vue

@@ -1,11 +1,24 @@
 <template>
   <div>
-    <FormMain />
+    <FormMain v-if="getUsername" />
+    <div
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
+    </div>
   </div>
 </template>
 <script>
 import FormMain from "../components/search/SearchMain.vue";
+import { mapGetters } from "vuex";
 export default {
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
   components: {
     FormMain,
   },