feat(new-hotel): add new hotel creation functionality

src/app/app.routes.ts

@@ -2,6 +2,7 @@ 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 = [
   {
@@ -15,5 +16,9 @@ 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' id="price" formControlName="price">
+  <input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid && hotelForm.get("price")?.touched' id="price" formControlName="price">
-  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Update</button>
+  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
   <a routerLink="/">Cancel</a>
 </form>

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

@@ -1,5 +1,6 @@
 <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,6 +7,7 @@ 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;
@@ -16,7 +17,7 @@ interface User {
 @Component({
   selector: 'app-hotel-list',
   standalone: true,
-  imports: [UpperCasePipe, TextPipe, SearchComponent, HotelItem, NgFor, NgIf],
+  imports: [UpperCasePipe, TextPipe, SearchComponent, HotelItem, NgFor, NgIf, RouterLink],
   templateUrl: './hotel-list.component.html',
   styleUrl: './hotel-list.component.css'
 })

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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,47 @@
+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>
+<body class="bg-pink-600">
   <app-root></app-root>
 </body>
 </html>