QuioscoVue/src/views/admin/UsuariosAdminOld.vue

<template>
  <div>
    <ol class="breadcrumb mb-2">
      <li class="breadcrumb-item">
        <router-link :to="{name:'homeAdmin'}">Inicio</router-link>
      </li>
      <li class="breadcrumb-item active">Usuarios</li>
    </ol>
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <!-- Manejo de error -->
            <div class="alert alert-danger alert-rounded" v-if="strError.length != 0">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
              <i class="material-icons icon-align">report_problem</i>
              {{ strError }}
            </div>
            <h4 class="card-title">Usuarios</h4>
            <span
              class="text-dark"
            >En esta página se pueden visualizar una lista de usuarios disponible.</span>
            <div class="col-sm-12 mt-3">
              <form class="form-material">
                <input
                  type="text"
                  class="form-control col-sm-3 mb-4 float-left"
                  placeholder="Buscar..."
                  v-model="buscar"
                />
                
              </form>

              <b-table
                responsive
                hover
                table-bordered
                show-empty
                :fields="titulos"
                :items="usuarios"
                :busy.sync="loading"
                :current-page="currentPage"
                :per-page="perPage"
                :filter="buscar"
                @filtered="onFiltered"
              >
                <!-- Mensaje cuando no hay registros -->
                <template v-slot:empty="scope">
                  <p class="text-center">No se encontraron usuarios para mostrar.</p>
                </template>
                <!-- Mensaje cuando no se encuentra ningun registro en la busqueda -->
                <template v-slot:emptyfiltered="scope">
                  <p class="text-center">Su búsqueda no arrojó resultados.</p>
                </template>
                <!-- columna Perfil -->
                <template v-slot:cell(IDPERFIL)="data">
                  <label
                    class="label"
                    :class="[data.item.IDPERFIL=='ADMINISTRADOR' ?'label-primary' :'label-info']"
                  >{{ data.item.IDPERFIL }}</label>
                </template>
                <!-- columna activo -->
                <template v-slot:cell(ACTI)="data">
                  <label class="label label-primary" v-if="data.item.ACTI == null">No definido</label>
                  <label
                    class="label"
                    v-else
                    :class="[data.item.ACTI ==='S'?'label-success':'label-danger']"
                  >{{ (data.item.ACTI ==='S')? 'Activado':'Desactivado' }}</label>
                </template>
                <!-- Loading al extraer los datos -->
                <template v-slot:table-busy>
                  <div class="text-center text-danger my-2">
                    <b-spinner variant="danger" class="align-middle"></b-spinner>
                    <p>Cargando...</p>
                  </div>
                </template>
                <!-- Integrar columna de acciones a la tabla -->
                <template v-slot:cell(actions)="row">
                  <i
                    class="material-icons"
                    data-toggle="tooltip"
                    title="Ver Usuario"
                    style="color:#f42849;cursor:pointer"
                    @click="infoModalEvento(row.item, $event.target)"
                  >remove_red_eye</i>
                  <i
                    class="material-icons"
                    data-toggle="tooltip"
                    title="Permisos"
                    style="color:#f42849;cursor:pointer"
                    @click="permisosModalEvento(row.item, $event.target)"
                    v-if="row.item.ACTI !== null && row.item.ACTI !== 'N' "
                  >lock</i>
                </template>
              </b-table>
              <!-- Paginación de la tabla -->
              <b-pagination
                v-model="currentPage"
                :total-rows="totalRows"
                :per-page="perPage"
                align="center"
                size="md"
                class="my-0"
                v-show="usuarios.length > 0"
              ></b-pagination>
              <!-- Modal para mostrar información del usuario -->
              <b-modal
                hide-backdrop
                content-class="shadow"
                :id="infoModal.id"
                :title="infoModal.title"
                size="lg"
              >
                <div class="row">
                  <div class="col-lg-12">
                    <div class="card card-outline-secondary">
                      <div class="card-body">
                        <form class="form-horizontal" role="form">
                          <div class="form-body">
                            <div class="row">
                              <div class="col-lg-6 col-md-12">
                                <div class="form-group row">
                                  <label
                                    class="control-label text-right col-md-4 col-4 font-bold"
                                  >Nombre:</label>
                                  <div class="col-md-8 col-8">
                                    <p class="form-control-static">{{ infoModal.content.IDUSNOMBRE}}</p>
                                  </div>
                                </div>
                              </div>
                              <!--/span-->
                              <div class="col-lg-6 col-md-12">
                                <div class="form-group row">
                                  <label
                                    class="control-label text-right col-md-4 col-4 font-bold"
                                  >ID Usuario:</label>
                                  <div class="col-md-8 col-4">
                                    <p class="form-control-static">{{ infoModal.content.IDUS}}</p>
                                  </div>
                                </div>
                              </div>
                              <!--/span-->
                            </div>
                            <!--/row-->
                            <div class="row">
                              <div class="col-lg-6 col-md-12">
                                <div class="form-group row">
                                  <label
                                    class="control-label text-right col-md-4 col-4 font-bold"
                                  >Perfil:</label>
                                  <div class="col-md-8 col-8">
                                    <p class="form-control-static">{{ infoModal.content.IDPERFIL}}</p>
                                  </div>
                                </div>
                              </div>
                              <!--/span-->
                              <div class="col-lg-6 col-md-12">
                                <div class="form-group row">
                                  <label
                                    class="control-label text-right col-md-4 col-4 font-bold"
                                  >Activo:</label>
                                  <div class="col-md-8 col-8">
                                    <p v-if="infoModal.content.ACTI == null">
                                      <label class="label label-warning mr-2">No definido</label>
                                      <a
                                        href="#"
                                        @click.prevent="cambiarEstadoUsuarioEvento(infoModal.content.IDUS,'activar', $event.target)"
                                      >Activar</a>
                                    </p>
                                    <p v-else>
                                      <b-form-checkbox
                                        v-model="userActive"
                                        value="SI"
                                        unchecked-value="NO"
                                        :disabled="infoModal.content.ACTI !== null && infoModal.content.PERM === null ? true: false"
                                        switch
                                      >
                                        <label
                                          class="label"
                                          :class="[userActive === 'SI' ? 'label-success' :'label-danger']"
                                        >{{ userActive }}</label>
                                      </b-form-checkbox>
                                    </p>
                                  </div>
                                </div>
                              </div>
                              <!--/span-->
                            </div>
                            <p
                              class="text-center"
                              v-show="infoModal.content.ACTI !== null && infoModal.content.PERM === null"
                            >
                              Este Usuario no tiene permisos asignados,
                              <a
                                href="#"
                                @click.prevent="permisosModalEvento(infoModal.content, $event.target)"
                              >asignar permisos</a>.
                              <br />
                              <i>Mientras no tenga permisos asignados no podrá iniciar sesión en el Portal de Quiosco.</i>
                            </p>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                <template v-slot:modal-footer="{  hide }">
                  <div class="w-100">
                    <button
                      id="aceptarInfo"
                      type="button"
                      class="btn btn-danger float-right"
                      @click="hide('forget')"
                    >Aceptar</button>
                    <button
                      v-show="infoModal.content.ACTI == 'S' && userActive === 'NO'"
                      id="guardar"
                      type="button"
                      class="btn btn-outline-danger mr-1 float-right"
                      @click="cambiarEstadoUsuarioEvento(infoModal.content.IDUS,'desactivar', $event.target)"
                    >Guardar</button>
                  </div>
                </template>
              </b-modal>
              <!-- end info modal -->

              <!-- start activar/desactivar usuario modal -->
              <b-modal
                content-class="shadow"
                :id="cambiarEstadoUsuarioModal.id"
                :title="cambiarEstadoUsuarioModal.title"
                size="sm"
                ok-only
              >
                <p class="my-1" v-html="cambiarEstadoUsuarioModal.msg"></p>
                <template v-slot:modal-footer="{ hide }">
                  <div class="w-100">
                    <button
                      id="cambiarEstadoUsuario"
                      type="button"
                      class="btn btn-danger float-right"
                      @click="cambiarEstadoUsuarioModal.estado === 'activar' 
                      ? cambiarEstadoUser('activar'): cambiarEstadoUser('desactivar')"
                    >
                      <span v-if="!loading">
                        {{ cambiarEstadoUsuarioModal.estado === 'activar'
                        ? 'Activar': 'Desactivar'}}
                      </span>
                      <span
                        class="spinner-border spinner-grow-sm"
                        role="status"
                        aria-hidden="true"
                        style="color:white"
                        v-if="loading"
                      ></span>
                    </button>

                    <button
                      type="button"
                      class="btn btn-secondary mr-2 float-right"
                      @click="hide('forget')"
                    >Cancelar</button>
                  </div>
                </template>
              </b-modal>
              <!-- end activar/desactivar usuario modal -->

             

              <!-- Modal permisos -->
              <b-modal
                hide-backdrop
                content-class="shadow"
                :id="permisosModal.id"
                :title="permisosModal.title"
                size="lg"
              >
                <div class="row">
                  <div class="col-sm-12">
                    <label class="float-left">
                      <b>USUARIO:</b>
                      {{ permisosModal.content.IDUSNOMBRE}}
                    </label>
                    <!-- <label class="float-right"> -->
                    <!-- <h5 class="text-left">Permisos</h5> -->

                    <!-- </label> -->
                  </div>
                </div>

                <div class="row">
                  <div class="col-lg-8 col-sm-12 col-12">
                    <div class="navigation-filter">
                      <input
                        class="form-control mb-2"
                        type="text"
                        v-model="treeFilter"
                        value
                        placeholder="Buscar..."
                      />
                    </div>
                    <tree
                      v-if="treeData"
                      :data="treeData"
                      @node:selected="onSelect"
                      :options="optsTree"
                      :filter="treeFilter"
                      ref="tree"
                      class="card card-outline-secondary"
                    >
                      <span class="tree-scope" slot-scope="{ node }">
                        <template v-if="!node.hasChildren()">
                          <i class="material-icons icon-align" style="color:#f42849">folder_open</i>
                          {{ node.text }}
                        </template>
                        <template v-else>
                          <i
                            class="material-icons icon-align"
                            style="color:#f42849"
                          >{{ node.expanded() ? 'folder' : 'create_new_folder' }}</i>
                          {{ node.text }}
                        </template>
                      </span>
                    </tree>
                  </div>
                  <div
                    class="col-lg-4 col-sm-12 col-12 card card-outline-secondary pb-4"
                    v-if="selectedNode"
                  >
                    <h6 class="mt-3 text-center">Establecer permisos</h6>
                    <!-- checkbox permisos -->
                    <div class="m-auto p-3 card card-outline-secondary">
                      <b-form-radio
                        v-model="permisos.tipo"
                        name="permisoSinAcceso"
                        @input="cambiarPermisoRadio"
                        value="Sin Acceso"
                      >Sin Acceso</b-form-radio>

                      <b-form-radio
                        v-model="permisos.tipo"
                        name="permisoPublicaryVer"
                        @input="cambiarPermisoRadio"
                        value="Ver + Publicar"
                      >Ver + Publicar</b-form-radio>

                      <b-form-radio
                        v-model="permisos.tipo"
                        name="permisoVer"
                        value="Ver"
                        @input="cambiarPermisoRadio"
                      >Ver</b-form-radio>
                    </div>
                  </div>
                </div>
                <template v-slot:modal-footer="{  hide }">
                  <div class="w-100">
                    <button
                      id="guardarPermisos"
                      type="button"
                      class="btn btn-danger float-right"
                      @click="guardarPermisos()"
                      :disabled="!verBtnGuardarPermisos"
                    >Guardar</button>
                    <button
                      id="cancelarPermisos"
                      type="button"
                      class="btn btn-secondary mr-1 float-right"
                      @click="hide('forget')"
                    >Cancelar</button>

                    <button
                      v-if="editandoPermiso"
                      id="previsualizarPermisos"
                      @click="cambiarPermisos"
                      class="btn btn-outline-danger mr-1 float-right"
                      type="button"
                      value="Previsualizar"
                    >Previsualizar</button>
                  </div>
                </template>
              </b-modal>
              <!-- end modal permisos -->
            </div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>

import "bootstrap-vue/dist/bootstrap-vue.css";
import {
  BTable,
  BSpinner,
  BModal,
  BPagination,
  BFormCheckbox,
  BFormRadio,
  ModalPlugin,
  BTooltip
} from "bootstrap-vue";
import { token } from "../../_mixin/user_mixin.js";
import LiquorTree from "liquor-tree";

var _ = require("lodash");
export default {
  name: "UsuariosAdmin",
  mixins: [token],
  components: {
    BTable,
    BModal,
    BSpinner,
    BPagination,
    BFormCheckbox,
    BFormRadio,
    ModalPlugin,
    BTooltip,
    [LiquorTree.name]: LiquorTree
  },
  data: () => ({
    selectedNode: "",
    treeFilter: "",
    buscar: "",
    totalRows: 1,
    currentPage: 1,
    perPage: 25,
    userActive: "NO",
    verBtnGuardarInfo: false,
    editandoPermiso: false,
    verBtnGuardarPermisos: false,
    infoModal: {
      id: "info-modal",
      title: "",
      content: {}
    },
    cambiarEstadoUsuarioModal: {
      id: "modal-activar",
      title: "",
      msg: "",
      estado: ""
    },
    permisosModal: {
      id: "permisos-modal",
      title: "",
      content: {}
    },
    permisos: {
      tipo: "Sin Acceso"
    },
    optsTree: {
      parentSelect: true,
      filter: {
        emptyText: "No se ha encontrado nada :( "
      }
    },
    treeData: [],
    titulos: [
      {
        key: "IDUS",
        label: "ID",
        sortable: true
      },
      {
        key: "IDUSNOMBRE",
        label: "Nombre",
        sortable: true
      },
      {
        key: "IDPERFIL",
        label: "Perfil",
        sortable: true
      },
      {
        key: "ACTI",
        label: "Estado",
        sortable: true
      },
      { key: "actions", label: "Acciones" }
    ]
  }),
  async created() {
    await this.getUsuarios();
    await this.getEstantes();
    this.totalRows = this.usuarios.length;
  },
  methods: {
    cambiarPermisoRadio(permisoSelect) {
      let arrNode = this.selectedNode.text.split("|");
      let permisoSeleccionado = arrNode[1];
      this.editandoPermiso =
        this.permisos.tipo.trim() !== permisoSeleccionado.trim() ? true : false;

      this.cambiarPermisos();
    },
    getJsonPermisosFiltrado() {
      var dataTree = this.$refs.tree;
      var data = dataTree.toJSON();
      var treeCloned = _.cloneDeep(data);
      // Remover nodo data
      var startTree = _.omit(treeCloned[0], "data");
      // Filtrar solo estado expanded y selectable para primer nivel
      var stateFirst = _.pick(startTree.state, ["expanded", "selectable"]);
      // Asignar primer estado
      startTree.state = stateFirst;
      var firtsChildren = _.values(
        _.mapValues(startTree.children, function(esta) {
          return _.omit(esta, ["state", "data"]);
        })
      );
      // Filtros anidados para remover state y data de estantes,categorias y secciones.
      var filterChild = _.values(
        _.mapValues(firtsChildren, estantes => {
          estantes.children = _.values(
            _.mapValues(estantes.children, seccciones => {
              seccciones.children = _.values(
                _.mapValues(seccciones.children, categorias => {
                  return _.omit(categorias, ["state", "data"]);
                })
              );
              return _.omit(seccciones, ["state", "data"]);
            })
          );
          return _.omit(estantes, ["state", "data"]);
        })
      );
      // Asignar hijos filtrados al arreglo padre
      startTree.children = filterChild;
      let treeFiltered = "[" + JSON.stringify(startTree) + "]";
      return treeFiltered;
    },
    guardarPermisos() {
      let jsonPermisos = this.getJsonPermisosFiltrado();

      let datos = {
        IDUS: this.permisosModal.content.IDUS,
        PERM: jsonPermisos
      };
      this.sendPermisos(datos).then(data => {
        this.getUsuarios();
        //cerrar modales
        this.$root.$emit("bv::hide::modal", "permisos-modal");
        this.$root.$emit("bv::hide::modal", "info-modal");
      });
    },
    cambiarPermisos() {
      this.getFullPath(this.selectedNode);
      this.editandoPermiso = false;
    },
    onSelect(node) {
      var arrNode = node.text.split("|");
      if (arrNode.length > 1) {
        var arrPermiso = arrNode[1];
        this.permisos.tipo = arrPermiso.trim();
      }
      this.selectedNode = node;
    },
    getFullPath(nodoSeleccionado) {
      this.verBtnGuardarPermisos = true;
      // asignamos el nodo actual para despues iterarlo
      const nodoActual = [nodoSeleccionado];
      const fullPathUp = [nodoSeleccionado];
      const fullPathDown = [nodoSeleccionado];
      // asignamos los elementos recursivos a fullPathUp y FullPathDown
      nodoSeleccionado.recurseUp(parent => fullPathUp.unshift(parent));
      nodoSeleccionado.recurseDown(children => fullPathDown.push(children));

      if (this.permisos.tipo === "Sin Acceso" || this.permisos.tipo === "Ver") {
        // Recursivos hacia abajo
        return fullPathDown.forEach(node => {
          const perm = node.text.split("| ");
          const text = perm[0];
          const tipoPermiso = perm[1];
          return (node.text = text + "| " + this.permisos.tipo);
        });
      } else {
        // Recursivo hacia arriba
        return fullPathUp.forEach((node, key) => {
          const perm = node.text.split("| ");
          const text = perm[0];
          const tipoPermiso = perm[1];
          // si es == sin acceso o ver el parent cambiarlo
          if (tipoPermiso === "Sin Acceso" || tipoPermiso === "Ver") {
            return (node.text = text + "| " + this.permisos.tipo);
          }
          if (nodoSeleccionado.text === node.text) {
            // Solo cambiar el nodo actual
            return (node.text = text + "| " + this.permisos.tipo);
          }
        });
      }
    },
    infoModalEvento(item, button) {
      this.infoModal.title = "Información de usuario";
      this.infoModal.content = item;
      this.$root.$emit("bv::show::modal", this.infoModal.id, button);
      this.verBtnGuardarInfo = false;
      this.userActive = this.infoModal.content.ACTI === "S" ? "SI" : "NO";
    },
    permisosModalEvento(item, button) {
      this.permisosModal.title = "Permisos de usuario";
      this.permisosModal.content = item;
      // Obtener los permisos del usuario
      this.getPermisos(item.IDUS).then(resut => {
        this.$refs.tree.setModel(this.permisosDatos);
      });
      this.$root.$emit("bv::show::modal", this.permisosModal.id, button);
      this.selectedNode = "";
      this.verBtnGuardarPermisos = false;
      this.treeFilter = "";
    },
    cambiarEstadoUsuarioEvento(id, estado, button) {
      this.cambiarEstadoUsuarioModal.estado = estado;
      if (estado === "activar") {
        this.cambiarEstadoUsuarioModal.title = "Activar usuario";
        this.cambiarEstadoUsuarioModal.msg =
          "¿ Desea activar el usuario con ID: <b>" + id + "</b> en el sistema?";
      } else {
        this.cambiarEstadoUsuarioModal.title = "Desactivar usuario";
        this.cambiarEstadoUsuarioModal.msg =
          "¿ Desea desactivar el usuario con ID: <b>" +
          id +
          "</b> ?, si desactiva al usuario, no podrá <i>iniciar sesión</i> y sus permisos serán <b>removidos</b>.";
      }
      this.$root.$emit(
        "bv::show::modal",
        this.cambiarEstadoUsuarioModal.id,
        button
      );
    },
    onFiltered(filteredItems) {
      // Actualiza el paginador al utilizar el filtro
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    cambiarEstadoUser(action) {
      const idperfil = this.infoModal.content.IDPERFIL;
      const idus = this.infoModal.content.IDUS;
      // Insertamos los datos en BD
      this.sendEstadoUser(idus, action).then(res => {
        this.$root.$emit("bv::hide::modal", "modal-activar");
        // Actualizamos los datos del usuario actual
        this.getUsuarios().then(() => {
          const setNewContent = this.usuarios.filter(
            user => user.IDUS === idus && user.IDPERFIL === idperfil
          );
          this.infoModal.content = setNewContent[0];
        });
      });
      this.verBtnGuardarInfo = false;
    },
    sendPermisos(datos) {
      return this.$http
        .post(this.url_api + "/usuario/permisos", datos, this.config_header)
        .then(response => {
          if (response.data.response) {
            return this.$toasted.show(
              response.data.message,
              this.$toast_success
            );
          } else {
            return this.$toasted.show(response.data.message, this.$toast_error);
          }
        })
        .catch(error => {
          this.strError =
            "Se ha producido un error al guardar los permisos. error: " + error;
        });
    },
    sendEstadoUser(idus, method) {
      let action =
        method === "activar" ? "/usuario/activar" : "/usuario/desactivar";
      return this.$http
        .post(this.url_api + action, [idus], this.config_header)
        .then(response => {
          if (response.data.response) {
            return this.$toasted.show(
              response.data.message,
              this.$toast_success
            );
          } else {
            return this.$toasted.show(response.data.message, this.$toast_error);
          }
        })
        .catch(error => {
          this.strError =
            "Se ha producido un error al activar el usuario, error: " + error;
        });
    }
  }
};
</script>

<style scoped>
table.b-table[aria-busy="true"] {
  opacity: 0.7;
}
.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
}
.table-responsive {
  box-shadow: 0px 0px 7px 2px #f2f2f2;
  padding: 15px;
}
</style>