ToDoList version1 front

.vscode/settings.json

@@ -1,5 +1,2 @@
 {
-    "workbench.colorCustomizations": {
-        "titleBar.activeBackground": "#4950a1"
-    }
 }

package.json

@@ -20,6 +20,7 @@
     "@angular/router": "~13.0.0",
     "bootstrap": "^5.1.3",
     "jwt-decode": "^3.1.2",
+    "ngx-autofocus-fix": "^1.0.4",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app.module.ts

@@ -36,6 +36,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { PageAjoutContactComponent } from './pages/page-ajout-contact/page-ajout-contact.component';
 import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageCreationTeamComponent } from './pages/page-creation-team/page-creation-team.component';
+import { AutofocusFixModule  } from 'ngx-autofocus-fix';
+
+
 
 @NgModule({
   declarations: [
@@ -78,6 +81,7 @@ import { PageCreationTeamComponent } from './pages/page-creation-team/page-creat
     ReactiveFormsModule,
     HttpClientModule,
     FormsModule,
+    AutofocusFixModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/components/to-do-list/to-do-list.component.html

@@ -1 +1,72 @@
-<p>to-do-list works!</p>
+<input
+  type="text"
+  class="todo-input"
+  placeholder="Ajoute une nouvelle Tâche"
+  [(ngModel)]="todoTitle"
+  (keyup.enter)="addTitle()"
+/>
+
+<div class="element" *ngFor="let todo of todosFilter()">
+  <div class="element-gauche">
+    <input
+      type="checkbox"
+      [(ngModel)]="todo.completed"
+      (change)="doneEdit(todo)"
+    />
+    <div
+      *ngIf="!todo.editing; else editingTodo"
+      class="nomTache"
+      [ngClass]="{ completed: todo.completed }"
+      (dblclick)="modifier(todo)"
+    >
+      {{ todo.title }}
+    </div>
+    <ng-template #editingTodo>
+      <input
+        type="text"
+        class="modifier-element"
+        [(ngModel)]="todo.title"
+        (blur)="doneEdit(todo)"
+        (keyup.enter)="doneEdit(todo)"
+        (keyup.esc)="cancelEdit(todo)"
+        autofocus
+      />
+    </ng-template>
+  </div>
+  <div class="deleteTache" (click)="deleteTodo(todo.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>
+    <button (click)="effacerList()">Effacer la To Do List</button>
+  </div>
+</div>

src/app/components/to-do-list/to-do-list.component.scss

@@ -0,0 +1,86 @@
+.todo-input {
+  width: 100%;
+  padding: 10px 18px;
+  font-size: 18px;
+  margin-bottom: 16px;
+  &:focus {
+    outline: 0;
+  }
+}
+.element {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  animation-duration: 0.3s;
+}
+
+.deleteTache {
+  cursor: pointer;
+  margin-left: 14px;
+  &:hover {
+    color: black;
+  }
+}
+
+.element-gauche { // later
+  display: flex;
+  align-items: center;
+}
+
+.nomTache{
+  padding: 10px;
+  border: 1px solid white;
+  margin-left: 12px;
+}
+
+.modifier-element {
+  font-size: 24px;
+  color: #2c3e50;
+  margin-left: 12px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc; //override defaults
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.completed {
+  text-decoration: line-through;
+  color: grey;
+}
+
+.extra-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  border-top: 1px solid lightgrey;
+  padding-top: 14px;
+  margin-bottom: 14px;
+}
+
+button {
+  font-size: 14px;
+  background-color: white;
+  appearance: none;
+
+  &:hover {
+    background: lightgreen;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.active {
+  background: lightgreen;
+}
+.completed {
+  text-decoration: line-through;
+  color: grey;
+}

src/app/components/to-do-list/to-do-list.component.ts

@@ -1,15 +1,138 @@
 import { Component, OnInit } from '@angular/core';
+import { Todo } from 'src/app/interfaces/todo';
 
 @Component({
   selector: 'app-to-do-list',
   templateUrl: './to-do-list.component.html',
-  styleUrls: ['./to-do-list.component.scss']
+  styleUrls: ['./to-do-list.component.scss'],
 })
 export class ToDoListComponent implements OnInit {
+  public beforeEditCache: string;
+  public todos: Todo[];
+  public todoTitle: string;
+  public idTodo: number;
+  public filter : string;
+  public casesRestantes : boolean;
+  public masterSelected: boolean;
 
-  constructor() { }
+  constructor() {
-
+    this.beforeEditCache = '';
-  ngOnInit(): void {
+    this.todos = [];
+    this.todoTitle = '';
+    this.idTodo = 0;
+    this.filter ='';
+    this.casesRestantes=true;
+    this.masterSelected= false;
   }
 
-}
+  ngOnInit(): void {
+    this.beforeEditCache = '';
+    this.casesRestantes=true;
+    this.filter='tous';
+    this.idTodo = 4;
+    this.todoTitle = '';
+    this.todos = [
+      {
+        id: 1,
+        title: 'Finish Angular Screencast',
+        completed: false,
+        editing: false,
+      },
+      {
+        id: 2,
+        title: 'Take over world',
+        completed: false,
+        editing: false,
+      },
+      {
+        id: 3,
+        title: 'One more thing',
+        completed: false,
+        editing: false,
+      },
+    ];
+  }
+  //ajouter tache
+  addTitle(): void {
+    if (this.todoTitle.trim().length === 0) {
+      return;
+    }
+
+    this.todos.push({
+      id: this.idTodo,
+      title: this.todoTitle,
+      completed: false,
+      editing: false,
+    });
+    this.todoTitle = '';
+    this.idTodo++;
+  }
+
+  //modifier la tâche
+  modifier(todo: Todo): void {
+    this.beforeEditCache = todo.title;
+    todo.editing = true;
+  }
+
+  // modifier l'apparence focus
+  doneEdit(todo: Todo): void {
+    if (todo.title.trim().length === 0) {
+      todo.title = this.beforeEditCache;
+    }
+    this.casesRestantes= this.casesQuiRestes();
+    todo.editing = false;
+  }
+
+  // annuler la modification
+  cancelEdit(todo: Todo): void {
+    todo.title = this.beforeEditCache;
+    todo.editing = false;
+  }
+
+  //supprimer la tache
+  deleteTodo(id: number): void {
+    this.todos = this.todos.filter((todo) => todo.id !== id);
+  }
+
+  //nombre de tâches restantes
+  toDoRest(): number{
+    return this.todos.filter(todo=> !todo.completed).length;
+  }
+
+  //Cocher toutes les tâches de la liste
+  listComplete(): boolean {
+    return this.todos.filter(todo=> todo.completed).length>0;
+  }
+
+  //Effacer la to do list
+
+  effacerList(): void {
+    this.todos = [];
+  }
+
+  //cocher toutes les cases de la todoList
+  cocherAllTodoList(): void {
+    for (var i = 0; i < this.todos.length; i++) {
+      this.todos[i].completed = this.masterSelected;
+    }
+    this.cocherAllTodoList();
+  }
+
+  casesQuiRestes(): boolean {
+    return this.toDoRest() !== 0;
+  }
+
+  //barre de filtre des tâches
+  todosFilter(): Todo[] {
+    if(this.filter === 'tous'){
+      return this.todos
+    }else if (this.filter === 'active'){
+      return this.todos.filter(todo=> !todo.completed)
+    }else if (this.filter === 'complete'){
+      return this.todos.filter(todo=>todo.completed)
+    }
+    return this.todos
+    }
+  }
+
+

src/app/interfaces/todo.ts

@@ -0,0 +1,7 @@
+export interface Todo {
+  id : number,
+  title : string,
+  completed: boolean,
+  editing: boolean
+}
+

src/app/pages/page-to-do-list/page-to-do-list.component.html

@@ -1,2 +1,5 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
+<div class="container">
+  <app-to-do-list></app-to-do-list>
+</div>

src/app/services/todo-service.service.ts

@@ -0,0 +1,43 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TodoServiceService {
+  private toDoList: any;
+  private apiUrl: string;
+
+
+  constructor(private http: HttpClient) {
+    this.apiUrl = environment.apiUrl;
+  }
+
+  //consulter toDoList
+  getToDoList(){
+    this.toDoList = this.http.get(`${this.apiUrl}/todolist/team/{team_id}`);
+    return this.toDoList;
+    console.log(this.toDoList)
+}
+
+//ajouter une tache
+  addTitle(title:string){
+    this.toDoList.push({
+      title:title,
+      isChecked: false
+    });
+  }
+// cocher et décocher la checkbox
+  checkOrUnCheckTitle($key: string,flag: boolean){
+    this.toDoList.update($key,{isChecked:flag});
+  }
+
+//supprimer la tache
+removeTitle($key : string){
+  this.toDoList.remove($key);
+}
+
+
+
+}