update search function
All checks were successful
frontend-action / build-image (push) Successful in 2m50s

This commit is contained in:
2024-06-07 01:11:30 +07:00
parent eac75b5c03
commit 12461d2c7a
6 changed files with 404 additions and 200 deletions

View File

@@ -14,8 +14,10 @@
ขั้นตอนที่
<v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
</div>
<div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div>
<div class="mb-8">ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น สมัคร สว.</div>
<!-- <div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div> -->
<div class="mb-8">
ลงทะเบียนแสดงตัวตน / ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.
</div>
<v-btn
elevated
@@ -29,19 +31,17 @@
:aspect-ratio="1"
src="../assets/Group 23.png"
width="80"
style="position: absolute; bottom: -40px; right: 0"
style="position: absolute; bottom: -40px; left: 0"
></v-img>
<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%"
>
<div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
<div class="mb-8">
ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/อำเภอ ที่ตัวเองเป็นผู้แสดงตน
<div class="text-center text-white pb-20 mx-auto" style="width: 90%">
<div v-if="getUsername" class="mt-10">
<div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
<div class="mb-8">
ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/อำเภอ ที่ตัวเองเป็นผู้แสดงตน
</div>
</div>
<v-btn
elevated

View File

@@ -36,12 +36,15 @@
class="mx-auto img-display"
>
</v-img
><v-avatar
color="#635d56"
size="180"
class="mx-auto my-auto"
v-else
></v-avatar>
>
<v-icon
v-else
icon="mdi-account"
size="180"
color="#635d56"
class="mx-auto my-auto"
></v-icon>
</v-col>
<v-col cols="12" md="" class="mx-auto">
<v-row>

View File

@@ -14,7 +14,7 @@
<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"
<v-avatar color="#f5e010" class="text-normal" size="50"
>{{ group.id }}
</v-avatar></v-col
>
@@ -22,6 +22,7 @@
</v-row>
</div>
<!-- {{ result }} -->
<!-- {{ chunkedResults }} -->
<v-container>
<v-carousel
v-model="model"
@@ -29,14 +30,14 @@
style="max-width: 900px"
class="mx-auto"
>
<v-carousel-item v-for="(item, i) in result" :value="i" :key="i">
<v-carousel-item
v-for="(chunk, i) in chunkedResults"
: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"
>
<div class="text-sub2 mx-auto card-user" maxWidth="1000">
<v-overlay
class="align-center justify-center"
scrim="#2a2a2adb"
@@ -55,140 +56,43 @@
ไมพบขอมลผสมคร
</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
style="
background: white;
border-radius: 10px;
min-height: 180px;
"
class="py-5"
>
<div v-for="(item, j) in chunk" :key="j" cols="12" md="4">
<div class="font-weight-bold my-2">
<div
class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4 mobile-box2"
v-if="item.zone.province"
class="mt-3 mb-2 mx-auto txt-subtitle"
style="width: 90%; margin: auto"
v-if="item.firstName"
>
<div class="font-weight-bold px-3">
{{ item.zone.province.name }} |
<span class="font-weight-medium">{{
item.zone.name
}}</span>
</div>
<span>{{ item.firstName }}</span>
<span class="ml-3">{{ item.lastName }}</span>
</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>
</div>
</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> -->
</div>
</div></v-col
>
</v-row>
</v-carousel-item>
</v-carousel>
@@ -218,6 +122,16 @@ export default {
type: Object,
},
},
computed: {
chunkedResults() {
const chunkSize = 3;
let chunks = [];
for (let i = 0; i < this.result.length; i += chunkSize) {
chunks.push(this.result.slice(i, i + chunkSize));
}
return chunks;
},
},
data() {
return {
overlay: false,
@@ -241,18 +155,18 @@ export default {
this.$emit("valueSent", true);
// this.load2 = true;
let data = {};
if (this.province && this.province.id) {
data.province = this.province.id;
if (this.province) {
data.province = this.province;
}
if (this.district) {
data.zone = this.district.id;
data.zone = this.district;
}
if (this.group) {
data.group = this.group.id;
}
data.limit = 5;
data.limit = 30;
if (data) {
client.user.getAllUser
client.user.getAllUser
.query(data)
.then((rs) => {
this.cardCount = rs.length;
@@ -302,10 +216,69 @@ export default {
})
.catch((error) => {
this.load = false;
// alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
// let param = { input: JSON.stringify({ 0: data }) };
// var axios = require("axios");
// const config = {
// method: "get",
// url: "http://localhost:3000/api/user.getAllUser",
// params: param,
// headers: {},
// };
// axios(config)
// .then((response) => {
// const rs = response.data.result.data;
// this.cardCount = rs.length;
// if (rs.length) {
// 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.$emit("valueSent", false);
// })
// .catch((error) => {
// this.load = false;
// console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
// });
}
},
};
@@ -334,13 +307,15 @@ export default {
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;
background-color: #3d763d8c;
color: white;
}
.v-carousel__controls {
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
background-color: #00000078;
margin-top: 40px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #3d763d8c;
height: 23px;
}
.img-display-g {
height: 450px;
@@ -398,7 +373,7 @@ div.v-window__container
margin-bottom: 0px !important;
}
.v-carousel__controls {
height: 35px;
height: 23px;
}
div.mx-auto.text-md-left.text-sub2.my-1 {
margin: 0 !important;

View File

@@ -17,10 +17,9 @@
</div>
<v-container>
<!-- {{ checkdata }} -->
<v-row>
<v-row class="d-none" v-if="fasle">
<v-col cols="12" md="4">
<v-text-field
v-if="province"
label="จังหวัด"
variant="solo"
v-model="province"
@@ -44,7 +43,6 @@
</v-col>
<v-col cols="12" md="4">
<v-text-field
v-if="province"
label="อำเภอ / เขต"
variant="solo"
v-model="district"
@@ -67,7 +65,6 @@
</v-col>
<v-col cols="12" md="4">
<v-text-field
v-if="province"
label="กลุ่มอาชีพ"
variant="solo"
v-model="group"
@@ -94,8 +91,109 @@
</v-autocomplete> -->
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="4">
<!-- <v-text-field
label="จังหวัด"
variant="solo"
v-model="province"
></v-text-field> -->
<v-autocomplete
clearable
label="จังหวัด"
:items="provinceItems"
variant="solo"
item-title="name"
item-value="id"
v-model="province"
placeholder="จังหวัด"
@update:modelValue="filterData"
hide-details
></v-autocomplete>
</v-col>
<v-col cols="12" md="4">
<!-- <v-text-field
label="อำเภอ / เขต"
variant="solo"
v-model="district"
></v-text-field> -->
<v-autocomplete
clearable
label="อำเภอ / เขต"
:items="districtItems"
variant="solo"
item-title="name"
v-model="district"
item-value="id"
placeholder="อำเภอ / เขต"
hide-details
:disabled="province == null"
></v-autocomplete>
</v-col>
<v-col cols="12" md="4">
<!-- <v-text-field
label="กลุ่มอาชีพ"
variant="solo"
v-model="group"
></v-text-field> -->
<v-autocomplete
v-model="group"
clearable
label="กลุ่มอาชีพ"
:items="items"
variant="solo"
:item-title="(item) => item.id + ' ' + item.name"
return-object
placeholder="กลมอาช"
hide-details
@update:modelValue="filterName"
>
<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="12">
<!-- <v-text-field
label="กลมอาช"
variant="solo"
v-model="group"
></v-text-field> -->
<!-- {{ nameUser }} -->
<v-autocomplete
clearable
label="รายช"
:items="nameUserItems"
variant="solo"
:item-title="(item) => item.firstName + ' ' + item.lastName"
item-value="id"
placeholder="รายช"
:loading="loadname"
hide-details
v-model="nameUser"
:disabled="nameUserItems.length == 0 || group == null"
>
<!-- <template v-slot:selection="{ item }">
{{ item.firstName }} {{ item.lastName }}
</template> -->
<template v-slot:item="{ props, item }">
<v-list-item
v-bind="props"
:title="item.raw.firstName + ' ' + item.raw.lastName"
></v-list-item>
</template>
</v-autocomplete>
</v-col>
</v-row>
<v-btn
v-if="province"
color="#e23972"
class="mt-8"
elevated
@@ -104,6 +202,7 @@
searchUserApi(0, '');
showGroup = false;
"
:disabled="district == null || group == null || province == null"
:loading="load || load2"
width="300"
height="52px"
@@ -112,17 +211,20 @@
</v-btn>
<!-- @click="searchUserApi(0, 'all')" -->
<v-btn
v-if="province"
color="#4c884c"
class="mx-5 mt-8"
elevated
size="large"
width="300"
@click="showGroup = true"
@click="clickShowGroup"
:loading="load || load2"
height="52px"
stack
:disabled="district == null || group == null || province == null"
>
<span class="text-sub">นหาทกกลมอาช</span>
<div class="text-sub">ค้นหาต่างกลุ่มอาชีพ</div>
<!-- <div class="txt-small">(ยกเว้นอาชีพตนเอง)</div> -->
</v-btn>
</v-container>
<div v-if="!showGroup">
@@ -169,10 +271,10 @@
</div>
<!-- </v-container> -->
<div v-for="(group, i) in apiGroup" :key="i">
<div v-for="(groupx, i) in apiGroup" :key="groupxKey + '-' + i">
<CardUserGroup
:check="checkbox1"
:group="group"
:group="groupx"
:province="province"
:district="district"
v-if="showGroup"
@@ -188,14 +290,22 @@
import CardUser from "./CardUser.vue";
import CardUserGroup from "./CardUserGroup.vue";
import { client } from "@/utils/trpc";
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["getUsername", "getImg"]),
},
components: {
CardUser,
CardUserGroup,
},
data() {
return {
groupxKey: 0,
loadname: false,
nameUser: null,
nameUserItems: [],
load2: false,
checkbox1: true,
showGroup: false,
@@ -217,11 +327,77 @@ export default {
};
},
methods: {
clickShowGroup() {
// this.showGroup = false;
this.groupxKey += 1;
this.showGroup = true;
},
filterName() {
// console.log("grop", this.group);
this.nameUser = null;
this.getUserItems(0);
let filteredGroup = [...this.items].filter((x) => x.id !== this.group.id);
this.apiGroup = filteredGroup;
},
handleValueSent(value) {
this.load2 = value;
console.log("Received value from child:", value);
// ทำงานกับค่าที่ได้รับ
},
getUserItems(offset) {
this.show = false;
this.loadname = true;
if (offset == 0) {
this.page = 1;
}
let data = {
offset: offset,
};
if (this.province) {
data.province = this.province;
// data.province = this.province;
}
if (this.group && this.group.id) {
// console.log(this.group.id);
data.group = this.group.id;
}
if (this.district) {
data.zone = this.district;
}
// let param = { input: JSON.stringify({ 0: data }) };
// var axios = require("axios");
// var config = {
// method: "get",
// url: "http://localhost:3000/api/user.getAllUser",
// params: param,
// headers: {},
// };
// axios(config)
// .then((response) => {
// this.nameUserItems = response.data.result.data;
// this.loadname = false;
// console.log("nameUserItems", this.nameUserItems);
// })
// .catch((error) => {
// this.loadname = false;
// console.log(error);
// });
client.user.getAllUser
.query(data)
.then((rs) => {
this.nameUserItems = rs;
console.log(rs);
this.loadname = false;
})
.catch((error) => {
this.loadname = false;
alert("ไม่สามารถโหลดข้อมูลรายชื่อได้ได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
},
searchUser(offset) {
this.show = false;
this.load = true;
@@ -233,7 +409,7 @@ export default {
limit: 2,
};
if (this.province) {
data.province = this.province.id;
data.province = this.province;
// data.province = this.province;
}
if (this.group) {
@@ -242,10 +418,12 @@ export default {
}
}
if (this.district) {
data.zone = this.district.id;
data.zone = this.district;
}
if (this.nameUser) {
data.userId = this.nameUser;
}
// console.log(data);
client.user.getAllUser
.query(data)
.then((rs) => {
@@ -255,8 +433,6 @@ export default {
if (rs.length == 0) {
this.show = true;
}
// this.districtItems = rs;
})
.catch((error) => {
this.load = false;
@@ -278,7 +454,7 @@ export default {
limit: 2,
};
if (this.province) {
data.province = this.province.id;
data.province = this.province;
// data.province = this.province;
}
@@ -288,19 +464,65 @@ export default {
}
}
if (this.district) {
data.zone = this.district.id;
data.zone = this.district;
}
// console.log(data);
client.user.getAllUserCount
.query(data)
.then((rs) => {
this.count = rs;
})
.catch((error) => {
alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
if (this.nameUser) {
data.userId = this.nameUser;
}
// let param = { input: JSON.stringify({ 0: data }) };
// var axios = require("axios");
// if (this.nameUser) {
// this.count = 1;
// } else {
// var config = {
// method: "get",
// url: "http://localhost:3000/api/user.getAllUserCount",
// params: param,
// headers: {},
// };
// axios(config)
// .then((response) => {
// this.count = response.data.result.data;
// console.log("getAllUserCount", this.count);
// })
// .catch((error) => {
// console.log(error);
// });
// }
if (this.nameUser) {
this.count = 1;
} else {
client.user.getAllUserCount
.query(data)
.then((rs) => {
this.count = rs;
})
.catch((error) => {
alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
}
// var config2 = {
// method: "get",
// url: "http://localhost:3000/api/user.getAllUser",
// params: param,
// headers: {},
// };
// axios(config2)
// .then((response) => {
// this.result = response.data.result.data;
// this.load = false;
// console.log("nameUserItems", this.nameUserItems);
// })
// .catch((error) => {
// this.load = false;
// console.log(error);
// });
client.user.getAllUser
.query(data)
@@ -312,11 +534,9 @@ export default {
this.show = true;
}
// this.districtItems = rs;
})
.catch((error) => {
this.load = false;
// alert("ไม่สามารถโหลดข้อมูลได้");
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
});
@@ -373,7 +593,9 @@ export default {
.query({})
.then((data) => {
this.provinceItems = data;
this.getUser(data);
if (this.getUsername) {
this.getUser(data);
}
})
.catch((error) => {
// alert("ไม่สามารถโหลดข้อมูลได้");
@@ -383,6 +605,9 @@ export default {
};
</script>
<style>
.v-input__control {
background: white;
}
.check-card .v-selection-control {
align-items: center !important;
font-size: 25px;

View File

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

View File

@@ -1,7 +1,7 @@
<template>
<div>
<FormMain v-if="getUsername" />
<div
<FormMain />
<!-- <div
v-if="
getUsername == '' || getUsername == null || getUsername == undefined
"
@@ -9,7 +9,7 @@
>
<v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
</div>
</div> -->
</div>
</template>
<script>