From efb86420d05c8a309da294d3b8a1ce1e07bb1997 Mon Sep 17 00:00:00 2001 From: HarmandI Date: Mon, 14 Feb 2022 11:28:50 +0100 Subject: [PATCH 1/2] todo en cours --- package-lock.json | 10 ++-- package.json | 1 + .../to-do-list/to-do-list.component.html | 47 ++++++++++++------- .../to-do-list/to-do-list.component.scss | 27 ++++++----- .../to-do-list/to-do-list.component.ts | 35 ++++++++++---- .../page-to-do-list.component.html | 8 +++- .../page-to-do-list.component.ts | 13 ++++- src/app/services/todo-service.service.ts | 43 ----------------- src/app/services/todo.service.spec.ts | 16 +++++++ src/app/services/todo.service.ts | 30 ++++++++++++ 10 files changed, 143 insertions(+), 87 deletions(-) delete mode 100644 src/app/services/todo-service.service.ts create mode 100644 src/app/services/todo.service.spec.ts create mode 100644 src/app/services/todo.service.ts diff --git a/package-lock.json b/package-lock.json index 53c24c2..11d31e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2325,11 +2325,6 @@ "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", "dev": true }, - "angular-autofocus-fix": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/angular-autofocus-fix/-/angular-autofocus-fix-0.1.2.tgz", - "integrity": "sha512-P5l24by1q6CSaRW/yrjJis56SuECQwXGbwFOfrk6URn3ir+uDrabykF1vjQwKYPrhF2W/JdBfXeMwuKnQ94Bmg==" - }, "ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -2649,6 +2644,11 @@ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==" }, + "bootstrap-icons": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz", + "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 1507a28..f135ddb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "bootstrap": "^5.1.3", + "bootstrap-icons": "^1.7.2", "jwt-decode": "^3.1.2", "ngx-autofocus-fix": "^1.0.4", "rxjs": "~7.4.0", diff --git a/src/app/components/to-do-list/to-do-list.component.html b/src/app/components/to-do-list/to-do-list.component.html index 2b17875..9c94a23 100644 --- a/src/app/components/to-do-list/to-do-list.component.html +++ b/src/app/components/to-do-list/to-do-list.component.html @@ -1,40 +1,55 @@ + +
+ +
-
+ + +
- {{ todo.title }} + {{ tache.texte }}
-
×
+
×
+ + +
-
- -
+
diff --git a/src/app/components/to-do-list/to-do-list.component.scss b/src/app/components/to-do-list/to-do-list.component.scss index f0dac87..9ff8f30 100644 --- a/src/app/components/to-do-list/to-do-list.component.scss +++ b/src/app/components/to-do-list/to-do-list.component.scss @@ -1,5 +1,15 @@ +.todo-title { + width: 25%; + padding: 10px 18px; + font-size: xx-large; + margin-bottom: 16px; + &:focus { + outline: 0; + } +} + .todo-input { - width: 100%; + width: 20%; padding: 10px 18px; font-size: 18px; margin-bottom: 16px; @@ -7,6 +17,8 @@ outline: 0; } } + + .element { margin-bottom: 12px; display: flex; @@ -16,6 +28,7 @@ } .deleteTache { + width: 75%; cursor: pointer; margin-left: 14px; &:hover { @@ -40,11 +53,12 @@ margin-left: 12px; width: 100%; padding: 10px; - border: 1px solid #ccc; //override defaults + border: 1px solid rgb(204, 204, 204); //override defaults font-family: 'Avenir', Helvetica, Arial, sans-serif; &:focus { outline: none; + background-color:aquamarine; } } @@ -53,15 +67,6 @@ 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; diff --git a/src/app/components/to-do-list/to-do-list.component.ts b/src/app/components/to-do-list/to-do-list.component.ts index fb23768..361390e 100644 --- a/src/app/components/to-do-list/to-do-list.component.ts +++ b/src/app/components/to-do-list/to-do-list.component.ts @@ -1,5 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { Todo } from 'src/app/interfaces/todo'; +import { TodoService } from 'src/app/services/todo.service'; @Component({ selector: 'app-to-do-list', @@ -7,6 +9,7 @@ import { Todo } from 'src/app/interfaces/todo'; styleUrls: ['./to-do-list.component.scss'], }) export class ToDoListComponent implements OnInit { + @Input() todo : any; public beforeEditCache: string; public todos: Todo[]; public todoTitle: string; @@ -14,8 +17,9 @@ export class ToDoListComponent implements OnInit { public filter : string; public casesRestantes : boolean; public masterSelected: boolean; + public result : any; - constructor() { + constructor(private TodoService : TodoService, private router: Router ) { this.beforeEditCache = ''; this.todos = []; this.todoTitle = ''; @@ -23,9 +27,11 @@ export class ToDoListComponent implements OnInit { this.filter =''; this.casesRestantes=true; this.masterSelected= false; + } ngOnInit(): void { + //this.refreshTodo(); this.beforeEditCache = ''; this.casesRestantes=true; this.filter='tous'; @@ -53,8 +59,11 @@ export class ToDoListComponent implements OnInit { ]; } //ajouter tache - addTitle(): void { - if (this.todoTitle.trim().length === 0) { + addTache(): void { + this.TodoService.addTache(todo).subscribe((resp)=>{ + this.router.navigate(['to-do-list']) + }) + /* if (this.todoTitle.trim().length === 0) { return; } @@ -65,8 +74,13 @@ export class ToDoListComponent implements OnInit { editing: false, }); this.todoTitle = ''; - this.idTodo++; + this.idTodo++; */ } + /* if (contact.nom !== '') { + this.repertoireService.addContact(contact).subscribe((resp) => { + this.router.navigate(['repertoire/']); + }); */ + //modifier la tâche modifier(todo: Todo): void { @@ -90,9 +104,14 @@ export class ToDoListComponent implements OnInit { } //supprimer la tache - deleteTodo(id: number): void { - this.todos = this.todos.filter((todo) => todo.id !== id); - } + deleteTodo(id: number) { + this.TodoService.deleteTacheById(id).subscribe( + resp =>{ + window.location.reload(); + } + );} + + //nombre de tâches restantes toDoRest(): number{ diff --git a/src/app/pages/page-to-do-list/page-to-do-list.component.html b/src/app/pages/page-to-do-list/page-to-do-list.component.html index 9eed39a..f58dc34 100644 --- a/src/app/pages/page-to-do-list/page-to-do-list.component.html +++ b/src/app/pages/page-to-do-list/page-to-do-list.component.html @@ -1,5 +1,9 @@ -
- +
+
+
+ +
+
diff --git a/src/app/pages/page-to-do-list/page-to-do-list.component.ts b/src/app/pages/page-to-do-list/page-to-do-list.component.ts index c7240b0..81ebd86 100644 --- a/src/app/pages/page-to-do-list/page-to-do-list.component.ts +++ b/src/app/pages/page-to-do-list/page-to-do-list.component.ts @@ -1,4 +1,7 @@ import { Component, OnInit } from '@angular/core'; +import { TodoService } from 'src/app/services/todo.service'; + + @Component({ selector: 'app-page-to-do-list', @@ -6,10 +9,18 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./page-to-do-list.component.scss'] }) export class PageToDoListComponent implements OnInit { + public result : any; - constructor() { } + constructor(private TodoService : TodoService) { } ngOnInit(): void { + this.TodoService.getToDoListByTeamId().subscribe((data :any)=>{ + + this.result = data; + console.log(data); + }); + + } } diff --git a/src/app/services/todo-service.service.ts b/src/app/services/todo-service.service.ts deleted file mode 100644 index e0d597a..0000000 --- a/src/app/services/todo-service.service.ts +++ /dev/null @@ -1,43 +0,0 @@ -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); -} - - - -} diff --git a/src/app/services/todo.service.spec.ts b/src/app/services/todo.service.spec.ts new file mode 100644 index 0000000..41eb649 --- /dev/null +++ b/src/app/services/todo.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { TodoService } from './todo.service'; + +describe('TodoService', () => { + let service: TodoService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(TodoService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/todo.service.ts b/src/app/services/todo.service.ts new file mode 100644 index 0000000..7202261 --- /dev/null +++ b/src/app/services/todo.service.ts @@ -0,0 +1,30 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { environment } from 'src/environments/environment'; +import { Todo } from '../interfaces/todo'; + +@Injectable({ + providedIn: 'root', +}) +export class TodoService { + private toDoList: any; + private apiUrl: string; + + constructor(private http: HttpClient) { + this.apiUrl = environment.apiUrl; + } + + getToDoListByTeamId(): Observable { + return this.http.get(`${this.apiUrl}/todolist/team/1`); + } + + deleteTacheById(idTache: any): Observable { + return this.http.delete(`${this.apiUrl}/taches/delete/${idTache}`,{responseType:'text'}); + } + + addTache(todo:Todo): Observable { + console.log(todo); + return this.http.post(`${this.apiUrl}/taches/add`, todo); + } +} From 507edc6151086e5f6370d0d167b3eb2b6e27ab3a Mon Sep 17 00:00:00 2001 From: HarmandI Date: Tue, 15 Feb 2022 15:03:35 +0100 Subject: [PATCH 2/2] Add tache ok --- package-lock.json | 6 +- package.json | 2 +- .../to-do-list/to-do-list.component.html | 8 +- .../to-do-list/to-do-list.component.ts | 87 +++++++++++-------- src/app/interfaces/todo.ts | 6 +- src/app/models/tache.ts | 10 +++ src/app/models/to-do-list.ts | 6 +- src/app/services/todo.service.ts | 9 +- src/app/todo-list.ts | 2 + 9 files changed, 83 insertions(+), 53 deletions(-) create mode 100644 src/app/models/tache.ts create mode 100644 src/app/todo-list.ts diff --git a/package-lock.json b/package-lock.json index 11d31e8..46ec9e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2645,9 +2645,9 @@ "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==" }, "bootstrap-icons": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz", - "integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==" + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz", + "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w==" }, "brace-expansion": { "version": "1.1.11", diff --git a/package.json b/package.json index f135ddb..6568a98 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "bootstrap": "^5.1.3", - "bootstrap-icons": "^1.7.2", + "bootstrap-icons": "^1.8.1", "jwt-decode": "^3.1.2", "ngx-autofocus-fix": "^1.0.4", "rxjs": "~7.4.0", diff --git a/src/app/components/to-do-list/to-do-list.component.html b/src/app/components/to-do-list/to-do-list.component.html index 9c94a23..ffef4f0 100644 --- a/src/app/components/to-do-list/to-do-list.component.html +++ b/src/app/components/to-do-list/to-do-list.component.html @@ -12,10 +12,10 @@ class="todo-input" placeholder="+ Nouvelle Tâche" [(ngModel)]="todoTitle" - (keyup.enter)="addTache()" + (keyup.enter)="addTache(todo.id)" /> - +{{todo}}
@@ -63,7 +63,7 @@
{{ toDoRest() }} tâches
-
+
diff --git a/src/app/components/to-do-list/to-do-list.component.ts b/src/app/components/to-do-list/to-do-list.component.ts index 361390e..fd23fb9 100644 --- a/src/app/components/to-do-list/to-do-list.component.ts +++ b/src/app/components/to-do-list/to-do-list.component.ts @@ -1,7 +1,9 @@ import { Component, Input, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { Todo } from 'src/app/interfaces/todo'; +import { Tache} from 'src/app/models/tache'; +import { ToDoList} from 'src/app/models/to-do-list'; import { TodoService } from 'src/app/services/todo.service'; +import { TodoList } from 'src/app/todo-list'; @Component({ selector: 'app-to-do-list', @@ -9,25 +11,26 @@ import { TodoService } from 'src/app/services/todo.service'; styleUrls: ['./to-do-list.component.scss'], }) export class ToDoListComponent implements OnInit { - @Input() todo : any; + @Input() todo!: ToDoList; public beforeEditCache: string; - public todos: Todo[]; + //public todos: ToDoList[]; public todoTitle: string; public idTodo: number; public filter : string; public casesRestantes : boolean; public masterSelected: boolean; public result : any; + public tache : Tache []; constructor(private TodoService : TodoService, private router: Router ) { this.beforeEditCache = ''; - this.todos = []; + //this.todos = []; this.todoTitle = ''; this.idTodo = 0; this.filter =''; this.casesRestantes=true; this.masterSelected= false; - + this.tache = []; } ngOnInit(): void { @@ -37,31 +40,41 @@ export class ToDoListComponent implements OnInit { this.filter='tous'; this.idTodo = 4; this.todoTitle = ''; - this.todos = [ + /* this.todos = [ { id: 1, - title: 'Finish Angular Screencast', - completed: false, + texte: 'Finish Angular Screencast', + etat: false, editing: false, }, { id: 2, - title: 'Take over world', - completed: false, + texte: 'Take over world', + etat: false, editing: false, }, { id: 3, - title: 'One more thing', - completed: false, + texte: 'One more thing', + etat: false, editing: false, }, - ]; + ]; */ } //ajouter tache - addTache(): void { - this.TodoService.addTache(todo).subscribe((resp)=>{ - this.router.navigate(['to-do-list']) + + addTache(idTodoList : number) {//idTodoList id que la todoList que l'on récupère +console.log(idTodoList); + const tache: Tache = { + id : 0, + texte: this.todoTitle, + etat : false, + editing : false, + + } + console.log(this.tache); + this.TodoService.addTache(tache,idTodoList).subscribe((resp)=>{ + window.location.reload(); }) /* if (this.todoTitle.trim().length === 0) { return; @@ -83,24 +96,24 @@ export class ToDoListComponent implements OnInit { //modifier la tâche - modifier(todo: Todo): void { - this.beforeEditCache = todo.title; - todo.editing = true; + modifier(tache: Tache): void { + this.beforeEditCache = tache.texte; + tache.editing = true; } // modifier l'apparence focus - doneEdit(todo: Todo): void { - if (todo.title.trim().length === 0) { - todo.title = this.beforeEditCache; + doneEdit(tache: Tache): void { + if (tache.texte.trim().length === 0) { + tache.texte = this.beforeEditCache; } this.casesRestantes= this.casesQuiRestes(); - todo.editing = false; + tache.editing = false; } // annuler la modification - cancelEdit(todo: Todo): void { - todo.title = this.beforeEditCache; - todo.editing = false; + cancelEdit(tache: Tache): void { + tache.texte = this.beforeEditCache; + tache.editing = false; } //supprimer la tache @@ -115,24 +128,24 @@ export class ToDoListComponent implements OnInit { //nombre de tâches restantes toDoRest(): number{ - return this.todos.filter(todo=> !todo.completed).length; + return this.todo.taches.filter((tache: Tache)=> !tache.etat).length; } //Cocher toutes les tâches de la liste listComplete(): boolean { - return this.todos.filter(todo=> todo.completed).length>0; + return this.todo.taches.filter((tache: Tache)=> tache).length>0; } //Effacer la to do list effacerList(): void { - this.todos = []; + //this.todo = []; } //cocher toutes les cases de la todoList cocherAllTodoList(): void { - for (var i = 0; i < this.todos.length; i++) { - this.todos[i].completed = this.masterSelected; + for (var i = 0; i < this.todo.taches.length; i++) { + this.todo.taches[i].etat = this.masterSelected; } this.cocherAllTodoList(); } @@ -142,16 +155,16 @@ export class ToDoListComponent implements OnInit { } //barre de filtre des tâches - todosFilter(): Todo[] { + /* todosFilter(): ToDoList[] { if(this.filter === 'tous'){ - return this.todos + return this.todo.taches }else if (this.filter === 'active'){ - return this.todos.filter(todo=> !todo.completed) + return this.todo.taches.filter((tache: Tache)=> !tache.etat) }else if (this.filter === 'complete'){ - return this.todos.filter(todo=>todo.completed) - } - return this.todos + return this.todo.taches.filter((tache: Tache)=>tache.etat) } + return this.todo + } */ } diff --git a/src/app/interfaces/todo.ts b/src/app/interfaces/todo.ts index 29efff7..c210431 100644 --- a/src/app/interfaces/todo.ts +++ b/src/app/interfaces/todo.ts @@ -1,7 +1,7 @@ export interface Todo { id : number, - title : string, - completed: boolean, - editing: boolean + texte : string, + etat: boolean, + // todoListId: number // FK } diff --git a/src/app/models/tache.ts b/src/app/models/tache.ts new file mode 100644 index 0000000..4326f65 --- /dev/null +++ b/src/app/models/tache.ts @@ -0,0 +1,10 @@ + +import { ToDoList } from './to-do-list'; + + +export interface Tache { + id : number, + texte: string, + etat : boolean, + editing : boolean +} diff --git a/src/app/models/to-do-list.ts b/src/app/models/to-do-list.ts index 48fba0f..ec149d4 100644 --- a/src/app/models/to-do-list.ts +++ b/src/app/models/to-do-list.ts @@ -1,7 +1,11 @@ +import { Tache } from './tache'; import { Team } from './team'; export interface ToDoList { nom: string; team: Team; - tache: string; + taches: Tache []; + id:number; } + + diff --git a/src/app/services/todo.service.ts b/src/app/services/todo.service.ts index 7202261..f208bdd 100644 --- a/src/app/services/todo.service.ts +++ b/src/app/services/todo.service.ts @@ -2,7 +2,8 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { environment } from 'src/environments/environment'; -import { Todo } from '../interfaces/todo'; +import { Tache } from '../models/tache'; +import { ToDoList } from '../models/to-do-list'; @Injectable({ providedIn: 'root', @@ -23,8 +24,8 @@ export class TodoService { return this.http.delete(`${this.apiUrl}/taches/delete/${idTache}`,{responseType:'text'}); } - addTache(todo:Todo): Observable { - console.log(todo); - return this.http.post(`${this.apiUrl}/taches/add`, todo); + addTache(newtache: Tache,idTodoList:number): Observable { + console.log(newtache); + return this.http.post(`${this.apiUrl}/taches/add/${idTodoList}`, newtache); } } diff --git a/src/app/todo-list.ts b/src/app/todo-list.ts new file mode 100644 index 0000000..f99121f --- /dev/null +++ b/src/app/todo-list.ts @@ -0,0 +1,2 @@ +export interface TodoList { +}