organizee-front/src/app/components/to-do-list/to-do-list.component.html
2022-02-15 15:03:35 +01:00

85 lines
1.8 KiB
HTML

<input
type="text"
class="todo-title"
placeholder="Titre"
value = "{{todo.nom}}"
/>
<div>
<button (click)="effacerList()">Effacer la To Do List</button>
</div>
<input
type="text"
class="todo-input"
placeholder="+ Nouvelle Tâche"
[(ngModel)]="todoTitle"
(keyup.enter)="addTache(todo.id)"
/>
{{todo}}
<div class="element" *ngFor="let tache of todo.taches">
<div class="element-gauche">
<input
type="checkbox"
[(ngModel)]="tache.etat"
(change)="doneEdit(tache)"
checked="checked"
/>
<div
*ngIf="!tache.editing; else editingTodo"
class="nomTache"
[ngClass]="{ completed: tache.etat }"
(dblclick)="modifier(tache)"
>
{{ tache.texte }}
</div>
<ng-template #editingTodo>
<input
type="text"
class="modifier-element"
[(ngModel)]="tache.texte"
(blur)="doneEdit(tache)"
(keyup.enter)="doneEdit(tache)"
(keyup.esc)="cancelEdit(tache)"
autofocus
/>
</ng-template>
</div>
<div class="deleteTache" (click)="deleteTodo(tache.id)">&times;</div>
</div>
<div class="extra-container">
<div>
<label
><input
type="checkbox"
(change)="cocherAllTodoList()"
[(ngModel)]="masterSelected"
/>Selectionner toutes les tâches</label
>
</div>
<div>{{ toDoRest() }} tâches</div>
</div>
<div class="extra-container">
<!-- <div>
<button [ngClass]="{ active: filter === 'tous' }" (click)="filter = 'tous'">
Toutes la To Do List
</button>
<button
[ngClass]="{ active: filter === 'active' }"
(click)="filter = 'active'"
>
A Faire
</button>
<button
[ngClass]="{ active: filter === 'complete' }"
(click)="filter = 'complete'"
>
Terminées
</button>
</div>
-->
</div>