Implement edit icon to dropdown
This commit is contained in:
parent
52d4245338
commit
95aa8d6b11
|
@ -35,12 +35,14 @@
|
||||||
@if (filteredItems().length > 0) {
|
@if (filteredItems().length > 0) {
|
||||||
@for (item of filteredItems(); track item) {
|
@for (item of filteredItems(); track item) {
|
||||||
<li>
|
<li>
|
||||||
<a
|
<div class="flex justify-between items-center w-full">
|
||||||
|
<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()) {
|
@if (item === selectedItem()) {
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
@ -48,14 +50,32 @@
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
class="size-6">
|
class="size-6 text-primary">
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
d="m4.5 12.75 6 6 9-13.5" />
|
d="m4.5 12.75 6 6 9-13.5" />
|
||||||
</svg>
|
</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>
|
</li>
|
||||||
}
|
}
|
||||||
<div class="divider">{{ dividerText() }}</div>
|
<div class="divider">{{ dividerText() }}</div>
|
||||||
|
|
|
@ -35,6 +35,7 @@ export class DropdownComponent {
|
||||||
);
|
);
|
||||||
public itemSelected: OutputEmitterRef<string> = output<string>();
|
public itemSelected: OutputEmitterRef<string> = output<string>();
|
||||||
public submitNewItems: OutputEmitterRef<boolean> = output<boolean>();
|
public submitNewItems: OutputEmitterRef<boolean> = output<boolean>();
|
||||||
|
public itemEdit: OutputEmitterRef<string> = output<string>();
|
||||||
|
|
||||||
public onInput(event: Event): void {
|
public onInput(event: Event): void {
|
||||||
const value = (event.target as HTMLInputElement).value;
|
const value = (event.target as HTMLInputElement).value;
|
||||||
|
@ -62,6 +63,13 @@ export class DropdownComponent {
|
||||||
this.showDropdown.set(true);
|
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 {
|
public selectItem(item: string): void {
|
||||||
this.searchTerm.set(item);
|
this.searchTerm.set(item);
|
||||||
this.selectedItem.set(item);
|
this.selectedItem.set(item);
|
||||||
|
|
Loading…
Reference in New Issue