Criando sua segunda aplicação com Angular

Habilitando o modo de edição

Para podermos excluir uma lista ou limpar todas as suas tarefas concluídas, vamos implementar agora uma funcionalidade de modo de edição.

Para indicar que esse modo está ativo, vamos mudar a cor de fundo das listas de azul para vermelho, e também vamos exibir novos botões de ação nas listas de tarefas.

Exibindo os botões de ação

Primeiro, aninhe os botões de ação nova lista e editar em um elemento <ng-template> marcado-o com a variável de template #acoesPadrao.

Depois, crie um novo botão concluir edição e adicione a diretiva *ngIf para exibi-lo somente se o modo de edição estiver ativo. Caso contrário, exiba o template acoesPadrao.

Tanto no botão editar como no concluir edição, inclua o event binding(click)="alternarModoEdicao()". Aproveite e utilize uma diretiva *ngIf no botão editar para exibi-lo somente caso haja listas de tarefas (afinal, não há o que editar, caso contrário).

Na classe do componente, crie uma nova propriedade modoEdicaoAtivo do tipo boolean e implemente o método alternarModoEdicao.

<div class="container">
  <header class="d-md-flex flex-align-center mt-5">
    <h1 class="display-4">Minhas listas</h1>
    <div class="d-flex align-items-center ml-auto">
      <button class="btn ml-2" *ngIf="modoEdicaoAtivo; else acoesPadrao" (click)="alternarModoEdicao()">
        <i class="fa fa-sm fa-check"></i> Concluir edição
      </button>

      <ng-template #acoesPadrao>
        <button class="btn" (click)="onCriarLista()"><i class="fa fa-sm fa-plus mr-1"></i> Nova lista</button>
        <button class="btn ml-2" (click)="alternarModoEdicao()" *ngIf="listasDeTarefas.length">
          <i class="fa fa-sm fa-edit"></i> Editar
        </button>
      </ng-template>
    </div>
  </header>

  ...
</div>
export class AppComponent {
  listasDeTarefas = LISTAS_DE_TAREFAS;
  modoEdicaoAtivo = false;

  ...

  alternarModoEdicao() {
    this.modoEdicaoAtivo = !this.modoEdicaoAtivo;
  }
}

Botões de ação e cores das listas de tarefas

Agora precisamos dar um jeito de informar para as listas de tarefas que elas estão sendo editadas. Em uma aplicação mais robusta, esta informação seria gerenciada e fornecida pelo estado geral da aplicação, que seria então injetado diretamente nos componentes através de serviços.

No nosso caso, vamos apenas criar um atributo editando na classe ListaDeTarefasComponent e marcá-lo com o decorator @Input. Ao percorrer as listas e montar os elementos <app-lista-de-tarefas>, vamos repassar a informação do modo de edição.

export class ListaDeTarefasComponent implements AfterViewInit {
  @Input() lista: ListaDeTarefas;
  @Input() editando: boolean;

  ...
}
<div class="container">
  ...

  <main class="card-columns mt-5">
    <app-lista-de-tarefas
      [lista]="lista"
      [editando]="modoEdicaoAtivo"
      *ngFor="let lista of listasDeTarefas"
    ></app-lista-de-tarefas>
  </main>
</div>

No template da lista de tarefas, remova a classe bg-primary do cabeçalho e utilize o atributo [ngClass] para definir condicionalmente a classe da cor de fundo, conforme o valor da propriedade editando.

Da mesma forma como fizemos com os botões de ação gerais, vamos fazer com os da lista. Comece envolvendo o botão nova lista com um elemento <ng-template #acoesPadrao>. Crie um elemento <ng-container> para englobar os dois novos botões – remover tarefas concluídas e excluir lista – e utilize a diretiva *ngIf para exibi-los em alternância com o template acoesPadrao.

<div class="card bg-light shadow-sm">
  <div class="card-header text-white d-flex align-items-center" [ngClass]="editando ? 'bg-danger' : 'bg-primary'">
    ...

    <ng-container *ngIf="editando; else acoesPadrao">
      <button class="btn btn-sm text-white"><i class="fa fa-lg fa-redo"></i></button>
      <button class="btn btn-sm text-white"><i class="fa fa-lg fa-trash-alt"></i></button>
    </ng-container>

    <ng-template #acoesPadrao>
      <button class="btn btn-sm text-white" (click)="onAdicionarTarefa()">
        <i class="fa fa-lg fa-plus"></i>
      </button>
    </ng-template>
  </div>

  ...
</div>

Estamos quase acabando! Agora só falta implementar as ações de edição das listas.

Deixar uma resposta