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">
            <b-icon icon="menu" />
          </b-button>
        </div>

        <!-- <h2 class="m-2 has-text-white">{{ usuario }}</h2> -->
      </div>
    </section>
    <aside>
      <b-sidebar type="is-white" v-model="open" fullheight overlay>
        <div class="m-5">
          <b-image :src="require('@/assets/logo.png')" alt="logo_pc_puma" />

          <b-menu>
            <b-menu-list label="Menu">
              <!-- <b-menu-list>
              <b-menu-item
                label="Inicio"
                :icon="icono('/inicio')"
                :disabled="activo('/inicio')"
                @click="opcionMenu('/inicio')"
              />
            </b-menu-list> -->

              <b-menu-list>
                <b-menu-item
                  label="Préstamo/Devolución"
                  :icon="icono('/operador/prestamo_devolucion')"
                  :disabled="activo('/operador/prestamo_devolucion')"
                  @click="opcionMenu('/operador/prestamo_devolucion')"
                />
              </b-menu-list>

              <b-menu-list>
                <b-menu-item
                  label="Historial de Préstamos"
                  :icon="icono('/operador/historial_prestamos')"
                  :disabled="activo('/operador/historial_prestamos')"
                  @click="opcionMenu('/operador/historial_prestamos')"
                />
              </b-menu-list>

              <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('/operador/carritos/buscar_carrito')"
                  :disabled="activo('/operador/carritos/buscar_carrito')"
                  @click="opcionMenu('/operador/carritos/buscar_carrito')"
                />
                <b-menu-item
                  label="Todos los carritos"
                  :icon="icono('/operador/carritos/todos_carritos')"
                  :disabled="activo('/operador/carritos/todos_carritos')"
                  @click="opcionMenu('/operador/carritos/todos_carritos')"
                />
              </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('/operador/equipos/buscar_equipo')"
                  :disabled="activo('/operador/equipos/buscar_equipo')"
                  @click="opcionMenu('/operador/equipos/buscar_equipo')"
                />
                <b-menu-item
                  label="Todos los equipos"
                  :icon="icono('/operador/equipos/todos_equipos')"
                  :disabled="activo('/operador/equipos/todos_equipos')"
                  @click="opcionMenu('/operador/equipos/todos_equipos')"
                />
              </b-menu-item>

              <b-menu-item icon="account-multiple">
                <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('/operador/usuarios/buscar_usuario')"
                  :disabled="activo('/operador/usuarios/buscar_usuario')"
                  @click="opcionMenu('/operador/usuarios/buscar_usuario')"
                />
                <b-menu-item
                  label="Todos los usuarios"
                  :icon="icono('/operador/usuarios/todos_usuarios')"
                  :disabled="activo('/operador/usuarios/todos_usuarios')"
                  @click="opcionMenu('/operador/usuarios/todos_usuarios')"
                />
                <b-menu-item
                  label="Multa del usuario"
                  :icon="icono('/operador/usuarios/multas_usuario')"
                  :disabled="activo('/operador/usuarios/multas_usuario')"
                  @click="opcionMenu('/operador/usuarios/multas_usuario')"
                />
              </b-menu-item>

              <b-menu-item
                label="Regreso Inmediato"
                :icon="icono('/regreso_inmediato')"
                :disabled="activo('/regreso_inmediato')"
                @click="opcionMenu('/regreso_inmediato')"
                v-if="idTipoUsuario === 1"
              />

              <!--Admin-->
              <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="Usuarios"
                  :icon="icono('/admin/usuarios')"
                  :disabled="activo('/admin/usuarios')"
                  @click="opcionMenu('/admin/usuarios')"
                /> -->

                <b-menu-item icon="storefront-outline">
                  <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/modulos/buscar_modulo')"
                    :disabled="activo('/admin/modulos/buscar_modulo')"
                    @click="opcionMenu('/admin/modulos/buscar_modulo')"
                  />
                  <b-menu-item
                    label="Todos los modulos"
                    :icon="icono('/admin/modulos/todos_modulos')"
                    :disabled="activo('/admin/modulos/todos_modulos')"
                    @click="opcionMenu('/admin/modulos/todos_modulos')"
                  />
                </b-menu-item>

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

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

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

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

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

              <b-menu-item
                icon="account-plus"
                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
                  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="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="Programas"
                  :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 Entradas"
                  :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 Programas"
                  :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="Instituciones"
                  :icon="icono('/admin/configuracion/instituciones')"
                  :disabled="activo('/admin/configuracion/instituciones')"
                  @click="opcionMenu('/admin/configuracion/instituciones')"
                  v-if="idTipoUsuario === 2"
                />

                <b-menu-item
                  label="Crear 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>
export default {
  data() {
    return {
      open: false,
      idTipoUsuario: '',
    }
  },
  methods: {
    cerrarSesion() {
      localStorage.clear()
      this.$router.push('/')
    },
    opcionMenu(path) {
      this.open = false
      this.$router.push(path)
    },
    activo(ruta) {
      return ruta === window.location.pathname
    },
    icono(ruta) {
      return this.activo(ruta) ? 'square' : 'crop-square'
    },
  },
  created() {
    // if (
    //   !localStorage.getItem('idTipoUsuario')
    //   // !localStorage.getItem('token') ||
    //   // !localStorage.getItem('idOperador') ||
    //   // !localStorage.getItem('operador') ||
    //   // !localStorage.getItem('tipoUsuario') ||
    //   // !localStorage.getItem('idModulo')
    // )
    //   this.cerrarSesion()
    const objeto = JSON.parse(localStorage.getItem('usuario'))
    // this.operador = objeto.operador
    this.idTipoUsuario = objeto.operador.tipoUsuario.id_tipo_usuario
  },
}
</script>

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