fix(deps): update dependencies (major and minor) to v19

src/app/app.routes.ts

@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 import { HotelDetailsComponent } from './hotel-details/hotel-details.component';
 import { HotelListComponent } from './hotel-list/hotel-list.component';
 import { TestComponent } from './test/test.component';
-import { NewHotelComponent } from './new-hotel/new-hotel.component';
 
 export const routes: Routes = [
   {
@@ -16,9 +15,5 @@ export const routes: Routes = [
   {
     path: "testing",
     component: TestComponent,
-  },
-  {
-    path: "new",
-    component: NewHotelComponent,
   }
 ];

src/app/hotel-form/hotel-form.component.html

@@ -6,7 +6,7 @@
   <label for="description">Description</label>
   <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid' id="description" formControlName="description">
   <label for="price">Price</label>
-  <input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid && hotelForm.get("price")?.touched' id="price" formControlName="price">
+  <input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
-  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
+  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Update</button>
   <a routerLink="/">Cancel</a>
 </form>

src/app/hotel-list/hotel-list.component.html

@@ -1,6 +1,5 @@
 <div class="container p-4 mx-auto max-w-4xl">
   <h1>{{'hello' | uppercase | text}}</h1>
-  <a routerLink="/new">CREATE NEW HOTEL</a>
   <app-search [(input)]="search"></app-search>
   @if (hotels[0].hotelName) {
     <div *ngFor="let hotel of hotels">

src/app/hotel-list/hotel-list.component.ts

@@ -7,7 +7,6 @@ import { Hotel } from '../HotelItem/hotel';
 import { HttpClient } from '@angular/common/http';
 import { filter, from, last, map, Observable, scan } from 'rxjs';
 import { HotelItem } from '../HotelItem/HotelItem.component';
-import { RouterLink } from '@angular/router';
 
 interface User {
   name: string;
@@ -17,7 +16,7 @@ interface User {
 @Component({
   selector: 'app-hotel-list',
   standalone: true,
-  imports: [UpperCasePipe, TextPipe, SearchComponent, HotelItem, NgFor, NgIf, RouterLink],
+  imports: [UpperCasePipe, TextPipe, SearchComponent, HotelItem, NgFor, NgIf],
   templateUrl: './hotel-list.component.html',
   styleUrl: './hotel-list.component.css'
 })

src/app/new-hotel/new-hotel.component.html

@@ -1,16 +0,0 @@
-<p>Create Hotel</p>
-
-<form [formGroup]="hotelForm">
-  <label for="name">Name</label>
-  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("name")?.invalid && hotelForm.get("name")?.touched' id="name" formControlName="name">
-  <label for="description">Description</label>
-  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid && hotelForm.get("description")?.touched' id="description" formControlName="description">
-  <label for="imageUrl">Image</label>
-  <input type="url" class="border-red-500" [class.border-8]='hotelForm.get("imageUel")?.invalid && hotelForm.get("imageUrl")?.touched' id="imageUrl" formControlName="imageUrl">
-  <label for="price">Price</label>
-  <input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
-  <label for="rating">Rating</label>
-  <input type="rating" class="border-red-500" [class.border-8]='hotelForm.get("rating")?.invalid' id="rating" formControlName="rating">
-  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
-  <a routerLink="/">Cancel</a>
-</form>

src/app/new-hotel/new-hotel.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NewHotelComponent } from './new-hotel.component';
-
-describe('NewHotelComponent', () => {
-  let component: NewHotelComponent;
-  let fixture: ComponentFixture<NewHotelComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NewHotelComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(NewHotelComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/new-hotel/new-hotel.component.ts

@@ -1,47 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
-import { Hotel } from '../HotelItem/hotel';
-import { NgFor, NgIf } from '@angular/common';
-
-@Component({
-  selector: 'app-new-hotel',
-  standalone: true,
-  imports: [ReactiveFormsModule, NgIf, NgFor, RouterLink],
-  templateUrl: './new-hotel.component.html',
-  styleUrl: './new-hotel.component.css'
-})
-export class NewHotelComponent {
-  public hotelForm!: FormGroup
-  public hotel!: Hotel
-
-  ngOnInit(): void {
-    this.hotelForm = new FormGroup({
-      name: new FormControl("", Validators.required),
-      description: new FormControl("", Validators.required),
-      price: new FormControl(0, Validators.required),
-      imageUrl: new FormControl("", Validators.required),
-      rating: new FormControl(0, Validators.required),
-    })
-  }
-
-  constructor(public http: HttpClient, public router: Router) {
-
-  }
-
-  submit(): void {
-    console.log(this.hotelForm.value);
-    const hotel: Hotel = {
-      id: 0,
-      hotelName: this.hotelForm.get("name")?.value,
-      description: this.hotelForm.get("description")?.value,
-      price: this.hotelForm.get("price")?.value,
-      imageUrl: this.hotelForm.get("imageUrl")?.value,
-      rating: this.hotelForm.get("rating")?.value,
-      tags: []
-    }
-    this.http.post("/api/hotels/", hotel).subscribe();
-    this.router.navigate(["/"]);
-  }
-}

src/index.html

@@ -8,7 +8,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="./styles.css">
 </head>
-<body class="bg-pink-600">
+<body>
   <app-root></app-root>
 </body>
 </html>