Ugla Rules

Version

version

Instalando#

Para instalar, ececute no terminal:

npm i ugla-rules

Em seguida, importe o module ao app.module.ts:

path/src/app/app.module.ts

UglaRulesModule.forRoot({ acronym: APPLICATION })

Em seguida, no app.component.ts é necessário invocar a função createApplication que armazenará todas as applications, features e operations do usuário:

path/src/app/app.component.ts

constructor(
    private ugla: UglaService,
    private rules: UglaRulesService) {
      rules.createRules(this.currentUser.applications);
    }

Importante

É necessário passar o array applications que é recebido no token da JWT.

Definando a aplicação#

Para definir a aplicação, é preciso no forRoot passar o Acronym da aplicação:

path/src/app/app.module.ts

UglaRulesModule.forRoot({ acronym: 'EXPENSE' })

Definindo a feature#

No TS do componente, é necessário especificar qual a feature está sendo trabalhada, deve ser passado o acronym. Essa informação será usada pelas diretivas para identificar se determinado operador está ativo ou não:

path/src/app/app.module.ts

constructor(private rules: UglaRulesService) {
  rules.setFeature('INT');
}

Importante

Informe o acronym da feature. As features podem ser páginas ou mesmo componentes dentro de páginas.

Aplicando operadores#

Existem duas maneiras basicas de aplicar um operador: usando a diretiva e usando o serviço:

Diretivas#

Diretiva	Atributo	Funcionalidade
View	uglVw	Exibe conteúdo se usuário tem permissão de visualizar
Edit	uglEd	Exibe conteúdo se usuário tem permissão de editar
Create	uglCr	Exibe conteúdo se usuário tem permissão de criar
Delete	uglDe	Exibe conteúdo se usuário tem permissão de deletar

Exemplo prático#

<button (click)="createUser()" uglCr>Cadastrar novo usuário</button>
<table uglVw>
  <tr>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>
      <a href="/edit" uglEd>Editar</a>
      <a href="/delete" uglDe>Delete</a>
    </td>
  <tr>
</table>

Service#

O service retorna se o usuário tem as devidas permissões da seguinte maneira:

hasVw: boolean;
hasEd: boolean;
hasCr: boolean;
hasDe: boolean;

constructor(private rules: UglaRulesService) {
  rules.setFeature('INT');
  this.hasVw = rules.vw();
  this.hasEd = rules.ed();
  this.hasCr = rules.cr();
  this.hasDe = rules.de();
}

Importante

Note que antes foi necessário indicar qual feature estou associando ao componente.

Operadores de outras features#

Caso queira, dentro de um componente verificar a permissão em outra feature, também é possível: As funções vw(), ed(), cr() e de() possuem um atributo opcional feature, onde recebe o acronym da feature e valida.

hasClrVw: boolean; //View da feature CLR;

constructor(private rules: UglaRulesService) {
  rules.setFeature('INT'); // feature original do componente
  this.hasClrVw = rules.vw('CLR'); // outra feature
}

Importante

Neste caso, o vw('CLR') vai trazer a permissão da feature CLR para a operação VIEW, mas isso não impedirá que vw(), ed(), cr() e de() continuem trazendo os dados referente a feature indicada no setFeature().

Aplicando ao menu Ugla#

No componente onde o menu for aplicado, será necessário criar o menu dentro do OnInit()

header = new Header('Ugla', './assets/imgs/logo.png', 'home', true);
people = new People('Jack Connor', 'jack.connor@ugla.dev', './assets/imgs/people.png');
menu: Menu;

constructor(private rules: UglaRulesService) {}

ngOnInit() {
  this.header.people = this.people;
  this.createMenu();
  this.header.menu = this.menu;
  this.ugla.headerShadow = true;
  this.hasDelete = this.rules.delete();
  this.ugla.hasToolBar();
}

createMenu() {
  this.menu = new Menu([
    new MenuItem('INT Feature', '/int', this.rules.vw('INT')),
    new MenuItem('CLI Feature', '/cli', this.rules.vw('CLI')),
  ]);
}