karinafukuda / todolist-angular

Todo-list feita sem o service para praticar os decorators @Input e @Output

TODO_LIST

Uma lista de tarefas com:

• Adicionar
• Editar
• Deletar
• Completar
• Contador de tarefas

Technologies

• Angular 12
• Typescript
• HTML5
• CSS3

todolist-angular's Issues

Considerações gerais sobre o projeto e de estilo

1. Interessante que você colocou id para todos os elementos do HTML, mantenha essa prática pois isso facilita os testes. Dê uma olhada na documentação dos data attributes, pois para testes você pode utilizar por exemplo uma propriedade com o nome data-testid e depois remover isso para produção. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes, https://betterprogramming.pub/decouple-tests-with-data-attributes-c920606c5f27
2. Ficou bom o funcionamento da edição, criando um novo campo de input
3. Achei interessante também o contador de tarefas registradas, uma funcionalidade que não estava no projeto inicial, mas deixou mais robusto o projeto. Desafio: ao invés de contar a length, conte cada vez que a tarefa for registrada, assim, quando o/a usuário/usuária deletar, o número não diminui.
4. Faltou uma pequena margem (ex.: 10 px) entre os botões editar/deletar e cancelar/salvar

Criar componente de adicionar nova tarefa

todolist-angular/src/app/components/todo-list/todo-list.component.html

Lines 4 to 16 in 017e592

	<div class="form">
	<input
	#newItem
	placeholder="Digite uma nova tarefa "
	(keyup.enter)="addItem(newItem.value); newItem.value = ''"
	class="lg-text-input"
	id="addItemInput"
	/>
	<button class="btn-primary" (click)="addItem(newItem.value)">
	Adicionar
	</button>
	</div>

Seria legal componentizar este componente de campo de texto e o botão de adicionar em um componente "AddTask" para ficar com uma arquitetura melhor. Assim o componente pai se responsabiliza apenas por gerenciar o array e não o input de usuárie

Ao adicionar um novo item, deixar a lógica concentrada na função "addItem"

todolist-angular/src/app/components/todo-list/todo-list.component.html

Lines 5 to 11 in 38bb31c

	<input
	#newItem
	placeholder="Digite uma nova tarefa "
	(keyup.enter)="addItem(newItem.value); newItem.value = ''"
	class="lg-text-input"
	id="addItemInput"
	/>

Na linha 8, tente deixar tudo dentro da função (retirando a parte depois do ponto e virgula e passando para o arquivo .ts). Para que a lógica fique concentrada em um único lugar, isso faz com que fique mais fácil corrigir bugs. Para isso você pode passar ao invés da descrição, a referência para o campo. Você pode ter dificuldade por conta dos tipos do typescript. Mas dê uma olhada nesse artigo sobre element ref (quando usamos o # no html criamos uma ElementRef): https://ultimatecourses.com/blog/element-refs-in-angular-templates

DRY - Dont Repeat Yourself

todolist-angular/src/app/components/item/item.component.html

Line 17 in 017e592

<button class="btn" (click)="editable = !editable">Editar</button>

todolist-angular/src/app/components/item/item.component.html

Line 32 in 017e592

<button class="btn btn-cancel" (click)="editable = !editable">

Cuidado para não se repetir. Quando perceber isso, crie uma função que encapsule a lógica, por mais que ela seja simples (ela pode mudar e vai ser mais difícil se tiver em vários lugares, podendo até gerar bugs). Pesquise o princípio e origem do acrônimo DRY, uma boa fonte é o livro Clean Code do Bob Martin.

Utilizar o dado do evento de output corretamente remove($event)

todolist-angular/src/app/components/item/item.component.ts

Line 14 in 017e592

@Output() remove = new EventEmitter<Item>();

Perceba que aqui voce declarou que este emissor de eventos deveria receber um item

todolist-angular/src/app/components/item/item.component.html

Line 18 in 017e592

<button class="btn btn-warn" (click)="remove.emit()">Deletar</button>

Mas aqui você emitiu o evento vazio, e não utilizou o dado do evento no componente pai. O correto é voce emitir o item e no pai usar o $event para pegar os dados.

todolist-angular/src/app/components/todo-list/todo-list.component.html

Line 24 in 017e592

<app-item (remove)="remove(item)" [item]="item"></app-item>

Note que você não usou dado nenhum do evento, você apenas usou o item do ng-for.
Ficaria assim no componente pai:
<app-item (remove)="remove($event)" [item]="item"></app-item>
Você pode fazer da forma que você fez, mas fica mais claro desta outra forma dado os tipos que você estabeleceu.

Remover propriedades não utilizadas

todolist-angular/src/app/components/count-task/count-task.component.ts

Lines 11 to 12 in fb3680b

	@Input() item: Item;
	@Input() newItem: string;

Todo código é importante, se não for, delete. Notei que você não usou algumas propriedades neste componente, pode deletar. Nunca comente, se não for usar, o git dá conta de manter o registro caso você precise.