Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Minha implementação do desafio

Compartilhando abaixo minha implementação do desafio, fiz de uma forma um pouco diferente do professor, porém creio que esteja funcionando da mesma forma.

form-busca.service.ts

  getDescricaoPessoas(pessoas: 'adultos' | 'crianças' | 'bebês'): string {
    let descricao: string = "";
    let qtd: number = this.obterValorControle(pessoas);
    if(qtd > 1) {
      descricao = qtd + " " + pessoas;
    } else {
      descricao = qtd + " " + pessoas.slice(0, -1);
    }
    return descricao;
  }

  somarDiminuirPessoas(somarDiminuir: 1 | -1, pessoas: 'adultos' | 'crianças' | 'bebês'): void {
    const controle = this.obterControle(pessoas);
    const valorAtual = controle.value || 0;
    let novoValor;
    if(pessoas === 'adultos') {
      novoValor = Math.max(valorAtual + somarDiminuir, 1);
    } else {
      novoValor = Math.max(valorAtual + somarDiminuir, 0);
    }
    controle.setValue(novoValor);
  }
  
  obterControle(nome: string): FormControl {
    const control = this.formBusca.get(nome);
    if (!control) {
      throw new Error(`FormControl com nome "${nome}" não existe.`);
    }
    return control as FormControl;
  }

  obterValorControle(nome: string): any {
    return this.obterControle(nome).value;
  }

modal.component.html

<mat-chip (click)="formBuscaService.openDialog()">
        <div class="inner">
          <mat-icon>check</mat-icon> {{formBuscaService.getDescricaoPessoas("adultos")}}
        </div>
      </mat-chip>
      <mat-chip (click)="formBuscaService.openDialog()" *ngIf="formBuscaService.obterValorControle('crianças') > 0">
        <div class="inner">
          <mat-icon>check</mat-icon> {{formBuscaService.getDescricaoPessoas("crianças")}}
        </div>
      </mat-chip>
      <mat-chip (click)="formBuscaService.openDialog()" *ngIf="formBuscaService.obterValorControle('bebês') > 0">
        <div class="inner">
          <mat-icon>check</mat-icon> {{formBuscaService.getDescricaoPessoas("bebês")}}
        </div>
      </mat-chip>
      <mat-chip (click)="formBuscaService.openDialog()">
        <div class="inner">
          <mat-icon>check</mat-icon>
          {{formBuscaService.obterValorControle("tipo")}}
        </div>
      </mat-chip>

form-busca.component.html

<div class="selecao-idade">
      <ul>
        <li class="pessoa-idade">Adultos</li>
        <li>(Acima de 12 anos)</li>
        <li>
          <app-botao-controle
            src="/assets/icones/do_not_disturb_on.png"
            alt="Sinal de subtração"
            tipo="decremento"
            (click)="formBuscaService.somarDiminuirPessoas(-1, 'adultos')"
          />
          <span>{{formBuscaService.obterValorControle("adultos")}}</span>
          <app-botao-controle
            src="/assets/icones/add_circle.png"
            alt="Sinal de adição"
            tipo="incremento"
            cor="primary"
            (click)="formBuscaService.somarDiminuirPessoas(1, 'adultos')"
          />
        </li>
      </ul>
      <ul>
        <li class="pessoa-idade">Crianças</li>
        <li>(Entre 2 e 11 anos)</li>
        <li>
          <app-botao-controle
            src="/assets/icones/do_not_disturb_on.png"
            alt="Sinal de subtração"
            tipo="decremento"
            (click)="formBuscaService.somarDiminuirPessoas(-1, 'crianças')"
          />
          <span>{{formBuscaService.obterValorControle("crianças")}}</span>
          <app-botao-controle
            src="/assets/icones/add_circle.png"
            alt="Sinal de adição"
            tipo="incremento"
            cor="primary"
            (click)="formBuscaService.somarDiminuirPessoas(1, 'crianças')"
          />
        </li>
      </ul>
      <ul>
        <li class="pessoa-idade">Bebês</li>
        <li>Até 2 anos</li>
        <li>
          <app-botao-controle
            src="/assets/icones/do_not_disturb_on.png"
            alt="Sinal de subtração"
            tipo="decremento"
            (click)="formBuscaService.somarDiminuirPessoas(-1, 'bebês')"
          />
          <span>{{formBuscaService.obterValorControle("bebês")}}</span>
          <app-botao-controle
            src="/assets/icones/add_circle.png"
            alt="Sinal de adição"
            tipo="incremento"
            cor="primary"
            (click)="formBuscaService.somarDiminuirPessoas(1, 'bebês')"
          />
        </li>
      </ul>
    </div>
1 resposta
solução!

Olá, Lorenzo, como vai?

A sua implementação está muito bem estruturada e atende ao requisito do desafio. A lógica de manipulação do plural na função getDescricaoPessoas está clara, e a abordagem de truncar a última letra quando a quantidade é um já resolve bem a questão do singular e plural. Parabéns pelo trabalho.

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)