From d0868526341fd08175b427690ba295936f17d55e Mon Sep 17 00:00:00 2001 From: Okandze-Diessy Date: Thu, 22 Aug 2024 12:23:39 +0100 Subject: [PATCH] Diessy-Okandze.2002 --- src/app/features/contact/contact.module.ts | 14 ++++- .../contact-edit/contact-edit.component.ts | 62 +++++++++++++++++-- .../contact-list/contact-list.component.html | 21 +++++-- .../contact-list/contact-list.component.ts | 43 +++++++++++-- .../contact-view/contact-view.component.html | 18 +++++- .../contact-view/contact-view.component.ts | 39 +++++++++++- .../service/contact.service.service.ts | 6 +- .../problem-edit/problem-edit.component.ts | 48 ++++++++++++-- .../problem-list/problem-list.component.html | 28 ++++++--- .../problem-list/problem-list.component.ts | 34 ++++++++-- .../problem-view/problem-view.component.html | 16 ++++- .../problem-view/problem-view.component.ts | 31 +++++++++- src/app/features/problem/problem.module.ts | 14 ++++- .../service/problem.service.service.ts | 6 +- .../vehicle-edit/vehicle-edit.component.ts | 2 - .../vehicle-list/vehicle-list.component.html | 2 +- .../vehicle-list/vehicle-list.component.ts | 16 ++--- 17 files changed, 340 insertions(+), 60 deletions(-) diff --git a/src/app/features/contact/contact.module.ts b/src/app/features/contact/contact.module.ts index af23967..54fbe3d 100644 --- a/src/app/features/contact/contact.module.ts +++ b/src/app/features/contact/contact.module.ts @@ -4,6 +4,10 @@ import {RouterModule, Routes} from "@angular/router"; import {ContactListComponent} from "./page/contact-list/contact-list.component"; import {ContactEditComponent} from "./page/contact-edit/contact-edit.component"; import {ContactViewComponent} from "./page/contact-view/contact-view.component"; +import {TableModule} from "primeng/table"; +import {ButtonModule} from "primeng/button"; +import {InputTextModule} from "primeng/inputtext"; +import {FormsModule} from "@angular/forms"; const routes: Routes=[ { @@ -11,11 +15,11 @@ const routes: Routes=[ component:ContactListComponent }, { - path: "edit", + path: "edit/:id", component: ContactEditComponent }, { - path: "view", + path: "view/:id", component: ContactViewComponent } ] @@ -24,7 +28,11 @@ const routes: Routes=[ declarations: [], imports: [ CommonModule, - RouterModule.forChild(routes) + RouterModule.forChild(routes), + TableModule, + ButtonModule, + InputTextModule, + FormsModule ] }) export class ContactModule { } diff --git a/src/app/features/contact/page/contact-edit/contact-edit.component.ts b/src/app/features/contact/page/contact-edit/contact-edit.component.ts index b71f3de..e983673 100644 --- a/src/app/features/contact/page/contact-edit/contact-edit.component.ts +++ b/src/app/features/contact/page/contact-edit/contact-edit.component.ts @@ -3,7 +3,7 @@ import {ButtonDirective} from "primeng/button"; import {FormsModule} from "@angular/forms"; import {InputTextModule} from "primeng/inputtext"; import {ContactServiceService} from "../../service/contact.service.service"; -import {Router} from "@angular/router"; +import {ActivatedRoute, Router} from "@angular/router"; @Component({ selector: 'app-contact-edit', @@ -18,17 +18,71 @@ import {Router} from "@angular/router"; }) export class ContactEditComponent implements OnInit{ contact:any={} + //Si l'id est égale 0 alors on enregistre sinon on édite puis on modifie + id: string="0" - constructor(private contactService: ContactServiceService,private router: Router) {} + + constructor(private contactService: ContactServiceService,private router: Router,private activatedRoute: ActivatedRoute) {} ngOnInit() { + //Récupération de l'id sur la route actuelle puis l'affecter à la variable id déclarer + //C'est grâce au service activedRoute.snapshot.params['id'] qu'on peut récupérer l'id + this.id= this.activatedRoute.snapshot.params['id'] + + if(this.id && this.id!="0"){ + this.getById(); + } + + } + //editer car l'id est différent de 0 : + //Lorsqu'on parle d'éditer c'est faire le getById : + + getById():void{ + this.contactService.getById(this.id).subscribe({ + next: (res)=>{ + if(res.success){ + this.contact=res.data + } + }, + error: (error)=>{ + + } + }) } save() { - this.contactService.create(this.contact).subscribe( { + //Si l'id est égal à 0 alors le système enregistre le contact : + if(this.id=="0"){ + this.create(this.contact) + //Si l'id est différent de 0 le système enregistre: + }else{ + this.update(this.contact) + } + } + + //Création une méthode create(): Pour enregistrer : + + create(contact: any): void{ + this.contactService.create(contact).subscribe({ next: (res)=>{ if(res.success){ - this.router.navigateByUrl("/app/contact").then(); + this.router.navigateByUrl("app/contact").then() } + }, + error: (error)=>{ + + } + }) + } + //Créer une méthode pour modifier les données : + update(contact: any):void{ + this.contactService.update(contact).subscribe({ + next: (res)=>{ + if(res.success){ + this.router.navigateByUrl("app/contact").then() + } + }, + error: (error)=>{ + } }) } diff --git a/src/app/features/contact/page/contact-list/contact-list.component.html b/src/app/features/contact/page/contact-list/contact-list.component.html index 806edcc..1d5b2c1 100644 --- a/src/app/features/contact/page/contact-list/contact-list.component.html +++ b/src/app/features/contact/page/contact-list/contact-list.component.html @@ -1,6 +1,19 @@ +
+
+
+ Recherche
+ + +
+ +
Filtre par date
+
+
+ +
- +
@@ -20,9 +33,9 @@ {{contact.phone}} {{contact.mail}} - - - + + + diff --git a/src/app/features/contact/page/contact-list/contact-list.component.ts b/src/app/features/contact/page/contact-list/contact-list.component.ts index ff9754a..4515500 100644 --- a/src/app/features/contact/page/contact-list/contact-list.component.ts +++ b/src/app/features/contact/page/contact-list/contact-list.component.ts @@ -4,6 +4,8 @@ import {PrimeTemplate} from "primeng/api"; import {TableModule} from "primeng/table"; import {ContactServiceService} from "../../service/contact.service.service"; import {Router} from "@angular/router"; +import {FormsModule} from "@angular/forms"; +import {InputTextModule} from "primeng/inputtext"; @Component({ selector: 'app-contact-list', @@ -11,21 +13,34 @@ import {Router} from "@angular/router"; imports: [ ButtonDirective, PrimeTemplate, - TableModule + TableModule, + FormsModule, + InputTextModule ], templateUrl: './contact-list.component.html', styleUrl: './contact-list.component.scss' }) export class ContactListComponent implements OnInit{ + + //1- filter : + + searchTerm:string= "" //Cette variable récupère et stocke le terme rechercher dans la recherche + + //Nous allons déclarer un objet qui va stocker toutes les informations du front puis envoyer du back. + params: any={} contacts: any[]=[] constructor(private contactService: ContactServiceService,private router: Router) { } ngOnInit() { - this.getServices() + this.params.search= "" //Cette propriété permet de l'objet params va récupérer la recherche effectuer + this.params.fields= ['lastname','firstname'] //Cette propriété fields va stocker les champs de la collection concerné par la recherche. + this.params.page= 1 //Cette propriété permet de stocker la page de début des données recherchées + this.params.limit= 5 //Cette propriété permet de stocker la page de fin des données recherchées + this.getContacts() } - getServices() { - this.contactService.getAll().subscribe({ + getContacts() { + this.contactService.getAll(this.params).subscribe({ next: (res) => { if (res.success) { this.contacts = res.data; @@ -33,8 +48,24 @@ export class ContactListComponent implements OnInit{ } }) } - edit(): void{ - this.router.navigateByUrl('/app/contact/edit').then() + edit(_id:string): void{ + this.router.navigateByUrl('/app/contact/edit/'+_id).then() + } + view(_id:string):void{ + this.router.navigateByUrl("/app/contact/view/"+_id).then() + } + delete(_id:string):void{ + this.contactService.delete(_id).subscribe({ + next: (res)=>{ + if(res.success){ + this.getContacts() + } + } + }) + } + search():void{ + this.params.search=this.searchTerm //Donc on a juste affecter le terme rechercher dans la propriété search de l'objet params. + this.getContacts() } } diff --git a/src/app/features/contact/page/contact-view/contact-view.component.html b/src/app/features/contact/page/contact-view/contact-view.component.html index f50ab5c..d3ec96b 100644 --- a/src/app/features/contact/page/contact-view/contact-view.component.html +++ b/src/app/features/contact/page/contact-view/contact-view.component.html @@ -1 +1,17 @@ -

contact-view works!

+
+
+
+ {{contact.lastname }} +

+
+ {{contact.firstname}} +

+
+ {{contact.phone}} +

+
+ {{contact.mail}} +
+

+ +
diff --git a/src/app/features/contact/page/contact-view/contact-view.component.ts b/src/app/features/contact/page/contact-view/contact-view.component.ts index f0bdcb9..62220fc 100644 --- a/src/app/features/contact/page/contact-view/contact-view.component.ts +++ b/src/app/features/contact/page/contact-view/contact-view.component.ts @@ -1,12 +1,45 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; +import {ButtonDirective} from "primeng/button"; +import {InputTextModule} from "primeng/inputtext"; +import {PaginatorModule} from "primeng/paginator"; +import {ActivatedRoute, Router} from "@angular/router"; +import {ContactServiceService} from "../../service/contact.service.service"; @Component({ selector: 'app-contact-view', standalone: true, - imports: [], + imports: [ + ButtonDirective, + InputTextModule, + PaginatorModule + ], templateUrl: './contact-view.component.html', styleUrl: './contact-view.component.scss' }) -export class ContactViewComponent { +export class ContactViewComponent implements OnInit{ + + contact: any={} + id: string="0" + constructor(private contactService: ContactServiceService,private router: Router, private activatedRoute: ActivatedRoute, private cdr: ChangeDetectorRef) { + } + + ngOnInit() { + this.id= this.activatedRoute.snapshot.params['id'] + if(this.id && this.id!="0"){ + this.getById() + } + } + + getById():void{ + this.contactService.getById(this.id).subscribe({ + next: (res)=>{ + if(res.success){ + this.contact=res.data + this.cdr.detectChanges() + } + } + }) + } + } diff --git a/src/app/features/contact/service/contact.service.service.ts b/src/app/features/contact/service/contact.service.service.ts index cb60b36..950babd 100644 --- a/src/app/features/contact/service/contact.service.service.ts +++ b/src/app/features/contact/service/contact.service.service.ts @@ -13,8 +13,8 @@ export class ContactServiceService { constructor(private http: HttpClient) { } //getAll : - getAll():Observable{ - return this.http.get(apiRoute+this.url); + getAll(params: any):Observable{ + return this.http.get(apiRoute+this.url, {params}); } //getById : @@ -33,7 +33,7 @@ export class ContactServiceService { //update : update(contact: any):Observable{ - return this.http.put(apiRoute+this.url+"/"+contact.id,contact) + return this.http.put(apiRoute+this.url+"/"+contact._id,contact) } //delete : diff --git a/src/app/features/problem/page/problem-edit/problem-edit.component.ts b/src/app/features/problem/page/problem-edit/problem-edit.component.ts index 457c1d7..d6ec98f 100644 --- a/src/app/features/problem/page/problem-edit/problem-edit.component.ts +++ b/src/app/features/problem/page/problem-edit/problem-edit.component.ts @@ -5,7 +5,7 @@ import {TableModule} from "primeng/table"; import {InputTextModule} from "primeng/inputtext"; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {ProblemServiceService} from "../../service/problem.service.service"; -import {Router} from "@angular/router"; +import {ActivatedRoute, Router} from "@angular/router"; @Component({ selector: 'app-problem-edit', @@ -23,15 +23,55 @@ import {Router} from "@angular/router"; }) export class ProblemEditComponent implements OnInit{ problem:any={} + id: string="0" - constructor(private problemService: ProblemServiceService, private router: Router) { + constructor(private problemService: ProblemServiceService, private router: Router,private activatedRoute: ActivatedRoute) { } ngOnInit() { + this.id= this.activatedRoute.snapshot.params['id'] + if(this.id && this.id!="0"){ + this.getById() + } +} + +getById():void{ + this.problemService.getById(this.id).subscribe({ + next: (res)=>{ + if(res.success){ + this.problem=res.data + } + } + }) } save():void{ - this.problemService.create(this.problem).subscribe({ + if(this.id=="0"){ + this.create(this.problem) + }else{ + this.update(this.problem) + } +} + +create(problem:any):void{ + this.problemService.create(problem).subscribe({ next: (res)=>{ - this.router.navigateByUrl("app/problem").then(); + if(res.success){ + this.router.navigateByUrl("/app/problem").then() + } + }, + error: (error)=>{ + + } + }) +} +update(problem: any):void{ + this.problemService.update(problem).subscribe({ + next: (res)=>{ + if(res.success){ + this.router.navigateByUrl("/app/problem").then() + } + }, + error: (error)=>{ + } }) } diff --git a/src/app/features/problem/page/problem-list/problem-list.component.html b/src/app/features/problem/page/problem-list/problem-list.component.html index 6728d18..1d64754 100644 --- a/src/app/features/problem/page/problem-list/problem-list.component.html +++ b/src/app/features/problem/page/problem-list/problem-list.component.html @@ -1,6 +1,18 @@ +
+
+
+ Recherche
+ + +
+ +
Filtre par date
+
+
+
- +
@@ -12,15 +24,15 @@ Actions - + - {{problems.description}} - {{problems.date}} - {{problems.status}} + {{problem.description}} + {{problem.date}} + {{problem.status}} - - - + + + diff --git a/src/app/features/problem/page/problem-list/problem-list.component.ts b/src/app/features/problem/page/problem-list/problem-list.component.ts index 6e1c6f9..cddcf39 100644 --- a/src/app/features/problem/page/problem-list/problem-list.component.ts +++ b/src/app/features/problem/page/problem-list/problem-list.component.ts @@ -4,6 +4,8 @@ import {PrimeTemplate} from "primeng/api"; import {TableModule} from "primeng/table"; import {ProblemServiceService} from "../../service/problem.service.service"; import {Router} from "@angular/router"; +import {FormsModule} from "@angular/forms"; +import {InputTextModule} from "primeng/inputtext"; @Component({ selector: 'app-problem-list', @@ -11,21 +13,29 @@ import {Router} from "@angular/router"; imports: [ ButtonDirective, PrimeTemplate, - TableModule + TableModule, + FormsModule, + InputTextModule ], templateUrl: './problem-list.component.html', styleUrl: './problem-list.component.scss' }) export class ProblemListComponent implements OnInit{ + searchTerm: string= "" + params: any= {} problems:any[]=[] constructor(private problemService: ProblemServiceService,private router: Router) { } ngOnInit() { + this.params.search= "" + this.params.fields= ['description','state','date'] + this.params.page= 1 + this.params.limit= 5 this.getProblems() } getProblems():void{ - this.problemService.getAll().subscribe({ + this.problemService.getAll(this.params).subscribe({ next: (res)=>{ if(res.success){ this.problems=res.data @@ -33,7 +43,23 @@ export class ProblemListComponent implements OnInit{ } }) } - edit():void{ - this.router.navigateByUrl("app/problem/edit").then() + edit(_id:string):void{ + this.router.navigateByUrl("app/problem/edit/"+_id).then() + } + view(_id: string): void{ + this.router.navigateByUrl("/app/problem/view/"+_id).then() + } + delete(_id:string):void{ + this.problemService.delete(_id).subscribe({ + next: (res)=>{ + if(res.success){ + this.getProblems() + } + } + }) + } + search():void{ + this.params.search=this.searchTerm + this.getProblems() } } diff --git a/src/app/features/problem/page/problem-view/problem-view.component.html b/src/app/features/problem/page/problem-view/problem-view.component.html index 9fea102..a0cc28f 100644 --- a/src/app/features/problem/page/problem-view/problem-view.component.html +++ b/src/app/features/problem/page/problem-view/problem-view.component.html @@ -1 +1,15 @@ -

problem-view works!

+
+
+
+ {{problem.description }} +

+
+ {{problem.date}} +

+
+ {{problem.status}} +
+

+ +
+ diff --git a/src/app/features/problem/page/problem-view/problem-view.component.ts b/src/app/features/problem/page/problem-view/problem-view.component.ts index b1a35c1..d08b37b 100644 --- a/src/app/features/problem/page/problem-view/problem-view.component.ts +++ b/src/app/features/problem/page/problem-view/problem-view.component.ts @@ -1,4 +1,6 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; +import {ProblemServiceService} from "../../service/problem.service.service"; +import {ActivatedRoute, Router} from "@angular/router"; @Component({ selector: 'app-problem-view', @@ -7,6 +9,31 @@ import { Component } from '@angular/core'; templateUrl: './problem-view.component.html', styleUrl: './problem-view.component.scss' }) -export class ProblemViewComponent { +export class ProblemViewComponent implements OnInit{ + problem: any={} + id:string="0" + + constructor(private problemService: ProblemServiceService, private router: Router, private activatedRoute: ActivatedRoute,private cdr: ChangeDetectorRef) { + } + ngOnInit() { + + this.id= this.activatedRoute.snapshot.params['id'] + if(this.id && this.id!="0"){ + this.getById() + } + } + getById(): void{ + this.problemService.getById(this.id).subscribe({ + next: (res)=>{ + if(res.success){ + this.problem= res.data; + this.cdr.detectChanges() + } + }, + error: (error)=>{ + + } + }) + } } diff --git a/src/app/features/problem/problem.module.ts b/src/app/features/problem/problem.module.ts index a3d7186..26dcd39 100644 --- a/src/app/features/problem/problem.module.ts +++ b/src/app/features/problem/problem.module.ts @@ -4,6 +4,10 @@ import {ProblemListComponent} from "./page/problem-list/problem-list.component"; import {ProblemEditComponent} from "./page/problem-edit/problem-edit.component"; import {ProblemViewComponent} from "./page/problem-view/problem-view.component"; import {RouterModule, Routes} from "@angular/router"; +import {TableModule} from "primeng/table"; +import {ButtonModule} from "primeng/button"; +import {InputTextModule} from "primeng/inputtext"; +import {FormsModule} from "@angular/forms"; const routes : Routes=[ { @@ -11,11 +15,11 @@ const routes : Routes=[ component: ProblemListComponent }, { - path: 'edit', + path: 'edit/:id', component: ProblemEditComponent }, { - path: 'view', + path: 'view/:id', component: ProblemViewComponent } ] @@ -25,7 +29,11 @@ const routes : Routes=[ declarations: [], imports: [ CommonModule, - RouterModule.forChild(routes) + RouterModule.forChild(routes), + TableModule, + ButtonModule, + InputTextModule, + FormsModule ] }) export class ProblemModule { } diff --git a/src/app/features/problem/service/problem.service.service.ts b/src/app/features/problem/service/problem.service.service.ts index a889000..91d7be0 100644 --- a/src/app/features/problem/service/problem.service.service.ts +++ b/src/app/features/problem/service/problem.service.service.ts @@ -13,8 +13,8 @@ export class ProblemServiceService { //getAll : - getAll(): Observable{ - return this.http.get(apiRoute+this.url); + getAll(params: any): Observable{ + return this.http.get(apiRoute+this.url, {params}); } @@ -35,7 +35,7 @@ export class ProblemServiceService { //update : update(problem: any): Observable{ - return this.http.put(apiRoute+this.url+"/"+problem.id,problem); + return this.http.put(apiRoute+this.url+"/"+problem._id,problem); } diff --git a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts index f8e6739..7ef5431 100644 --- a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts +++ b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts @@ -18,7 +18,6 @@ export class VehicleEditComponent implements OnInit { ngOnInit(): void { this.id = this.activatedRoute.snapshot.params['id']; - if(this.id && this.id != "0"){ this.getById(); } @@ -39,7 +38,6 @@ export class VehicleEditComponent implements OnInit { } save(): void { - if(this.id == "0"){ this.create(this.vehicle); }else { diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html index 58f41bf..f1f96b4 100644 --- a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html +++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html @@ -7,7 +7,7 @@ -
Filtre pard ta
+
Filtre par date
diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts index b6fcc3b..de13e3b 100644 --- a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts +++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts @@ -10,22 +10,22 @@ import {VehicleService} from "../../service/vehicle.service"; export class VehicleListComponent implements OnInit { //1. filter - searchTerm : string = ""; - params : any = {}; + searchTerm : string = ""; //Cette variable va récupérer le mot ou terme rechercher dans le champ de saisie du view + params : any = {}; //Cette variable est un objet de type any, ça peut prendre n'importe quel type de données. //2. table - vehicles: any[] = []; + vehicles: any[] = []; //Récupère les données sous forme de tableau constructor(private router: Router, private vehicleService: VehicleService) { } ngOnInit(): void { - this.params.search = ""; - this.params.fields = ["matricule", "mark", "model"]; - this.params.page = 1; - this.params.limit = 5; + this.params.search = ""; //Propriété search de l'objet params : permet de stocker la recherche + this.params.fields = ["matricule", "mark", "model"]; //Propriété fields de l'objet params : permet de spécifier les champs à rechercher + this.params.page = 1; //Propriété page de l'objet params : permet de stocker la page de début + this.params.limit = 5; //Propriété limit de l'objet params : permet de stocker la page de fin. this.getVehicles(); } @@ -60,7 +60,7 @@ export class VehicleListComponent implements OnInit { } search() { - this.params.search = this.searchTerm; + this.params.search = this.searchTerm; //On a affecter à la propriété search de notre objet params le terme saisie ou rechercher this.getVehicles() } }