mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-24 07:37:06 +00:00
53 lines
1.9 KiB
HTML
53 lines
1.9 KiB
HTML
<div class="flex flex-col flex-auto w-80 min-w-80 p-2 md:p-4">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-2xl font-semibold">Edit labels</div>
|
|
<button
|
|
matDialogClose
|
|
mat-icon-button>
|
|
<mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
<!-- New label -->
|
|
<mat-form-field class="fuse-mat-dense w-full mt-8">
|
|
<input
|
|
name="new-label"
|
|
[autocomplete]="'off'"
|
|
[placeholder]="'Create new label'"
|
|
matInput
|
|
#newLabelInput>
|
|
<button
|
|
[class.invisible]="newLabelInput.value.trim() === ''"
|
|
mat-icon-button
|
|
(click)="addLabel(newLabelInput.value); newLabelInput.value = ''"
|
|
matSuffix>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
|
</button>
|
|
</mat-form-field>
|
|
<!-- Labels -->
|
|
<div class="flex flex-col mt-4">
|
|
<ng-container *ngIf="(labels$ | async) as labels">
|
|
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
|
<mat-form-field class="fuse-mat-dense w-full">
|
|
<button
|
|
mat-icon-button
|
|
matPrefix
|
|
(click)="deleteLabel(label.id)">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
|
</button>
|
|
<input
|
|
[autocomplete]="'off'"
|
|
[(ngModel)]="label.title"
|
|
(input)="updateLabel(label)"
|
|
required
|
|
matInput>
|
|
</mat-form-field>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|