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

update new desige
Some checks failed
frontend-action / build-image (push) Failing after 14s
Details

Browse Source
This commit is contained in:
Jarinya
2024-05-17 17:56:18 +07:00
parent d917a93db2
commit 7a4a908afc
16 changed files with 1314 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
package-lock.json generated
View File

@@ -10,7 +10,9 @@
"dependencies": {
"@mdi/font": "5.9.55",
"@trpc/client": "^10.45.2",
"compressorjs": "^1.2.1",
"filereader": "^0.10.3",
"pica": "^9.0.1",
"roboto-fontface": "*",
"thai-id-validator": "^1.1.3",
"vue": "^3.2.13",
@@ -3306,6 +3308,11 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"node_modules/blueimp-canvas-to-blob": {
"version": "3.29.0",
"resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
"integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
},
"node_modules/body-parser": {
"version": "1.20.2",
"resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.2.tgz",
@@ -3918,6 +3925,15 @@
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true
},
"node_modules/compressorjs": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
"integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
"dependencies": {
"blueimp-canvas-to-blob": "^3.29.0",
"is-blob": "^2.1.0"
}
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -6403,6 +6419,11 @@
"node": ">=10"
}
},
"node_modules/glur": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
"integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA=="
},
"node_modules/gopd": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -6893,6 +6914,17 @@
"node": ">=8"
}
},
"node_modules/is-blob": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
"integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==",
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -10372,6 +10404,15 @@
"multicast-dns": "cli.js"
}
},
"node_modules/multimath": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/multimath/-/multimath-2.0.0.tgz",
"integrity": "sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==",
"dependencies": {
"glur": "^1.1.2",
"object-assign": "^4.1.1"
}
},
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
@@ -10618,7 +10659,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -11012,6 +11052,17 @@
"node": ">=8"
}
},
"node_modules/pica": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/pica/-/pica-9.0.1.tgz",
"integrity": "sha512-v0U4vY6Z3ztz9b4jBIhCD3WYoecGXCQeCsYep+sXRefViL+mVVoTL+wqzdPeE+GpBFsRUtQZb6dltvAt2UkMtQ==",
"dependencies": {
"glur": "^1.1.2",
"multimath": "^2.0.0",
"object-assign": "^4.1.1",
"webworkify": "^1.5.0"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -14286,6 +14337,11 @@
"node": ">=0.8.0"
}
},
"node_modules/webworkify": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/webworkify/-/webworkify-1.5.0.tgz",
"integrity": "sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g=="
},
"node_modules/whatwg-encoding": {
"version": "1.0.5",
"resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@@ -17275,6 +17331,11 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"blueimp-canvas-to-blob": {
"version": "3.29.0",
"resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
"integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
},
"body-parser": {
"version": "1.20.2",
"resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.2.tgz",
@@ -17781,6 +17842,15 @@
}
}
},
"compressorjs": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
"integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
"requires": {
"blueimp-canvas-to-blob": "^3.29.0",
"is-blob": "^2.1.0"
}
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -19710,6 +19780,11 @@
"slash": "^3.0.0"
}
},
"glur": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
"integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA=="
},
"gopd": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -20098,6 +20173,11 @@
"binary-extensions": "^2.0.0"
}
},
"is-blob": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
"integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
},
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -22854,6 +22934,15 @@
"thunky": "^1.0.2"
}
},
"multimath": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/multimath/-/multimath-2.0.0.tgz",
"integrity": "sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==",
"requires": {
"glur": "^1.1.2",
"object-assign": "^4.1.1"
}
},
"mz": {
"version": "2.7.0",
"resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
@@ -23052,8 +23141,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
},
"object-inspect": {
"version": "1.13.1",
@@ -23369,6 +23457,17 @@
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
"dev": true
},
"pica": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/pica/-/pica-9.0.1.tgz",
"integrity": "sha512-v0U4vY6Z3ztz9b4jBIhCD3WYoecGXCQeCsYep+sXRefViL+mVVoTL+wqzdPeE+GpBFsRUtQZb6dltvAt2UkMtQ==",
"requires": {
"glur": "^1.1.2",
"multimath": "^2.0.0",
"object-assign": "^4.1.1",
"webworkify": "^1.5.0"
}
},
"picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -25852,6 +25951,11 @@
"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
"dev": true
},
"webworkify": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/webworkify/-/webworkify-1.5.0.tgz",
"integrity": "sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g=="
},
"whatwg-encoding": {
"version": "1.0.5",
"resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",

2
package.json
View File

@@ -11,7 +11,9 @@
"dependencies": {
"@mdi/font": "5.9.55",
"@trpc/client": "^10.45.2",
"compressorjs": "^1.2.1",
"filereader": "^0.10.3",
"pica": "^9.0.1",
"roboto-fontface": "*",
"thai-id-validator": "^1.1.3",
"vue": "^3.2.13",

35
src/App.vue
View File

@@ -13,12 +13,19 @@
></span>
<!-- {{ getUsernameFromLocalStorage }} -->
<span
><v-btn
<span>
<v-btn
variant="text"
href="/"
class="mr-3"
> <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></v-btn
class="px-1"
to="/check"
>
<v-icon icon="mdi-file-document-outline " size="25"></v-icon>
ตรวจสอบสิทธิ์
</v-btn>
<v-btn variant="text" href="/" class="px-1" >
<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
@@ -26,29 +33,31 @@
<!-- <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-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-btn elevated color="#F4C03F" v-bind="props" height="40" class="mt-2 px-2" >
<!-- {{ getImg }} -->
<v-avatar
color="#635d56"
v-if="getImg"
:image="getImg"
size="30"
size="35"
>
</v-avatar
><v-avatar size="40" v-else>
@@ -58,7 +67,9 @@
size="30"
></v-icon>
</v-avatar>
<span class="ml-3" style="font-size: medium;">{{ getUsername }}</span>
<span class="ml-2" style="font-size: medium">{{
getUsername
}}</span>
</v-btn></template
>
<v-list>
@@ -129,7 +140,7 @@ export default {
if (this.getUsername == "") {
this.$store.commit("setUsername", this.username);
}
if (this.getImg == ""||this.getImg == null||this.getImg == undefined) {
if (this.getImg == "" || this.getImg == null || this.getImg == undefined) {
this.$store.commit("setImg", this.img);
}
},

BIN
src/assets/logo-title-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

35
src/components/HeaderHome.vue
View File

@@ -19,7 +19,7 @@
</div>
<div class="text-center pa-4">
<v-btn
<!-- <v-btn
@click="dialog = true"
elevated
color="#B2C573"
@@ -30,7 +30,7 @@
width="470"
>
<span class="text-normal"> ขั้นตอนการใช้งานระบบ</span>
</v-btn>
</v-btn> -->
<v-dialog v-model="dialog" width="100%">
<v-card width="100%">
@@ -46,23 +46,11 @@
</v-card>
</v-dialog>
</div>
<!-- <v-btn
elevated
color="#B2C573"
class="mt-4 text-normal"
style="color: #0f470f"
size="large"
height="80"
@click="checkPage"
>
<span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
</v-btn> -->
</v-col>
</v-row>
</div>
</div>
<div style="position: relative" class="bg-curve" id="started">
<div style="position: relative" class="bg-curve d-none" id="started">
<v-row
style="height: 100%; width: 90%"
align="center"
@@ -100,7 +88,9 @@
height="85"
to="/check"
>
<span class="text-normal" style="white-space: break-spaces;"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
<span class="text-normal" style="white-space: break-spaces">
ตรวจสอบคุณสมบัติการเป็น สว.</span
>
<v-img
:aspect-ratio="1"
src="../assets/Group 9.png"
@@ -194,10 +184,12 @@ export default {
transform: translate(-50%, -50%);
}
.bg-curve {
position: relative;
top: -59px;
background-size: cover;
padding-top: 50px;
padding-top: 70px;
background-image: url("/src/assets/Path\ 14.png");
height: 580px;
height: 450px;
background-position: center top;
/* background: #2b2b26 0% 0% no-repeat padding-box; */
}
@@ -210,8 +202,9 @@ export default {
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
.bg-curve {
height: 530px;
}
height: 450px;
position: relative;
top: -79px;
}
}
</style>

6
src/components/MainVote.vue
View File

@@ -2,7 +2,7 @@
<div class="bg-main">
<Header />
<Section2Green />
<Section3Base />
<!-- <Section3Base /> -->
<Section4White/>
<Section5Green/>
<Section6Base/>
@@ -16,7 +16,7 @@ import { mapGetters } from "vuex";
// import { client } from "@/utils/trpc";
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";
@@ -29,7 +29,7 @@ export default {
components: {
Header,
Section2Green,
Section3Base,
// Section3Base,
Section4White,
Section5Green,
Section6Base,

12
src/components/Section2Green.vue
View File

@@ -1,19 +1,19 @@
<template>
<div style="position: relative" class="bg-green-curve text-normal " >
<div style="position: relative" class="text-normal bg-curve my-auto" >
<div
style="width: 90%"
class="text-center text-white py-10 pb-20 mx-auto"
class="text-center text-white py-10 mx-auto my-auto"
v-if="
getUsername == '' || getUsername == null || getUsername == undefined
"
>
<div class="text-subtitle mx-10 text-center box-order mx-auto my-5" style="color:#ffffff;">
<div class="text-subtitle mx-10 text-center box-order mx-auto my-5 d-none" style="color:#ffffff;">
ขั้นตอนที่
<v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
</div>
<div class="text-title my-3">มาลองสร้างตัวตนก่อนลงสมัคร สว.</div>
<div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div>
<div class="mb-8">
ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น ก่อนลงสมัคร สว. รอบจริง
ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น สมัคร สว.
</div>
<v-btn
@@ -30,7 +30,7 @@
width="80"
style="position: absolute; bottom: -40px; right: 0"
></v-img>
<span class="text-normal"> แสดงตนเป็นผู้สมัคร</span>
<span class="text-normal"> ลงทะเบียนผู้สมัคร</span>
</v-btn>
</div>
<div class="text-center text-white py-10 pb-20 mx-auto" v-if="getUsername" style="width: 90%">

8
src/components/Section4White.vue
View File

@@ -1,7 +1,11 @@
<template>
<div style="position: relative" class="text-normal pb-10">
<div class="text-center txt-black py-5 ma-auto" style="width: 90%">
<div class="text-title my-3">หน้าที่ของ สว.</div>
<div class="text-center txt-black pb-5 ma-auto" style="width: 90%">
<div class=" mb-3 text-normal "><b>หมวดข้อมูลทั่วไป</b> <div class="text-sub3"> (สำหรับอ่าน)</div> </div>
<v-divider class="my-5 w-50 mx-auto mb-9" color="#4a4444"></v-divider>
<!-- <hr style="color: black;"> -->
<div class="text-title mb-3 ">หน้าที่ของ สว. </div>
<v-row align="center" justify="center">
<v-col
class="border-dot"

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

@@ -42,7 +42,6 @@
v-model="payload.firstName"
class="my-2"
></v-text-field>
<v-text-field
label="นามสกุล / LastName"
variant="solo"
@@ -52,6 +51,9 @@
></v-text-field>
<div class="text-medium-emphasis" style="font-size: 15px">
กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
<span class="text-red-accent-4 ml-2">
* ใช้เป็น username
</span>
</div>
<v-text-field
label="เลขบัตรประชาชน / ID card number"
@@ -62,16 +64,33 @@
readonly
class="mb-2"
></v-text-field>
<div class="text-medium-emphasis" style="font-size: 15px">
กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
<span class="text-red-accent-4 ml-2">
* ใช้เป็น password
</span>
</div>
<v-text-field
label="เบอร์โทรศัพท์"
variant="solo"
:rules="rules.tel"
v-model="payload.phone"
type="number"
hide-spin-buttons
class="my-2"
readonly
></v-text-field>
<v-text-field
label="หมายเลขผู้สมัคร"
variant="solo"
:rules="rules.required"
v-model="payload.registerno"
type="number"
hide-spin-buttons
class="my-2"
></v-text-field>
<v-row>
<v-col class="py-3" cols="12" md="6">
<!-- <v-text-field
label="อายุ / Age"
variant="solo"
:rules="rules.required"
counter-value="true"
></v-text-field> -->
<v-text-field
label="อายุ / Age"
variant="solo"
@@ -91,20 +110,21 @@
</v-col>
</v-row>
<v-text-field
<v-select
label="ประวัติการศึกษา / Education"
variant="solo"
:rules="rules.required"
v-model="payload.education"
></v-text-field>
:items="educateItem"
></v-select>
<v-text-field
<!-- <v-text-field
label="เบอร์โทรศัพท์"
variant="solo"
:rules="rules.tel"
v-model="payload.phone"
readonly
></v-text-field>
></v-text-field> -->
</v-col>
<v-col class="">
@@ -122,7 +142,12 @@
<v-img :src="url" v-if="url"></v-img>
<v-icon dark v-else size="80"> mdi-account </v-icon>
</v-avatar>
<!-- :rules="rules.files" -->
<v-progress-linear
color="yellow-darken-2"
:indeterminate="loadimg"
class="mt-3"
></v-progress-linear>
<v-file-input
label="แนบรูปภาพ"
accept="image/png, image/jpeg, image/bmp"
@@ -130,8 +155,7 @@
prepend-inner-icon="mdi-camera"
prepend-icon=""
variant="solo-filled"
class="mt-5"
:rules="rules.files"
class="mt-0"
@change="onFileChanged($event)"
v-model="image"
></v-file-input>
@@ -179,8 +203,8 @@
<!-- {{payload.group}} -->
<v-radio-group v-model.number="payload.group.id">
<v-radio
class="text-sub2"
:label="item.name"
class="text-sub2 my-2"
:label="item.id + '). ' + item.name"
:value="item.id"
v-for="(item, i) in items"
:key="i"
@@ -188,7 +212,7 @@
</v-radio-group>
</v-col>
<v-col>
<v-card>
<div>
<div class="text-sub">
จังหวัดที่คุณประสงค์จะลงสมัคร*
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -216,10 +240,11 @@
v-model.number="payload.zone.province"
placeholder="จังหวัด"
@update:modelValue="filterData('')"
bg-color="#f6ebd5"
></v-autocomplete>
</div>
</v-card>
<v-card>
</div>
<div>
<div class="text-sub">
อำเภอที่คุณประสงค์จะลงสมัคร*
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -238,6 +263,7 @@
</div>
<!-- {{ payload.zone }} -->
<v-autocomplete
bg-color="#f6ebd5"
label="อำเภอ / เขต"
:items="districtItems"
variant="solo"
@@ -248,7 +274,7 @@
:disabled="payload.zone.province == null"
></v-autocomplete>
</div>
</v-card>
</div>
</v-col>
</v-row>
<div class="btn-next">
@@ -377,7 +403,11 @@
></v-textarea> -->
<div class="btn-next">
<v-btn @click="e1--" variant="tonal" size="large" class="float-left"
<v-btn
@click="e1--"
variant="tonal"
size="large"
class="float-left"
>ก่อนหน้า</v-btn
>
<!-- <v-spacer></v-spacer> -->
@@ -406,7 +436,7 @@
<div>
<div>ช่วงที่ 4</div>
<div class="text-subtitle">
ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
<hr class="my-3" />
</div>
<!-- <v-card class="mt-8 text-sub">
@@ -520,36 +550,34 @@
height="40"
@click="submit"
:disabled="!check"
:loading="load"
>
<span class="text-sub">บันทึก</span>
</v-btn>
</div>
<div class="btn-next">
<v-btn @click="e1--" class="float-left" size="large" variant="tonal"
>ก่อนหน้า</v-btn
>
</div>
<div class="btn-next">
<v-btn
@click="e1--"
class="float-left"
size="large"
variant="tonal"
>ก่อนหน้า</v-btn
>
</div>
</v-card>
</div>
</v-stepper-window-item>
</v-stepper-window>
<!-- <v-stepper-actions
v-show="e1 == 4"
:disabled="disabled"
@click:next="next"
@click:prev="prev"
></v-stepper-actions>-->
<!-- <LoadSave :dialog="load" /> -->
</template>
</v-stepper>
</div>
</v-container>
</template>
<script>
// import Provinces from "./provinces.json";
// import Districts from "./districts.json";
// import LoadSave from "../form/LoadSave.vue";
import pica from "pica";
import Compressor from "compressorjs";
import { client } from "@/utils/trpc";
import { createFormData } from "@/utils/fileUpload";
import validateThaiID from "thai-id-validator";
@@ -557,6 +585,7 @@ import { mapGetters } from "vuex";
// client.info.getAllGroups.query({}).then(console.log);
export default {
components: { },
watch: {
image(val) {
console.log(val);
@@ -592,6 +621,18 @@ export default {
data() {
return {
loadimg: false,
educateItem: [
"ต่ำกว่าระดับประถม",
"ระดับประถม",
"ระดับมัธยมต้น",
"ระดับมัธยมปลาย",
"ระดับอาชีวศึกษา",
"ระดับปริญญาตรี",
"ระดับปริญญาโท",
"ระดับปริญญาเอก",
],
load: false,
check: false,
form1: false,
form2: false,
@@ -678,6 +719,7 @@ export default {
group: null,
zone: null,
province: null,
registerno: null,
// opinions: [
// {
// opinionId: "",
@@ -798,27 +840,118 @@ export default {
}
},
onFileChanged(event) {
this.loadimg = true;
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();
this.resizeAndCompressImage(this.file);
} else {
this.url = null;
}
},
resizeAndCompressImage(file) {
const picaInstance = pica();
const img = new Image();
const reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
img.onload = () => {
const canvas = document.createElement("canvas");
const maxWidth = 1024;
const maxHeight = 1024;
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
picaInstance
.resize(img, canvas, {
quality: 3,
alpha: true,
})
.then((result) => picaInstance.toBlob(result, "image/jpeg", 0.8))
.then((blob) => {
if (blob.size > 3 * 1024 * 1024) {
new Compressor(blob, {
quality: 0.6,
maxWidth: 1024,
maxHeight: 1024,
success: (compressedBlob) => {
const compressedFile = new File(
[compressedBlob],
file.name,
{ type: file.type, lastModified: Date.now() }
);
this.file = compressedFile;
this.createUrlFromBlob(compressedFile);
},
error: (err) => {
console.error("Compression error:", err);
},
});
} else {
const resizedFile = new File([blob], file.name, {
type: file.type,
lastModified: Date.now(),
});
this.file = resizedFile;
this.createUrlFromBlob(resizedFile);
this.loadimg = false;
}
})
.catch((err) => {
console.error("Resize error:", err);
});
};
};
reader.readAsDataURL(file);
},
createUrlFromBlob(blob) {
const reader = new FileReader();
reader.onload = (event) => {
this.url = event.target.result;
};
reader.readAsDataURL(blob);
},
// 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;
// }
// },
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);
this.load = false;
alert("บันทึกข้อมูลสำเร็จ");
this.$router.push("/");
});
@@ -840,12 +973,22 @@ export default {
}).then(() => {
client.user.confirmChangeImage.mutate().then(() => {
this.getUserAfterEdit();
});
}).catch((error) => {
console.log('error.message',error.message);
alert(
"บันทึกรูปภาพไม่สำเร็จ!"
);
this.getUserAfterEdit();
// alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
});
// alert("บันทึกข้อมูลสำเร็จ");
});
console.log("done");
},
submit() {
this.load = true;
let dataOption = [...this.option1, ...this.option2];
let checkOption = [...this.payload.opinions];
@@ -1005,6 +1148,12 @@ export default {
};
</script>
<style>
.v-input--density-default .v-field__input {
font-size: larger;
}
.v-selection-control {
align-items: start !important;
}
/* [class$="--disabled"],
[class*="--disabled "] * {
color: #000 !important;
@@ -1035,6 +1184,9 @@ export default {
opacity: 1;
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
.text-red-accent-4 {
display: block;
}
.col2 {
column-count: 1 !important;
}
@@ -1053,5 +1205,10 @@ export default {
font-size: 17px;
opacity: 1;
}
.v-stepper-item__avatar.v-avatar {
width: 33px !important;
height: 33px !important;
font-size: 25px;
}
}
</style>

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

@@ -52,6 +52,9 @@
></v-text-field>
<div class="text-medium-emphasis" style="font-size: 15px">
กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
<span class="ml-2 text-red-accent-4">
* ใช้เป็น username
</span>
</div>
<v-text-field
label="เลขบัตรประชาชน / ID card number"
@@ -63,7 +66,30 @@
hide-spin-buttons
class="mb-2"
></v-text-field>
<div class="text-medium-emphasis" style="font-size: 15px">
กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
<span class="text-red-accent-4 ml-2">
* ใช้เป็น password
</span>
</div>
<v-text-field
label="เบอร์โทรศัพท์"
variant="solo"
:rules="rules.tel"
v-model="payload.phone"
type="number"
hide-spin-buttons
class="my-2"
></v-text-field>
<v-text-field
label="หมายเลขผู้สมัคร"
variant="solo"
:rules="rules.required"
v-model="payload.registerno"
type="number"
hide-spin-buttons
class="my-2"
></v-text-field>
<v-row>
<v-col class="py-3" cols="12" md="6">
<!-- <v-text-field
@@ -92,23 +118,14 @@
</v-col>
</v-row>
<v-text-field
<v-select
label="ประวัติการศึกษา / Education"
variant="solo"
:rules="rules.required"
v-model="payload.education"
class="my-2"
></v-text-field>
<v-text-field
label="เบอร์โทรศัพท์"
variant="solo"
:rules="rules.tel"
v-model="payload.phone"
type="number"
hide-spin-buttons
class="my-2"
></v-text-field>
:items="educateItem"
></v-select>
</v-col>
<v-col class="">
@@ -126,7 +143,11 @@
<v-img :src="url" v-if="url"></v-img>
<v-icon dark v-else size="80"> mdi-account </v-icon>
</v-avatar>
<v-progress-linear
color="yellow-darken-2"
:indeterminate="loadimg"
class="mt-3"
></v-progress-linear>
<v-file-input
label="แนบรูปภาพ"
accept="image/png, image/jpeg, image/bmp"
@@ -135,7 +156,6 @@
prepend-icon=""
variant="solo-filled"
class="mt-5"
:rules="rules.files"
@change="onFileChanged($event)"
v-model="image"
></v-file-input>
@@ -182,8 +202,8 @@
<!-- {{payload.group}} -->
<v-radio-group v-model.number="payload.group">
<v-radio
class="text-sub2"
:label="item.name"
class="text-sub2 my-2"
:label="item.id + '). ' + item.name"
:value="item.id"
v-for="(item, i) in items"
:key="i"
@@ -191,7 +211,7 @@
</v-radio-group>
</v-col>
<v-col>
<v-card>
<div>
<div class="text-sub">
จังหวัดที่คุณประสงค์จะลงสมัคร*
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -210,6 +230,7 @@
</div>
<!-- {{ province }} -->
<v-autocomplete
bg-color="#f6ebd5"
label="จังหวัด"
:items="provinceItems"
variant="solo"
@@ -220,8 +241,8 @@
@update:modelValue="filterData"
></v-autocomplete>
</div>
</v-card>
<v-card>
</div>
<div>
<div class="text-sub">
อำเภอที่คุณประสงค์จะลงสมัคร*
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -240,6 +261,7 @@
</div>
<!-- {{ payload.zone }} -->
<v-autocomplete
bg-color="#f6ebd5"
label="อำเภอ / เขต"
:items="districtItems"
variant="solo"
@@ -250,7 +272,7 @@
:disabled="payload.province == null"
></v-autocomplete>
</div>
</v-card>
</div>
</v-col>
</v-row>
<div class="btn-next">
@@ -408,7 +430,7 @@
</v-card> -->
<v-card class="mt-8 text-sub">
<div class="text-subtitle">
ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
<hr class="my-3" />
</div>
<v-row>
@@ -500,13 +522,14 @@
ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
*ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
</div>
<div class="text-center mb-5">
<div class="text-center mb-5 mt-2">
<v-btn
color="#DD6C31"
class="mt-4"
height="40"
@click="submit"
:disabled="!check"
:loading="load"
>
<span class="text-sub">บันทึก</span>
</v-btn>
@@ -545,6 +568,8 @@ import { client } from "@/utils/trpc";
import { createFormData } from "@/utils/fileUpload";
import validateThaiID from "thai-id-validator";
// client.info.getAllGroups.query({}).then(console.log);
import pica from "pica";
import Compressor from "compressorjs";
export default {
watch: {
image(val) {
@@ -580,6 +605,18 @@ export default {
data() {
return {
loadimg: false,
educateItem: [
"ต่ำกว่าระดับประถม",
"ระดับประถม",
"ระดับมัธยมต้น",
"ระดับมัธยมปลาย",
"ระดับอาชีวศึกษา",
"ระดับปริญญาตรี",
"ระดับปริญญาโท",
"ระดับปริญญาเอก",
],
load: false,
check: false,
form1: false,
form2: false,
@@ -666,6 +703,7 @@ export default {
group: null,
zone: null,
province: null,
registerno: null,
// opinions: [
// {
// opinionId: "",
@@ -748,21 +786,95 @@ export default {
},
methods: {
onFileChanged(event) {
this.loadimg = true;
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();
this.resizeAndCompressImage(this.file);
} else {
this.url = null;
}
},
resizeAndCompressImage(file) {
const picaInstance = pica();
const img = new Image();
const reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
img.onload = () => {
const canvas = document.createElement("canvas");
const maxWidth = 1024;
const maxHeight = 1024;
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
picaInstance
.resize(img, canvas, {
quality: 3,
alpha: true,
})
.then((result) => picaInstance.toBlob(result, "image/jpeg", 0.8))
.then((blob) => {
if (blob.size > 3 * 1024 * 1024) {
new Compressor(blob, {
quality: 0.6,
maxWidth: 1024,
maxHeight: 1024,
success: (compressedBlob) => {
const compressedFile = new File(
[compressedBlob],
file.name,
{ type: file.type, lastModified: Date.now() }
);
this.file = compressedFile;
this.createUrlFromBlob(compressedFile);
},
error: (err) => {
console.error("Compression error:", err);
},
});
} else {
const resizedFile = new File([blob], file.name, {
type: file.type,
lastModified: Date.now(),
});
this.file = resizedFile;
this.createUrlFromBlob(resizedFile);
this.loadimg = false;
}
})
.catch((err) => {
console.error("Resize error:", err);
});
};
};
reader.readAsDataURL(file);
},
createUrlFromBlob(blob) {
const reader = new FileReader();
reader.onload = (event) => {
this.url = event.target.result;
};
reader.readAsDataURL(blob);
},
async uploadImage() {
if (!this.file) {
return;
@@ -775,17 +887,24 @@ export default {
await fetch(request.postURL, {
method: "POST",
body: formData,
}).then(() => {
client.user.confirmChangeImage.mutate().then(() => {
})
.then(() => {
client.user.confirmChangeImage.mutate().then(() => {
this.getUser();
// alert(
// "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
// );
});
})
.catch((error) => {
console.log("error.message", error.message);
this.getUser();
// alert(
// "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
// );
// alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
});
});
console.log("done");
},
submit() {
this.load = true;
let dataOption = [...this.option1, ...this.option2];
const filterOpt = dataOption.map((item) => {
return {
@@ -836,12 +955,12 @@ export default {
if (this.file) {
this.uploadImage();
} else {
alert(
"บันทึกรูปภาพไม่สำเร็จ!"
);
this.getUser();
// alert(
// "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
// );
}
}
})
.catch((error) => {
alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
@@ -852,10 +971,10 @@ export default {
client.user.login
.mutate(payload)
.then((data) => {
this.load = false;
this.$store.commit("setCheckLogin", false);
localStorage.setItem("token", data.token);
this.$router.push("/");
})
.catch((error) => {
alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
@@ -952,6 +1071,12 @@ export default {
};
</script>
<style>
div.text-sub
> div.v-input.v-input--horizontal.v-input--center-affix.v-input--density-default.v-locale--is-ltr.v-input--dirty.v-text-field.v-autocomplete.v-autocomplete--single,
.v-autocomplete .v-autocomplete__selection-text {
font-size: large !important;
font-weight: 600 !important;
}
.btn-next {
padding: 1.5rem 0 0;
}

36
src/components/form/LoadSave.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div class="pa-4 text-center">
<v-dialog v-model="props" max-width="320" persistent>
<v-card max-width="600">
<div class="px-10 py-10 text-center">
<v-progress-circular
color="primary"
indeterminate="disable-shrink"
size="50"
width="6"
></v-progress-circular>
<div class="text-subtitle mt-5">กำลังบันทึกข้อมูล...</div>
</div>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
props: {
dialog: { type: Boolean },
},
data() {
return {
// dialog: true,
};
},
watch: {
// dialog(val) {
// if (!val) return;
// setTimeout(() => (this.dialog = false), 4000);
// },
},
};
</script>

252
src/components/search/CardUser.vue
View File

@@ -2,7 +2,7 @@
<div class="pa-lg-8 pa-md-8 pa-sm-3">
<div
style="
background-color: #4c884c;
background-color: #f6b0e5;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
border-radius: 20px;
@@ -10,134 +10,108 @@
class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
>
<!-- {{ dataProfile }} -->
<v-row>
<v-row class="page-search">
<v-col
v-for="(item, i) in dataProfile"
:key="i"
cols="12"
md="12"
lg="12"
lg="6"
>
<v-card
elevation="7"
class="text-sub2 mx-auto pb-8 card-user"
class="text-sub2 mx-auto py-3 card-user"
maxWidth="900"
rounded="xl"
>
<!-- <div
style="background: #37332f; color: white; width: 100%"
class="font-weight-bold pa-2 w-100 text-center"
>
<div class="more" v-if="item.group">
<v-avatar color="#f4c03f" size="35" class="mr-2"
>{{ item.group.id }}
</v-avatar>
{{ item.group.name }}
</div>
</div> -->
<v-card-item class="mt-3">
<v-row align="left">
<v-col cols="12" md="auto" class="text-center my-auto">
<v-card-item>
<v-row align="left" style="min-height: 450px">
<v-col cols="12" md="5" class="text-center my-auto">
<!-- {{ item.image }} -->
<v-img
v-if="item.image"
v-if="item && item.image"
:src="item.image"
:width="150"
:height="180"
aspect-ratio="16/9"
cover
rounded="xl"
class="mx-auto"
class="mx-auto img-display"
>
</v-img
><v-avatar color="#635d56" size="100" class="mx-auto" v-else>
<v-icon icon="mdi-account" color="" size="80"></v-icon>
</v-avatar>
><v-avatar
color="#635d56"
size="180"
class="mx-auto my-auto"
v-else
></v-avatar>
</v-col>
<v-col cols="12" md="" class="mx-auto px-5">
<div class="font-weight-bold text-normal my-2 text-md-left">
<span> {{ item.firstName }}</span>
<span class="ml-3">
{{ item.lastName }}
<span v-if="item.age" class="text-sub2">
({{ item.age }}ปี)</span
></span
>
<div
class="px-3 py-2 text-sub2 box-province"
v-if="item.zone"
>
<!-- <div
class="py-2 px-3"
v-if="item.group"
style="
background-color: #f7d278;
border-radius: 10px 10px 0px 0px;
"
>
<v-avatar color="#37332F" size="35" class="mr-2"
>{{ item.group.id }}
</v-avatar>
{{ item.group.name }}
</div> -->
<div
class="font-weight-bold py-2 px-3"
style="background-color: #f4c03f; border-radius: 10px"
>
{{ item.zone.province.name }} |
<span class="font-weight-medium">{{
item.zone.name
}}</span>
<v-col cols="12" md="" class="mx-auto">
<v-row>
<v-col>
<div class="box-group">
<div>กลุ่มที่</div>
<div
class="font-weight-bold"
style="font-size: xxx-large"
>
{{ item.group.id }}
</div>
</div>
<!-- <hr> -->
</div>
<v-row
class="text-sub2 line-g mb-2 my-2 mx-3"
>
<v-col
class="line-r-g py-md-0"
cols="auto"
style="background-color: #f4c03f"
>
<div class="mx-2 text-normal py-0 my-auto">
{{ item.group.id }}
</v-col>
<v-col>
<div class="box-group">
<div>หมายเลขผู้สมัคร</div>
<div style="font-size: xxx-large">
<div class="font-weight-bold" v-if="item.registerno">
{{ item.registerno }}
</div>
</v-col>
<v-col class="text-left py-0 my-auto ">
<div class="mx-auto "> {{ item.group.name }}</div>
</v-col>
</v-row>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-row class="text-subtitle line-g mb-2 d-none">
<v-col class="line-r-g" cols="auto">
<span class="mx-2 "> {{ item.group.id }} </span>
</v-col>
<v-col class="text-left">
<span class="mx-5"> {{ item.group.name }}</span>
</v-col>
<div class="font-weight-bold" v-else>2352</div>
</div>
</div></v-col
>
</v-row>
<div class="text-small text-left">
<div class="font-weight-medium">
<span class="font-weight-bold">อาชีพ :</span>
{{ item.job }}
<div
class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4"
v-if="item.zone"
>
<div class="font-weight-bold px-3">
{{ item.zone.province.name }} |
<span class="font-weight-medium">{{
item.zone.name
}}</span>
</div>
<div class="font-weight-medium">
<span class="font-weight-bold">การศึกษา :</span>
{{ item.education }}
</div>
<div class="font-weight-bold text-normal my-2 text-md-left">
<div style="font-size: xx-large">
<span> {{ item.firstName }}</span>
<span class="ml-3">
{{ item.lastName }}
</span>
</div>
<div class="mx-auto text-md-left text-sub2 mb-2">
{{ item.group.name }}
</div>
<div class="text-sub2 text-left mt-5 text-medium-emphasis">
<div class="font-weight-medium">
<span class="font-weight-bold"> อายุ :</span>
{{ item.age }} ปี
</div>
<div class="font-weight-medium">
<span class="font-weight-bold">อาชีพ :</span>
{{ item.job }}
</div>
<div class="font-weight-medium">
<span class="font-weight-bold">การศึกษา :</span>
{{ item.education }}
</div>
</div>
</div>
</v-col>
</v-row>
<div class="text-left text-small my-3">
<v-row> </v-row>
<div class="text-left text-small mt-3 d-none">
<div class="text-small font-weight-bold">ช่องทางติดต่อ</div>
<v-divider class="my-1"></v-divider>
@@ -192,25 +166,6 @@
><span v-else> - </span>
</div>
</div>
<!-- <div class="text-small font-weight-bold text-left d-none">
จุดยืน
<v-divider class="my-1"></v-divider>
<v-row class="text-small" style="height: 150px; overflow: auto">
<v-col class="text-left">
<div class="font-weight-bold">เห็นด้วย :</div>
<div v-for="(ag, k) in item.opinion.agree" :key="k">
{{ ag }}
</div>
</v-col>
<v-col class="text-left">
<div class="font-weight-bold">ไม่เห็นด้วย :</div>
<div v-for="(ag, k) in item.opinion.disagree" :key="k">
{{ ag }}
</div>
</v-col>
</v-row>
</div> -->
</v-card-item>
</v-card></v-col
>
@@ -402,13 +357,27 @@ export default {
};
</script>
<style>
.img-display {
height: 450px;
}
.box-group {
border-radius: 5px;
background-color: #ffcd68;
border-radius: 10px;
width: -webkit-fill-available;
width: fit-content;
min-width: 100%;
padding: 10px 2px;
height: 100%;
}
.line-r-g {
padding-left: 5px;
border-color: #f4c03f;
border-right: 0.2px solid #f4c03f;
border-color: #ffcd68;
border-right: 0.2px solid #ffcd68;
}
.line-g {
border: 1px solid #f4c03f;
border: 1px solid #ffcd68;
display: inline-flex;
}
.card-user {
height: 100%;
@@ -423,24 +392,37 @@ export default {
}
.box-province {
border-radius: 5px;
background-color: #ffcd68;
border-radius: 10px;
width: -webkit-fill-available;
width: fit-content;
}
@media only screen and (min-width: 0px) and (max-width: 1000px) {
.img-display {
height: 400px !important;
width: auto;
}
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
.page-search {
padding: 20px 0px;
}
.card-user {
max-height: auto !important;
height: auto !important;
}
/* .box-province {
position: unset;
display: block;
width: 100%;
top: 0;
right: 0;
background-color: #f4c03f;
.line-g {
display: inline-flex;
}
.box-province {
border-radius: 5px;
margin: 5px;
box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
} */
background-color: #ffcd68;
border-radius: 10px;
width: -webkit-fill-available;
}
.img-display {
height: 300px !important;
}
}
</style>

480
src/components/search/CardUserGroup.vue Normal file
View File

@@ -0,0 +1,480 @@
<template>
<div class="pa-lg-8 pa-md-8 pa-sm-3 page-m-card" v-if="!check || cardCount">
<!-- {{ check }}{{ show }} -->
<!-- {{ result }} -->
<div
style="
background-color: #a8d18d;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
border-radius: 20px;
"
class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
>
<div class="text-subtitle text-left mb-md-3">
<v-row align="center">
<v-col cols="auto" class="pa-0 pl-2 pt-2"> <v-avatar color="#3d763d" class="text-normal" size="50"
>{{ group.id }}
</v-avatar></v-col>
<v-col > {{ group.name }}</v-col>
</v-row>
</div>
<!-- {{ result }} -->
<v-container>
<v-carousel
v-model="model"
height="auto"
style="max-width: 900px"
class="mx-auto"
>
<v-carousel-item v-for="(item, i) in result" :value="i" :key="i">
<v-row class="page-search">
<v-col :key="i" cols="12" md="12" lg="12">
<v-card
class="text-sub2 mx-auto py-3 card-user"
maxWidth="1000"
rounded="xl"
>
<v-overlay
class="align-center justify-center"
scrim="#2a2a2adb"
contained
v-model="overlay"
>
<div
class=""
style="
padding: 20px;
border-radius: 10px;
color: white;
font-size: 25px;
"
>
ไม่พบข้อมูลผู้สมัคร
</div>
</v-overlay>
<v-card-item>
<v-row
align="left"
style="min-height: 450px"
class="mobile-col"
>
<v-col cols="12" md="5" class="text-cente my-auto">
<!-- {{ item.image }} -->
<v-img
v-if="item && item.image"
:src="item.image"
cover
rounded="xl"
class="mx-auto img-display-g"
>
</v-img>
<div v-else>
<v-icon
icon="mdi-account"
size="180"
color="#635d56"
class="mx-auto my-auto"
></v-icon>
</div>
</v-col>
<v-col cols="12" md="" class="mx-auto">
<v-row>
<v-col>
<div class="box-group">
<div>กลุ่มที่</div>
<div
class="font-weight-bold"
style="font-size: xxx-large"
v-if="item.group && item.group.id"
>
{{ item.group.id }}
</div>
<div v-else>-</div>
</div>
</v-col>
<v-col>
<div class="box-group">
<div>หมายเลขผู้สมัคร</div>
<div style="font-size: xxx-large">
<div
class="font-weight-bold"
v-if="item.registerno"
>
{{ item.registerno }}
</div>
<div class="font-weight-bold" v-else>-</div>
</div>
</div></v-col
>
<v-col cols="12" md="" class="d-none">
<div class="box-group">
<div
v-if="item.zone.province"
class="font-weight-bold px-3 my-auto"
>
{{ item.zone.province.name }}
<hr />
<span class="font-weight-medium">{{
item.zone.name
}}</span>
</div>
<div v-else>-</div>
</div>
</v-col>
</v-row>
<div
class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4 mobile-box2"
v-if="item.zone.province"
>
<div class="font-weight-bold px-3">
{{ item.zone.province.name }} |
<span class="font-weight-medium">{{
item.zone.name
}}</span>
</div>
</div>
<div v-else>-</div>
<div class="font-weight-bold my-2 text-md-left">
<div
class="mt-3 mb-2"
style="font-size: xx-large"
v-if="item.firstName"
>
<span> {{ item.firstName }}</span>
<span class="ml-3">
{{ item.lastName }}
</span>
</div>
<div v-else>-</div>
<!-- <div
v-if="item.group.name"
class="mx-auto text-md-left text-sub2 my-1 more w-100 d-none"
>
{{ item.group.name }}
</div>
<div v-else > - </div> -->
<div
class="text-sub2 text-left mt-5 text-medium-emphasis"
>
<div class="font-weight-medium">
<span class="font-weight-bold"> อายุ :</span>
<span v-if="item.age">{{ item.age }}</span>
<span v-else> - </span> ปี
</div>
<div
class="font-weight-medium text-medium-emphasis"
>
<span class="font-weight-bold">อาชีพ :</span>
<span v-if="item.job"> {{ item.job }}</span>
<span v-else> - </span>
</div>
<div
class="font-weight-medium text-medium-emphasis"
>
<span class="font-weight-bold">การศึกษา :</span>
<span v-if="item.education">
{{ item.education }}</span
>
<span v-else> - </span>
</div>
<br />
</div>
</div>
</v-col>
</v-row>
</v-card-item> </v-card
></v-col>
</v-row>
</v-carousel-item>
</v-carousel>
<!-- <div class="text-subtitle my-10" v-else>ไม่พบผู้สมัคร</div> -->
</v-container>
</div>
</div>
</template>
<script>
import { client } from "@/utils/trpc";
export default {
props: {
check: {
type: Boolean,
},
dataProfile: {
type: Array,
},
group: {
type: Object,
},
province: {
type: Object,
},
district: {
type: Object,
},
},
data() {
return {
overlay: false,
cardCount: 0,
allg: "",
checkdata: "",
show: false,
load: false,
result: [],
page: 1,
districtItems: [],
provinceItems: [],
items: [],
offset: 0,
count: 0,
model: 0,
colors: ["primary", "secondary", "yellow darken-2", "red", "orange"],
};
},
mounted() {
let data = {};
if (this.province && this.province.id) {
data.province = this.province.id;
}
if (this.district) {
data.zone = this.district.id;
}
if (this.group) {
data.group = this.group.id;
}
if (data) {
client.user.getAllUser
.query(data)
.then((rs) => {
this.cardCount = rs.length;
if (rs.length) {
// rs.map((x)=>x.show=true)
this.show = true;
this.result = rs;
} else {
this.overlay = true;
this.show = false;
this.result = [
{
show: false,
id: 56,
firstName: "",
lastName: "",
title: "",
cid: "1767250304480",
age: " -",
job: " -",
education: " -",
vision: null,
reason: null,
group: {
id: this.group.id,
name: " -",
},
zone: {
id: " -",
name: this.district.name,
province: {
id: "",
name: this.province.name,
},
},
},
];
}
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);
});
}
},
};
</script>
<style>
.v-overlay__scrim {
opacity: 0.7;
}
.overay-box {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: 0.5s ease;
opacity: 0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
z-index: 99999;
}
.text-medium-emphasis {
color: #3b3737c4;
}
div.v-window__container
> div.v-window__controls
> button.v-btn.v-btn--elevated.v-btn--icon.v-theme--light.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated {
background-color: #00000078;
color: white;
}
.v-carousel__controls {
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
background-color: #00000078;
}
.img-display-g {
height: 450px;
}
.box-group {
border-radius: 5px;
background-color: #ffcd68;
border-radius: 10px;
width: -webkit-fill-available;
width: fit-content;
min-width: 100%;
padding: 10px 2px;
height: 100%;
}
.line-r-g {
padding-left: 5px;
border-color: #ffcd68;
border-right: 0.2px solid #ffcd68;
}
.line-g {
border: 1px solid #ffcd68;
display: inline-flex;
}
.card-user {
position: relative;
/* height: 500px; */
}
.more {
width: 95%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: auto;
}
.box-province {
border-radius: 5px;
background-color: #ffcd68;
border-radius: 10px;
width: -webkit-fill-available;
/* width: fit-content; */
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
div.v-window__container
> div.v-window-item.v-window-item--active.v-carousel-item
> div
> div.v-responsive__content
> div
> div
> div {
padding: 0 !important;
}
div.v-col-md.v-col-12.mx-auto > div.font-weight-bold.my-2.text-md-left {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.v-carousel__controls {
height: 35px;
}
div.mx-auto.text-md-left.text-sub2.my-1 {
margin: 0 !important;
}
div.font-weight-bold.my-2.text-md-left > div.text-sub2.text-left.mt-5 {
margin-top: 0px !important;
line-height: 21px;
}
div.v-window__container
> div.v-window-item.v-window-item--active.v-carousel-item
> div
> div.v-responsive__content
> div
> div
> div
> div.v-card-item
> div
> div
> div.v-col-md.v-col-12.mx-auto
> div.font-weight-bold.my-2.text-md-left
> div.mt-3.mb-2 {
margin-top: 0px !important;
line-height: 38px;
}
div.v-card-item
> div
> div
> div.v-col-md.v-col-12.mx-auto
> div.v-row
> .v-col {
padding: 2px !important;
}
.box-group {
border-radius: 5px;
background-color: #ffcd68;
border-radius: 10px;
width: -webkit-fill-available;
/* width: fit-content; */
min-width: 100%;
padding: 5px 0px;
height: 85px;
line-height: 37px;
}
.page-m-card {
margin: 20px 7px;
}
.page-search {
padding: 20px 0px;
}
.card-user {
max-height: auto !important;
height: auto !important;
}
.line-g {
display: inline-flex;
}
.box-province {
border-radius: 5px;
background-color: #ffcd68;
border-radius: 10px;
width: -webkit-fill-available;
}
.img-display-g {
height: 300px !important;
}
div.py-2.text-sub2.box-province.mx-auto.mx-md-1.my-4.mobile-box2 {
margin-top: 10px;
margin-bottom: 10px;
}
}
</style>
<style scoped>
@media only screen and (min-width: 0px) and (max-width: 700px) {
.text-subtitle {
font-size: 19px;
font-weight: 600;
}
.v-container {
width: 100%;
padding: 0px;
}
}
</style>

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

@@ -66,7 +66,15 @@
> -->
</v-col>
<v-col cols="12" md="4">
<v-autocomplete
<v-text-field
v-if="province"
label="กลุ่มอาชีพ"
variant="solo"
v-model="group"
:value="group.id + ' ' + group.name"
readonly
></v-text-field>
<!-- <v-autocomplete
clearable
label="กลุ่มอาชีพ"
:items="items"
@@ -76,49 +84,91 @@
placeholder="กลุ่มอาชีพ"
hide-details
v-model="group"
></v-autocomplete>
>
<template v-slot:item="{ props, item }">
<v-list-item
v-bind="props"
:title="item.raw.id + ' ' + item.raw.name"
></v-list-item>
</template>
</v-autocomplete> -->
</v-col>
<!-- <v-col cols="12" md="3">
<v-text-field
label="ชื่อ"
variant="solo"
hide-details
></v-text-field>
</v-col> -->
</v-row>
<v-btn
color="#DD6C31"
color="#e23972"
class="mt-8"
elevated
size="large"
@click="searchUserApi(0)"
@click="
searchUserApi(0, '');
showGroup = false;
"
:loading="load"
width="300"
height="52px"
>
<span class="text-sub">ค้นหา</span>
<span class="text-sub">ค้นหากลุ่มอาชีพตนเอง</span>
</v-btn>
<!-- @click="searchUserApi(0, 'all')" -->
<v-btn
color="#4c884c"
class="mx-5 mt-8"
elevated
size="large"
width="300"
@click="showGroup = true"
:loading="load"
height="52px"
>
<span class="text-sub">ค้นหาทุกกลุ่มอาชีพ</span>
</v-btn>
</v-container>
<div v-if="!showGroup">
<CardUser :dataProfile="result" v-if="result.length" class="mt-2" />
<CardUser :dataProfile="result" v-if="result.length" class="mt-2" />
<div
v-if="result.length == 0 && this.show"
class="my-10 text-sub2 txt-black"
>
<v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
</div>
<div
v-if="result.length == 0 && this.show"
class="my-10 text-sub2 txt-black"
>
<v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
<div class="text-center mt-2">
<v-pagination
elevation="3"
v-if="count > 1"
v-model="page"
:length="Math.ceil(count / 2)"
rounded="circle"
@update:model-value="searchUser((this.page - 1) * 2)"
next-icon="mdi-menu-right"
prev-icon="mdi-menu-left"
></v-pagination>
</div>
</div>
<!-- {{ count }}
{{ Number(result.length)/ 2 }} -->
<div class="text-center mt-2">
<v-pagination
elevation="3"
v-if="count > 1"
v-model="page"
:length="Math.ceil(count / 2)"
rounded="circle"
@update:model-value="searchUser((this.page -1)*2)"
next-icon="mdi-menu-right"
prev-icon="mdi-menu-left"
></v-pagination>
<!-- <v-container class="my-0 py-0"> -->
<div>
<!-- v-if="showGroup" -->
<v-checkbox
v-if="showGroup"
v-model="checkbox1"
label="ดูเฉพาะกลุ่มอาชีพที่มีข้อมูล"
size="large"
class="px-7 mt-5 check-card text-subtitle"
color="#3d763d"
hide-details
></v-checkbox>
</div>
<!-- </v-container> -->
<div v-for="(group, i) in apiGroup" :key="i">
<CardUserGroup
:check="checkbox1"
:group="group"
:province="province"
:district="district"
v-if="showGroup"
/>
</div>
</div>
</div>
@@ -127,14 +177,20 @@
// import Provinces from "@/components/form/provinces.json";
// import Districts from "@/components/form/districts.json";
import CardUser from "./CardUser.vue";
import CardUserGroup from "./CardUserGroup.vue";
import { client } from "@/utils/trpc";
export default {
components: {
CardUser,
CardUserGroup,
},
data() {
return {
checkbox1: true,
showGroup: false,
apiGroup: [],
allg: "",
checkdata: "",
show: false,
load: false,
@@ -166,7 +222,9 @@ export default {
// data.province = this.province;
}
if (this.group) {
data.group = this.group.id;
if (this.allg !== "all") {
data.group = this.group.id;
}
}
if (this.district) {
data.zone = this.district.id;
@@ -192,7 +250,8 @@ export default {
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
},
searchUserApi(offset) {
searchUserApi(offset, checkg) {
this.allg = checkg;
this.show = false;
this.load = true;
if (offset == 0) {
@@ -207,8 +266,11 @@ export default {
data.province = this.province.id;
// data.province = this.province;
}
if (this.group) {
data.group = this.group.id;
if (checkg !== "all") {
data.group = this.group.id;
}
}
if (this.district) {
data.zone = this.district.id;
@@ -240,7 +302,7 @@ export default {
.catch((error) => {
this.load = false;
alert("ไม่สามารถโหลดข้อมูลได้");
// alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
},
@@ -254,7 +316,7 @@ export default {
this.districtItems = data;
})
.catch((error) => {
alert("ไม่สามารถโหลดข้อมูลได้");
// alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
}
@@ -269,9 +331,14 @@ export default {
this.district = data.zone;
this.checkdata = { ...data };
this.group = data.group;
let filteredGroup = [...this.items].filter(
(x) => x.id !== data.group.id
);
this.apiGroup = filteredGroup;
console.log("filteredGroup", filteredGroup);
})
.catch((error) => {
alert("ไม่สามารถโหลดข้อมูลได้");
// alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
},
@@ -283,7 +350,7 @@ export default {
this.items = groups;
})
.catch((error) => {
alert("ไม่สามารถโหลดข้อมูลได้");
// alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
@@ -294,25 +361,25 @@ export default {
this.getUser(data);
})
.catch((error) => {
alert("ไม่สามารถโหลดข้อมูลได้");
// alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
},
};
</script>
<style>
.v-pagination .v-btn {
font-size: 50px;
width: auto;
height: auto;
background-color: rgb(221, 108, 49);
.check-card .v-selection-control {
align-items: center !important;
font-size: 25px;
}
/* #app > div > div > main > div:nth-child(2) > div > div > div.text-center > nav > ul > li> button{
.v-pagination .v-btn {
font-size: large;
background-color: white;
}
/* .v-pagination .v-pagination__item .v-btn {
display: none;
} */
.v-pagination .v-pagination__item .v-btn {
display: none;
}
.v-pagination .v-btn .pagination__prev {
font-size: 80px;
display: block !important;

4
src/config.js
View File

@@ -1,4 +1,4 @@
export const CONFIG = {
// api_url: "http://178.128.18.156:3000",
api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
api_url: "http://178.128.18.156:3000",
// api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
};

41
src/views/LoginForm.vue
View File

@@ -13,14 +13,16 @@
width="250"
></v-img>
<v-card
class="mx-auto pa-12 pb-8"
class="mx-auto pa-4 pb-8 pt-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>
<!-- <div class="text-subtitle-1 text-medium-emphasis">ID card number</div> -->
<div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
เลขบัตรประชาชน 13 หลัก เช่น 1234567890123
</div>
<v-text-field
density="compact"
placeholder="เลขประจำตัว 13 หลัก"
@@ -29,6 +31,8 @@
color="#4c884c"
v-model="payload.cid"
:rules="rules.id"
type="number"
hide-spin-buttons
></v-text-field>
<!--
<div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
@@ -42,10 +46,12 @@
>
Forgot login password?</a>
</div> -->
<div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
เบอร์โทรศัพท์ 10 หลัก เช่น 0812345678
</div>
<v-text-field
:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
:type="visible ? 'text' : 'password'"
:type="visible ? 'number' : 'password'"
density="compact"
placeholder="เบอร์โทรศัพท์"
prepend-inner-icon="mdi-lock-outline"
@@ -54,6 +60,7 @@
v-model="payload.phone"
:rules="rules.tel"
color="#4c884c"
hide-spin-buttons
></v-text-field>
<!-- <v-card
@@ -80,7 +87,10 @@
</v-form>
</v-card>
</div>
<div v-if="getUsername&&getCheckPage" class="text-normal text-center py-10">
<div
v-if="getUsername && getCheckPage"
class="text-normal text-center py-10"
>
<v-icon
icon="mdi-alert-circle-outline"
size="35"
@@ -89,7 +99,14 @@
คุณเข้าสู่ระบบอยู่แล้ว
<div class="mt-10">
<v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/" width="300">
<v-btn
elevated
color="#DD6C31"
class="text-normal ma-6"
height="85"
to="/"
width="300"
>
<span class="text-normal"> กลับหน้าหลัก</span>
<v-img
@@ -102,7 +119,7 @@
<v-btn
elevated
color="#DD6C31"
class="text-normal ma-6"
class="text-normal ma-6"
height="85"
to="/search"
width="300"
@@ -124,7 +141,7 @@ import { mapGetters } from "vuex";
import { client } from "@/utils/trpc";
export default {
computed: {
...mapGetters(["getUsername", "getImg","getCheckPage"]),
...mapGetters(["getUsername", "getImg", "getCheckPage"]),
},
data: () => ({
form1: false,
@@ -134,10 +151,12 @@ export default {
tel: [
(v) =>
// (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
/^([0-9]{10})$/.test(v) || "Invalid phone number",
/^([0-9]{10})$/.test(v) || "เบอร์โทรไม่ถูกต้อง",
],
id: [
(v) => (parseInt(v) == v && v.length == 13) || "Invalid ID card number",
(v) =>
(parseInt(v) == v && v.length == 13) ||
"หมายเลขบัตรประชาชนไม่ถูกต้อง",
],
},
}),