diff --git a/frontend/src/app/pages/event-root/create-event/create-event.component.html b/frontend/src/app/pages/event-root/create-event/create-event.component.html index a8f3fc3..526014c 100644 --- a/frontend/src/app/pages/event-root/create-event/create-event.component.html +++ b/frontend/src/app/pages/event-root/create-event/create-event.component.html @@ -20,11 +20,12 @@
-
- @if (currentStep() === 0) { - - } -
+ @if (currentStep() === 0) { + + } + @if (currentStep() === 1) { + + }
diff --git a/frontend/src/app/pages/event-root/create-event/create-event.component.ts b/frontend/src/app/pages/event-root/create-event/create-event.component.ts index 11d69d5..af279e2 100644 --- a/frontend/src/app/pages/event-root/create-event/create-event.component.ts +++ b/frontend/src/app/pages/event-root/create-event/create-event.component.ts @@ -8,12 +8,13 @@ import { } from '@angular/core'; import { BasicStepComponent } from './steps/basic-step.component'; +import { TicketsStepComponent } from './steps/tickets-step.component'; @Component({ selector: 'app-create-event', standalone: true, providers: [], - imports: [BasicStepComponent, CommonModule], + imports: [CommonModule, BasicStepComponent, TicketsStepComponent], templateUrl: './create-event.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html new file mode 100644 index 0000000..a7a9b34 --- /dev/null +++ b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html @@ -0,0 +1,107 @@ + + + diff --git a/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts new file mode 100644 index 0000000..3e2dbf7 --- /dev/null +++ b/frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts @@ -0,0 +1,60 @@ +import { CommonModule } from '@angular/common'; +import { Component, output, OutputEmitterRef } from '@angular/core'; +import { + FormBuilder, + FormGroup, + ReactiveFormsModule, + Validators, +} from '@angular/forms'; + +export interface EventLocation { + plz: string; + stadt: string; + strasse: string; + name: string; +} + +@Component({ + selector: 'app-location-dialog', + templateUrl: './create-location.dialog.component.html', + standalone: true, + imports: [CommonModule, ReactiveFormsModule], +}) +export class LocationDialogComponent { + public locationCreated: OutputEmitterRef = + output(); + public locationForm: FormGroup = new FormGroup({}); + + public constructor(private readonly formBuilder: FormBuilder) { + this.locationForm = this.formBuilder.group({ + postalCode: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]], + city: ['', Validators.required], + street: ['', Validators.required], + houseNumber: ['', Validators.required], + name: ['', Validators.required], + }); + } + + public createLocation(): void { + if (this.locationForm.valid) { + this.locationCreated.emit(this.locationForm.value); + this.closeModal(); + } + } + + public openModal(): void { + const modal = document.getElementById( + 'location_modal' + ) as HTMLDialogElement; + + modal.showModal(); + } + + public closeModal(): void { + const modal = document.getElementById( + 'location_modal' + ) as HTMLDialogElement; + + modal.close(); + } +} diff --git a/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.html b/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.html index 6e0dc06..4520f5b 100644 --- a/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.html +++ b/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.html @@ -24,7 +24,8 @@ dividerText="Or add a new Location" newItemText="Create new Location" emptyStateText="No matching Locations found" - [items]="items"> + [items]="items" + (submitNewItems)="onDropdownSubmit()">
@@ -53,3 +54,6 @@
+ + diff --git a/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.ts b/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.ts index d0112ad..a0e85d8 100644 --- a/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.ts +++ b/frontend/src/app/pages/event-root/create-event/steps/basic-step.component.ts @@ -1,19 +1,42 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DropdownComponent } from '../../../../shared/components/dropdown/dropdown.component'; +import { + EventLocation, + LocationDialogComponent, +} from '../dialog/create-location.dialog.component'; @Component({ selector: 'app-basic-step', standalone: true, templateUrl: './basic-step.component.html', providers: [], - imports: [CommonModule, FormsModule, DropdownComponent], + imports: [ + CommonModule, + FormsModule, + DropdownComponent, + LocationDialogComponent, + ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class BasicStepComponent { - public items: string[] = ['Option 1', 'Option 2', 'Option 3']; + @ViewChild(LocationDialogComponent) + public locationModal!: LocationDialogComponent; + public items: string[] = ['Nachtigal Köln']; public constructor() {} + + public onDropdownSubmit(): void { + this.openLocationModal(); + } + + public onLocationSubmit(location: EventLocation): void { + console.log(location); + } + + private openLocationModal(): void { + this.locationModal.openModal(); + } } diff --git a/frontend/src/app/pages/event-root/create-event/steps/tickets-step.component.html b/frontend/src/app/pages/event-root/create-event/steps/tickets-step.component.html new file mode 100644 index 0000000..f3e333e --- /dev/null +++ b/frontend/src/app/pages/event-root/create-event/steps/tickets-step.component.html @@ -0,0 +1 @@ +

Hello World

diff --git a/frontend/src/app/pages/event-root/create-event/steps/tickets-step.component.ts b/frontend/src/app/pages/event-root/create-event/steps/tickets-step.component.ts new file mode 100644 index 0000000..ad1b58f --- /dev/null +++ b/frontend/src/app/pages/event-root/create-event/steps/tickets-step.component.ts @@ -0,0 +1,13 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'app-tickets-step', + templateUrl: './tickets-step.component.html', + standalone: true, + providers: [], + imports: [], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TicketsStepComponent { + public constructor() {} +} diff --git a/frontend/src/app/shared/components/dropdown/dropdown.component.ts b/frontend/src/app/shared/components/dropdown/dropdown.component.ts index 3414009..3de8066 100644 --- a/frontend/src/app/shared/components/dropdown/dropdown.component.ts +++ b/frontend/src/app/shared/components/dropdown/dropdown.component.ts @@ -27,23 +27,38 @@ export class DropdownComponent { public hintTopRight: InputSignal = input(''); public hintBottomLeft: InputSignal = input(''); public hintBottomRight: InputSignal = input(''); - public itemSelected: OutputEmitterRef = output(); public searchTerm: WritableSignal = signal(''); public showDropdown: WritableSignal = signal(false); public filteredItems: WritableSignal = signal([]); public selectedItem: WritableSignal = signal( null ); + public itemSelected: OutputEmitterRef = output(); + public submitNewItems: OutputEmitterRef = output(); public onInput(event: Event): void { const value = (event.target as HTMLInputElement).value; this.searchTerm.set(value); - this.filteredItems.set( - this.items().filter((item) => - item.toLowerCase().includes(value.toLowerCase()) - ) + + const matchingItems = this.items().filter((item) => + item.toLowerCase().includes(value.toLowerCase()) ); + + this.filteredItems.set(matchingItems); + + const exactMatch = this.items().find( + (item) => item.toLowerCase() === value.toLowerCase() + ); + + if (exactMatch) { + this.selectedItem.set(exactMatch); + this.itemSelected.emit(exactMatch); + } else { + this.selectedItem.set(null); + this.itemSelected.emit(''); + } + this.showDropdown.set(true); } @@ -54,7 +69,9 @@ export class DropdownComponent { this.itemSelected.emit(item); } - public submitNewItem(): void {} + public submitNewItem(): void { + this.submitNewItems.emit(true); + } public onFocus(): void { this.showDropdown.set(true); @@ -64,6 +81,6 @@ export class DropdownComponent { public onBlur(): void { setTimeout(() => { this.showDropdown.set(false); - }, 200); + }, 100); } }