From 584f34f947367d179752362e132029dfec6dc620 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Tue, 30 Jul 2024 22:39:48 +0200
Subject: [PATCH] added some open an close logic for dropdown

---
 .../create-event/create-event.component.html  | 52 ++++++++++---------
 .../steps/basic-step.component.html           |  4 --
 .../dropdown/dropdown.component.html          |  7 ++-
 .../components/dropdown/dropdown.component.ts | 42 ++++++++++++---
 4 files changed, 69 insertions(+), 36 deletions(-)

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 7faf76d..ae2d82f 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
@@ -1,5 +1,5 @@
 <div class="flex flex-col h-full">
-  <div class="w-full bg-neutral max-w-full sticky top-0 z-20 pt-2">
+  <div class="w-full bg-base-100 max-w-full sticky top-0 z-10 pt-4">
     <ul class="steps steps-horizontal w-full py-2">
       @for (step of steps; track $index) {
         <li
@@ -30,34 +30,38 @@
   </div>
 
   <div
-    class="w-full bg-neutral max-w-full sticky bottom-0 z-20 px-4 sm:px-8 py-4">
+    class="w-full bg-base-100 max-w-full sticky bottom-0 z-10 px-4 sm:px-8 py-4">
     <div class="flex justify-between max-w-4xl mx-auto">
-      <button
-        type="button"
-        class="btn btn-primary"
-        (click)="prevStep()"
-        [disabled]="currentStep() === 0"
-        [class.opacity-50]="currentStep() === 0">
+      <div>
         @if (currentStep() > 0) {
-          <span>
-            Back to
-            <span class="font-bold">{{ steps[currentStep() - 1] }}</span>
-          </span>
+          <button
+            type="button"
+            class="btn btn-primary btn-outline"
+            (click)="prevStep()"
+            [disabled]="currentStep() === 0"
+            [class.opacity-50]="currentStep() === 0">
+            <span>
+              Back to
+              <span class="font-bold">{{ steps[currentStep() - 1] }}</span>
+            </span>
+          </button>
         }
-      </button>
-      <button
-        type="button"
-        class="btn btn-primary"
-        (click)="nextStep()"
-        [disabled]="currentStep() === steps.length - 1"
-        [class.opacity-50]="currentStep() === steps.length - 1">
+      </div>
+      <div>
         @if (currentStep() < steps.length - 1) {
-          <span>
-            Next to
-            <span class="font-bold">{{ steps[currentStep() + 1] }}</span>
-          </span>
+          <button
+            type="button"
+            class="btn btn-primary btn-outline"
+            (click)="nextStep()"
+            [disabled]="currentStep() === steps.length - 1"
+            [class.opacity-50]="currentStep() === steps.length - 1">
+            <span>
+              Next to
+              <span class="font-bold">{{ steps[currentStep() + 1] }}</span>
+            </span>
+          </button>
         }
-      </button>
+      </div>
     </div>
   </div>
 </div>
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 63c697d..819fb1b 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
@@ -65,10 +65,6 @@
         <span class="label-text-alt"></span>
       </div>
     </label>
-
-    <div>
-      <pre>{{ form().value | json }}</pre>
-    </div>
   </div>
 </form>
 
diff --git a/frontend/src/app/shared/components/dropdown/dropdown.component.html b/frontend/src/app/shared/components/dropdown/dropdown.component.html
index 15ee958..2d840d3 100644
--- a/frontend/src/app/shared/components/dropdown/dropdown.component.html
+++ b/frontend/src/app/shared/components/dropdown/dropdown.component.html
@@ -24,7 +24,8 @@
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
-        class="size-6"
+        class="size-6 cursor-pointer"
+        (click)="toggleDropdown()"
         [class.rotate-180]="showDropdown()">
         <path
           stroke-linecap="round"
@@ -34,6 +35,8 @@
     </label>
     @if (showDropdown()) {
       <ul
+        (mouseenter)="onDropdownMouseEnter()"
+        (mouseleave)="onDropdownMouseLeave()"
         class="menu bg-base-100 w-full mt-1 shadow-lg rounded-box absolute top-full left-0 z-10">
         @if (filteredItems().length > 0) {
           @for (item of filteredItems(); track item) {
@@ -61,7 +64,7 @@
                   </svg>
                 } @else {
                   <div
-                    class="tooltip tooltip-info"
+                    class="tooltip tooltip-primary tooltip-left"
                     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"
diff --git a/frontend/src/app/shared/components/dropdown/dropdown.component.ts b/frontend/src/app/shared/components/dropdown/dropdown.component.ts
index b9d034e..d82b31d 100644
--- a/frontend/src/app/shared/components/dropdown/dropdown.component.ts
+++ b/frontend/src/app/shared/components/dropdown/dropdown.component.ts
@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import {
   Component,
+  ElementRef,
   forwardRef,
+  HostListener,
   input,
   InputSignal,
   output,
@@ -57,6 +59,16 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
   public itemSelected: OutputEmitterRef<string> = output<string>();
   public submitNewItems: OutputEmitterRef<boolean> = output<boolean>();
   public itemEdit: OutputEmitterRef<string> = output<string>();
+  private isMouseInDropdown: WritableSignal<boolean> = signal<boolean>(false);
+
+  public constructor(private readonly elementRef: ElementRef) {}
+
+  @HostListener('document:click', ['$event'])
+  public onDocumentClick(event: MouseEvent): void {
+    if (!this.elementRef.nativeElement.contains(event.target)) {
+      this.closeDropdown();
+    }
+  }
 
   public writeValue(value: string | null): void {
     if (value && this.isValidOption(value)) {
@@ -88,6 +100,23 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
     return null;
   }
 
+  public onDropdownMouseEnter(): void {
+    this.isMouseInDropdown.set(true);
+  }
+
+  public onDropdownMouseLeave(): void {
+    this.isMouseInDropdown.set(false);
+  }
+
+  public closeDropdown(): void {
+    this.showDropdown.set(false);
+    this.isMouseInDropdown.set(false);
+  }
+
+  public toggleDropdown(): void {
+    this.showDropdown.set(!this.showDropdown());
+  }
+
   public onInput(event: Event): void {
     const value = (event.target as HTMLInputElement).value;
 
@@ -113,7 +142,8 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
       this.itemSelected.emit('');
     }
 
-    this.showDropdown.set(true);
+    this.showDropdown.set(matchingItems.length > 0 || value.trim() !== '');
+
     this.onTouched();
   }
 
@@ -142,7 +172,7 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
     if (this.isValidOption(item)) {
       this.searchTerm.set(item);
       this.selectedItem.set(item);
-      this.showDropdown.set(false);
+      this.closeDropdown();
       this.itemSelected.emit(item);
       this.onChange(item);
       this.onTouched();
@@ -150,6 +180,7 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
   }
 
   public submitNewItem(): void {
+    this.closeDropdown();
     this.submitNewItems.emit(true);
   }
 
@@ -161,15 +192,14 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
   }
 
   public onFocus(): void {
-    this.showDropdown.set(true);
     this.filteredItems.set(this.items());
   }
 
   public onBlur(): void {
-    setTimeout(() => {
-      this.showDropdown.set(false);
+    if (!this.isMouseInDropdown) {
+      this.closeDropdown();
       this.onTouched();
-    }, 100);
+    }
   }
 
   private isValidOption(value: string): boolean {