arakrail/pages/admin/messages/index.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <admin-title-bar :title="title"></admin-title-bar>
      <div class="col-12">
        <admin-panel>
          <div class="row">
            <div class="col-6">
              <h2>افزودن دلایل تماس:</h2>
              <el-divider></el-divider>
              <el-form>
                <el-form-item :class="validation.fa_reason ? 'is-error' : null" label="فارسی">
                  <el-input v-model="newReason.fa"></el-input>
                  <p class="err" v-if="validation.fa_reason">{{ validation.fa_reason.msg }}</p>
                </el-form-item>
                <el-form-item :class="validation.en_reason ? 'is-error' : null" label="انگلیسی">
                  <el-input v-model="newReason.en"></el-input>
                  <p class="err" v-if="validation.en_reason">{{ validation.en_reason.msg }}</p>
                </el-form-item>
                <el-button @click="addReason" type="success">افزودن</el-button>
              </el-form>
            </div>
            <div class="col-6">
              <el-tag
                  v-for="item in reasons"
                  :key="item._id"
                  closable
                  @close="removeReason(item._id)"
                  type="primary"
                  style="margin-left: 10px;">
                {{ item.reason_details.fa.reason }} | {{ item.reason_details.en.reason }}
              </el-tag>
            </div>
          </div>
        </admin-panel>
      </div>
      <div class="col-12">
        <admin-panel>
          <el-table
              :data="messages"
              style="width: 100%"
              :row-class-name="readStatus">
            <el-table-column
                type="index"
                label="#">
            </el-table-column>

            <el-table-column
                label="نام"
                width="">
              <template slot-scope="scope">
                {{ fullName(scope.row.first_name, scope.row.last_name) }}
              </template>
            </el-table-column>

            <el-table-column
                prop="email"
                label="ایمیل"
                width="">
            </el-table-column>

            <el-table-column
                prop="phone_number"
                label="شماره تماس"
                width=""
                class-name="phoneNumber">
            </el-table-column>

            <el-table-column
                prop="reason"
                label="دلیل تماس"
                width=""
                class-name="phoneNumber">
            </el-table-column>

            <el-table-column
                label="مشاهده"
                width="80"
                align="left">
              <template slot-scope="scope">
                <el-button type="success" plain icon="el-icon-view" @click="$router.push({name: 'admin-messages-message',params: {message: scope.row._id}})"></el-button>
              </template>
            </el-table-column>

          </el-table>
        </admin-panel>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      title: 'لیست پیام های ارتباط با ما',
      messages: null,
      reasons: null,
      newReason: {
        fa: '',
        en: ''
      },
      validation: {}
    }
  },
  head() {
    return {
      title: this.title,
    }
  },
  methods: {
    readStatus({row, rowIndex}) {
      return row.read ? null : 'unread'
    },
    fullName(first, last) {
      return first + ' ' + last
    },
    addReason() {
      this.validation = {}
      const data = {
        fa_reason: this.newReason.fa,
        en_reason: this.newReason.en,
      }
      this.$axios.post(`/api/private/contact/reason`, data)
          .then(res => {
            this.reasons = res.data
            this.newReason = {
              fa: '',
              en: ''
            }
          })
          .catch(err => {
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data.message)
          })
    },
    removeReason(id) {
      this.$confirm('این مورد حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/api/private/contact/reason/${id}`)
            .then(res => {
              this.$message({
                message: 'با موفقیت حذف شد.',
                type: 'error'
              })
              this.reasons = this.reasons.filter(item => {
                return item._id !== id
              })
            })
            .catch(err => {
              console.log(err.response)
            })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: 'عملیات لغو شد'
        })
      })
    }
  },
  layout: 'admin',
  async asyncData({$axios, error}) {
    try {
      let messages = await $axios.get('/api/private/contact')
      let reasons = await $axios.get('/api/public/contact/reason')
      return {
        messages: messages.data,
        reasons: reasons.data
      }
    } catch (e) {
      error({status: 404, message: 'there is a problem here'})
    }
  }
}
</script>


<style>
.phoneNumber div{
  direction: ltr;
  text-align: right
}

.unread{
  background: rgb(255, 173, 0, 0.12) !important;
}
</style>