asan-service/pages/admin/admins/_admin.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <el-tag v-if="admin._creator && admin._creator.first_name" type="primary">
        <span>ایجاد یا اصلاح کننده: </span>
        <span> {{ admin._creator.first_name + ' ' + admin._creator.last_name }} </span>
      </el-tag>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-admins' }">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.admin === 'new'" size="sm" color="success" style="margin-right: 10px" @click="add"
        >افزودن</CButton
      >
      <CButton v-else size="sm" color="success" style="margin-right: 10px" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput
                v-model="admin.first_name"
                label="نام"
                horizontal
                :description="validation.first_name ? validation.first_name.msg : null"
                :class="validation.first_name ? 'err' : null"
              />
              <CInput
                v-model="admin.last_name"
                label="نام خانوادگی"
                horizontal
                :description="validation.last_name ? validation.last_name.msg : null"
                :class="validation.last_name ? 'err' : null"
              />
              <CInput
                v-model="admin.username"
                label="نام کاربری"
                horizontal
                :description="validation.username ? validation.username.msg : null"
                :class="validation.username ? 'err' : null"
              />

              <template v-if="$route.params.admin === 'new'">
                <CInput
                  v-model="admin.password"
                  label="کلمه عبور"
                  horizontal
                  type="password"
                  :description="validation.password ? validation.password.msg : null"
                  :class="validation.password ? 'err' : null"
                />
                <CInput
                  v-model="admin.password_confirmation"
                  label="تکرار کلمه عبور"
                  horizontal
                  type="password"
                  :description="validation.password_confirmation ? validation.password_confirmation.msg : null"
                  :class="validation.password_confirmation ? 'err' : null"
                />
              </template>

              <el-divider />
              <h6>دسترسی های کاربر</h6>
              <div class="user-permissions">
                <el-tag
                  v-for="(item, index) in admin.permissions"
                  :key="index + Math.random() + 1"
                  class="ml-2 mb-2"
                  style="cursor: pointer"
                  closable
                  disable-transitions
                  @close="removePermission(item)"
                  >{{ getPermissionName(item) }}
                </el-tag>
              </div>
            </CForm>
          </CCardBody>
        </CCard>

        <CCard>
          <CCardBody>
            <h6>لیست کل دسترسی ها</h6>
            <div class="permissions">
              <el-tag
                v-for="(item, index) in permissions"
                :key="index + Math.random() + 2"
                class="ml-2 mb-2"
                style="cursor: pointer"
                :type="hasPermission(item.value) ? 'success' : 'primary'"
                disable-transitions
                @click="addPermission(item.value)"
                >{{ item.name }}
              </el-tag>
            </div>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol v-if="$route.params.admin !== 'new'" xl="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput
                v-model="newPass.password"
                label="کلمه عبور"
                horizontal
                type="password"
                :description="validation.password ? validation.password.msg : null"
                :class="validation.password ? 'err' : null"
              />
              <CInput
                v-model="newPass.password_confirmation"
                label="تکرار کلمه عبور"
                horizontal
                type="password"
                :description="validation.password_confirmation ? validation.password_confirmation.msg : null"
                :class="validation.password_confirmation ? 'err' : null"
              />
              <CButton color="success" variant="outline" @click="changePass">بروزرسانی کلمه عبور</CButton>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AddminAdminDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const data = {}
      const permissions = await $axios.get('/api/admin/permissions')
      data.permissions = permissions.data
      if (params.admin !== 'new') {
        const admin = await $axios.get(`/api/admin/admin/${params.admin}`)
        data.admin = admin.data
      }
      return data
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: this.$route.params.admin === 'new' ? 'افزودن کاربر' : 'ویرایش ادمین',
      admin: {
        first_name: '',
        last_name: '',
        username: '',
        permissions: [],
        password: '',
        password_confirmation: ''
      },
      permissions: null,
      validation: {},
      newPass: {
        password: '',
        password_confirmation: ''
      }
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  methods: {
    add() {
      this.validation = {}

      this.$axios
        .post(`/api/admin/addAdmin`, this.admin)
        .then(response => {
          if (response.data) {
            this.$message({
              message: 'کاربر با موفقیت ثبت شد.',
              type: 'success'
            })
            this.$router.push({ name: 'admin-admins' })
          }
        })
        .catch(error => {
          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.$message({
              type: 'error',
              message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
            })
          } else {
            this.$alert(error.response.data.message, 'خطا', {
              confirmButtonText: 'باشه'
            })
          }
        })
    },
    update() {
      this.validation = {}

      this.$axios
        .put(`/api/admin/updateAdmin/${this.admin._id}`, this.admin)
        .then(response => {
          if (response.data) {
            this.$message({
              message: 'کاربر با موفقیت بروزرسانی شد.',
              type: 'success'
            })
          }
        })
        .catch(error => {
          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.$message({
              type: 'error',
              message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
            })
          } else {
            this.$alert(error.response.data.message, 'خطا', {
              confirmButtonText: 'باشه'
            })
          }
        })
    },
    getPermissionName(value) {
      return this.permissions.filter(item => item.value === value)[0].name
    },
    addPermission(val) {
      if (!this.admin.permissions.includes(val)) this.admin.permissions.push(val)
      else
        this.$message({
          type: 'warning',
          message: 'کاربر از قبل این دسترسی را دارد'
        })
    },
    removePermission(val) {
      this.admin.permissions = this.admin.permissions.filter(item => item !== val)
    },
    hasPermission(val) {
      return this.admin.permissions.includes(val)
    },
    changePass() {
      this.validation = {}
      const data = {
        _id: this.admin._id,
        password: this.newPass.password,
        password_confirmation: this.newPass.password_confirmation
      }

      this.$axios
        .put('/api/admin/updateAdminPassword', data)
        .then(res => {
          this.$message({
            type: 'success',
            message: 'کلمه عبور با موفقیت بروزرسانی شد'
          })
          this.newPass = {
            password: '',
            password_confirmation: ''
          }
        })
        .catch(err => {
          if (err.response.status === 422) this.validation = err.response.data.validation
          else {
            this.$message({
              type: 'error',
              message: err.response.data.message
            })
          }
        })
    }
  }
}
</script>