Atapy/sorvor-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

แก้ไข UI / UX ทำ function search ใหม่ ตามบรีฟพี่อาร์ม
All checks were successful
frontend-action / build-image (push) Successful in 1m22s
Details

Browse Source
This commit is contained in:
Jarinya
2024-04-25 19:11:29 +07:00
parent 6ae1017ad2
commit 5fc473780c
25 changed files with 623 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/App.vue
View File

@@ -15,18 +15,68 @@
<!-- {{ getUsernameFromLocalStorage }} -->
<span
><v-btn
icon="mdi-home-variant-outline"
variant="text"
href="/"
></v-btn
><v-btn variant="text" v-if="getUsername" to="/profile">
class="mr-3"
> <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></v-btn
>
<!-- <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-if="
getUsername == '' ||
getUsername == null ||
getUsername == undefined
"
to="/login"
style="font-size: medium;"
>
<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
<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");
this.img = localStorage.getItem("img");
if (this.getUsername == "") {
this.$store.commit("setUsername", this.username);
}
if (this.getImg == "") {
this.$store.commit("setImg", this.img);
}
},
};
</script>

21
src/components/FooterPage.vue Normal file
View File

@@ -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>

47
src/components/HeaderHome.vue
View File

@@ -8,6 +8,7 @@
:aspect-ratio="1"
src="../assets/logo-title.png"
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-col cols="12" md="">
<v-row style="height: 100%;width: 90%;" align="center" class="text-center ma-auto" >
<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="110"
height="85"
to="/check"
>
ตรวจสอบคุณสมบัติ
<br />
การเป็น สว.
<span class="text-normal"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
<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"
@@ -91,7 +104,7 @@
></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; */
}

11
src/components/MainVote.vue
View File

@@ -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
},

101
src/components/Section2Green.vue
View File

@@ -1,46 +1,80 @@
<template>
<div style="position: relative" class="bg-green-curve text-normal " >
<div class="text-center text-white py-5">
<div class="text-title my-3">มาศึกษาก่อนจะเป็น สว.</div>
<v-row>
<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" cols="12" md="">
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
<div
style="width: 90%"
class="text-center text-white py-10 pb-20 ma-auto"
v-if="
getUsername == '' || getUsername == null || getUsername == undefined
"
>
<div class="text-title my-3">มาลองสร้างตัวตนก่อนลงสมัคร สว.</div>
<div class="mb-8">
ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น ก่อนลงสมัคร สว. รอบจริง
</div>
<div>หน้าที่ของสว.</div>
</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 cols="12" md="">
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
<div>ขั้นตอนการเลือกสว.</div>
</v-col>
<v-col cols="12" md="">
<v-icon icon="mdi-circle" color="#B2C573"></v-icon>
<div>กลุ่มอาชีพ ผู้สมัครรับเลือกสว.</div>
</v-col>
</v-row>
<v-btn
elevated
color="#DD6C31"
class="text-normal btn-w"
height="85"
width="470"
to="/forms"
>
<v-img
:aspect-ratio="1"
src="../assets/Group 23.png"
width="80"
style="position: absolute; bottom: -40px; right: 0"
></v-img>
<span class="text-normal"> แสดงตนเป็นผู้สมัคร</span>
</v-btn>
</div>
<div class="text-center text-white py-10 pb-20" v-if="getUsername">
<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; */
}
.bg-green-black {
/* min-height: 600px; */
height: auto;
background-color: #4c884c;
/* background: #2b2b26 0% 0% no-repeat padding-box; */
}
.border-green {
@@ -48,8 +82,11 @@ export default {};
}
@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>

2
src/components/Section4White.vue
View File

@@ -1,6 +1,6 @@
<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>
<v-row align="center" justify="center">
<v-col

6
src/components/Section6Base.vue
View File

@@ -17,7 +17,7 @@
</div>
<div class="text-sub2">
ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือก สว.
ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกอระดับอำเภอ ระดับจังหวัด
ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกระดับอำเภอ ระดับจังหวัด
ระดับประเทศ
</div>
<!-- <br> -->
@@ -104,7 +104,7 @@
<div style="color: #4c884c; font-weight: 500">
การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
</div>
ผู้ได้คะแนนสูงสุดลำดับ 3 ลำดับแรก ของแต่ละกลุ่ม
ผู้ได้คะแนนสูงสุด 3 ลำดับแรก ของแต่ละกลุ่ม
เป็นผู้ได้รับเลือกระดับอำเภอ สำหรับกลุ่มนั้น
</div>
</div>
@@ -133,7 +133,7 @@
<div style="color: #dd6c31; font-weight: 500">
การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
</div>
ผู้ได้คะแนนสูงสุดลำดับ 2 ลำดับแรก ของแต่ละกลุ่ม
ผู้ได้คะแนนสูงสุด 2 ลำดับแรก ของแต่ละกลุ่ม
เป็นผู้ได้รับเลือกระดับจังหวัด สำหรับกลุ่มนั้น
</div>
</div>

27
src/components/Section8Base.vue
View File

@@ -10,11 +10,29 @@
<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
@@ -45,7 +63,6 @@
icon="mdi-skip-next"
rounded="circle"
size="xl"
color="#4c884c"
></v-btn>
</v-card>
@@ -106,7 +123,7 @@ export default {
{ text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
{ text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
{
text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
text: "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
idx: 13,
},
{ text: "กลุ่มสตรี", idx: 14 },

21
src/components/check/CheckList.vue
View File

@@ -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"
><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>

67
src/components/check/QuestionList.vue
View File

@@ -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,13 +230,39 @@
</v-container>
</div>
<div class="py-7 text-center" v-if="model > 16 && alertList.length">
<v-container class="text-black">
<div
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 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>
<!-- {{ alertList }} -->
<div
v-for="(txt, i) in alertList"
:key="i"
@@ -252,9 +274,13 @@
{{ txt.not }}
</div>
<br>
</v-card-item>
</v-card>
</div>
<v-btn
elevated
color="#DD6C31"
color="#1B76BA"
class="mt-4"
stacked
height="60"
@@ -411,7 +437,7 @@ export default {
vmodel: null,
},
{
txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกจากตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
color: "#8aa042",
not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
check: null,
@@ -427,7 +453,8 @@ export default {
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 โดยไม่ได้แจ้งเหตุ",

2
src/components/edit/FormMainEdit.vue
View File

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

47
src/components/edit/FormSteperEdit.vue
View File

@@ -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) ||
@@ -804,7 +809,7 @@ 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) {
@@ -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) => {
console.log("data", data);
.then(() => {
this.getUser();
})
.catch((error) => {
alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
@@ -887,12 +899,14 @@ export default {
client.user.updateUser
.mutate(data2)
.then((data) => {
console.log("data", data);
.then(() => {
// console.log("data", data);
this.uploadImage();
this.getUser();
alert("บันทึกข้อมูลสำเร็จ");
this.$router.push("/");
// if (!this.file) {
// this.getUser("to");
// } 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("ไม่สามารถโหลดข้อมูลได้");

2
src/components/form/FormMain.vue
View File

@@ -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">
แสดงตนเป็นผู้สมัคร

4
src/components/form/FormSteper.vue
View File

@@ -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);

74
src/components/search/SearchMain.vue
View File

@@ -8,10 +8,24 @@
width="250"
></v-img>
<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
@@ -84,6 +108,7 @@
<div class="text-center">
<v-pagination
v-if="count > 0"
v-model="page"
:length="Math.ceil(count / 10)"
rounded="circle"
@@ -105,6 +130,7 @@ export default {
},
data() {
return {
checkdata: "",
show: false,
load: false,
result: [],
@@ -126,28 +152,22 @@ export default {
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;
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) {
// delete data[key];
// }
// }
console.log(data);
// console.log(data);
client.user.getAllUser
.query(data)
.then((rs) => {
@@ -177,20 +197,19 @@ export default {
let data = {
offset: offset,
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) => {
@@ -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("ไม่สามารถโหลดข้อมูลได้");

9
src/store/index.js
View File

@@ -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) {

8
src/views/CheckDetail.vue
View File

@@ -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>
เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตาแหน่งสมาชิกสภา ผู้แทนราษฎร
เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตำแหน่งสมาชิกสภา ผู้แทนราษฎร
สมาชิกวุฒิสภา ข้าราชการการเมืองสมาชิกสภาท้องถิ่น
หรือผู้บริหารท้องถิ่น ผู้สมัครรับเลือกเป็นสมาชิกวุฒิสภาในคราว
เดียวกัน หรือผู้ดำรงตำแหน่งใดในศาลรัฐธรรมนูญหรือองค์กรอิสระ

1
src/views/CheckSurvey.vue
View File

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

49
src/views/LoginForm.vue
View File

@@ -1,5 +1,11 @@
<template>
<div>
<div
n
v-if="
getUsername == '' || getUsername == null || getUsername == undefined
"
>
<v-img
class="mx-auto"
:aspect-ratio="1"
@@ -74,10 +80,51 @@
</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-btn
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("/");

17
src/views/ProfileUser.vue
View File

@@ -1,13 +1,26 @@
<template lang="">
<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/edit/FormMainEdit.vue";
import { mapGetters } from "vuex";
export default {
components: { FormMain },
computed: {
...mapGetters(["getUsername", "getImg"]),
},
};
</script>
<style lang=""></style>

16
src/views/RegisterForm.vue
View File

@@ -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>

15
src/views/SearchUser.vue
View File

@@ -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,
},