O dharma UI alert tem como objetivo facilitar o uso dos alerts dentro da aplicação e utilizar o modelo ideal para cada situação.
O que o Dharma Alert oferece:
-
Alert Summary
-
Alert
{
"rxjs": "~6.5.3",
"@angular/animations": "~8.2.3",
"@angular/cdk": "~8.2.3",
"@angular/common": "~8.2.3",
"@angular/compiler": "~8.2.3",
"@angular/core": "~8.2.3",
"@angular/forms": "~8.2.3",
"@angular/material": "~8.2.3",
"@angular/platform-browser": "~8.2.3",
"@angular/platform-browser-dynamic": "~8.2.3",
"@angular/router": "~8.2.3",
}
Instale o módulo
$ npm install dharma-ui-alert --save
Para utilizar o dharma-ui-alert
é necessário utilizar as seguintes versões:
{
"dependencies": {
"@angular/animations": "~8.2.12",
"@angular/common": "~8.2.12",
"@angular/compiler": "~8.2.12",
"@angular/core": "~8.2.12",
"@angular/forms": "~8.2.12",
"@angular/platform-browser": "~8.2.12",
"@angular/platform-browser-dynamic": "~8.2.12",
"@angular/router": "~8.2.12",
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.14",
"@angular/cli": "~8.3.14",
"@angular/compiler-cli": "~8.2.12",
"@angular/language-service": "~8.2.12",
"@types/node": "~12.11.6",
"@types/jasmine": "~3.4.4",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.0",
"ts-node": "~8.4.1",
"tslint": "~5.20.0",
"typescript": "~3.5.0"
}
}
Descrição: O alert-summary
tem como objetivo mostrar os erros que vem do servidor, como por exemplo: erro de formulários.
Observação: É necessário a utilização
Existe os seguintes tipos de alert-summary
:
-
Danger
-
Warning
Para mostrar o erro na tela, basta importar AlertSummaryService
e o <dharma-ui-alert-summary>
em seu componente e o alertSummaryModule
no módulo que irá utilizar.
Abaixo temos um exemplo no qual iremos chamar a service minhaService
e mostrar o alert-summary quando ocorrer algum erro.
No component:
import { Component, OnInit } from '@angular/core';
import { Menu } from 'dharma-ui-common';
import { AlertSummaryService } from 'dharma-ui-alert';
import { minhaService } from 'meu-modulo';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(
private alertSumaryService: AlertSummaryService,
private minhaService: minhaService,
) {
ngOnInit() {
this.minhaService.getUsers().subscribe(users => {
}, (err) => {
this.alertSumaryService.danger('Erro', err);
});
}
}
Para configurar um timeout no alert basta adicionar um terceiro parâmetro como no exemplo abaixo:
this.alertSumaryService.danger('Erro', err, 2000);
No HTML adicione a tag <dharma-ui-alert-summary>
<dharma-ui-alert-summary></dharma-ui-alert-summary>
No módulo importe o alertSummaryModule
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AlertSummaryModule } from 'dharma-ui-alert';
@NgModule({
declarations: [
AppComponent
],
imports: [
AlertSummaryModule,
],
})
export class AppModule {}
Descrição: O alert
tem como objetivo mostrar os erros que vem do servidor, como por exemplo: erro de formulários.
Existe os seguintes tipos de alert
:
-
Danger
-
Warning
-
info
-
Success
Para mostrar o erro na tela, basta importar AlertService
e o <dharma-ui-alert>
em seu componente e o alertModule
no módulo que irá utilizar.
No component:
import { Component, OnInit } from '@angular/core';
import { Menu } from 'dharma-ui-common';
import { AlertService } from 'dharma-ui-alert';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(
private alertService: AlertService,
) {
ngOnInit() {
this.alertService.danger('danger', { timeout: 10000 });
this.alertService.success('success', { timeout: 10000 });
this.alertService.info('info', { timeout: 10000 });
this.alertService.warning('warning', { timeout: 10000 });
}
}
No HTML adicione a tag <dharma-ui-alert>
<dharma-ui-alert></dharma-ui-alert>
No módulo importe o alertModule
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AlertModule } from 'dharma-ui-alert';
@NgModule({
declarations: [
AppComponent
],
imports: [
AlertModule,
],
})
export class AppModule {}
Descrição: O sweetAlert
tem como objetivo mostrar um popup, podendo ter botões de confirm e cancel.
Argumentos disponíveis:
Argumento | Tipo(s) | Valor Default |
---|---|---|
title | string | null |
text | string | null |
icon | 'success'/'error'/'warning'/'info'/'question' | 'success' |
showCancelButton | boolean | false |
confirmButtonText | string | 'OK' |
html | string/HTMLElement/JQuery | null |
position | 'top'/'top-start'/'top-end'/'top-left'/'top-right'/'center'/'center-start'/'center-end'/'center-left'/'center-right'/'bottom' /'bottom-start' /'bottom-end' /'bottom-left' /'bottom-right', | 'center' |
No módulo importe o alertModule
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AlertModule } from 'dharma-ui-alert';
@NgModule({
declarations: [
AppComponent
],
imports: [
AlertModule,
],
})
export class AppModule {}
No component:
import { SweetAlertService } from 'dharma-ui-alert';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
constructor(
private alertService: AlertService,
private alertSummary: AlertSummaryService,
private sweetAlertService: SweetAlertService,
) {}
ngOnInit() {
this.sweetAlertService.show({
title: 'teste',
text: 'teste 123',
});
}
}
Observação: O sweetAlert não necessita importar nada no HTML.
Todos os desenvolvedores são bem vindos em contribuir com a comunidade Dotz, basta abrir um pull request
para os nossos arquitetos avaliarem e juntos encontrarem a melhor maneira de implementar sua ideia.
-
Commits atômicos, que resolvem no máximo uma tarefa do board.
-
Mensagem do commit deve seguir o que é sugerido no README.md do Dharma.Common: https://github.com/stone-payments/stoneco-best-practices/blob/master/gitStyleGuide/README.md#commits.
-
Em cada PR, devemos escrever nos comentários o motivo de cada arquivo alterado (ex: TransfersController recebe novo filtro no método Get()).
-
Só integrar PRs que tenham sido aprovadas no mínimo por 2 outros devs que não sejam o autor do PR, e preferencialmente todos nós devemos aprovar o PR para termos sempre certeza que todos estão cientes das mudanças e tenham feito ressalvas caso algum impacto tenha sido gerado.
-
Vamos manter a organização das branches no modelo parecido com gitflow (Master; Bugfix-[Numero bug]; Dev-[nome Release];), sempre sincronizadas com a master para caso precisarmos entregar na esteira.
-
Roger Louzada - roger.cano@dotz.com
-
Diego Sanches - diego.sanches@dotz.com
-
Samuel Fabel - samuel.fabel@dotz.com