igorpropisnov
/
mvp-ticket
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement edit icon to dropdown

This commit is contained in:
Igor Hrenowitsch Propisnov 2024-07-30 16:44:04 +02:00
parent 52d4245338
commit 95aa8d6b11
2 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/app/shared/components/dropdown/dropdown.component.html
View File

@ -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>

8
frontend/src/app/shared/components/dropdown/dropdown.component.ts
View File

@ -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);