frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.html

@@ -7,12 +7,23 @@
           <span class="label-text">Location Name</span>
           <span class="label-text-alt">Name of the location</span>
         </div>
-        <input
+        <div class="input input-bordered flex items-center gap-2">
-          [ngClass]="getInputClass('name')"
+          <input
-          formControlName="name"
+            formControlName="name"
-          type="text"
+            type="text"
-          class="input input-bordered w-full"
+            class="grow"
-          placeholder="" />
+            placeholder="" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="h-4 w-4 opacity-70">
+            <path
+              fill-rule="evenodd"
+              d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+              clip-rule="evenodd" />
+          </svg>
+        </div>
         <div class="label">
           <span class="label-text-alt"></span>
           <span class="label-text-alt"></span>
@@ -26,7 +37,6 @@
             <span class="label-text-alt"></span>
           </div>
           <input
-            [ngClass]="getInputClass('postalCode')"
             type="text"
             formControlName="postalCode"
             class="input input-bordered w-full" />
@@ -42,7 +52,6 @@
             <span class="label-text-alt">Name of the city</span>
           </div>
           <input
-            [ngClass]="getInputClass('city')"
             type="text"
             formControlName="city"
             class="input input-bordered w-full" />
@@ -60,7 +69,6 @@
             <span class="label-text-alt">Name of the street</span>
           </div>
           <input
-            [ngClass]="getInputClass('street')"
             type="text"
             formControlName="street"
             class="input input-bordered w-full" />
@@ -76,7 +84,6 @@
             <span class="label-text-alt"></span>
           </div>
           <input
-            [ngClass]="getInputClass('houseNumber')"
             type="text"
             formControlName="houseNumber"
             class="input input-bordered w-full" />

frontend/src/app/pages/event-root/create-event/dialog/create-location.dialog.component.ts

@@ -1,11 +1,5 @@
 import { CommonModule } from '@angular/common';
-import {
+import { Component, output, OutputEmitterRef } from '@angular/core';
-  Component,
-  output,
-  OutputEmitterRef,
-  signal,
-  WritableSignal,
-} from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
@@ -30,33 +24,18 @@ export class LocationDialogComponent {
   public locationCreated: OutputEmitterRef<EventLocation> =
     output<EventLocation>();
   public locationForm: FormGroup = new FormGroup({});
-  public formSubmitted: WritableSignal<boolean> = signal<boolean>(false);
 
   public constructor(private readonly formBuilder: FormBuilder) {
     this.locationForm = this.formBuilder.group({
-      name: ['', [Validators.required, Validators.minLength(3)]],
       postalCode: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]],
-      city: ['', [Validators.required, Validators.minLength(2)]],
+      city: ['', Validators.required],
-      street: ['', [Validators.required, Validators.minLength(3)]],
+      street: ['', Validators.required],
-      houseNumber: [
+      houseNumber: ['', Validators.required],
-        '',
+      name: ['', Validators.required],
-        [Validators.required, Validators.pattern(/^[0-9]+[a-zA-Z]?$/)],
-      ],
     });
   }
 
-  public getInputClass(controlName: string): string {
-    const control = this.locationForm.get(controlName);
-
-    if ((control?.dirty || this.formSubmitted()) && control?.touched) {
-      return control.valid ? 'input-success' : 'input-error';
-    }
-    return '';
-  }
-
   public createLocation(): void {
-    this.formSubmitted.set(true);
-    this.locationForm.markAllAsTouched();
     if (this.locationForm.valid) {
       this.locationCreated.emit(this.locationForm.value);
       this.closeModal();
@@ -68,10 +47,6 @@ export class LocationDialogComponent {
       'location_modal'
     ) as HTMLDialogElement;
 
-    this.locationForm.reset();
-    this.locationForm.markAsUntouched();
-    this.locationForm.markAsPristine();
-    this.formSubmitted.set(false);
     modal.showModal();
   }
 

frontend/src/app/shared/components/dropdown/dropdown.component.html

@@ -35,14 +35,12 @@
         @if (filteredItems().length > 0) {
           @for (item of filteredItems(); track item) {
             <li>
-              <div class="flex justify-between items-center w-full">
+              <a
-                <span
+                (mousedown)="selectItem(item)"
-                  (mousedown)="selectItem(item)"
+                class="flex justify-between items-center"
-                  class="flex-grow cursor-pointer"
+                [class.font-bold]="item === selectedItem()"
-                  [class.font-bold]="item === selectedItem()"
+                [class.text-primary]="item === selectedItem()">
-                  [class.text-primary]="item === selectedItem()">
+                <span>{{ item }}</span>
-                  {{ item }}
-                </span>
                 @if (item === selectedItem()) {
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -50,32 +48,14 @@
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="size-6 text-primary">
+                    class="size-6">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
                       d="m4.5 12.75 6 6 9-13.5" />
                   </svg>
-                } @else {
-                  <div
-                    class="tooltip tooltip-info"
-                    data-tip="Edit this location's details. You can modify the name, address, or any other relevant information associated with this place.">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 cursor-pointer"
-                      (mousedown)="editItem(item, $event)">
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
-                    </svg>
-                  </div>
                 }
-              </div>
+              </a>
             </li>
           }
           <div class="divider">{{ dividerText() }}</div>

frontend/src/app/shared/components/dropdown/dropdown.component.ts

@@ -35,7 +35,6 @@ export class DropdownComponent {
   );
   public itemSelected: OutputEmitterRef<string> = output<string>();
   public submitNewItems: OutputEmitterRef<boolean> = output<boolean>();
-  public itemEdit: OutputEmitterRef<string> = output<string>();
 
   public onInput(event: Event): void {
     const value = (event.target as HTMLInputElement).value;
@@ -63,13 +62,6 @@ export class DropdownComponent {
     this.showDropdown.set(true);
   }
 
-  public editItem(item: string, event: MouseEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    // TODO: Implement edit item functionality
-    this.itemEdit.emit(item);
-  }
-
   public selectItem(item: string): void {
     this.searchTerm.set(item);
     this.selectedItem.set(item);