Added dtos to frontend app

Author: WISNIOM

apps/car-rental-backend/src/main.ts

@@ -8,6 +8,7 @@ async function bootstrap() {
   const config = new DocumentBuilder().setTitle('Car Rental API').build();
   const documentFactory = () => SwaggerModule.createDocument(app, config);
   const globalPrefix = 'api';
+  app.enableCors();
   app.useGlobalPipes(new ValidationPipe({ transform: true }));
   app.setGlobalPrefix(globalPrefix);
   const port = process.env.PORT || 3000;

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

@@ -3,15 +3,14 @@ <h2>Vehicle List</h2>
   <ul>
     <li *ngFor="let vehicle of vehicles">
       {{ vehicle.registrationNumber }} - {{ vehicle.brand }}
-      {{ vehicle.model }} ({{ vehicle.year }})
     </li>
   </ul>
 </div>
 <div *ngIf="vehicleBrands">
     <h2>Vehicle Brands List</h2>
     <ul>
       <li *ngFor="let brand of vehicleBrands">
-        {{ brand }}
+        {{ brand.id }} - {{ brand.name }}
       </li>
     </ul>
   </div>

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

@@ -2,6 +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';
 
 @Component({
   selector: 'app-vehicles-list',
@@ -10,20 +12,22 @@ import { VehicleBrandsService } from '../../../services/vehicle-brands.service';
   styleUrl: './vehicles-list.component.css',
 })
 export class VehiclesListComponent implements OnInit {
-  vehicles: any[] = [];
-  vehicleBrands: string[] = [];
+  vehicles: VehicleDto[] = [];
+  vehicleBrands: VehicleBrandDto[] = [];
 
   constructor(
     private readonly vehiclesService: VehiclesService,
     private readonly vehiclesBrandService: VehicleBrandsService
   ) {}
 
   ngOnInit(): void {
-    this.vehiclesService.getVehicles().subscribe((data) => {
-      this.vehicles = data;
-    });
-    this.vehiclesBrandService.getVehicleBrands().subscribe((data: string[]) => {
-      this.vehicleBrands = data;
+    this.vehiclesService.getVehicles().subscribe((response) => {
+      this.vehicles = response.data;
     });
+    this.vehiclesBrandService
+      .getVehicleBrands()
+      .subscribe((response) => {
+        this.vehicleBrands = response.data;
+      });
   }
 }

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

@@ -0,0 +1,8 @@
+export type PageMeta = {
+    readonly page: number;
+    readonly take: number;
+    readonly itemCount: number;
+    readonly pageCount: number;
+    readonly hasPreviousPage: boolean;
+    readonly hasNextPage: boolean;
+}

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

@@ -0,0 +1,6 @@
+import { PageMeta } from "./page-meta";
+
+export type Page<T> = {
+    data: T[];
+    meta: PageMeta;
+}

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

@@ -0,0 +1,9 @@
+export type VehicleBrandDto = {
+    id: number;
+    name: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+export type CreateVehicleBrandDto = Pick<VehicleBrandDto, 'name'>;
+export type UpdateVehicleBrandDto = Pick<VehicleBrandDto, 'name'>;

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

@@ -0,0 +1,14 @@
+export type VehicleDto = {
+    id: number;
+    brand: string;
+    registrationNumber: string;
+    vehicleIdentificationNumber: string;
+    clientEmail?: string;
+    clientAddress?: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+export type CreateVehicleDto = Pick<VehicleDto, 'brand' | 'registrationNumber' | 'vehicleIdentificationNumber'>;
+
+export type UpdateVehicleDto = Partial<Omit<VehicleDto, 'id' | 'createdAt' | 'updatedAt'>>;

apps/car-rental/src/services/vehicle-brands.service.ts

@@ -1,14 +1,17 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { VehicleBrandDto } from '../dto/vehicle-brand';
+import { Page } from '../dto/page';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class VehicleBrandsService {
   private apiUrl = 'http://localhost:3000/api/vehicle-brands';
-  constructor(private readonly http: HttpClient) { }
+  constructor(private readonly http: HttpClient) {}
 
-  getVehicleBrands(): any {
-    return this.http.get(this.apiUrl);
+  getVehicleBrands(): Observable<Page<VehicleBrandDto>> {
+    return this.http.get<Page<VehicleBrandDto>>(this.apiUrl);
   }
 }

apps/car-rental/src/services/vehicles.service.ts

@@ -1,15 +1,17 @@
 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';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class VehiclesService {
   private apiUrl = 'http://localhost:3000/api/vehicles';
-  constructor(private readonly http: HttpClient) { }
+  constructor(private readonly http: HttpClient) {}
 
-  getVehicles(): Observable<any> {
-    return this.http.get(this.apiUrl);
+  getVehicles(): Observable<Page<VehicleDto>> {
+    return this.http.get<Page<VehicleDto>>(this.apiUrl);
   }
 }