From 95aa8d6b11ca233db1af0a5ea9a934bcfa093702 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Tue, 30 Jul 2024 16:44:04 +0200
Subject: [PATCH] Implement edit icon to dropdown

---
 .../dropdown/dropdown.component.html          | 36 ++++++++++++++-----
 .../components/dropdown/dropdown.component.ts |  8 +++++
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/shared/components/dropdown/dropdown.component.html b/frontend/src/app/shared/components/dropdown/dropdown.component.html
index 8425eec..c5e477b 100644
--- a/frontend/src/app/shared/components/dropdown/dropdown.component.html
+++ b/frontend/src/app/shared/components/dropdown/dropdown.component.html
@@ -35,12 +35,14 @@
         @if (filteredItems().length > 0) {
           @for (item of filteredItems(); track item) {
             <li>
-              <a
-                (mousedown)="selectItem(item)"
-                class="flex justify-between items-center"
-                [class.font-bold]="item === selectedItem()"
-                [class.text-primary]="item === selectedItem()">
-                <span>{{ item }}</span>
+              <div class="flex justify-between items-center w-full">
+                <span
+                  (mousedown)="selectItem(item)"
+                  class="flex-grow cursor-pointer"
+                  [class.font-bold]="item === selectedItem()"
+                  [class.text-primary]="item === selectedItem()">
+                  {{ item }}
+                </span>
                 @if (item === selectedItem()) {
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -48,14 +50,32 @@
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="size-6">
+                    class="size-6 text-primary">
                     <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>
                 }
-              </a>
+              </div>
             </li>
           }
           <div class="divider">{{ dividerText() }}</div>
diff --git a/frontend/src/app/shared/components/dropdown/dropdown.component.ts b/frontend/src/app/shared/components/dropdown/dropdown.component.ts
index 3de8066..e8817b6 100644
--- a/frontend/src/app/shared/components/dropdown/dropdown.component.ts
+++ b/frontend/src/app/shared/components/dropdown/dropdown.component.ts
@@ -35,6 +35,7 @@ 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;
@@ -62,6 +63,13 @@ 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);