From 676aae14af597e8b4dbe9b97c4367eeb667d1a57 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Tue, 3 Dec 2024 08:06:56 +0100 Subject: [PATCH] ka --- src/app/app.routes.ts | 6 +-- src/app/hotel/add-tag.component.ts | 42 +++++++++++++++++++++ src/app/hotel/create-hotel.component.ts | 13 ++++--- src/app/hotel/delete-hotel.component.ts | 27 +++++++++++++ src/app/hotel/edit-hotel.component.ts | 50 +++++++++++++++++++++---- src/app/hotel/hotel.component.ts | 7 +++- src/app/hotel/hotel.ts | 1 + src/app/hotel/hotels.component.ts | 1 + src/app/hotel/tag.component.ts | 33 ++++++++++++++++ src/app/service/HotelData.service.ts | 12 ++++-- src/app/service/hotel.service.ts | 4 ++ 11 files changed, 174 insertions(+), 22 deletions(-) create mode 100644 src/app/hotel/add-tag.component.ts create mode 100644 src/app/hotel/delete-hotel.component.ts create mode 100644 src/app/hotel/tag.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 97ecdda..b212a8a 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,7 +1,7 @@ -import { Routes } from '@angular/router'; +import {Routes} from '@angular/router'; import {HotelsComponent} from "./hotel/hotels.component"; import {HotelComponent} from "./hotel/hotel.component"; -import {EditHotelComponent} from "./hotel/edit-hotel.component"; +import {CreateHotelComponent} from "./hotel/create-hotel.component"; export const routes: Routes = [ { @@ -11,7 +11,7 @@ export const routes: Routes = [ }, { path: 'hotels/new', - component: EditHotelComponent, + component: CreateHotelComponent, title: 'New Hotel' }, { diff --git a/src/app/hotel/add-tag.component.ts b/src/app/hotel/add-tag.component.ts new file mode 100644 index 0000000..56b86c2 --- /dev/null +++ b/src/app/hotel/add-tag.component.ts @@ -0,0 +1,42 @@ +import {Component, Input} from "@angular/core"; +import {NgForOf} from "@angular/common"; +import {TagComponent} from "./tag.component"; +import { + AbstractControl, + ControlContainer, + FormArray, + FormControl, + FormGroupDirective, + Validators +} from "@angular/forms"; + + +@Component({ + selector: 'app-add-tag', + standalone: true, + template: ` + `, + viewProviders: [ + { + provide: ControlContainer, + useExisting: FormGroupDirective + } + ], + imports: [ + NgForOf, + TagComponent + ] +}) +export class AddTagComponent { + + @Input() + form!: FormArray; + + addTag() { + this.form.push(new FormControl('', [Validators.required])); + } + + deleteTag(id: AbstractControl) { + this.form.removeAt(this.form.controls.indexOf(id)); + } +} diff --git a/src/app/hotel/create-hotel.component.ts b/src/app/hotel/create-hotel.component.ts index 7ef4ef0..59806fc 100644 --- a/src/app/hotel/create-hotel.component.ts +++ b/src/app/hotel/create-hotel.component.ts @@ -1,21 +1,24 @@ -import {Component} from "@angular/core"; +import {Component, inject} from "@angular/core"; import {Hotel} from "./hotel"; import {HotelService} from "../service/hotel.service"; +import {EditHotelComponent} from "./edit-hotel.component"; @Component({ selector: "app-create-hotel", standalone: true, + imports: [ + EditHotelComponent + ], template: ` - + ` }) export class CreateHotelComponent { - protected hotelService: HotelService; + hotelService: HotelService = inject(HotelService); create(hotel: Hotel) { - console.log(hotel) - this.hotelService.createHotel(hotel).subscribe(console.log) + this.hotelService.createHotel(hotel).subscribe() } } diff --git a/src/app/hotel/delete-hotel.component.ts b/src/app/hotel/delete-hotel.component.ts new file mode 100644 index 0000000..0a6d9f4 --- /dev/null +++ b/src/app/hotel/delete-hotel.component.ts @@ -0,0 +1,27 @@ +import {Component, inject, Input} from "@angular/core"; +import {HotelService} from "../service/hotel.service"; +import {Router} from "@angular/router"; + + +@Component({ + selector: 'app-delete-hotel', + standalone: true, + template: ` + + ` +}) +export class DeleteHotelComponent { + @Input() + id: number = 0; + + hotelService: HotelService = inject(HotelService); + + router: Router = inject(Router); + + delete() { + if (confirm('Are you sure?')) { + this.hotelService.deleteById(this.id).subscribe() + this.router.navigate(['/hotels']); + } + } +} diff --git a/src/app/hotel/edit-hotel.component.ts b/src/app/hotel/edit-hotel.component.ts index b9b96dc..45e5e01 100644 --- a/src/app/hotel/edit-hotel.component.ts +++ b/src/app/hotel/edit-hotel.component.ts @@ -1,24 +1,29 @@ -import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core'; +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import { AbstractControl, + FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule, - ValidationErrors, Validators + Validators } from "@angular/forms"; import {Hotel} from "./hotel"; -import {HotelService} from "../service/hotel.service"; import {RouterLink} from "@angular/router"; -import {HotelsComponent} from "./hotels.component"; +import {AddTagComponent} from "./add-tag.component"; +import {NgForOf} from "@angular/common"; +import {TagComponent} from "./tag.component"; @Component({ - selector: 'app-create-hotel', + selector: 'app-edit-hotel', standalone: true, imports: [ FormsModule, ReactiveFormsModule, - RouterLink + RouterLink, + AddTagComponent, + NgForOf, + TagComponent ], template: ` @@ -39,6 +44,16 @@ import {HotelsComponent} from "./hotels.component";

+ +
+ @for (tag of getTags().controls; track null) { +
+ + + } +
+
+
@@ -55,11 +70,18 @@ export class EditHotelComponent implements OnInit { form!: FormGroup ngOnInit(): void { + const tags = []; + + for (const tag of this.hotel?.tags ?? []) { + tags.push(new FormControl(tag, [Validators.required])); + } + this.form = new FormGroup({ name: new FormControl(this.hotel?.hotelName, [Validators.required]), description: new FormControl(this.hotel?.description, [Validators.required]), price: new FormControl(this.hotel?.price, [Validators.required]), rating: new FormControl(this.hotel?.rating, [Validators.required, Validators.min(0), Validators.max(5)]), + tags: new FormArray(tags), }) } @@ -67,7 +89,6 @@ export class EditHotelComponent implements OnInit { if (!this.form.valid) { console.error('Form invalid'); - return; } const hotel: Hotel = { @@ -77,10 +98,23 @@ export class EditHotelComponent implements OnInit { price: this.form.value.price, rating: this.form.value.rating, id: this.hotel?.id ?? 0, + tags: this.form.value.tags ?? [] }; - + console.log(hotel) this.updateHotel.emit(hotel) this.hotel = hotel; } + + getTags() { + return this.form.controls['tags'] as FormArray; + } + + addTag() { + this.getTags().push(new FormControl('', [Validators.required])); + } + + deleteTag(tagElement: AbstractControl) { + this.getTags().removeAt(this.getTags().controls.indexOf(tagElement)); + } } diff --git a/src/app/hotel/hotel.component.ts b/src/app/hotel/hotel.component.ts index 78043ef..7c584ae 100644 --- a/src/app/hotel/hotel.component.ts +++ b/src/app/hotel/hotel.component.ts @@ -7,6 +7,7 @@ import {ActivatedRoute} from "@angular/router"; import {HotelService} from "../service/hotel.service"; import {catchError, EMPTY} from "rxjs"; import {EditHotelComponent} from "./edit-hotel.component"; +import {DeleteHotelComponent} from "./delete-hotel.component"; @Component({ @@ -16,12 +17,14 @@ import {EditHotelComponent} from "./edit-hotel.component"; CurrencyPipe, StarComponent, NgOptimizedImage, - EditHotelComponent + EditHotelComponent, + DeleteHotelComponent ], template: `
@if (hotel && !alert) { - + + } @else if(alert) {

{{alert}}

} @else { diff --git a/src/app/hotel/hotel.ts b/src/app/hotel/hotel.ts index 7a741b9..dc0f387 100644 --- a/src/app/hotel/hotel.ts +++ b/src/app/hotel/hotel.ts @@ -5,4 +5,5 @@ export interface Hotel { price: number; imageUrl: string; rating: number; + tags: string[]; } diff --git a/src/app/hotel/hotels.component.ts b/src/app/hotel/hotels.component.ts index 743531d..8a58b28 100644 --- a/src/app/hotel/hotels.component.ts +++ b/src/app/hotel/hotels.component.ts @@ -17,6 +17,7 @@ import {StarComponent} from "../star/star.component";
+

Create Hotel

@for (hotel of (matchingHotels | async); track hotel.id) {
{{hotel.hotelName}}
{{hotel.hotelName}} diff --git a/src/app/hotel/tag.component.ts b/src/app/hotel/tag.component.ts new file mode 100644 index 0000000..5a0da3e --- /dev/null +++ b/src/app/hotel/tag.component.ts @@ -0,0 +1,33 @@ +import {Component, EventEmitter, Input, Output} from "@angular/core"; +import {AbstractControl, ControlContainer, FormGroupDirective, ReactiveFormsModule} from "@angular/forms"; +import {JsonPipe} from "@angular/common"; + + +@Component({ + standalone: true, + selector: 'app-tag', + imports: [ + ReactiveFormsModule, + JsonPipe + ], + viewProviders: [ + { + provide: ControlContainer, + useExisting: FormGroupDirective + } + ], + template: ` + ` +}) +export class TagComponent { + + @Input() + tagElement!: AbstractControl; + + @Output() + deleteEvent: EventEmitter = new EventEmitter(); + + delete() { + this.deleteEvent.emit(this.tagElement); + } +} diff --git a/src/app/service/HotelData.service.ts b/src/app/service/HotelData.service.ts index f6f5991..755b4c1 100644 --- a/src/app/service/HotelData.service.ts +++ b/src/app/service/HotelData.service.ts @@ -11,7 +11,8 @@ export class HotelDataService implements InMemoryDbService{ "description": "Schöne Aussicht am Meer", "price": 230.5, "imageUrl": "assets/img/heisenberg.jpg", - "rating": 3.5 + "rating": 3.5, + "tags": ["Meer", "Berge"] }, { "id": 2, @@ -19,7 +20,8 @@ export class HotelDataService implements InMemoryDbService{ "description": "Genießen Sie den Blick auf die Berge", "price": 145.5, "imageUrl": "assets/img/kjan.png", - "rating": 5 + "rating": 5, + "tags": ["Meer", "Berge"] }, { "id": 3, @@ -27,7 +29,8 @@ export class HotelDataService implements InMemoryDbService{ "description": "Kompletter Aufenthalt mit Autoservice", "price": 120.12, "imageUrl": "assets/img/huy.png", - "rating": 4 + "rating": 4, + "tags": ["Meer", "Berge"] }, { "id": 4, @@ -35,7 +38,8 @@ export class HotelDataService implements InMemoryDbService{ "description": "Wunderschönes Ambiente für Ihren Aufenthalt", "price": 135.12, "imageUrl": "assets/img/rat.png", - "rating": 2.5 + "rating": 2.5, + "tags": ["Meer", "Berge"] } ]; diff --git a/src/app/service/hotel.service.ts b/src/app/service/hotel.service.ts index 2a86f7e..1e7b933 100644 --- a/src/app/service/hotel.service.ts +++ b/src/app/service/hotel.service.ts @@ -24,4 +24,8 @@ export class HotelService { public createHotel(hotel: Hotel): Observable { return this.httpClient.post(`/api/hotels`, hotel) } + + public deleteById(id: number): Observable { + return this.httpClient.delete(`/api/hotels/${id}`); + } }