Feature: Create Event - First Step Frontend #17
|
@ -25,7 +25,7 @@
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
class="size-6 cursor-pointer"
|
class="size-6 cursor-pointer"
|
||||||
(click)="toggleDropdown()"
|
(click)="toggleDropdown($event)"
|
||||||
[class.rotate-180]="showDropdown()">
|
[class.rotate-180]="showDropdown()">
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
|
|
|
@ -119,20 +119,27 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
|
||||||
this.isMouseInDropdown.set(false);
|
this.isMouseInDropdown.set(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleDropdown(): void {
|
public toggleDropdown(event: MouseEvent): void {
|
||||||
this.showDropdown.set(!this.showDropdown());
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
const newDropdownState = !this.showDropdown();
|
||||||
|
|
||||||
|
this.showDropdown.set(newDropdownState);
|
||||||
|
|
||||||
|
if (newDropdownState) {
|
||||||
|
// Wenn das Dropdown geöffnet wird, aktualisieren wir die filteredItems
|
||||||
|
this.updateFilteredItems();
|
||||||
|
} else {
|
||||||
|
// Wenn wir das Dropdown schließen, verhindern wir, dass das Eingabefeld den Fokus erhält
|
||||||
|
(event.target as HTMLElement).blur();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public onInput(event: Event): void {
|
public onInput(event: Event): void {
|
||||||
const value = (event.target as HTMLInputElement).value;
|
const value = (event.target as HTMLInputElement).value;
|
||||||
|
|
||||||
this.searchTerm.set(value);
|
this.searchTerm.set(value);
|
||||||
|
this.updateFilteredItems();
|
||||||
const matchingItems = this.items().filter((item) =>
|
|
||||||
item.toLowerCase().includes(value.toLowerCase())
|
|
||||||
);
|
|
||||||
|
|
||||||
this.filteredItems.set(matchingItems);
|
|
||||||
|
|
||||||
const exactMatch = this.items().find(
|
const exactMatch = this.items().find(
|
||||||
(item) => item.toLowerCase() === value.toLowerCase()
|
(item) => item.toLowerCase() === value.toLowerCase()
|
||||||
|
@ -148,8 +155,7 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
|
||||||
this.itemSelected.emit('');
|
this.itemSelected.emit('');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.showDropdown.set(matchingItems.length > 0 || value.trim() !== '');
|
this.showDropdown.set(true);
|
||||||
|
|
||||||
this.onTouched();
|
this.onTouched();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -207,21 +213,33 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
|
||||||
}
|
}
|
||||||
|
|
||||||
public onFocus(): void {
|
public onFocus(): void {
|
||||||
this.filteredItems.set(this.items());
|
this.showDropdown.set(true);
|
||||||
|
this.updateFilteredItems();
|
||||||
this.markAsTouched();
|
this.markAsTouched();
|
||||||
}
|
}
|
||||||
|
|
||||||
public onBlur(): void {
|
public onBlur(): void {
|
||||||
|
setTimeout(() => {
|
||||||
if (!this.isMouseInDropdown()) {
|
if (!this.isMouseInDropdown()) {
|
||||||
this.closeDropdown();
|
this.closeDropdown();
|
||||||
this.markAsTouched();
|
this.markAsTouched();
|
||||||
}
|
}
|
||||||
|
}, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
private isValidOption(value: string): boolean {
|
private isValidOption(value: string): boolean {
|
||||||
return this.items().includes(value);
|
return this.items().includes(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private updateFilteredItems(): void {
|
||||||
|
const searchTerm = this.searchTerm().toLowerCase();
|
||||||
|
const matchingItems = this.items().filter((item) =>
|
||||||
|
item.toLowerCase().includes(searchTerm)
|
||||||
|
);
|
||||||
|
|
||||||
|
this.filteredItems.set(matchingItems);
|
||||||
|
}
|
||||||
|
|
||||||
private onChange: (value: string) => void = () => {};
|
private onChange: (value: string) => void = () => {};
|
||||||
private onTouched: () => void = () => {};
|
private onTouched: () => void = () => {};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue