Added actions for elements

Author: WISNIOM

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

@@ -28,6 +28,37 @@ <h2>Vehicle List</h2>
         {{ element.registrationNumber }}
       </td>
     </ng-container>
+    <ng-container matColumnDef="customerEmail">
+      <th mat-header-cell *matHeaderCellDef>Email Klienta</th>
+      <td mat-cell *matCellDef="let element">
+        {{ element.clientEmail }}
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="customerAddress">
+      <th mat-header-cell *matHeaderCellDef>Adres Klienta</th>
+      <td mat-cell *matCellDef="let element">
+        {{ element.clientAddress }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Actions</th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="editVehicle(element)">
+            <mat-icon>edit</mat-icon>
+            <span>Edit</span>
+          </button>
+          <button mat-menu-item (click)="removeVehicle(element)">
+            <mat-icon>delete</mat-icon>
+            <span>Remove</span>
+          </button>
+        </mat-menu>
+      </td>
+    </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

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

@@ -1,40 +1,65 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { VehiclesService } from '../../../services/vehicles.service';
 import { VehicleDto } from '../../../dtos/vehicle';
 import { VehicleBrandDto } from '../../../dtos/vehicle-brand';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatTableModule } from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { CreateVehicleFormComponent } from '../create-vehicle-form/create-vehicle-form.component';
-import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconButton } from '@angular/material/button';
 
 @Component({
   selector: 'app-vehicles-list',
   imports: [
     CommonModule,
     MatTableModule,
+    MatMenuModule,
+    MatIconButton,
+    MatIconModule,
     MatPaginatorModule,
     MatDividerModule,
     CreateVehicleFormComponent,
   ],
   templateUrl: './vehicles-list.component.html',
   styleUrl: './vehicles-list.component.css',
 })
-export class VehiclesListComponent implements OnInit {
+export class VehiclesListComponent implements OnInit, AfterViewInit {
   vehicles: VehicleDto[] = [];
   vehicleBrands: VehicleBrandDto[] = [];
   displayedColumns: string[] = [
     'brand',
     'registrationNumber',
     'vehicleIdentificationNumber',
+    'customerEmail',
+    'customerAddress',
+    'actions',
   ];
+  dataSource = new MatTableDataSource<VehicleDto>(this.vehicles);
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
 
   constructor(private readonly vehiclesService: VehiclesService) {}
 
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+  }
+
   ngOnInit(): void {
     this.loadVehicles();
   }
 
+  editVehicle(vehicle: any): void {
+    // Implement edit vehicle logic here
+    console.log('Edit vehicle:', vehicle);
+  }
+
+  removeVehicle(vehicle: any): void {
+    // Implement remove vehicle logic here
+    console.log('Delete vehicle:', vehicle);
+  }
+
   loadVehicles(): void {
     this.vehiclesService.getVehicles().subscribe((response) => {
       this.vehicles = [...response.data];