From a069e2f630ae540a5d2b9b442e6c14d29790b991 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 26 Nov 2024 08:48:07 +0100
Subject: [PATCH] feat(new-hotel): add new hotel creation functionality

---
 src/app/app.routes.ts                         |  5 ++
 src/app/hotel-form/hotel-form.component.html  |  4 +-
 src/app/hotel-list/hotel-list.component.html  |  1 +
 src/app/hotel-list/hotel-list.component.ts    |  3 +-
 src/app/new-hotel/new-hotel.component.css     |  0
 src/app/new-hotel/new-hotel.component.html    | 16 +++++++
 src/app/new-hotel/new-hotel.component.spec.ts | 23 +++++++++
 src/app/new-hotel/new-hotel.component.ts      | 47 +++++++++++++++++++
 src/index.html                                |  2 +-
 9 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 src/app/new-hotel/new-hotel.component.css
 create mode 100644 src/app/new-hotel/new-hotel.component.html
 create mode 100644 src/app/new-hotel/new-hotel.component.spec.ts
 create mode 100644 src/app/new-hotel/new-hotel.component.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index f9ab109..b316c2f 100644
--- a/src/app/app.routes.ts
+++ b/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,
   }
 ];
diff --git a/src/app/hotel-form/hotel-form.component.html b/src/app/hotel-form/hotel-form.component.html
index 8b92ece..8454737 100644
--- a/src/app/hotel-form/hotel-form.component.html
+++ b/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">
-  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Update</button>
+  <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">Submit</button>
   <a routerLink="/">Cancel</a>
 </form>
diff --git a/src/app/hotel-list/hotel-list.component.html b/src/app/hotel-list/hotel-list.component.html
index b4dd192..d1d3a7f 100644
--- a/src/app/hotel-list/hotel-list.component.html
+++ b/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">
diff --git a/src/app/hotel-list/hotel-list.component.ts b/src/app/hotel-list/hotel-list.component.ts
index 528c8ce..6da0006 100644
--- a/src/app/hotel-list/hotel-list.component.ts
+++ b/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'
 })
diff --git a/src/app/new-hotel/new-hotel.component.css b/src/app/new-hotel/new-hotel.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/new-hotel/new-hotel.component.html b/src/app/new-hotel/new-hotel.component.html
new file mode 100644
index 0000000..b3a3ac1
--- /dev/null
+++ b/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>
diff --git a/src/app/new-hotel/new-hotel.component.spec.ts b/src/app/new-hotel/new-hotel.component.spec.ts
new file mode 100644
index 0000000..33b658c
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/new-hotel/new-hotel.component.ts b/src/app/new-hotel/new-hotel.component.ts
new file mode 100644
index 0000000..d5bfd19
--- /dev/null
+++ b/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(["/"]);
+  }
+}
diff --git a/src/index.html b/src/index.html
index f3614f8..3d91cf2 100644
--- a/src/index.html
+++ b/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>