Added pageoptions

Author: WISNIOM

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

@@ -5,7 +5,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { VehicleBrandsService } from '../../../../src/services/vehicle-brands.service';
-import { VehicleBrandDto } from '../../../../src/dto/vehicle-brand';
+import { VehicleBrandDto } from '../../../dtos/vehicle-brand';
 
 @Component({
   selector: 'app-create-vehicle-form',
@@ -34,9 +34,11 @@ export class CreateVehicleFormComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.vehiclesBrandService.getVehicleBrands().subscribe((response) => {
-      this.vehicleBrands = response.data;
-    });
+    this.vehiclesBrandService
+      .getVehicleBrands({ sortField: 'name', take: 5 })
+      .subscribe((response) => {
+        this.vehicleBrands = response.data;
+      });
   }
 
   onSubmit(): void {

apps/car-rental/src/components/vehicles/vehicles-list/vehicles-list.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { VehiclesService } from '../../../services/vehicles.service';
 import { VehicleBrandsService } from '../../../services/vehicle-brands.service';
-import { VehicleDto } from '../../../../src/dto/vehicle';
-import { VehicleBrandDto } from '../../../../src/dto/vehicle-brand';
+import { VehicleDto } from '../../../dtos/vehicle';
+import { VehicleBrandDto } from '../../../dtos/vehicle-brand';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatTableModule } from '@angular/material/table';
 import { MatButtonModule } from '@angular/material/button';

apps/car-rental/src/dto/page-meta.ts apps/car-rental/src/dtos/page-meta.ts

@@ -0,0 +1,8 @@
+import { Order } from "../enums/order";
+
+export type PageOptions = {
+    readonly sortField?: string;
+    readonly order?: Order;
+    readonly page?: number;
+    readonly take?: number;
+}

apps/car-rental/src/dtos/page-options.ts

@@ -0,0 +1,4 @@
+export enum Order {
+    ASC = 'ASC',
+    DESC = 'DESC',
+}

apps/car-rental/src/dto/page.ts apps/car-rental/src/dtos/page.ts

@@ -1,8 +1,9 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { VehicleBrandDto } from '../dto/vehicle-brand';
-import { Page } from '../dto/page';
+import { VehicleBrandDto } from '../dtos/vehicle-brand';
+import { Page } from '../dtos/page';
+import { PageOptions } from '../dtos/page-options';
 
 @Injectable({
   providedIn: 'root',
@@ -11,7 +12,20 @@ export class VehicleBrandsService {
   private apiUrl = 'http://localhost:3000/api/vehicle-brands';
   constructor(private readonly http: HttpClient) {}
 
-  getVehicleBrands(): Observable<Page<VehicleBrandDto>> {
-    return this.http.get<Page<VehicleBrandDto>>(this.apiUrl);
+  getVehicleBrands(opts: PageOptions = {}): Observable<Page<VehicleBrandDto>> {
+    let params = new HttpParams();
+    if (opts.sortField) {
+      params = params.set('sortField', opts.sortField);
+    }
+    if (opts.order) {
+      params = params.set('order', opts.order);
+    }
+    if (opts.page) {
+      params = params.set('page', opts.page.toString());
+    }
+    if (opts.take) {
+      params = params.set('take', opts.take.toString());
+    }
+    return this.http.get<Page<VehicleBrandDto>>(this.apiUrl, { params });
   }
 }

apps/car-rental/src/dto/vehicle-brand.ts apps/car-rental/src/dtos/vehicle-brand.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { VehicleDto } from '../dto/vehicle';
-import { Page } from '../dto/page';
+import { VehicleDto } from '../dtos/vehicle';
+import { Page } from '../dtos/page';
 
 @Injectable({
   providedIn: 'root',