Added scss

Author: WISNIOM

apps/car-rental-backend/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { VehicleBrand } from '../vehicle-brands/entities/vehicle-brand.entity';
   imports: [
     TypeOrmModule.forRoot({
       type: 'mysql',
-      host: 'db',
+      host: 'localhost',
       port: 3306,
       username: 'root',
       password: 'root',

apps/car-rental/project.json

@@ -27,7 +27,7 @@
         ],
         "styles": [
           "@angular/material/prebuilt-themes/azure-blue.css",
-          "apps/car-rental/src/styles.css"
+          "apps/car-rental/src/styles.scss"
         ],
         "scripts": []
       },

apps/car-rental/src/app/app.component.css apps/car-rental/src/app/app.component.scss

@@ -6,7 +6,7 @@ import { VehiclesListComponent } from "../components/vehicles/vehicles-list/vehi
   imports: [RouterModule, VehiclesListComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'car-rental';

apps/car-rental/src/app/app.component.ts

@@ -34,7 +34,7 @@ import { MatButtonModule } from '@angular/material/button';
     ReactiveFormsModule,
   ],
   templateUrl: './create-vehicle-form.component.html',
-  styleUrl: './create-vehicle-form.component.css',
+  styleUrl: './create-vehicle-form.component.scss',
 })
 export class CreateVehicleFormComponent implements OnInit, OnDestroy {
   @ViewChild('brandDropdown') brandDropdown!: MatSelect;

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

@@ -2,7 +2,12 @@
   (vehicleCreated)="onVehicleCreated()"
 ></app-create-vehicle-form>
 <div *ngIf="vehicles">
-  <h2>Vehicle List</h2>
+  <div>
+    <h2>Vehicle List</h2>
+    <button mat-icon-button>
+      <mat-icon>add</mat-icon>
+    </button>
+  </div>
   <table mat-table [dataSource]="vehicles" class="mat-elevation-z8">
     <!--- Note that these columns can be defined in any order.
               The actual rendered columns are set as a property on the row definition" -->
@@ -44,19 +49,33 @@ <h2>Vehicle List</h2>
     <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>Edytuj</span>
+        <div
+          *ngIf="
+            !editedVehicle || (editedVehicle && editedVehicle.id !== element.id)
+          "
+        >
+          <button mat-icon-button [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
           </button>
-          <button mat-menu-item (click)="removeVehicle(element)">
-            <mat-icon>delete</mat-icon>
-            <span>Usuń</span>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="editVehicle(element)">
+              <mat-icon class="edit-icon">edit</mat-icon>
+              <span>Edytuj</span>
+            </button>
+            <button mat-menu-item (click)="removeVehicle(element)">
+              <mat-icon>delete</mat-icon>
+              <span>Usuń</span>
+            </button>
+          </mat-menu>
+        </div>
+        <div *ngIf="editedVehicle && editedVehicle.id === element.id">
+          <button mat-icon-button>
+            <mat-icon>check</mat-icon>
           </button>
-        </mat-menu>
+          <button mat-icon-button (click)="cancelEditing()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
       </td>
     </ng-container>
 

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

@@ -24,7 +24,7 @@ import { MatIconButton } from '@angular/material/button';
     CreateVehicleFormComponent,
   ],
   templateUrl: './vehicles-list.component.html',
-  styleUrl: './vehicles-list.component.css',
+  styleUrl: './vehicles-list.component.scss',
 })
 export class VehiclesListComponent implements OnInit, AfterViewInit {
   vehicles: VehicleDto[] = [];
@@ -37,6 +37,7 @@ export class VehiclesListComponent implements OnInit, AfterViewInit {
     'customerAddress',
     'actions',
   ];
+  editedVehicle: VehicleDto | null = null;
   dataSource = new MatTableDataSource<VehicleDto>(this.vehicles);
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
@@ -50,16 +51,21 @@ export class VehiclesListComponent implements OnInit, AfterViewInit {
     this.loadVehicles();
   }
 
-  editVehicle(vehicle: any): void {
+  editVehicle(vehicle: VehicleDto): void {
     // Implement edit vehicle logic here
     console.log('Edit vehicle:', vehicle);
+    this.editedVehicle = vehicle;
   }
 
   removeVehicle(vehicle: any): void {
     // Implement remove vehicle logic here
     console.log('Delete vehicle:', vehicle);
   }
 
+  cancelEditing(): void {
+    this.editedVehicle = null;
+  }
+
   loadVehicles(): void {
     this.vehiclesService.getVehicles().subscribe((response) => {
       this.vehicles = [...response.data];

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

@@ -16,7 +16,6 @@ export class VehiclesService {
   }
 
   createVehicle(vehicle: CreateVehicleDto): Observable<VehicleDto> {
-    console.log(vehicle);
     return this.http.post<VehicleDto>(this.apiUrl, vehicle);
   }
 }

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

@@ -0,0 +1,19 @@
+@use '@angular/material' as mat;
+
+html {
+  color-scheme: light dark;
+  @include mat.theme((
+    color: mat.$violet-palette,
+    typography: Roboto,
+    density: 0
+  ));
+}
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}

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

@@ -83,11 +83,12 @@
     "jest-preset-angular": "~14.4.0",
     "nx": "20.3.0",
     "prettier": "^2.6.2",
+    "sass": "^1.83.0",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
     "tslib": "^2.3.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.13.0",
     "webpack-cli": "^5.1.4"
   }
-}
+}