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);
}
}