asan-service/components/admin/TheSidebar.vue

<template>
  <CSidebar
    fixed
    :minimize="minimize"
    :show="show"
    @update:show="value => $store.commit('admin/set', ['sidebarShow', value])"
  >
    <CSidebarBrand class="d-md-down-none">
      <a href="/" target="_blank">
        <logo class="c-sidebar-brand-full" size="custom-size" :height="40" name="logo" />
        <img
          src="assets/img/favicon_white.png"
          alt="logo"
          class="c-sidebar-brand-minimized"
          size="custom-size"
          :height="35"
          name="logo"
        />
      </a>
    </CSidebarBrand>

    <!--    <CRenderFunction flat :content-to-render="$options.nav"/>-->

    <!-- sidebar content -->
    <CSidebarNav>
      <CSidebarNavItem name="صفحه اصلی" :to="{ name: 'admin' }" icon="cil-speedometer" />

      <CSidebarNavDropdown
        :show="getDropdownState('adminS_WebsiteM_Dropdown')"
        name="مدیریت وبسایت"
        font-icon="fas fa-folder"
        @update:show="val => setDropdownState('adminS_WebsiteM_Dropdown', val)"
      >
        <CSidebarNavItem
          v-if="hasPermission('downloads')"
          name="لیست دانلود ها"
          :to="{ name: 'admin-downloads-page', params: { page: 1 } }"
          font-icon="fal fa-arrow-alt-to-bottom"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('download-categories')"
          name="دسته بندی دانلود"
          :to="{ name: 'admin-download-categories' }"
          font-icon="fal fa-arrow-alt-to-bottom"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('learning')"
          name="آموزش ها"
          :to="{ name: 'admin-learning-page', params: { page: 1 } }"
          icon="cil-chart-pie"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('warranty-terms')"
          name="شرایط گارانتی"
          :to="{ name: 'admin-warranty-terms-page', params: { page: 1 } }"
          font-icon="fal fa-file-alt"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('faq')"
          name="سوالات متداول"
          :to="{ name: 'admin-faq' }"
          font-icon="fal fa-file-alt"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('help')"
          name="راهنمای ثبت گارانتی"
          :to="{ name: 'admin-help' }"
          font-icon="fal fa-file-alt"
          exact
        />
        <CSidebarNavItem
          v-if="hasPermission('brands')"
          name="لیست برند ها"
          :to="{ name: 'admin-brands' }"
          font-icon="fal fa-file-alt"
          :exact="false"
        />
      </CSidebarNavDropdown>

      <CSidebarNavDropdown
        v-if="hasPermission('downloads')"
        :show="getDropdownState('adminS_CustomerM_Dropdown')"
        name="مدیریت مشتریان"
        font-icon="fas fa-folder"
        @update:show="val => setDropdownState('adminS_CustomerM_Dropdown', val)"
      >
        <CSidebarNavItem
          v-if="hasPermission('customers')"
          name="لیست مشتریان"
          :to="{ name: 'admin-customers', query: { filter: 'all' } }"
          font-icon="fal fa-list"
          :exact="false"
          :badge="newCustomers ? { text: newCustomers, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('tickets')"
          name="تیکت های مشتریان"
          :to="{ name: 'admin-tickets' }"
          font-icon="fal fa-comment-alt-dots"
          :exact="false"
          :badge="unreadTickets ? { text: unreadTickets, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('tickets')"
          name="ایجاد تیکت برای مشتری"
          :to="{ name: 'admin-add-tickets' }"
          font-icon="fal fa-plus"
          exact
        />

        <CSidebarNavItem
          v-if="hasPermission('complaint')"
          name="لیست شکایات "
          :to="{ name: 'admin-complaint' }"
          font-icon="fal fa-list"
          :exact="false"
          :badge="newComplaintReports ? { text: newComplaintReports, color: 'danger' } : null"
        />
      </CSidebarNavDropdown>

      <CSidebarNavDropdown
        :show="getDropdownState('adminS_AgentM_Dropdown')"
        name="مدیریت نمایندگان"
        font-icon="fas fa-folder"
        @update:show="val => setDropdownState('adminS_AgentM_Dropdown', val)"
      >
        <CSidebarNavItem
          v-if="hasPermission('representations')"
          name="درخواست های نمایندگی"
          :to="{ name: 'admin-representations', query: { status: 'registered' } }"
          font-icon="fas fa-handshake"
          :exact="false"
          :badge="newRepresentations ? { text: newRepresentations, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('agents')"
          name="لیست نمایندگان"
          :to="{ name: 'admin-agents', query: { agent: true } }"
          font-icon="fas fa-list"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('agents')"
          name="نمایندگان صلب امتیاز شده"
          :to="{ name: 'admin-agents', query: { revoked: true } }"
          font-icon="fas fa-list"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('agentsInbox')"
          name="صندوق ورودی نمایندگان"
          :to="{ name: 'admin-agentsInbox', query: { status: 'all' } }"
          font-icon="fas fa-inbox"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('piece-requests')"
          name="درخواست های قطعه"
          :to="{ name: 'admin-piece-requests', query: { status: 'sent' } }"
          font-icon="fas fa-wrench"
          :exact="false"
          :badge="newPieceRequests ? { text: newPieceRequests, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('op-requests')"
          name="درخواست های قطعه داغی"
          :to="{ name: 'admin-op-requests', query: { status: 'sent' } }"
          font-icon="fas fa-backpack"
          :exact="false"
          :badge="newOldPieceRequests ? { text: newOldPieceRequests, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('buffer-requests')"
          name="درخواست های کالای بافر"
          :to="{ name: 'admin-buffer-requests', query: { status: 'sent' } }"
          font-icon="fab fa-buffer"
          :exact="false"
          :badge="newBufferRequests ? { text: newBufferRequests, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('guarantee-reports')"
          name="فرم های عملکرد گارانتی"
          :to="{ name: 'admin-guarantee-reports' }"
          font-icon="fas fa-file-chart-line"
          :exact="false"
          :badge="newGuaranteeReports ? { text: newGuaranteeReports, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('agentReports')"
          name="گزارشات"
          :to="{ name: 'admin-agentReports' }"
          font-icon="fas fa-file-chart-pie"
          :exact="false"
        />
      </CSidebarNavDropdown>

      <CSidebarNavDropdown
        v-if="hasPermission('admins')"
        :show="getDropdownState('adminS_AdminsM_Dropdown')"
        name="مدیریت ادمین ها"
        font-icon="fas fa-folder"
        @update:show="val => setDropdownState('adminS_AdminsM_Dropdown', val)"
      >
        <CSidebarNavItem
          v-if="hasPermission('admins')"
          name="افزودن ادمین"
          :to="{ name: 'admin-admins-admin', params: { admin: 'new' } }"
          font-icon="fal fa-user"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('admins')"
          name="لیست ادمین ها"
          :to="{ name: 'admin-admins' }"
          font-icon="fal fa-list"
          :exact="false"
        />
      </CSidebarNavDropdown>

      <CSidebarNavDropdown
        :show="getDropdownState('adminS_AppM_Dropdown')"
        name="مدیریت اپلیکیشن"
        font-icon="fas fa-folder"
        @update:show="val => setDropdownState('adminS_AppM_Dropdown', val)"
      >
        <CSidebarNavItem
          v-if="hasPermission('announcements')"
          name="اعلانات مشتریان"
          :to="{ name: 'admin-announcements', query: { user: true } }"
          font-icon="fal fa-bell"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('announcements')"
          name="اطلاعیه های نمایندگان"
          :to="{ name: 'admin-announcements', query: { agent: true } }"
          font-icon="fal fa-bullhorn"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('sms')"
          name="ارسال پیامک"
          :to="{ name: 'admin-sms' }"
          font-icon="fas fa-sms"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('serials-exel')"
          name="اکسل سریال گارانتی(لوازم جانبی)"
          :to="{ name: 'admin-serials-exel', query: { type: 'guaranteeSerial', g: 1 } }"
          font-icon="fal fa-file-excel"
          exact
        />
        <CSidebarNavItem
          v-if="hasPermission('serials-exel')"
          name="اکسل سریال اصالت(لوازم جانبی)"
          :to="{ name: 'admin-serials-exel', query: { type: 'orginality', g: 1 } }"
          font-icon="fal fa-file-excel"
          exact
        />
        <CSidebarNavItem
          v-if="hasPermission('serials-exel')"
          name="اکسل سریال گارانتی(لوازم صوتی)"
          :to="{ name: 'admin-serials-exel', query: { type: 'guaranteeSerial', g: 2 } }"
          font-icon="fal fa-file-excel"
          exact
        />
        <CSidebarNavItem
          v-if="hasPermission('serials-exel')"
          name="اکسل سریال اصالت(لوازم صوتی)"
          :to="{ name: 'admin-serials-exel', query: { type: 'orginality', g: 2 } }"
          font-icon="fal fa-file-excel"
          exact
        />
        <CSidebarNavItem
          v-if="hasPermission('lotteryPopUp')"
          name="دکمه قرعه کشی"
          :to="{ name: 'admin-lotteryPopUp' }"
          font-icon="fal fa-hand-pointer"
          exact
        />
        <CSidebarNavItem
          v-if="hasPermission('lottery')"
          name="قرعه کشی"
          :to="{ name: 'admin-lottery' }"
          font-icon="fal fa-calendar-check"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('surveys')"
          name="نظرسنجی"
          :to="{ name: 'admin-surveys-private' }"
          font-icon="fal fa-chart-bar"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('surveys')"
          name="نظرسنجی عمومی"
          :to="{ name: 'admin-surveys-public' }"
          font-icon="fal fa-chart-bar"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('pieces')"
          name="لیست قطعات"
          :to="{ name: 'admin-pieces' }"
          font-icon="fas fa-wrench"
          :exact="false"
        />
      </CSidebarNavDropdown>

      <CSidebarNavDropdown
        :show="getDropdownState('adminS_GpsM_Dropdown')"
        name="مدیریت پنل جی پی اس"
        :font-icon="getDropdownState('adminS_GpsM_Dropdown') ? `fas fa-folder-open` : `fas fa-folder`"
        @update:show="val => setDropdownState('adminS_GpsM_Dropdown', val)"
      >
        <CSidebarNavItem
          v-if="hasPermission('gps')"
          name="کاربران"
          :to="{ name: 'admin-gps-users', query: { type: 'all' } }"
          font-icon="fal fa-user"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('gps')"
          name="درخواست های دسترسی"
          :to="{ name: 'admin-gps-users', query: { type: 'req' } }"
          font-icon="fal fa-user"
          :exact="false"
          :badge="pendingUsers ? { text: pendingUsers, color: 'danger' } : null"
        />

        <!-- <CSidebarNavItem
          v-if="hasPermission('gps')"
          name="دستگاه ها"
          :to="{ name: 'admin-gps-device' }"
          font-icon="fal fa-microchip"
          :exact="false"
        /> -->
        <CSidebarNavItem
          v-if="hasPermission('gps')"
          name="دستگاه های ثبت شده"
          :to="{ name: 'admin-gps-installed-device', query: { filter: 'all' } }"
          font-icon="fal fa-map"
          :badge="newInstallDeviceRequest ? { text: newInstallDeviceRequest, color: 'danger' } : null"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('gps')"
          name="هزینه نصب"
          :to="{ name: 'admin-gps-fee' }"
          font-icon="fal fa-money-bill"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('admin-gps-withdraw')"
          name="درخواست های برداشت"
          :to="{ name: 'admin-gps-withdraw', query: { filter: 'all' } }"
          font-icon="fal fa-credit-card"
          :exact="false"
          :badge="newWithdrawRequest ? { text: newWithdrawRequest, color: 'danger' } : null"
        />
        <CSidebarNavItem
          v-if="hasPermission('gps')"
          name="جوایز"
          :to="{ name: 'admin-gps-award' }"
          font-icon="fal fa-gift"
          :exact="false"
        />
        <CSidebarNavItem
          v-if="hasPermission('gps')"
          name="درخواست های جوایز"
          :to="{ name: 'admin-gps-award-req', params: { admin: 'new' } }"
          font-icon="fal fa-trophy"
          :exact="false"
          :badge="newAwardRequest ? { text: newAwardRequest, color: 'danger' } : null"
        />
      </CSidebarNavDropdown>
    </CSidebarNav>
    <!-- sidebar content -->

    <CSidebarMinimizer
      class="d-md-down-none"
      @click.native="$store.commit('admin/set', ['sidebarMinimize', !minimize])"
    />
  </CSidebar>
</template>

<script>
// import nav from './_nav'
import { mapState } from 'vuex'

export default {
  name: 'TheSidebar',
  // nav,
  computed: {
    ...mapState({
      show: state => state.admin.sidebarShow,
      minimize: state => state.admin.sidebarMinimize,
      unreadCuMsgs: state => state.admin.unreadCuMsgs,
      unreadTickets: state => state.admin.unreadTickets,
      newCustomers: state => state.admin.newCustomers,
      newRepresentations: state => state.admin.newRepresentations,
      newPieceRequests: state => state.admin.newPieceRequests,
      newOldPieceRequests: state => state.admin.newOldPieceRequests,
      newBufferRequests: state => state.admin.newBufferRequests,
      newGuaranteeReports: state => state.admin.newGuaranteeReports,
      newComplaintReports: state => state.admin.newComplaintReports,
      newWithdrawRequest: state => state.admin.newWithdrawRequest,
      pendingUsers: state => state.admin.pendingUsers,
      newAwardRequest: state => state.admin.newAwardRequest,
      newInstallDeviceRequest: state => state.admin.newInstallDeviceRequest
    })
  },
  methods: {
    hasPermission(permission) {
      if (this.$auth.loggedIn) return this.$auth.user.permissions.includes(permission)
      else return false
    },
    setDropdownState(id, state) {
      localStorage.setItem(id, state)
    },
    getDropdownState(id) {
      return localStorage.getItem(id) === 'true'
    }
  }
}
</script>