Diessy-Okandze.2002

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 { }

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)=>{
+
       }
     })
   }

src/app/features/contact/page/contact-list/contact-list.component.html

@@ -1,6 +1,19 @@
 
+<div>
+  <div style="display: inline-flex">
+    <div style="">
+      Recherche <br>
+
+      <input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
+    </div>
+
+    <div style="margin-left: 10px">Filtre par date</div>
+  </div>
+</div>
+
+
 <div style="text-align: right; margin-bottom :10px">
-  <button (click)="edit()" pButton type="button" label="Ajouter un contact"></button>
+  <button (click)="edit('0')" pButton type="button" label="Ajouter un contact"></button>
 </div>
 
 <p-table [value]="contacts" [tableStyle]="{'min-width': '50rem'}">
@@ -20,9 +33,9 @@
       <td>{{contact.phone}}</td>
       <td>{{contact.mail}}</td>
       <td>
-        <i class="pi pi-pencil" style="margin-right: 10px"></i>
-        <i class="pi pi-trash" style="margin-right: 10px"></i>
-        <i class="pi pi-eye" style="margin-right: 10px"></i>
+        <i (click)="edit(contact._id)" class="pi pi-pencil" style="margin-right: 10px"></i>
+        <i (click)="delete(contact._id)" class="pi pi-trash" style="margin-right: 10px"></i>
+        <i (click)="view(contact._id)" class="pi pi-eye" style="margin-right: 10px"></i>
       </td>
     </tr>
   </ng-template>

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()
   }
 }
 

src/app/features/contact/page/contact-view/contact-view.component.html

@@ -1 +1,17 @@
-<p>contact-view works!</p>
+<div>
+  <div>
+    <label>Nom</label><br>
+    <strong>{{contact.lastname }}</strong>
+    <br><br>
+    <label>Prénom</label><br>
+    <strong>{{contact.firstname}}</strong>
+    <br><br>
+    <label>Téléphone</label><br>
+    <strong>{{contact.phone}}</strong>
+    <br><br>
+    <label>Email</label><br>
+    <strong>{{contact.mail}}</strong>
+  </div>
+  <br><br>
+
+</div>

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()
+        }
+      }
+    })
+  }
+
 
 }

src/app/features/contact/service/contact.service.service.ts

@@ -13,8 +13,8 @@ export class ContactServiceService {
   constructor(private http: HttpClient) { }
 
   //getAll :
-  getAll():Observable<any>{
-    return this.http.get<any>(apiRoute+this.url);
+  getAll(params: any):Observable<any>{
+    return this.http.get<any>(apiRoute+this.url, {params});
 }
 
 //getById :
@@ -33,7 +33,7 @@ export class ContactServiceService {
 
 //update :
 update(contact: any):Observable<any>{
-    return this.http.put<any>(apiRoute+this.url+"/"+contact.id,contact)
+    return this.http.put<any>(apiRoute+this.url+"/"+contact._id,contact)
 }
 
 //delete :

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)=>{
+
       }
     })
 }

src/app/features/problem/page/problem-list/problem-list.component.html

@@ -1,6 +1,18 @@
+<div>
+  <div style="display: inline-flex">
+    <div style="">
+      Recherche <br>
+
+      <input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
+    </div>
+
+    <div style="margin-left: 10px">Filtre par date</div>
+  </div>
+</div>
+
 
 <div style="text-align: right; margin-bottom :10px">
-  <button (click)="edit()" pButton type="button" label="Ajouter un problème"></button>
+  <button (click)="edit('0')" pButton type="button" label="Ajouter un problème"></button>
 </div>
 
 <p-table [value]="problems" [tableStyle]="{'min-width': '50rem'}">
@@ -12,15 +24,15 @@
       <th>Actions</th>
     </tr>
   </ng-template>
-  <ng-template pTemplate="body" let-problems>
+  <ng-template pTemplate="body" let-problem>
     <tr>
-      <td>{{problems.description}}</td>
-      <td>{{problems.date}}</td>
-      <td>{{problems.status}}</td>
+      <td>{{problem.description}}</td>
+      <td>{{problem.date}}</td>
+      <td>{{problem.status}}</td>
       <td>
-        <i class="pi pi-pencil" style="margin-right: 10px"></i>
-        <i class="pi pi-trash" style="margin-right: 10px"></i>
-        <i class="pi pi-eye" style="margin-right: 10px"></i>
+        <i (click)="edit(problem._id)" class="pi pi-pencil" style="margin-right: 10px"></i>
+        <i (click)="delete(problem._id)" class="pi pi-trash" style="margin-right: 10px"></i>
+        <i (click)="view(problem._id)" class="pi pi-eye" style="margin-right: 10px"></i>
       </td>
     </tr>
   </ng-template>

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()
   }
 }

src/app/features/problem/page/problem-view/problem-view.component.html

@@ -1 +1,15 @@
-<p>problem-view works!</p>
+<div>
+  <div>
+    <label>Description</label><br>
+    <strong>{{problem.description }}</strong>
+    <br><br>
+    <label>Date</label><br>
+    <strong>{{problem.date}}</strong>
+    <br><br>
+    <label>Statut</label><br>
+    <strong>{{problem.status}}</strong>
+  </div>
+  <br><br>
+
+</div>
+

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)=>{
+
+      }
+    })
+  }
 }

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 { }

src/app/features/problem/service/problem.service.service.ts

@@ -13,8 +13,8 @@ export class ProblemServiceService {
 
   //getAll :
 
-  getAll(): Observable<any>{
-    return this.http.get<any>(apiRoute+this.url);
+  getAll(params: any): Observable<any>{
+    return this.http.get<any>(apiRoute+this.url, {params});
   }
 
 
@@ -35,7 +35,7 @@ export class ProblemServiceService {
   //update :
 
   update(problem: any): Observable<any>{
-    return this.http.put<any>(apiRoute+this.url+"/"+problem.id,problem);
+    return this.http.put<any>(apiRoute+this.url+"/"+problem._id,problem);
   }
 
 

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 {

src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html

@@ -7,7 +7,7 @@
       <input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
     </div>
 
-    <div style="margin-left: 10px">Filtre pard ta</div>
+    <div style="margin-left: 10px">Filtre par date</div>
   </div>
 </div>
 

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()
   }
 }