Files
2024-10-21 10:22:26 +03:30

876 lines
30 KiB
Vue

<template>
<div class="electionCandidate">
<CustomSubHeader>
<CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
<CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-elections',query: {page: 1} }">برگشت به
صفحه قبل
</CButton>
<CButton v-if="$route.params.details === 'new'" size="sm" color="success" class="mr-1" @click="post">افزودن
</CButton>
<CButton v-else size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
</CustomSubHeader>
<CRow style="display : flex ; flex-direction: column">
<CRow>
<CCol lg="6">
<CCard>
<CCardBody>
<CRow>
<CCol sm="12">
<CInput
label="عنوان"
:class="validation.title ? 'err' : null"
:description="validation.title ? validation.title.msg : null"
v-model="election.title"
/>
</CCol>
<CCol sm="12">
<CTextarea
:class="validation.description ? 'err' : null"
label="توضیحات"
:description="validation.description ? validation.description.msg : null"
v-model="election.description"
/>
</CCol>
<el-divider></el-divider>
<CCol sm="12">
<h6>تاریخ شروع</h6>
<date-picker format="YYYY-MM-DD" display-format="jMMMM jD" v-model="election.startDate"></date-picker>
<p class="text-danger" v-if="validation.startDate">{{ validation.startDate.msg }}</p>
</CCol>
<CCol sm="12" class="mt-3">
<h6>تاریخ پایان</h6>
<date-picker format="YYYY-MM-DD" display-format="jMMMM jD" v-model="election.endDate"></date-picker>
<p class="text-danger" v-if="validation.endDate">{{ validation.endDate.msg }}</p>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
<CCol lg="6">
<CCard>
<CCardBody>
<CCol sm="12">
<h6>{{ this.$route.params.details !== "new" ? "دسته بندی" : "انتخاب دسته بندی" }}</h6>
<el-select
filterable
clearable
style="width : 100%"
v-model="catId"
placeholder="انتخاب دسته بندی">
<el-option
v-for="item in categories"
v-if="availableCategory(item._id)"
:key="item._id"
:label="item.title"
:value="item._id"
>
<!-- <span>{{setTitle(item)}}</span> -->
</el-option>
</el-select>
<p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.catId">
{{ validation.catId.msg }}</p>
</CCol>
<el-divider></el-divider>
<el-checkbox label="نمایش داده شود" v-model="election.publish"/>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" v-if="$route.params.details !== 'new'">
<CCard>
<CCardBody>
<CRow>
<CCol>
<div class="d-flex">
<h4 style="display: inline-block;">لیست کاندیداها</h4>
<el-button type="success" size="small" @click="detailsCandidate(false)" class="mr-auto">افزودن
</el-button>
</div>
<el-divider></el-divider>
<el-table
style="width: 100%;"
:data="election.candidates"
>
<el-table-column
type="index"
label="#"
>
</el-table-column>
<el-table-column
label="عکس"
>
<template slot-scope="scope">
<img :src="scope.row.profilePic" width="50px" alt="">
</template>
</el-table-column>
<el-table-column
label="نام"
>
<template slot-scope="scope">
{{ scope.row.firstName + ' ' + scope.row.lastName }}
</template>
</el-table-column>
<el-table-column
label="ویرایش"
width="120"
>
<template slot-scope="scope">
<CButton color="danger" variant="outline" :key="scope.row._id+1" @click="removeCandidate(scope.row._id)">
<i class="far fa-trash-alt"></i>
</CButton>
<CButton color="success" variant="outline" :key="scope.row._id"
@click="detailsCandidate(scope.row)">
<i class="far fa-eye"></i>
</CButton>
</template>
</el-table-column>
</el-table>
<p class="text-danger" v-if="validation.options">{{ validation.options.msg }}</p>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" v-if="$route.params.details !== 'new'">
<CCard>
<CCardBody>
<CRow>
<CCol lg="6">
<h4>لیست رای دهندگان</h4>
<el-divider></el-divider>
<el-table
style="width: 100%;"
:data="election.voters"
>
<el-table-column
type="index"
label="#"
>
</el-table-column>
<el-table-column
label="نام"
>
<template slot-scope="scope">
{{ scope.row.firstName + ' ' + scope.row.lastName }}
</template>
</el-table-column>
<el-table-column
prop="username"
label="نام کاربری"
>
</el-table-column>
<el-table-column
prop="password"
label="کلمه عبور"
>
</el-table-column>
<el-table-column
label="وضعیت رای"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.voted" type="success">رای داده</el-tag>
<el-tag v-else type="danger">رای نداده</el-tag>
</template>
</el-table-column>
<el-table-column
label="ویرایش"
width="65"
>
<template slot-scope="scope">
<CButton color="danger" variant="outline" :key="scope.row._id+1" @click="removeVoter(scope.row._id)">
<i class="far fa-trash-alt"></i>
</CButton>
</template>
</el-table-column>
</el-table>
</CCol>
<CCol lg="6">
<h4>افزودن رای دهنده</h4>
<el-divider></el-divider>
<CRow style="flex-direction: column;">
<CCol>
<CInput
label="نام"
:class="validation.firstName ? 'err' : null"
:description="validation.firstName ? validation.firstName.msg : null"
v-model="newVoter.firstName"
/>
</CCol>
<CCol>
<CInput
label="نام خانوادگی"
:class="validation.lastName ? 'err' : null"
:description="validation.lastName ? validation.lastName.msg : null"
v-model="newVoter.lastName"
/>
</CCol>
<CCol>
<CInput
label="نام کاربری"
:class="validation.username ? 'err' : null"
:description="validation.username ? validation.username.msg : null"
v-model="newVoter.username"
/>
</CCol>
<CCol>
<CInput
label="کد ملی"
:class="validation.nationalCode ? 'err' : null"
:description="validation.nationalCode ? validation.nationalCode.msg : null"
v-model="newVoter.nationalCode"
/>
</CCol>
<CCol>
<CInput
label="شماره موبایل"
:class="validation.mobileNumber ? 'err' : null"
:description="validation.mobileNumber ? validation.mobileNumber.msg : null"
v-model="newVoter.mobileNumber"
/>
</CCol>
<CCol>
<CInput
label="شغل"
:class="validation.job ? 'err' : null"
:description="validation.job ? validation.job.msg : null"
v-model="newVoter.job"
/>
</CCol>
<CCol>
<CButton color="success" variant="outline" @click="addVoter">افزودن</CButton>
</CCol>
</CRow>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" v-if="$route.params.details !== 'new'">
<CCard>
<CCardBody>
<h4>نتایج انتخابات</h4>
<el-divider></el-divider>
<div class="survey-item2" v-for="(item, index) in election.candidates" :key="item._id+2">
<h4>{{ item.firstName + ' ' + item.lastName }}</h4>
<el-progress :percentage="progress(item)" style="direction: rtl" color="#CC0000"></el-progress>
</div>
</CCardBody>
</CCard>
</CCol>
<!-------------------------- candidate modal --------------------------------------------->
<el-dialog title="اطلاعات کاندیدا" :visible.sync="showCandidate">
<CContainer style="border: solid 1px;padding: 25px;border-radius: 15px;">
<CRow style="flex-direction: column;">
<CCol>
<CInput
label="نام"
:class="validation.firstName ? 'err' : null"
:description="validation.firstName ? validation.firstName.msg : null"
v-model="candidateDetail.firstName"
/>
</CCol>
<CCol>
<CInput
label="نام خانوادگی"
:class="validation.lastName ? 'err' : null"
:description="validation.lastName ? validation.lastName.msg : null"
v-model="candidateDetail.lastName"
/>
</CCol>
<CCol>
<CInput
label="کد ملی"
:class="validation.nationalCode ? 'err' : null"
:description="validation.nationalCode ? validation.nationalCode.msg : null"
v-model="candidateDetail.nationalCode"
/>
</CCol>
<CCol>
<CTextarea
label="رزومه"
:class="validation.resume ? 'err' : null"
:description="validation.resume ? validation.resume.msg : null"
v-model="candidateDetail.resume"
/>
</CCol>
<CCol>
<span>تاریخ تولد</span>
<date-picker clearable format="YYYY-MM-DD" display-format="jMMMM jD"
v-model="candidateDetail.bornDate"></date-picker>
</CCol>
<CCol>
<h4>عکس</h4>
<el-divider/>
<CCol>
<img :src="candidateDetail.profilePic" style="width: 100%;max-width: 500px;" alt=""/>
</CCol>
<input type="file" ref="profilePic" @change="imagePreview"/>
<p style="margin-top: 5px !important;" class="form-err text-danger" v-if="validation.profilePic">
{{ validation.profilePic.msg }}</p>
<p class="mt-3 text-muted">
عکس 400*300 باشد. در غیر این صورت اتوماتیک بریده می شود.
</p>
</CCol>
<CButton color="success" variant="outline"
@click="candidateDetailType === 'add' ? addCandidate() : updateCandidate(candidateDetail._id)">{{ candidateDetailType === 'add' ? 'افزودن' : 'بروزرسانی' }}
</CButton>
</CRow>
</CContainer>
</el-dialog>
</CRow>
</CRow>
</div>
</template>
<script>
export default {
data() {
return {
election: null,
categories: null,
validation: {},
newOption: '',
showCandidate: false,
candidateDetail: {},
candidateDetailType: '',
newVoter: {
firstName: '',
lastName: '',
username: '',
nationalCode: '',
mobileNumber: '',
jon: '',
}
}
},
computed: {
title() {
return this.$route.params.details === "new" ? "افزودن انتخابات جدید" : "مشاهده انتخابات"
},
catId: {
get() {
if (this.$route.params.details === 'new') {
return this.election.catId
} else {
return this.election.catId._id
}
},
set(value) {
if (this.$route.params.details === 'new') {
this.election.catId = value
} else {
this.election.catId._id = value
}
}
}
},
methods: {
progress(answerItem) {
const availableOptions = this.election.candidates.map(item => item._id)
let filteredAnswers = this.election.votes.filter(item => availableOptions.includes(item.candidate))
let num = filteredAnswers.filter(item => item.candidate === answerItem._id).length
return Number(((num * 100 / filteredAnswers.length) || 0).toFixed(0))
},
imagePreview(e) {
this.candidateDetail.profilePic = URL.createObjectURL(e.target.files[0]);
},
detailsCandidate(candidate) {
this.showCandidate = !this.showCandidate;
if (candidate) {
this.candidateDetailType = 'update';
this.candidateDetail = candidate;
} else {
this.candidateDetailType = 'add';
this.candidateDetail = {
firstName: '',
lastName: '',
bornDate: '',
education: '',
nationalCode: '',
resume: '',
profilePic: '',
}
}
},
availableCategory(id) {
return this.$auth.user.permissions.includes('superAdmin') || this.$auth.user.specialPermissions.includes(id)
},
post() {
this.validation = {}
this.$axios
.post(`/api/admin/election`, this.election)
.then((response) => {
this.$message({
type: "success",
message: "نظرسنجی با موفقیت ایجاد شد."
})
this.$router.push({name: 'admin-elections-details', params: {details: response.data._id}})
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید."
})
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message
})
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده"
})
}
if (err.response.status === 422) {
this.validation = err.response.data.validation
this.$message({
type: 'warning',
message: 'پارامترها رو بررسی کنید'
})
} else console.log(err.response.data)
})
},
update() {
this.validation = {}
this.$axios.put(`/api/admin/election/${this.election._id}`, {...this.election, catId: this.catId})
.then((response) => {
this.$message({
type: "success",
message: "اطلاعات بروزرسانی شد."
})
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید."
})
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message
})
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده"
})
}
if (err.response.status === 422) {
this.validation = err.response.data.validation
this.$message({
type: 'warning',
message: 'پارامترها رو بررسی کنید'
})
} else console.log(err.response.data)
});
},
addCandidate() {
this.validation = {}
const data = new FormData();
data.append("firstName", this.candidateDetail.firstName);
data.append("lastName", this.candidateDetail.lastName);
data.append("bornDate", this.candidateDetail.bornDate);
data.append("education", this.candidateDetail.education);
data.append("nationalCode", this.candidateDetail.nationalCode);
data.append("resume", this.candidateDetail.resume);
data.append("profilePic", this.$refs.profilePic.files[0]);
this.$axios.post(`/api/admin/election/candidate/${this.$route.params.details}`, data)
.then((response) => {
this.showCandidate = false;
this.$message({
type: "success",
message: "کاندیدا با موفقیت ایجاد شد"
})
this.$nuxt.refresh();
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید."
})
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message
})
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده"
})
}
if (err.response.status === 422) {
this.validation = err.response.data.validation
this.$message({
type: 'warning',
message: 'پارامترها رو بررسی کنید'
})
} else console.log(err.response.data)
})
},
updateCandidate(id) {
const data = new FormData();
data.append("firstName", this.candidateDetail.firstName);
data.append("lastName", this.candidateDetail.lastName);
data.append("bornDate", this.candidateDetail.bornDate);
data.append("education", this.candidateDetail.education);
data.append("nationalCode", this.candidateDetail.nationalCode);
data.append("resume", this.candidateDetail.resume);
data.append("candidateId", id);
if (this.$refs.profilePic.files[0]) data.append("profilePic", this.$refs.profilePic.files[0]);
this.validation = {}
this.$axios.put(`/api/admin/election/candidate/${this.$route.params.details}`, data)
.then((response) => {
this.showCandidate = false;
this.$message({
type: "success",
message: "کاندیدا با موفقیت بروزرسانی شد"
})
this.$nuxt.refresh();
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید."
})
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message
})
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده"
})
}
if (err.response.status === 422) {
this.validation = err.response.data.validation
this.$message({
type: 'warning',
message: 'پارامترها رو بررسی کنید'
})
} else console.log(err.response.data)
})
},
removeCandidate(id) {
this.$confirm("کاندیدا حذف شود؟", "اخطار", {
confirmButtonText: "بله",
cancelButtonText: "لغو",
type: "warning"
})
.then(() => {
this.$axios.delete(`/api/admin/election/candidate/${this.$route.params.details}/${id}`)
.then((response) => {
this.$message({
type: "success",
message: "کاندیدا با موفقیت حذف شد."
})
this.$nuxt.refresh()
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید."
})
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message
})
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده"
})
}
if (err.response.status === 422) {
this.validation = err.response.data.validation
this.$message({
type: 'warning',
message: 'پارامترها رو بررسی کنید'
})
} else console.log(err.response.data)
})
})
.catch(() => {
this.$message({
type: "warning",
message: "عملیات لغو شد"
})
})
},
addVoter() {
this.validation = {}
this.$axios.post(`/api/admin/election/voter/${this.$route.params.details}`, this.newVoter)
.then((response) => {
this.$message({
type: "success",
message: "رای دهنده با موفقیت ایجاد شد"
})
this.$nuxt.refresh();
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید."
})
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message
})
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده"
})
}
if (err.response.status === 422) {
this.validation = err.response.data.validation
this.$message({
type: 'warning',
message: 'پارامترها رو بررسی کنید'
})
} else console.log(err.response.data)
})
},
removeVoter(id) {
this.$confirm("رای دهنده حذف شود؟", "اخطار", {
confirmButtonText: "بله",
cancelButtonText: "لغو",
type: "warning"
})
.then(() => {
this.$axios.delete(`/api/admin/election/voter/${this.$route.params.details}/${id}`)
.then((response) => {
this.$message({
type: "success",
message: "رای دهنده با موفقیت حذف شد."
})
this.election.voters = this.election.voters.filter(item => item._id !== id)
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید."
})
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message
})
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده"
})
}
if (err.response.status === 422) {
this.validation = err.response.data.validation
this.$message({
type: 'warning',
message: 'پارامترها رو بررسی کنید'
})
} else console.log(err.response.data)
})
})
.catch(() => {
this.$message({
type: "warning",
message: "عملیات لغو شد"
})
})
},
},
head() {
return {
title: this.title,
}
},
layout: "admin",
async asyncData({$axios, params, error}) {
try {
const categories = await $axios.get('/api/admin/category/getParent')
if (params.details !== 'new') {
const election = await $axios.get(`/api/admin/election/${params.details}`)
return {
categories: categories.data,
election: election.data
}
} else {
return {
categories: categories.data,
election: {
title: '',
description: '',
catId: '',
startDate: '',
endDate: '',
publish: true,
}
}
}
} catch (e) {
if (e?.response?.status === 401) error({status: 401, message: "لطفا دوباره وارد سیستم شوید."})
if (e?.response?.status === 403) error({status: 403, message: e?.response?.data?.message})
if (e?.response?.status === 500) error({status: 500, message: "مشکلی در گرفتن اطلاعات پیش آمده"})
else error({status: 404, message: "پرونده خبری مورد نظر پیدا نشد"})
}
},
}
</script>
<style lang="scss">
.electionCandidate .el-dialog {
@media (max-width: 768px) {
width: 90%;
}
}
</style>
<style lang="scss">
.survey-item2 {
padding: 20px 0;
.el-radio-group {
direction: ltr;
.el-radio__input.is-checked .el-radio__inner {
background: red;
border-color: red;
}
.el-radio__input.is-checked + .el-radio__label {
color: red;
}
.el-radio__label {
&:hover {
color: red;
}
}
.el-radio__inner {
border: 1px solid #666666;
}
.el-radio__inner:hover {
border-color: red;
}
}
.comment-btn {
display: flex;
justify-content: flex-end;
button {
&:disabled {
border-color: #666666;
background-color: #666666;
color: white;
border-radius: 5px;
}
}
}
.el-checkbox-group {
direction: ltr;
text-align: right;
.el-checkbox__inner {
border: 1px solid #666666;
&:hover {
border-color: red;
}
}
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: red;
border-color: red;
}
.el-checkbox__label {
&:hover {
color: red;
}
}
.el-checkbox__input.is-checked + .el-checkbox__label {
color: red;
}
.el-progress {
font-family: 'sansNum', sans-serif;
.el-progress-bar__inner {
right: 0;
}
.el-progress__text {
margin-right: 10px;
}
}
}
</style>