Ugla Rules
Version
Instalando
Para instalar, ececute no terminal:
npm i ugla-rules
Em seguida, importe o module ao 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:
constructor(
private ugla: UglaService,
private rules: UglaRulesService) {
rules.createRules(this.currentUser.applications);
}
É 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:
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:
constructor(private rules: UglaRulesService) {
rules.setFeature('INT');
}
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();
}
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
}
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')),
]);
}