Skip to content

Commit 4c4b5ae

Browse files
WISNIOMWISNIOM
committed
Fixed paginator
1 parent 298aa53 commit 4c4b5ae

File tree

8 files changed

+269
-155
lines changed

8 files changed

+269
-155
lines changed

‎apps/car-rental-backend/src/vehicle-brands/vehicle-brands.service.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,10 @@ export class VehicleBrandsService {
4848
: 'vehicleBrand.id';
4949
queryBuilder.orderBy(vehicleBrandSortField, order).skip(skip).take(take);
5050
this.logger.log(`Finding vehicle brands with page options: ${JSON.stringify(pageOptionsDto)}`);
51+
const itemCount = await queryBuilder.getCount();
5152
const { entities } = await queryBuilder.getRawAndEntities();
5253
this.logger.log(`Found ${entities.length} vehicle brands`);
53-
const pageMetaDto = new PageMetaDto({ itemCount: entities.length, pageOptionsDto });
54+
const pageMetaDto = new PageMetaDto({ itemCount, pageOptionsDto });
5455
return new PageDto(entities, pageMetaDto);
5556
}
5657

‎apps/car-rental-backend/src/vehicles/vehicles.service.ts

+10-5
Original file line numberDiff line numberDiff line change
@@ -91,22 +91,27 @@ export class VehiclesService {
9191
const { order, take, skip, sortField } = pageOptionsDto;
9292
const queryBuilder = this.vehiclesRepository.createQueryBuilder('vehicle');
9393
queryBuilder.leftJoinAndSelect('vehicle.brand', 'brand');
94-
const vehicleSortField =
95-
sortField && sortField in VehicleDto
96-
? `vehicle.${sortField}`
97-
: 'vehicle.id';
94+
let vehicleSortField = 'vehicle.id';
95+
if (sortField) {
96+
if (sortField === 'brandName') {
97+
vehicleSortField = 'brand.name';
98+
} else if (sortField in VehicleDto) {
99+
vehicleSortField = `vehicle.${sortField}`;
100+
}
101+
}
98102
queryBuilder.orderBy(vehicleSortField, order).skip(skip).take(take);
99103
this.logger.log(
100104
`Finding vehicles with page options ${JSON.stringify(pageOptionsDto)}`
101105
);
106+
const itemCount = await queryBuilder.getCount();
102107
const { entities } = await queryBuilder.getRawAndEntities();
103108
this.logger.log(`Found ${entities.length} vehicles`);
104109
const mappedEntities: Array<VehicleDto> = entities.map((entity) => {
105110
const { brand, ...rest } = entity;
106111
return { ...rest, brand: brand.name };
107112
});
108113
const pageMetaDto = new PageMetaDto({
109-
itemCount: entities.length,
114+
itemCount,
110115
pageOptionsDto,
111116
});
112117
return new PageDto(mappedEntities, pageMetaDto);

‎apps/car-rental/src/components/vehicles/create-vehicle-form/create-vehicle-form.component.scss

-8
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,6 @@ mat-form-field {
99
width: 100%;
1010
}
1111

12-
.center {
13-
display: flex;
14-
justify-content: center;
15-
text-align: center;
16-
align-items: center;
17-
height: 100%;
18-
}
19-
2012
.error {
2113
color: red;
2214
width: 300px;

‎apps/car-rental/src/components/vehicles/vehicles-list/vehicles-list.component.html

+170-122
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,184 @@
1-
<div *ngIf="vehicles">
1+
<div id="vehicles-list">
22
<div id="vehicles-list-navbar">
33
<h2>Vehicle List</h2>
44
<button mat-icon-button (click)="openCreateVehicleFormDialog()">
55
<mat-icon>add</mat-icon>
66
</button>
77
</div>
8-
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
9-
<!-- Brand column -->
10-
<ng-container matColumnDef="brand">
11-
<th mat-header-cell *matHeaderCellDef>Marka</th>
12-
<td mat-cell *matCellDef="let element">
13-
<ng-container
14-
*ngIf="
15-
!editedVehicle || (editedVehicle && editedVehicle.id !== element.id)
16-
"
17-
>{{ element.brand }}
8+
<ng-container>
9+
<div *ngIf="isLoading" class="center">
10+
<mat-spinner></mat-spinner>
11+
</div>
12+
<ng-container *ngIf="!isLoading">
13+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
14+
<!-- Brand column -->
15+
<ng-container matColumnDef="brand">
16+
<th mat-header-cell *matHeaderCellDef>Marka</th>
17+
<td mat-cell *matCellDef="let element">
18+
<ng-container
19+
*ngIf="
20+
!editedVehicle ||
21+
(editedVehicle && editedVehicle.id !== element.id)
22+
"
23+
>{{ element.brand }}
24+
</ng-container>
25+
<ng-container
26+
*ngIf="editedVehicle && editedVehicle.id === element.id"
27+
>
28+
<mat-form-field>
29+
<mat-select [(value)]="element.brand">
30+
<mat-option
31+
*ngFor="let brand of vehicleBrands"
32+
[value]="brand"
33+
>
34+
{{ brand }}
35+
</mat-option>
36+
</mat-select>
37+
</mat-form-field>
38+
</ng-container>
39+
</td>
1840
</ng-container>
19-
<ng-container *ngIf="editedVehicle && editedVehicle.id === element.id"
20-
>
21-
<mat-form-field>
22-
<mat-select [(value)]="element.brand">
23-
<mat-option *ngFor="let brand of vehicleBrands" [value]="brand">
24-
{{ brand }}
25-
</mat-option>
26-
</mat-select>
27-
</mat-form-field>
41+
<!-- Registration number column -->
42+
<ng-container matColumnDef="vehicleIdentificationNumber">
43+
<th mat-header-cell *matHeaderCellDef>Numer VIN</th>
44+
<td mat-cell *matCellDef="let element">
45+
<ng-container
46+
*ngIf="
47+
!editedVehicle ||
48+
(editedVehicle && editedVehicle.id !== element.id)
49+
"
50+
>
51+
{{ element.vehicleIdentificationNumber }}
52+
</ng-container>
53+
<ng-container
54+
*ngIf="editedVehicle && editedVehicle.id === element.id"
55+
>
56+
<input
57+
matInput
58+
[(ngModel)]="editedVehicle.vehicleIdentificationNumber"
59+
name="vehicleIdentificationNumber"
60+
/>
61+
</ng-container>
62+
</td>
2863
</ng-container>
29-
</td>
30-
</ng-container>
31-
<!-- Registration number column -->
32-
<ng-container matColumnDef="registrationNumber">
33-
<th mat-header-cell *matHeaderCellDef>Numer VIN</th>
34-
<td mat-cell *matCellDef="let element">
35-
<ng-container
36-
*ngIf="
37-
!editedVehicle || (editedVehicle && editedVehicle.id !== element.id)
38-
"
39-
>
40-
{{ element.vehicleIdentificationNumber }}
41-
</ng-container>
42-
<ng-container *ngIf="editedVehicle && editedVehicle.id === element.id">
43-
<input matInput [(ngModel)]="editedVehicle.vehicleIdentificationNumber" name="vehicleIdentificationNumber" />
64+
<!-- VIN column -->
65+
<ng-container matColumnDef="registrationNumber">
66+
<th mat-header-cell *matHeaderCellDef>Numer Rejestracyjny</th>
67+
<td mat-cell *matCellDef="let element">
68+
<ng-container
69+
*ngIf="
70+
!editedVehicle ||
71+
(editedVehicle && editedVehicle.id !== element.id)
72+
"
73+
>
74+
{{ element.registrationNumber }}
75+
</ng-container>
76+
<ng-container
77+
*ngIf="editedVehicle && editedVehicle.id === element.id"
78+
>
79+
<input
80+
matInput
81+
[(ngModel)]="editedVehicle.registrationNumber"
82+
name="registrationNumber"
83+
/>
84+
</ng-container>
85+
</td>
4486
</ng-container>
45-
</td>
46-
</ng-container>
47-
<!-- VIN column -->
48-
<ng-container matColumnDef="vehicleIdentificationNumber">
49-
<th mat-header-cell *matHeaderCellDef>Numer Rejestracyjny</th>
50-
<td mat-cell *matCellDef="let element">
51-
<ng-container
52-
*ngIf="
53-
!editedVehicle || (editedVehicle && editedVehicle.id !== element.id)
54-
"
55-
>
56-
{{ element.registrationNumber }}
87+
<!-- Client email column -->
88+
<ng-container matColumnDef="clientEmail">
89+
<th mat-header-cell *matHeaderCellDef>Email Klienta</th>
90+
<td mat-cell *matCellDef="let element">
91+
<ng-container
92+
*ngIf="
93+
!editedVehicle ||
94+
(editedVehicle && editedVehicle.id !== element.id)
95+
"
96+
>
97+
{{ element.clientEmail }}
98+
</ng-container>
99+
<ng-container
100+
*ngIf="editedVehicle && editedVehicle.id === element.id"
101+
>
102+
<input
103+
matInput
104+
[(ngModel)]="editedVehicle.clientEmail"
105+
name="clientEmail"
106+
/>
107+
</ng-container>
108+
</td>
57109
</ng-container>
58-
<ng-container *ngIf="editedVehicle && editedVehicle.id === element.id">
59-
<input matInput [(ngModel)]="editedVehicle.registrationNumber" name="registrationNumber" />
110+
<!-- Client address column -->
111+
<ng-container matColumnDef="clientAddress">
112+
<th mat-header-cell *matHeaderCellDef>Adres Klienta</th>
113+
<td mat-cell *matCellDef="let element">
114+
<ng-container
115+
*ngIf="
116+
!editedVehicle ||
117+
(editedVehicle && editedVehicle.id !== element.id)
118+
"
119+
>
120+
{{ element.clientAddress }}
121+
</ng-container>
122+
<ng-container
123+
*ngIf="editedVehicle && editedVehicle.id === element.id"
124+
>
125+
<input
126+
matInput
127+
[(ngModel)]="editedVehicle.clientAddress"
128+
name="clientAddress"
129+
/>
130+
</ng-container>
131+
</td>
60132
</ng-container>
61-
</td>
62-
</ng-container>
63-
<!-- Client email column -->
64-
<ng-container matColumnDef="clientEmail">
65-
<th mat-header-cell *matHeaderCellDef>Email Klienta</th>
66-
<td mat-cell *matCellDef="let element">
67-
<ng-container
68-
*ngIf="
69-
!editedVehicle || (editedVehicle && editedVehicle.id !== element.id)
70-
"
71-
>
72-
{{ element.clientEmail }}
73-
</ng-container>
74-
<ng-container *ngIf="editedVehicle && editedVehicle.id === element.id">
75-
<input matInput [(ngModel)]="editedVehicle.clientEmail" name="clientEmail" />
76-
</ng-container>
77-
</td>
78-
</ng-container>
79-
<!-- Client address column -->
80-
<ng-container matColumnDef="clientAddress">
81-
<th mat-header-cell *matHeaderCellDef>Adres Klienta</th>
82-
<td mat-cell *matCellDef="let element">
83-
<ng-container
84-
*ngIf="
85-
!editedVehicle || (editedVehicle && editedVehicle.id !== element.id)
86-
"
87-
>
88-
{{ element.clientAddress }}
133+
<!-- Actions column -->
134+
<ng-container matColumnDef="actions">
135+
<th mat-header-cell *matHeaderCellDef>Akcje</th>
136+
<td mat-cell *matCellDef="let element">
137+
<ng-container
138+
*ngIf="
139+
!editedVehicle ||
140+
(editedVehicle && editedVehicle.id !== element.id)
141+
"
142+
>
143+
<button mat-icon-button [matMenuTriggerFor]="menu">
144+
<mat-icon>more_vert</mat-icon>
145+
</button>
146+
<mat-menu #menu="matMenu">
147+
<button mat-menu-item (click)="editVehicle(element)">
148+
<mat-icon class="edit-icon">edit</mat-icon>
149+
<span>Edytuj</span>
150+
</button>
151+
<button mat-menu-item (click)="removeVehicle(element)">
152+
<mat-icon>delete</mat-icon>
153+
<span>Usuń</span>
154+
</button>
155+
</mat-menu>
156+
</ng-container>
157+
<ng-container
158+
*ngIf="editedVehicle && editedVehicle.id === element.id"
159+
>
160+
<button mat-icon-button>
161+
<mat-icon>check</mat-icon>
162+
</button>
163+
<button mat-icon-button (click)="cancelEditing()">
164+
<mat-icon>close</mat-icon>
165+
</button>
166+
</ng-container>
167+
</td>
89168
</ng-container>
90-
<ng-container *ngIf="editedVehicle && editedVehicle.id === element.id">
91-
<input matInput [(ngModel)]="editedVehicle.clientAddress" name="clientAddress" />
92-
</ng-container>
93-
</td>
94-
</ng-container>
95-
<!-- Actions column -->
96-
<ng-container matColumnDef="actions">
97-
<th mat-header-cell *matHeaderCellDef>Akcje</th>
98-
<td mat-cell *matCellDef="let element">
99-
<ng-container
100-
*ngIf="
101-
!editedVehicle || (editedVehicle && editedVehicle.id !== element.id)
102-
"
103-
>
104-
<button mat-icon-button [matMenuTriggerFor]="menu">
105-
<mat-icon>more_vert</mat-icon>
106-
</button>
107-
<mat-menu #menu="matMenu">
108-
<button mat-menu-item (click)="editVehicle(element)">
109-
<mat-icon class="edit-icon">edit</mat-icon>
110-
<span>Edytuj</span>
111-
</button>
112-
<button mat-menu-item (click)="removeVehicle(element)">
113-
<mat-icon>delete</mat-icon>
114-
<span>Usuń</span>
115-
</button>
116-
</mat-menu>
117-
</ng-container>
118-
<ng-container *ngIf="editedVehicle && editedVehicle.id === element.id">
119-
<button mat-icon-button>
120-
<mat-icon>check</mat-icon>
121-
</button>
122-
<button mat-icon-button (click)="cancelEditing()">
123-
<mat-icon>close</mat-icon>
124-
</button>
125-
</ng-container>
126-
</td>
127-
</ng-container>
128169

129-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
130-
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
131-
</table>
132-
<mat-paginator
133-
[pageSizeOptions]="[5, 10, 25, 50, 100]"
134-
showFirstLastButtons
135-
></mat-paginator>
170+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
171+
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
172+
</table>
173+
<mat-paginator
174+
#paginator
175+
(page)="pageChangeEvent($event)"
176+
[pageSizeOptions]="[5, 10, 25, 50, 100]"
177+
[length]="totalRecords"
178+
[pageSize]="pageSize"
179+
[pageIndex]="pageIndex"
180+
showFirstLastButtons
181+
></mat-paginator>
182+
</ng-container>
183+
</ng-container>
136184
</div>

‎apps/car-rental/src/components/vehicles/vehicles-list/vehicles-list.component.scss

+5
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,9 @@
33
justify-content: space-between;
44
align-items: center;
55
padding: 1rem;
6+
}
7+
8+
#vehicles-list {
9+
width: 100%;
10+
height: 80vh;
611
}

0 commit comments

Comments
 (0)