Que tal uma confirmação

Completamos nossa aplicação concluindo nosso cadastro de fotos, contudo podemos deixar ainda melhor a experiência dos nossos usuários.

Em ListagemComponent, a remoção de uma foto ocorre sem hiato, instantaneamente. Como esta operação é irreversível, vamos solicitar a confirmação do usuário, garantindo assim uma segunda chance para que ele reflita sobre a operação que irá realizar.

Podemos conseguir essa funcionalidade adicionando no método remove de ListagemComponent uma confirmação rudimentar, porém não menos eficaz:

// alurapic/client/app/listagem/listagem.component.ts

// código anterior omitido
remove(foto: FotoComponent): void {
    if(confirm('Tem certeza')) {
        this.service.remove(foto)
            .subscribe(
                fotos => {

                    let novasFotos = this.fotos.slice(0);
                    let indice = novasFotos.indexOf(foto);
                    novasFotos.splice(indice, 1);
                    this.fotos = novasFotos;
                    this.mensagem = 'Foto removida com sucesso';
                },
                erro => {
                    console.log(erro);
                    this.mensagem = 'Não foi possível remover a foto';
                });
    }
}
// código posterior omitido

Isolando a lógica de confirmação em um componente

Problema resolvido, mas será que é a melhor solução? Se tivermos ações de outros componentes que necessitem confirmação do usuário? Sairemos espalhando o código de confirmação em todos eles?

Vamos remover a lógica de confirmação que acabamos de adicionar no método remove de ListagemComponent. Agora, Vamos isolar a lógica de confirmação em um componente reutilizável por outros componentes que necessitem dessa verificação antes de executar determinada ação. Ele se chamará BotaoComponent:

// alurapic/client/app/botao/botao.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'botao',
    templateUrl: './botao.component.html'
})
export class BotaoComponent {

    @Input() nome: string = 'Ok';
    @Input() estilo: string = 'btn-default';
    @Input() tipo: string = 'button';
    @Input() desabilitado: boolean = false;
}

Vamos criar agora o módulo BotaoModule:

// alurapic/client/app/botao/botao.module.ts

import { NgModule } from '@angular/core';
import { BotaoComponent } from './botao.component';

@NgModule({
  declarations: [ BotaoComponent ],
  exports: [ BotaoComponent ]
})
export class BotaoModule { }

E claro, não podemos nos esquecer de importá-lo em AppModule:

import 'rxjs/add/operator/map';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { ListagemComponent }   from './listagem/listagem.component';
import { CadastroComponent }   from './cadastro/cadastro.component';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { FotoModule } from './foto/foto.module';
import { PainelModule } from './painel/painel.module';
import { routing } from './app.routes';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// importando o novo módulo! Não esqueça de adicioná-lo também no array da propriedade imports

import { BotaoModule } from './botao/botao.module';

@NgModule({
  imports:      [ 
    BrowserModule, 
    HttpModule, 
    PainelModule, 
    FotoModule,
    routing,
    FormsModule,
    ReactiveFormsModule,
    BotaoModule
  ],
  declarations: [ AppComponent, ListagemComponent, CadastroComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Nosso componente aceita receber quatro parâmetros. O primeiro é o nome do botão. Se nenhum nome for passado seu valor padrão será "Ok". O segundo parâmetro é o estilo do botão que possui valor padrão btn-default. É este parâmetro que nos permite exibir diferentes botões do Bootstrap, contanto que passemos a classe correta do botão como parâmetro. Há também o parâmetro tipo, para indicar o type, que possui valor padrão button. Por fim, temos o parâmetro desabilitado para permitir a habilitação ou não do botão.