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#

DiretivaAtributoFuncionalidade
ViewuglVwExibe conte√ļdo se usu√°rio tem permiss√£o de visualizar
EdituglEdExibe conte√ļdo se usu√°rio tem permiss√£o de editar
CreateuglCrExibe conte√ļdo se usu√°rio tem permiss√£o de criar
DeleteuglDeExibe 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')),
]);
}