Compare commits
4 Commits
6a74efb462
...
3678f17267
Author | SHA1 | Date |
---|---|---|
Smile | 3678f17267 | |
Smile | 9317e64eca | |
Smile | 72b5e725bd | |
Smile | 83dd32913d |
|
@ -5,9 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import {LayoutModule} from "./layout/layout.module";
|
import {LayoutModule} from "./layout/layout.module";
|
||||||
import {HttpClientModule} from "@angular/common/http";
|
import {HttpClientModule} from "@angular/common/http";
|
||||||
import {CarburantService} from "./features/carburant/service/carburant.service";
|
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
|
||||||
import {CarburantModule} from "./features/carburant/carburant.module";
|
|
||||||
import {UtilisateurService} from "./features/utilisateur/service/utilisateur.service";
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -15,14 +13,12 @@ import {UtilisateurService} from "./features/utilisateur/service/utilisateur.ser
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
LayoutModule,
|
LayoutModule,
|
||||||
HttpClientModule
|
HttpClientModule
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [],
|
||||||
CarburantService,
|
|
||||||
UtilisateurService
|
|
||||||
],
|
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule { }
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div style="display: inline-flex">
|
<div style="display: inline-flex">
|
||||||
<div style="">
|
<div style="">
|
||||||
|
@ -6,17 +7,31 @@
|
||||||
|
|
||||||
<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">
|
||||||
|
<div>Filtrer par date</div>
|
||||||
|
<div>
|
||||||
|
<p-calendar
|
||||||
|
[(ngModel)]="filterDate"
|
||||||
|
(ngModelChange)="onChangeDate($event)"
|
||||||
|
selectionMode="range"
|
||||||
|
[showIcon]="true"
|
||||||
|
[showOnFocus]="false"
|
||||||
|
inputId="buttondisplay" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="text-align: right; margin-bottom :10px">
|
<div style="text-align: right; margin-bottom :10px">
|
||||||
<button (click)="edit('0')" pButton type="button" label="Ajouter un véhicule"></button>
|
<button (click)="edit('0')" pButton type="button" label="Ajouter un véhicule"></button>
|
||||||
|
<button (click)="reload()" pButton type="button" label="Recharger"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p-table [value]="vehicles" [tableStyle]="{'min-width': '50rem'}">
|
<p-table [value]="vehicles" [tableStyle]="{'min-width': '50rem'}">
|
||||||
<ng-template pTemplate="header">
|
<ng-template pTemplate="header">
|
||||||
<tr>
|
<tr>
|
||||||
|
<th>Crée le</th>
|
||||||
<th>Marque</th>
|
<th>Marque</th>
|
||||||
<th>Modèle</th>
|
<th>Modèle</th>
|
||||||
<th>Matricule</th>
|
<th>Matricule</th>
|
||||||
|
@ -25,6 +40,7 @@
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template pTemplate="body" let-vehicle>
|
<ng-template pTemplate="body" let-vehicle>
|
||||||
<tr>
|
<tr>
|
||||||
|
<td>{{vehicle.createdAt | date:'dd-MM-yyyy à hh:mm'}}</td>
|
||||||
<td>{{vehicle.mark}}</td>
|
<td>{{vehicle.mark}}</td>
|
||||||
<td>{{vehicle.model}}</td>
|
<td>{{vehicle.model}}</td>
|
||||||
<td>{{vehicle.matricule}}</td>
|
<td>{{vehicle.matricule}}</td>
|
||||||
|
@ -36,3 +52,10 @@
|
||||||
</tr>
|
</tr>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</p-table>
|
</p-table>
|
||||||
|
|
||||||
|
<p-paginator
|
||||||
|
(onPageChange)="onPageChange($event)"
|
||||||
|
[first]="first"
|
||||||
|
[rows]="rows"
|
||||||
|
[totalRecords]="total"
|
||||||
|
[rowsPerPageOptions]="[5, 10, 15]" />
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import {Component, OnInit} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
import {VehicleService} from "../../service/vehicle.service";
|
import {VehicleService} from "../../service/vehicle.service";
|
||||||
|
import {PaginatorState} from "primeng/paginator";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-vehicle-list',
|
selector: 'app-vehicle-list',
|
||||||
|
@ -16,7 +17,12 @@ export class VehicleListComponent implements OnInit {
|
||||||
//2. table
|
//2. table
|
||||||
|
|
||||||
vehicles: any[] = []; //Récupère les données sous forme de tableau
|
vehicles: any[] = []; //Récupère les données sous forme de tableau
|
||||||
|
total: number = 0;
|
||||||
|
page: number = 0;
|
||||||
|
rows: number = 5;
|
||||||
|
first: number = 0;
|
||||||
|
|
||||||
|
filterDate: any;
|
||||||
constructor(private router: Router,
|
constructor(private router: Router,
|
||||||
private vehicleService: VehicleService) {
|
private vehicleService: VehicleService) {
|
||||||
}
|
}
|
||||||
|
@ -24,17 +30,36 @@ export class VehicleListComponent implements OnInit {
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.params.search = ""; //Propriété search de l'objet params : permet de stocker la recherche
|
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.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.page = 0; //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.params.rows = 5; //Propriété limit de l'objet params : permet de stocker la page de fin.
|
||||||
|
|
||||||
|
if(this.searchTerm == ""){
|
||||||
|
delete this.params['fields'];
|
||||||
|
delete this.params['search'];
|
||||||
|
}else{
|
||||||
|
this.params.fields = ["matricule", "mark", "model"];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
this.getVehicles();
|
this.getVehicles();
|
||||||
}
|
}
|
||||||
|
|
||||||
getVehicles() {
|
getVehicles() {
|
||||||
|
|
||||||
|
|
||||||
|
// this.params["mark[ne]"] = "Toyota"
|
||||||
|
// this.params["mark[in]"] = "Toyota"
|
||||||
|
// this.params["createdAt[gt]"] = "2024-08-18"
|
||||||
|
// this.params["createdAt[lt]"] = "2024-08-16"
|
||||||
|
|
||||||
this.vehicleService.getAll(this.params).subscribe({
|
this.vehicleService.getAll(this.params).subscribe({
|
||||||
next: (res) => {
|
next: (res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.vehicles = res.data;
|
this.vehicles = res.data;
|
||||||
|
this.total = res.totalRecords;
|
||||||
|
this.page = res.page;
|
||||||
|
this.rows = res.rows;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -63,4 +88,46 @@ export class VehicleListComponent implements OnInit {
|
||||||
this.params.search = this.searchTerm; //On a affecter à la propriété search de notre objet params le terme saisie ou rechercher
|
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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onPageChange($event: PaginatorState) {
|
||||||
|
if(this.rows != $event.rows){
|
||||||
|
this.params.page = 0
|
||||||
|
}else{
|
||||||
|
this.params.page = Number($event.page);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.params.rows = $event.rows;
|
||||||
|
this.getVehicles();
|
||||||
|
}
|
||||||
|
|
||||||
|
onChangeDate(dates: any) {
|
||||||
|
console.log(dates);
|
||||||
|
|
||||||
|
let dateSelect1 = dates[0];
|
||||||
|
let dateSelect2;
|
||||||
|
if(dates[1] && dates[1] != null){
|
||||||
|
dateSelect2 = new Date(dates[1]);
|
||||||
|
}else{
|
||||||
|
dateSelect2 = new Date(dateSelect1);
|
||||||
|
}
|
||||||
|
|
||||||
|
dateSelect2.setHours(23);
|
||||||
|
dateSelect2.setMinutes(59);
|
||||||
|
dateSelect2.setSeconds(59);
|
||||||
|
|
||||||
|
this.params['createdAt[gt]'] = new Date(dateSelect1);
|
||||||
|
this.params['createdAt[lt]'] = dateSelect2;
|
||||||
|
|
||||||
|
|
||||||
|
this.params.page = 0;
|
||||||
|
this.getVehicles();
|
||||||
|
}
|
||||||
|
|
||||||
|
reload() {
|
||||||
|
delete this.params['createdAt[gt]'];
|
||||||
|
delete this.params['createdAt[lt]'];
|
||||||
|
delete this.params['search'];
|
||||||
|
delete this.params['fields'];
|
||||||
|
this.getVehicles();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,8 @@ import {TableModule} from "primeng/table";
|
||||||
import {ButtonModule} from "primeng/button";
|
import {ButtonModule} from "primeng/button";
|
||||||
import {InputTextModule} from "primeng/inputtext";
|
import {InputTextModule} from "primeng/inputtext";
|
||||||
import {FormsModule} from "@angular/forms";
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {PaginatorModule} from "primeng/paginator";
|
||||||
|
import {CalendarModule} from "primeng/calendar";
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
|
@ -30,14 +32,16 @@ const routes: Routes = [
|
||||||
VehicleEditComponent,
|
VehicleEditComponent,
|
||||||
VehicleViewComponent
|
VehicleViewComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
RouterModule.forChild(routes),
|
RouterModule.forChild(routes),
|
||||||
TableModule,
|
TableModule,
|
||||||
ButtonModule,
|
ButtonModule,
|
||||||
InputTextModule,
|
InputTextModule,
|
||||||
FormsModule
|
FormsModule,
|
||||||
]
|
PaginatorModule,
|
||||||
|
CalendarModule
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class VehicleModule {
|
export class VehicleModule {
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue