Implementacion Botones por Roles

Sebastian Tabares Amaya

Servicio roles_service.js

  /**
  * @ngdoc method
  * @name contractualClienteApp.rolesService#buttons //.# 
  * @methodOf contractualClienteApp.rolesService // .
  * @param {controller, roles=}   // devuelve los bottones a partir del controlador y del array de roles
  * @returns {object} lista de botones asociados al controlador, cada boton tiene su matriz de roles (true,false)
  *                   si se especifica roles, debuelve un objeto con los botones habilitados para esos roles y controlador
  */
  self.buttons = function (controller, roles) {
      return new Promise(function (resolve, reject) {
          $http.get("scripts/models/buttons.json").then(function (response) {
              self.buttonsData = response.data;
              var buttonsWithRoles = self.buttonsData.Controllers[controller].Buttons;
              if (Array.isArray(roles)) {
                  var buttons = {};
                  for (var button in buttonsWithRoles) {
                      if (!buttonsWithRoles.hasOwnProperty(button)) {
                          continue;
                      }
                      var b1 = buttonsWithRoles[button];
                      roles.forEach(function (rol) {
                          if (b1.hasOwnProperty(rol) && b1[rol]) {
                              buttons[button] = true;
                          }
                      })                }
                  resolve(buttons);
              } else {
                  resolve(buttonsWithRoles);
              }
          });
      });
  }
//... 

var self = this;
        self.offset = 0;
        self.rechazada = false;
        self.buttons = {};
        
        //permisos de los buttons segun el rol
        rolesService.buttons('NecesidadesCtrl', rolesService.roles()).then(function (data) {
            self.buttons = data;
        });
        
        self.gridOptions = {
            paginationPageSizes: [10, 15, 20],
            paginationPageSize: 10,
            enableRowSelection: true,
            enableRowHeaderSelection: false,
            enableFiltering: true,

//...

USO

Archivo Buttons.js

{
    "RolesList": [
        "ORDENADOR_DEL_GASTO",
        "SUPERVISOR",
        "DECANO",
        "regionalClerksRole",
        "SOPORTE_OAS"
    ],
    "Controllers": {
        "NecesidadesCtrl": {
            "RolesList": [
                "ORDENADOR_DEL_GASTO",
                "SUPERVISOR",
                "DECANO",
                "regionalClerksRole",
                "SOPORTE_OAS"
            ],
            "Buttons": {
                "AprobarNecesidad": {
                    "ORDENADOR_DEL_GASTO": true,
                    "DECANO": true
                },
                "RechazarNecesidad": {
                    "ORDENADOR_DEL_GASTO": true,
                    "DECANO": true
                },
                "SolicitarCDP": {
                    "ORDENADOR_DEL_GASTO": true,
                    "DECANO": true
                },
                "EditarNecesidad": {
                    "SUPERVISOR": true
                }
            }
        }
    }
}
 <div class="modal-footer text-center">
      <button class="btn btn-success" type="button" name="button" ng-click="necesidades.aprobar_necesidad()" ng-show="necesidades.verBotonAprobarNecesidad">{{"APROBAR"
        | translate}}</button>
      <button class="btn btn-warning" type="button" name="button" ng-click="necesidades.rechazar_necesidad()" ng-show="necesidades.verBotonRechazarNecesidad">{{"RECHAZAR"
        | translate}}</button>
      <button class="btn btn-success btn-outline" type="button" name="button" ng-show="necesidades.verBotonEditarNecesidad"
        ng-click="necesidades.editar_necesidad()">{{"EDITAR_NECESIDAD" | translate}}</button>
      <button class="btn btn-success btn-outline" type="button" name="button" ng-click="necesidades.solicitar_cdp()"
        ng-show="necesidades.verBotonSolicidadCDPNecesidad">{{"SOLICITAR_CDP" | translate}}</button>

 </div>

Uso Template necesidades.html 

  //...
    $scope.direccionar = function (necesidad) {
            self.g_necesidad = necesidad;
            self.numero_el = necesidad.NumeroElaboracion;
            self.vigencia = necesidad.Vigencia;

            //para mostrar informacion de rechazo


            // validaciones para los botones: (estado) && (permisos rol)
            var aproOrRech = [necesidadService.EstadoNecesidadType.Solicitada.Id, necesidadService.EstadoNecesidadType.Modificada.Id]
                .includes(necesidad.EstadoNecesidad.Id);

            self.verBotonAprobarNecesidad = aproOrRech  && self.buttons.AprobarNecesidad;
            self.verBotonRechazarNecesidad = aproOrRech  && self.buttons.RechazarNecesidad;
            self.verBotonEditarNecesidad = necesidadService.EstadoNecesidadType.Rechazada.Id === necesidad.EstadoNecesidad.Id && self.buttons.EditarNecesidad;
            self.verBotonSolicidadCDPNecesidad = necesidadService.EstadoNecesidadType.Aprobada.Id === necesidad.EstadoNecesidad.Id && self.buttons.SolicitarCDP;

            $("#myModal").modal();


//...

Lógica de ejemplo para mostrar dependiendo del estado y el rol

Gracias!

deck

By Sebastian Yesid Tabares Amaya