Diessy-Okandze.2002
parent
2e86fd5eff
commit
d086852634
|
@ -4,6 +4,10 @@ import {RouterModule, Routes} from "@angular/router";
|
||||||
import {ContactListComponent} from "./page/contact-list/contact-list.component";
|
import {ContactListComponent} from "./page/contact-list/contact-list.component";
|
||||||
import {ContactEditComponent} from "./page/contact-edit/contact-edit.component";
|
import {ContactEditComponent} from "./page/contact-edit/contact-edit.component";
|
||||||
import {ContactViewComponent} from "./page/contact-view/contact-view.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=[
|
const routes: Routes=[
|
||||||
{
|
{
|
||||||
|
@ -11,11 +15,11 @@ const routes: Routes=[
|
||||||
component:ContactListComponent
|
component:ContactListComponent
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "edit",
|
path: "edit/:id",
|
||||||
component: ContactEditComponent
|
component: ContactEditComponent
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "view",
|
path: "view/:id",
|
||||||
component: ContactViewComponent
|
component: ContactViewComponent
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -24,7 +28,11 @@ const routes: Routes=[
|
||||||
declarations: [],
|
declarations: [],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
RouterModule.forChild(routes)
|
RouterModule.forChild(routes),
|
||||||
|
TableModule,
|
||||||
|
ButtonModule,
|
||||||
|
InputTextModule,
|
||||||
|
FormsModule
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class ContactModule { }
|
export class ContactModule { }
|
||||||
|
|
|
@ -3,7 +3,7 @@ import {ButtonDirective} from "primeng/button";
|
||||||
import {FormsModule} from "@angular/forms";
|
import {FormsModule} from "@angular/forms";
|
||||||
import {InputTextModule} from "primeng/inputtext";
|
import {InputTextModule} from "primeng/inputtext";
|
||||||
import {ContactServiceService} from "../../service/contact.service.service";
|
import {ContactServiceService} from "../../service/contact.service.service";
|
||||||
import {Router} from "@angular/router";
|
import {ActivatedRoute, Router} from "@angular/router";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-contact-edit',
|
selector: 'app-contact-edit',
|
||||||
|
@ -18,17 +18,71 @@ import {Router} from "@angular/router";
|
||||||
})
|
})
|
||||||
export class ContactEditComponent implements OnInit{
|
export class ContactEditComponent implements OnInit{
|
||||||
contact:any={}
|
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() {
|
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() {
|
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)=>{
|
next: (res)=>{
|
||||||
if(res.success){
|
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)=>{
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
<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>
|
</div>
|
||||||
|
|
||||||
<p-table [value]="contacts" [tableStyle]="{'min-width': '50rem'}">
|
<p-table [value]="contacts" [tableStyle]="{'min-width': '50rem'}">
|
||||||
|
@ -20,9 +33,9 @@
|
||||||
<td>{{contact.phone}}</td>
|
<td>{{contact.phone}}</td>
|
||||||
<td>{{contact.mail}}</td>
|
<td>{{contact.mail}}</td>
|
||||||
<td>
|
<td>
|
||||||
<i class="pi pi-pencil" style="margin-right: 10px"></i>
|
<i (click)="edit(contact._id)" class="pi pi-pencil" style="margin-right: 10px"></i>
|
||||||
<i class="pi pi-trash" style="margin-right: 10px"></i>
|
<i (click)="delete(contact._id)" class="pi pi-trash" style="margin-right: 10px"></i>
|
||||||
<i class="pi pi-eye" style="margin-right: 10px"></i>
|
<i (click)="view(contact._id)" class="pi pi-eye" style="margin-right: 10px"></i>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
|
@ -4,6 +4,8 @@ import {PrimeTemplate} from "primeng/api";
|
||||||
import {TableModule} from "primeng/table";
|
import {TableModule} from "primeng/table";
|
||||||
import {ContactServiceService} from "../../service/contact.service.service";
|
import {ContactServiceService} from "../../service/contact.service.service";
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {InputTextModule} from "primeng/inputtext";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-contact-list',
|
selector: 'app-contact-list',
|
||||||
|
@ -11,21 +13,34 @@ import {Router} from "@angular/router";
|
||||||
imports: [
|
imports: [
|
||||||
ButtonDirective,
|
ButtonDirective,
|
||||||
PrimeTemplate,
|
PrimeTemplate,
|
||||||
TableModule
|
TableModule,
|
||||||
|
FormsModule,
|
||||||
|
InputTextModule
|
||||||
],
|
],
|
||||||
templateUrl: './contact-list.component.html',
|
templateUrl: './contact-list.component.html',
|
||||||
styleUrl: './contact-list.component.scss'
|
styleUrl: './contact-list.component.scss'
|
||||||
})
|
})
|
||||||
export class ContactListComponent implements OnInit{
|
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[]=[]
|
contacts: any[]=[]
|
||||||
|
|
||||||
constructor(private contactService: ContactServiceService,private router: Router) {
|
constructor(private contactService: ContactServiceService,private router: Router) {
|
||||||
}
|
}
|
||||||
ngOnInit() {
|
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() {
|
getContacts() {
|
||||||
this.contactService.getAll().subscribe({
|
this.contactService.getAll(this.params).subscribe({
|
||||||
next: (res) => {
|
next: (res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.contacts = res.data;
|
this.contacts = res.data;
|
||||||
|
@ -33,8 +48,24 @@ export class ContactListComponent implements OnInit{
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
edit(): void{
|
edit(_id:string): void{
|
||||||
this.router.navigateByUrl('/app/contact/edit').then()
|
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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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({
|
@Component({
|
||||||
selector: 'app-contact-view',
|
selector: 'app-contact-view',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [],
|
imports: [
|
||||||
|
ButtonDirective,
|
||||||
|
InputTextModule,
|
||||||
|
PaginatorModule
|
||||||
|
],
|
||||||
templateUrl: './contact-view.component.html',
|
templateUrl: './contact-view.component.html',
|
||||||
styleUrl: './contact-view.component.scss'
|
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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,8 +13,8 @@ export class ContactServiceService {
|
||||||
constructor(private http: HttpClient) { }
|
constructor(private http: HttpClient) { }
|
||||||
|
|
||||||
//getAll :
|
//getAll :
|
||||||
getAll():Observable<any>{
|
getAll(params: any):Observable<any>{
|
||||||
return this.http.get<any>(apiRoute+this.url);
|
return this.http.get<any>(apiRoute+this.url, {params});
|
||||||
}
|
}
|
||||||
|
|
||||||
//getById :
|
//getById :
|
||||||
|
@ -33,7 +33,7 @@ export class ContactServiceService {
|
||||||
|
|
||||||
//update :
|
//update :
|
||||||
update(contact: any):Observable<any>{
|
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 :
|
//delete :
|
||||||
|
|
|
@ -5,7 +5,7 @@ import {TableModule} from "primeng/table";
|
||||||
import {InputTextModule} from "primeng/inputtext";
|
import {InputTextModule} from "primeng/inputtext";
|
||||||
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
|
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
|
||||||
import {ProblemServiceService} from "../../service/problem.service.service";
|
import {ProblemServiceService} from "../../service/problem.service.service";
|
||||||
import {Router} from "@angular/router";
|
import {ActivatedRoute, Router} from "@angular/router";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-problem-edit',
|
selector: 'app-problem-edit',
|
||||||
|
@ -23,15 +23,55 @@ import {Router} from "@angular/router";
|
||||||
})
|
})
|
||||||
export class ProblemEditComponent implements OnInit{
|
export class ProblemEditComponent implements OnInit{
|
||||||
problem:any={}
|
problem:any={}
|
||||||
|
id: string="0"
|
||||||
|
|
||||||
constructor(private problemService: ProblemServiceService, private router: Router) {
|
constructor(private problemService: ProblemServiceService, private router: Router,private activatedRoute: ActivatedRoute) {
|
||||||
}
|
}
|
||||||
ngOnInit() {
|
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{
|
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)=>{
|
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)=>{
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
<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>
|
</div>
|
||||||
|
|
||||||
<p-table [value]="problems" [tableStyle]="{'min-width': '50rem'}">
|
<p-table [value]="problems" [tableStyle]="{'min-width': '50rem'}">
|
||||||
|
@ -12,15 +24,15 @@
|
||||||
<th>Actions</th>
|
<th>Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template pTemplate="body" let-problems>
|
<ng-template pTemplate="body" let-problem>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{problems.description}}</td>
|
<td>{{problem.description}}</td>
|
||||||
<td>{{problems.date}}</td>
|
<td>{{problem.date}}</td>
|
||||||
<td>{{problems.status}}</td>
|
<td>{{problem.status}}</td>
|
||||||
<td>
|
<td>
|
||||||
<i class="pi pi-pencil" style="margin-right: 10px"></i>
|
<i (click)="edit(problem._id)" class="pi pi-pencil" style="margin-right: 10px"></i>
|
||||||
<i class="pi pi-trash" style="margin-right: 10px"></i>
|
<i (click)="delete(problem._id)" class="pi pi-trash" style="margin-right: 10px"></i>
|
||||||
<i class="pi pi-eye" style="margin-right: 10px"></i>
|
<i (click)="view(problem._id)" class="pi pi-eye" style="margin-right: 10px"></i>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
|
@ -4,6 +4,8 @@ import {PrimeTemplate} from "primeng/api";
|
||||||
import {TableModule} from "primeng/table";
|
import {TableModule} from "primeng/table";
|
||||||
import {ProblemServiceService} from "../../service/problem.service.service";
|
import {ProblemServiceService} from "../../service/problem.service.service";
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {InputTextModule} from "primeng/inputtext";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-problem-list',
|
selector: 'app-problem-list',
|
||||||
|
@ -11,21 +13,29 @@ import {Router} from "@angular/router";
|
||||||
imports: [
|
imports: [
|
||||||
ButtonDirective,
|
ButtonDirective,
|
||||||
PrimeTemplate,
|
PrimeTemplate,
|
||||||
TableModule
|
TableModule,
|
||||||
|
FormsModule,
|
||||||
|
InputTextModule
|
||||||
],
|
],
|
||||||
templateUrl: './problem-list.component.html',
|
templateUrl: './problem-list.component.html',
|
||||||
styleUrl: './problem-list.component.scss'
|
styleUrl: './problem-list.component.scss'
|
||||||
})
|
})
|
||||||
export class ProblemListComponent implements OnInit{
|
export class ProblemListComponent implements OnInit{
|
||||||
|
searchTerm: string= ""
|
||||||
|
params: any= {}
|
||||||
problems:any[]=[]
|
problems:any[]=[]
|
||||||
constructor(private problemService: ProblemServiceService,private router: Router) {
|
constructor(private problemService: ProblemServiceService,private router: Router) {
|
||||||
}
|
}
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.params.search= ""
|
||||||
|
this.params.fields= ['description','state','date']
|
||||||
|
this.params.page= 1
|
||||||
|
this.params.limit= 5
|
||||||
this.getProblems()
|
this.getProblems()
|
||||||
}
|
}
|
||||||
|
|
||||||
getProblems():void{
|
getProblems():void{
|
||||||
this.problemService.getAll().subscribe({
|
this.problemService.getAll(this.params).subscribe({
|
||||||
next: (res)=>{
|
next: (res)=>{
|
||||||
if(res.success){
|
if(res.success){
|
||||||
this.problems=res.data
|
this.problems=res.data
|
||||||
|
@ -33,7 +43,23 @@ export class ProblemListComponent implements OnInit{
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
edit():void{
|
edit(_id:string):void{
|
||||||
this.router.navigateByUrl("app/problem/edit").then()
|
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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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({
|
@Component({
|
||||||
selector: 'app-problem-view',
|
selector: 'app-problem-view',
|
||||||
|
@ -7,6 +9,31 @@ import { Component } from '@angular/core';
|
||||||
templateUrl: './problem-view.component.html',
|
templateUrl: './problem-view.component.html',
|
||||||
styleUrl: './problem-view.component.scss'
|
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)=>{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -4,6 +4,10 @@ import {ProblemListComponent} from "./page/problem-list/problem-list.component";
|
||||||
import {ProblemEditComponent} from "./page/problem-edit/problem-edit.component";
|
import {ProblemEditComponent} from "./page/problem-edit/problem-edit.component";
|
||||||
import {ProblemViewComponent} from "./page/problem-view/problem-view.component";
|
import {ProblemViewComponent} from "./page/problem-view/problem-view.component";
|
||||||
import {RouterModule, Routes} from "@angular/router";
|
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=[
|
const routes : Routes=[
|
||||||
{
|
{
|
||||||
|
@ -11,11 +15,11 @@ const routes : Routes=[
|
||||||
component: ProblemListComponent
|
component: ProblemListComponent
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'edit',
|
path: 'edit/:id',
|
||||||
component: ProblemEditComponent
|
component: ProblemEditComponent
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'view',
|
path: 'view/:id',
|
||||||
component: ProblemViewComponent
|
component: ProblemViewComponent
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -25,7 +29,11 @@ const routes : Routes=[
|
||||||
declarations: [],
|
declarations: [],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
RouterModule.forChild(routes)
|
RouterModule.forChild(routes),
|
||||||
|
TableModule,
|
||||||
|
ButtonModule,
|
||||||
|
InputTextModule,
|
||||||
|
FormsModule
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class ProblemModule { }
|
export class ProblemModule { }
|
||||||
|
|
|
@ -13,8 +13,8 @@ export class ProblemServiceService {
|
||||||
|
|
||||||
//getAll :
|
//getAll :
|
||||||
|
|
||||||
getAll(): Observable<any>{
|
getAll(params: any): Observable<any>{
|
||||||
return this.http.get<any>(apiRoute+this.url);
|
return this.http.get<any>(apiRoute+this.url, {params});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -35,7 +35,7 @@ export class ProblemServiceService {
|
||||||
//update :
|
//update :
|
||||||
|
|
||||||
update(problem: any): Observable<any>{
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,6 @@ export class VehicleEditComponent implements OnInit {
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.id = this.activatedRoute.snapshot.params['id'];
|
this.id = this.activatedRoute.snapshot.params['id'];
|
||||||
|
|
||||||
if(this.id && this.id != "0"){
|
if(this.id && this.id != "0"){
|
||||||
this.getById();
|
this.getById();
|
||||||
}
|
}
|
||||||
|
@ -39,7 +38,6 @@ export class VehicleEditComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
save(): void {
|
save(): void {
|
||||||
|
|
||||||
if(this.id == "0"){
|
if(this.id == "0"){
|
||||||
this.create(this.vehicle);
|
this.create(this.vehicle);
|
||||||
}else {
|
}else {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
|
<input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-left: 10px">Filtre pard ta</div>
|
<div style="margin-left: 10px">Filtre par date</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -10,22 +10,22 @@ import {VehicleService} from "../../service/vehicle.service";
|
||||||
export class VehicleListComponent implements OnInit {
|
export class VehicleListComponent implements OnInit {
|
||||||
|
|
||||||
//1. filter
|
//1. filter
|
||||||
searchTerm : string = "";
|
searchTerm : string = ""; //Cette variable va récupérer le mot ou terme rechercher dans le champ de saisie du view
|
||||||
params : any = {};
|
params : any = {}; //Cette variable est un objet de type any, ça peut prendre n'importe quel type de données.
|
||||||
|
|
||||||
//2. table
|
//2. table
|
||||||
|
|
||||||
vehicles: any[] = [];
|
vehicles: any[] = []; //Récupère les données sous forme de tableau
|
||||||
|
|
||||||
constructor(private router: Router,
|
constructor(private router: Router,
|
||||||
private vehicleService: VehicleService) {
|
private vehicleService: VehicleService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.params.search = "";
|
this.params.search = ""; //Propriété search de l'objet params : permet de stocker la recherche
|
||||||
this.params.fields = ["matricule", "mark", "model"];
|
this.params.fields = ["matricule", "mark", "model"]; //Propriété fields de l'objet params : permet de spécifier les champs à rechercher
|
||||||
this.params.page = 1;
|
this.params.page = 1; //Propriété page de l'objet params : permet de stocker la page de début
|
||||||
this.params.limit = 5;
|
this.params.limit = 5; //Propriété limit de l'objet params : permet de stocker la page de fin.
|
||||||
this.getVehicles();
|
this.getVehicles();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,7 +60,7 @@ export class VehicleListComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
search() {
|
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()
|
this.getVehicles()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue