commit
parent
72b5e725bd
commit
9317e64eca
|
@ -5,6 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
|
|||
import { AppComponent } from './app.component';
|
||||
import {LayoutModule} from "./layout/layout.module";
|
||||
import {HttpClientModule} from "@angular/common/http";
|
||||
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -12,6 +13,7 @@ import {HttpClientModule} from "@angular/common/http";
|
|||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
AppRoutingModule,
|
||||
LayoutModule,
|
||||
HttpClientModule
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
|
||||
|
||||
<div>
|
||||
<div style="display: inline-flex">
|
||||
<div style="">
|
||||
|
@ -7,17 +8,30 @@
|
|||
<input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 10px">Filtre par date</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 style="text-align: right; margin-bottom :10px">
|
||||
<button (click)="edit('0')" pButton type="button" label="Ajouter un véhicule"></button>
|
||||
<button (click)="reload()" pButton type="button" label="Recharger"></button>
|
||||
</div>
|
||||
|
||||
<p-table [value]="vehicles" [tableStyle]="{'min-width': '50rem'}">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Crée le</th>
|
||||
<th>Marque</th>
|
||||
<th>Modèle</th>
|
||||
<th>Matricule</th>
|
||||
|
@ -26,6 +40,7 @@
|
|||
</ng-template>
|
||||
<ng-template pTemplate="body" let-vehicle>
|
||||
<tr>
|
||||
<td>{{vehicle.createdAt | date:'dd-MM-yyyy à hh:mm'}}</td>
|
||||
<td>{{vehicle.mark}}</td>
|
||||
<td>{{vehicle.model}}</td>
|
||||
<td>{{vehicle.matricule}}</td>
|
||||
|
@ -37,3 +52,10 @@
|
|||
</tr>
|
||||
</ng-template>
|
||||
</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 {Router} from "@angular/router";
|
||||
import {VehicleService} from "../../service/vehicle.service";
|
||||
import {PaginatorState} from "primeng/paginator";
|
||||
|
||||
@Component({
|
||||
selector: 'app-vehicle-list',
|
||||
|
@ -16,7 +17,12 @@ export class VehicleListComponent implements OnInit {
|
|||
//2. table
|
||||
|
||||
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,
|
||||
private vehicleService: VehicleService) {
|
||||
}
|
||||
|
@ -24,17 +30,36 @@ export class VehicleListComponent implements OnInit {
|
|||
ngOnInit(): void {
|
||||
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.params.page = 0; //Propriété page de l'objet params : permet de stocker la page de début
|
||||
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();
|
||||
}
|
||||
|
||||
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({
|
||||
next: (res) => {
|
||||
if (res.success) {
|
||||
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.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 {InputTextModule} from "primeng/inputtext";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {PaginatorModule} from "primeng/paginator";
|
||||
import {CalendarModule} from "primeng/calendar";
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
@ -30,14 +32,16 @@ const routes: Routes = [
|
|||
VehicleEditComponent,
|
||||
VehicleViewComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(routes),
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
InputTextModule,
|
||||
FormsModule
|
||||
]
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(routes),
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
InputTextModule,
|
||||
FormsModule,
|
||||
PaginatorModule,
|
||||
CalendarModule
|
||||
]
|
||||
})
|
||||
export class VehicleModule {
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue