asan-service/components/profile/UserAsideMenu.vue

<template>
  <div class="user-aside">
    <ul>
      <template v-if="userContactConfirmed && user.isAgent">
        <div class="seprator">
          <div class="txt">
            <span>امکانات نمایندگی</span>
          </div>
          <div class="line"></div>
        </div>
        <nuxt-link
          :to="{ name: 'account-agents-inbox', query: { type: 'ttl' } }"
          tag="li"
          :class="$route.name.includes('account-agents-inbox') && 'active'"
        >
          <a>
            <b v-if="agentInbox" class="badge">{{ agentInbox }}</b>
            <i v-else class="fal fa-inbox"></i>
            <span>صندوق ورودی</span>
          </a>
        </nuxt-link>

        <nuxt-link
          :to="{ name: 'account-agents-pieces', query: { type: 'temp' } }"
          tag="li"
          :class="$route.name.includes('account-agents-pieces') && 'active'"
        >
          <a>
            <i class="fas fa-wrench"></i>
            <span>درخواست قطعه</span>
          </a>
        </nuxt-link>

        <nuxt-link
          :to="{ name: 'account-agents-ops', query: { type: 'temp' } }"
          tag="li"
          :class="$route.name.includes('account-agents-ops') && 'active'"
        >
          <a>
            <i class="fas fa-backpack"></i>
            <span>درخواست قطعه داغی</span>
          </a>
        </nuxt-link>

        <nuxt-link
          :to="{ name: 'account-agents-buffer', query: { type: 'temp' } }"
          tag="li"
          :class="$route.name.includes('account-agents-buffer') && 'active'"
        >
          <a>
            <i class="fab fa-buffer"></i>
            <span>درخواست کالای بافر</span>
          </a>
        </nuxt-link>

        <nuxt-link
          :to="{ name: 'account-agents-guaranteeReports', query: { type: 'temp' } }"
          tag="li"
          :class="$route.name.includes('account-agents-guaranteeReports') && 'active'"
        >
          <a>
            <i class="fas fa-file-chart-line"></i>
            <span>ارسال گزارش عملکرد</span>
          </a>
        </nuxt-link>

        <nuxt-link :to="{ name: 'account-agents-reports' }" tag="li">
          <a>
            <i class="fas fa-file-chart-pie"></i>
            <span>گزارشات</span>
          </a>
        </nuxt-link>

        <nuxt-link :to="{ name: 'account-agents-announcements' }" tag="li">
          <a class="relativePos">
            <b v-if="newAgentAnnosCount" class="badge">{{ newAgentAnnosCount }}</b>
            <i v-else class="fas fa-bullhorn"></i>
            <span>اطلاعیه ها</span>
          </a>
        </nuxt-link>

        <nuxt-link :to="{ name: 'account-agents-edit-info' }" tag="li">
          <a>
            <i class="fas fa-edit"></i>
            <span>ویرایش اطلاعات نمایندگی</span>
          </a>
        </nuxt-link>

        <nuxt-link :to="{ name: 'account-agents-file-upload' }" tag="li">
          <a>
            <i class="fas fa-edit"></i>
            <span>ویرایش مدارک نمایندگی</span>
          </a>
        </nuxt-link>

        <div class="seprator">
          <div class="txt">
            <span>امکانات کاربری</span>
          </div>
          <div class="line"></div>
        </div>
      </template>

      <nuxt-link :to="{ name: 'account' }" tag="li" exact class="username">
        <a>
          <i class="fas fa-user"></i>
          <span class="singleLineTxt" :title="fullName">{{ fullName }}</span>
        </a>
      </nuxt-link>

      <template v-if="userContactConfirmed">
        <nuxt-link :to="{ name: 'account-post' }" tag="li">
          <a>
            <i class="fas fa-shipping-fast"></i>
            <span>ارسال کالا</span>
          </a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'account-drafts' }" tag="li">
          <a>
            <b v-if="draftsCount" class="badge">{{ draftsCount }}</b>
            <i v-else class="fas fa-mail-bulk"></i>
            <span>پیش نویس ها</span>
          </a>
        </nuxt-link>
        <nuxt-link
          :to="{ name: 'account-guarantee', query: { type: 'ttl' } }"
          tag="li"
          :class="$route.name.includes('account-guarantee') && 'active'"
        >
          <a>
            <i class="fal fa-list"></i>
            <span>لیست گارانتی</span>
          </a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'account-history' }" tag="li">
          <a>
            <i class="fal fa-book"></i>
            <span>مانده معین مشتری</span>
          </a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'account-addTicket' }" tag="li" exact>
          <a>
            <i class="fal fa-plus"></i>
            <span>افزودن تیکت</span>
          </a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'account-tickets' }" tag="li">
          <a class="relativePos">
            <b v-if="unreadTickets" class="badge">{{ unreadTickets }}</b>
            <i v-else class="fal fa-envelope"></i>
            <span>تیکت ها</span>
          </a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'account-announcements' }" tag="li">
          <a class="relativePos">
            <b v-if="newUserAnnosCount" class="badge">{{ newUserAnnosCount }}</b>
            <i v-else class="fas fa-bell"></i>
            <span>اعلانات</span>
          </a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'account-survey' }" tag="li">
          <a>
            <i class="fas fa-chart-bar"></i>
            <span>نظر سنجی</span>
          </a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'account-profile' }" tag="li">
          <a>
            <i class="fal fa-user-edit"></i>
            <span>ویرایش پروفایل</span>
          </a>
        </nuxt-link>
      </template>

      <nuxt-link v-if="!user.email_confirmed || !user.mobile_confirmed" :to="{ name: 'account-verify' }" tag="li">
        <a>
          <i class="fas fa-badge-check"></i>
          <span>تایید اطلاعات</span>
        </a>
      </nuxt-link>

      <li>
        <a @click="logOut">
          <i class="fal fa-sign-out-alt"></i>
          <span>خروج</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      unreadTickets: state => state.front.unreadTickets,
      draftsCount: state => state.front.draftsCount,
      agentInbox: state => state.front.agentInbox,
      newUserAnnosCount: state => state.front.newUserAnnosCount,
      newAgentAnnosCount: state => state.front.newAgentAnnosCount
    }),
    user() {
      return this.$auth.user
    },
    fullName() {
      return this.user.first_name + ' ' + this.user.last_name
    },
    userContactConfirmed() {
      return this.user.email_confirmed
    }
  },
  methods: {
    logOut() {
      this.$confirm('میخواهید از حساب کاربری خارج شوید؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(async () => {
          try {
            await this.$auth.logout()
            location.reload()
          } catch (e) {
            console.log(e.response.data)
          }
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>