ostandari/pages/_portal/services/election/index.vue

<template>
  <div class="election-page">

    <div class="container" v-if="!loggedIn">
      <div class="row login-row">
        <div class="col-12 col-md-8">
          <div class="view-form">
            <img src="~/static/img/logo-re3-150x150.png" alt="">
            <form @submit.prevent="post">
              <h2 class="title">ورود</h2>

              <div class="formRow" :class="validation.username ? 'err' : null">
                <input class="input" v-model="loginData.username" name="userName" type="text" placeholder="ایمیل یا نام کاربری را وارد کنید"/>
                <p v-if="validation.username">{{ validation.username.msg }}</p>
              </div>
              <div class="formRow" :class="validation.password ? 'err' : null">
                <input class="input" v-model="loginData.password" name="password" type="password" placeholder="پسوورد خود را وارد کنید"/>
                <p v-if="validation.password">{{ validation.password.msg }}</p>
              </div>
              <div class="btnSub">
                <button class="btn btn-primary btn-link" type="submit">ورود</button>
                <!-- <nuxt-link >SUBMIT NOW</nuxt-link> -->
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>

    <div class="container" v-else>
      <div class="row">
        <div class="col-12">
          <LineTxt label="انتخابات"/>
        </div>
        <div class="col-12 stretch">
          <div class="election-view-item">
            <div class="election-item1">
              <h2>{{ election.title }} :</h2>
              <p class="about-title">درباره انتخابات :</p>
              <p class="about-txt">{{ election.description }}</p>
            </div>


            <div class="row election-item2">
              <div class="col-12 col-md-6 col-lg-4 col-xl-3" v-for="item in election.candidates">
                <div class="election-user" :class="[selectedCandide === item._id ? 'selected' : 'exclude',selectedCandide && 'clicked']">
                  <img :src="item.profilePic" :alt="item.firstName + ' ' + item.lastName">
                  <h3 class="user-name">{{ item.firstName + ' ' + item.lastName }}</h3>
                  <div class="view-btn">
                    <button type="button" @click="itemDialog(item)" class="btn bigBtn btn-primary p-2">مشاهده رزومه</button>
                    <button class="btn bigBtn p-2" :class="selectedCandide === item._id ? 'selectBTN' : 'btn-success'" @click="selectedCandide = item._id">انتخاب</button>
                  </div>
                </div>
              </div>

              <!------------------------ CV modal ------------------------>
              <el-dialog :visible.sync="showAlert">
                <div class="container">
                  <div class="row align-items-center mb-3">
                    <div class="col-12 col-md-4">
                      <img class="img-alert" :src="dialogData.profilePic" :alt="dialogData.firstName + ' ' + dialogData.lastName">
                    </div>
                    <div class="col-12 col-md-8">
                      <h2 class="user-name">{{ dialogData.firstName + ' ' + dialogData.lastName }}</h2>
                      <p>تاریخ تولد : {{ dialogData.bornDate }}</p>
                      <p>کد ملی : {{ dialogData.nationalCode }}</p>
                      <p>مدرک تحصیلی : {{ dialogData.education }}</p>
                    </div>
                  </div>
                  <div>
                    <h3 class="about"> رزومه :</h3>
                    <p>{{ dialogData.resume }}</p>
                  </div>
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button class="btn bigBtn btn-primary" @click="showAlert = false">بستن</el-button>
                </div>
              </el-dialog>
              <!------------------------ CV modal ------------------------>

              <div class="col-12">
                <button class="btn bigBtn btn-primary pt-2 pb-2 voteBtn" :disabled="!selectedCandide" @click="vote">ثبت رای</button>
                <button class="btn bigBtn btn-primary pt-2 pb-2" @click="logOutOfElection">خروج</button>
              </div>

            </div>
          </div>

        </div>

        <div class="not-found" v-if="!election">
          <p>موردی وجود ندارد!</p>
        </div>
      </div>
    </div>


  </div>
</template>


<script>
export default {
  data() {
    return {
      showAlert: false,
      loginData: {
        username: '',
        password: '',
      },
      validation: {},
      election: null,
      selectedCandide: '',
      dialogData: {}
    }
  },
  computed: {
    loggedIn() {
      return (this.$auth.loggedIn && this.$auth.hasScope('voter'))
    }
  },
  methods: {
    post() {
      this.validation = {}
      this.$auth.loginWith('vote', {
        data: this.loginData
      })
          .then(res => {
            this.loginData = {
              username: '',
              password: '',
            }
            this.$nuxt.refresh()
          })
          .catch(e => {
            if (e.response.status === 422) this.validation = e.response.data.validation
            else console.log(e)
          })
    },
    itemDialog(item) {
      this.showAlert = !this.showAlert
      this.dialogData = item
    },
    vote() {
      if (!this.selectedCandide.length) return this.$message({
        type: 'warning',
        message: 'ابتدا یک گزینه انتخاب کنید'
      })
      this.$confirm("از انتخاب خود اطمینان دارید؟", "هشدار", {
        confirmButtonText: "بله",
        cancelButtonText: "لغو",
        type: "warning",
      })
          .then(() => {
            this.$axios.post('/api/public/addVote', {
              electionId: this.election._id,
              candidateId: this.selectedCandide
            })
                .then(res => {
                  this.$message({
                    type: 'success',
                    message: 'انتخاب شما با موفقیت ثبت شد'
                  })
                  this.$auth.logout()
                })
                .catch(e => {
                  this.error({
                    status: 500, message: 'مشکلی در ارسال اطلاعات به وجود آمده است'
                  })
                })
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "عملیات لغو شد",
            });
          })
    },
    logOutOfElection() {
      this.$confirm("از صفحه انتخابات خارج میشوید؟", "هشدار", {
        confirmButtonText: "بله",
        cancelButtonText: "لغو",
        type: "warning",
      })
          .then(() => {
            this.$auth.logout()
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "عملیات لغو شد",
            });
          })
    }
  },
  async asyncData({$axios, error, $auth}) {
    try {
      if ($auth.loggedIn && $auth.hasScope('voter')) {
        const election = await $axios.get('/api/public/getElection')
        return {
          election: election.data,
        }
      } else {
        return {
          election: []
        }
      }
    } catch (e) {
      error({
        status: 401, message: 'شما اجازه دسترسی به این صفحه را ندارید'
      })
    }
  }
}

</script>