pcpuma_unam_operador/components/layouts/Menu.vue

<template>
  <div>
    <section>
      <div
        class="container is-flex is-justify-content-space-between is-align-items-center"
      >
        <div class="pl-3 py-2">
          <b-button type="is-info" @click="open = true" size="is-small">
            <b-icon icon="menu" size="is-small" />
          </b-button>
        </div>
      </div>
    </section>

    <aside>
      <b-sidebar type="is-white" v-model="open" fullheight overlay>
        <div class="m-5">
          <b-image :src="require('@/assets/icon.png')" alt="logo_pc_puma" />

          <b-menu class="mt-6">
            <b-menu-list label="Menu">
              <b-menu-list v-if="idTipoUsuario === 3 || idTipoUsuario === 4">
                <b-menu-item
                  label="Préstamo/Devolución"
                  :icon="icono('/prestamo_devolucion')"
                  :disabled="activo('/prestamo_devolucion')"
                  @click="opcionMenu('/prestamo_devolucion')"
                />
              </b-menu-list>

              <b-menu-list
                v-if="
                  idTipoUsuario === 2 ||
                  idTipoUsuario === 3 ||
                  idTipoUsuario === 4
                "
              >
                <b-menu-item
                  label="Historial de Préstamos"
                  :icon="icono('/historial_prestamos')"
                  :disabled="activo('/historial_prestamos')"
                  @click="opcionMenu('/historial_prestamos')"
                />
              </b-menu-list>

              <b-menu-item
                icon="account-multiple"
                v-if="idTipoUsuario === 3 || idTipoUsuario === 4"
              >
                <template #label="props">
                  Usuarios
                  <b-icon
                    class="is-pulled-right"
                    :icon="props.expanded ? 'menu-down' : 'menu-up'"
                  />
                </template>

                <b-menu-item
                  label="Buscar usuario"
                  :icon="icono('/usuarios/buscar_usuario')"
                  :disabled="activo('/usuarios/buscar_usuario')"
                  @click="opcionMenu('/usuarios/buscar_usuario')"
                />

                <b-menu-item
                  label="Todos los usuarios"
                  :icon="icono('/usuarios/todos_usuarios')"
                  :disabled="activo('/usuarios/todos_usuarios')"
                  @click="opcionMenu('/usuarios/todos_usuarios')"
                />

                <b-menu-item
                  label="Incidencias"
                  :icon="icono('/usuarios/multas_usuario')"
                  :disabled="activo('/usuarios/multas_usuario')"
                  @click="opcionMenu('/usuarios/multas_usuario')"
                />
              </b-menu-item>

              <b-menu-item
                icon="cellphone-link"
                v-if="idTipoUsuario === 3 || idTipoUsuario === 4"
              >
                <template #label="props">
                  Equipos
                  <b-icon
                    class="is-pulled-right"
                    :icon="props.expanded ? 'menu-down' : 'menu-up'"
                  />
                </template>

                <b-menu-item
                  label="Buscar equipo"
                  :icon="icono('/equipos/buscar_equipo')"
                  :disabled="activo('/equipos/buscar_equipo')"
                  @click="opcionMenu('/equipos/buscar_equipo')"
                />

                <b-menu-item
                  label="Todos los equipos"
                  :icon="icono('/equipos/todos_equipos')"
                  :disabled="activo('/equipos/todos_equipos')"
                  @click="opcionMenu('/equipos/todos_equipos')"
                />
              </b-menu-item>

              <b-menu-item
                icon="cart-outline"
                v-if="idTipoUsuario === 3 || idTipoUsuario === 4"
              >
                <template #label="props">
                  Carritos
                  <b-icon
                    class="is-pulled-right"
                    :icon="props.expanded ? 'menu-down' : 'menu-up'"
                  />
                </template>

                <b-menu-item
                  label="Buscar carrito"
                  :icon="icono('/carritos/buscar_carrito')"
                  :disabled="activo('/carritos/buscar_carrito')"
                  @click="opcionMenu('/carritos/buscar_carrito')"
                />

                <b-menu-item
                  label="Todos los carritos"
                  :icon="icono('/carritos/todos_carritos')"
                  :disabled="activo('/carritos/todos_carritos')"
                  @click="opcionMenu('/carritos/todos_carritos')"
                />
              </b-menu-item>

              <b-menu-item
                icon="account-plus"
                v-if="idTipoUsuario === 2 || idTipoUsuario === 3"
              >
                <template #label="props">
                  Administrador
                  <b-icon
                    class="is-pulled-right"
                    :icon="props.expanded ? 'menu-down' : 'menu-up'"
                  />
                </template>

                <b-menu-item
                  label="Administradores"
                  :disabled="activo('/admin/administrador/admins')"
                  :icon="icono('/admin/administrador/admins')"
                  @click="opcionMenu('/admin/administrador/admins')"
                  v-if="idTipoUsuario === 2"
                />

                <b-menu-item
                  label="Operadores"
                  :disabled="activo('/admin/administrador/operadores')"
                  :icon="icono('/admin/administrador/operadores')"
                  @click="opcionMenu('/admin/administrador/operadores')"
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  icon="storefront-outline"
                  v-if="idTipoUsuario === 3 || idTipoUsuario === 4"
                >
                  <template #label="props">
                    Modulos
                    <b-icon
                      class="is-pulled-right"
                      :icon="props.expanded ? 'menu-down' : 'menu-up'"
                    />
                  </template>

                  <b-menu-item
                    label="Buscar modulo"
                    :icon="
                      icono(
                        '/admin/administrador/modulos/buscar_modulo/buscar_modulo'
                      )
                    "
                    :disabled="
                      activo(
                        '/admin/administrador/modulos/buscar_modulo/buscar_modulo'
                      )
                    "
                    @click="
                      opcionMenu(
                        '/admin/administrador/modulos/buscar_modulo/buscar_modulo'
                      )
                    "
                  />

                  <b-menu-item
                    label="Todos los modulos"
                    :icon="icono('/admin/administrador/modulos/todos_modulos')"
                    :disabled="
                      activo('/admin/administrador/modulos/todos_modulos')
                    "
                    @click="
                      opcionMenu('/admin/administrador/modulos/todos_modulos')
                    "
                  />
                </b-menu-item>

                <b-menu-item
                  label="Carga masiva equipos"
                  :disabled="
                    activo('/admin/administrador/carga_masiva_equipos')
                  "
                  :icon="icono('/admin/administrador/carga_masiva_equipos')"
                  @click="
                    opcionMenu('/admin/administrador/carga_masiva_equipos')
                  "
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  label="Carga Masiva Usuarios"
                  :disabled="
                    activo('/admin/administrador/carga_masiva_usuarios')
                  "
                  :icon="icono('/admin/administrador/carga_masiva_usuarios')"
                  @click="
                    opcionMenu('/admin/administrador/carga_masiva_usuarios')
                  "
                  v-if="idTipoUsuario === 3"
                />

                <!-- <b-menu-item
                  label="Reportes"
                  :disabled="activo('/admin/administrador/reportes')"
                  :icon="icono('/admin/administrador/reportes')"
                  @click="opcionMenu('/admin/administrador/reportes')"
                /> -->
              </b-menu-item>

              <b-menu-item
                icon="cog"
                v-if="idTipoUsuario === 2 || idTipoUsuario === 3"
              >
                <template #label="props">
                  Configuración
                  <b-icon
                    class="is-pulled-right"
                    :icon="props.expanded ? 'menu-down' : 'menu-up'"
                  />
                </template>

                <b-menu-item icon="home">
                  <template #label="props">
                    Instituciones
                    <b-icon
                      class="is-pulled-right"
                      :icon="props.expanded ? 'menu-down' : 'menu-up'"
                    />
                  </template>

                  <b-menu-item
                    :label="`Configurar ${
                      idTipoUsuario === 3 ? 'Institución' : 'Instituciones'
                    }`"
                    :icon="
                      icono(
                        '/admin/configuracion/instituciones/buscar_institucion'
                      )
                    "
                    :disabled="
                      activo(
                        '/admin/configuracion/instituciones/buscar_institucion'
                      )
                    "
                    @click="
                      opcionMenu(
                        '/admin/configuracion/instituciones/buscar_institucion'
                      )
                    "
                  />

                  <b-menu-item
                    label="Responsables"
                    :icon="
                      icono('/admin/configuracion/instituciones/responsables')
                    "
                    :disabled="
                      activo('/admin/configuracion/instituciones/responsables')
                    "
                    @click="
                      opcionMenu(
                        '/admin/configuracion/instituciones/responsables'
                      )
                    "
                    v-if="idTipoUsuario === 2"
                  />
                </b-menu-item>

                <b-menu-item
                  label="Horario de servicio"
                  :icon="icono('/admin/configuracion/institucion-dia')"
                  :disabled="activo('/admin/configuracion/institucion-dia')"
                  @click="opcionMenu('/admin/configuracion/institucion-dia')"
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  label="Tipos de carrito"
                  :icon="icono('/admin/configuracion/institucion-tipo-carrito')"
                  :disabled="
                    activo('/admin/configuracion/institucion-tipo-carrito')
                  "
                  @click="
                    opcionMenu('/admin/configuracion/institucion-tipo-carrito')
                  "
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  label="Software"
                  :icon="icono('/admin/configuracion/institucion-programa')"
                  :disabled="
                    activo('/admin/configuracion/institucion-programa')
                  "
                  @click="
                    opcionMenu('/admin/configuracion/institucion-programa')
                  "
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  label="Tipos de conectores"
                  :icon="icono('/admin/configuracion/institucion-tipo-entrada')"
                  :disabled="
                    activo('/admin/configuracion/institucion-tipo-entrada')
                  "
                  @click="
                    opcionMenu('/admin/configuracion/institucion-tipo-entrada')
                  "
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  label="Carreras y software"
                  :icon="icono('/admin/configuracion/carrera_programa')"
                  :disabled="activo('/admin/configuracion/carrera_programa')"
                  @click="opcionMenu('/admin/configuracion/carrera_programa')"
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  label="Infracciones"
                  :icon="icono('/admin/configuracion/institucion-infraccion')"
                  :disabled="
                    activo('/admin/configuracion/institucion-infraccion')
                  "
                  @click="
                    opcionMenu('/admin/configuracion/institucion-infraccion')
                  "
                  v-if="idTipoUsuario === 3"
                />

                <b-menu-item
                  label="Nuevas opciones"
                  :icon="icono('/admin/configuracion/crear_nuevas_opciones')"
                  :disabled="
                    activo('/admin/configuracion/crear_nuevas_opciones')
                  "
                  @click="
                    opcionMenu('/admin/configuracion/crear_nuevas_opciones')
                  "
                  v-if="idTipoUsuario === 2"
                />
              </b-menu-item>
            </b-menu-list>

            <b-menu-list label="Acciones">
              <b-menu-item label="Cerrar Sesión" @click="cerrarSesion()" />
            </b-menu-list>
          </b-menu>
        </div>
      </b-sidebar>
    </aside>
  </div>
</template>

<script>
import jwt_decode from 'jwt-decode'

export default {
  data() {
    return {
      open: false,
      idTipoUsuario: '',
    }
  },
  methods: {
    cerrarSesion() {
      const idInstitucion = localStorage.getItem('idInstitucion')
      const idModulo = localStorage.getItem('idModulo')

      localStorage.clear()
      if (idModulo) localStorage.setItem('idModulo', idModulo)
      if (idInstitucion) localStorage.setItem('idInstitucion', idInstitucion)
      this.$router.push('/')
    },
    opcionMenu(path) {
      this.validarLocalStorage()
      this.open = false
      this.$router.push(path)
    },
    activo(ruta) {
      return ruta === window.location.pathname
    },
    icono(ruta) {
      return this.activo(ruta) ? 'square' : 'crop-square'
    },
    validarLocalStorage() {
      const token = this.$getToken.tokenStr()
      let operador

      try {
        if (token) operador = jwt_decode(token).Operador
      } catch (err) {
        operador = null
      }
      if (!token || !operador) this.cerrarSesion()
      this.idTipoUsuario = operador.tipoUsuario.id_tipo_usuario
    },
  },
  created() {
    this.validarLocalStorage()
  },
}
</script>

<style scoped>
section {
  background-color: #bb8704;
}
</style>