mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-24 08:17:07 +00:00
124 lines
5.5 KiB
HTML
124 lines
5.5 KiB
HTML
<div class="flex flex-col flex-auto overflow-y-auto p-8">
|
|
|
|
<div class="flex items-center">
|
|
<!-- Sidebar toggle button -->
|
|
<div class="md:hidden -ml-2 mr-3">
|
|
<button
|
|
mat-icon-button
|
|
(click)="mailboxComponent.drawer.toggle()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
<!-- Title -->
|
|
<div>
|
|
<div class="text-3xl font-extrabold tracking-tight">Manage Labels</div>
|
|
<div class="text-secondary">Create, update and delete labels</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Labels form -->
|
|
<form
|
|
class="mt-8"
|
|
[formGroup]="labelsForm">
|
|
|
|
<!-- New label -->
|
|
<div
|
|
class="flex items-center justify-start w-full max-w-80 mt-6"
|
|
[formGroupName]="'newLabel'">
|
|
<mat-form-field class="w-full">
|
|
<mat-label>New Label</mat-label>
|
|
<input
|
|
matInput
|
|
[formControlName]="'title'"
|
|
[placeholder]="'Label title'">
|
|
<mat-select
|
|
[formControlName]="'color'"
|
|
[disableOptionCentering]="true"
|
|
matPrefix>
|
|
<mat-select-trigger class="h-6">
|
|
<mat-icon
|
|
[ngClass]="labelColorDefs[labelsForm.get('newLabel.color').value].text"
|
|
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
|
</mat-select-trigger>
|
|
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
|
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
|
<ng-container *ngFor="let color of labelColors">
|
|
<mat-option
|
|
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
|
|
[value]="color"
|
|
#matOption="matOption">
|
|
<mat-icon
|
|
class="absolute m-3 text-white"
|
|
*ngIf="matOption.selected"
|
|
[svgIcon]="'heroicons_outline:check'"></mat-icon>
|
|
<span
|
|
class="flex w-10 h-10 m-1 rounded-full"
|
|
[ngClass]="labelColorDefs[color].bg"></span>
|
|
</mat-option>
|
|
</ng-container>
|
|
</div>
|
|
</mat-select>
|
|
<button
|
|
mat-icon-button
|
|
matSuffix
|
|
[disabled]="!labelsForm.get('newLabel').valid || !labelsForm.get('newLabel').dirty"
|
|
(click)="addLabel()">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
|
</button>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Labels -->
|
|
<div
|
|
class="flex flex-col w-full max-w-80 mt-4"
|
|
[formArrayName]="'labels'">
|
|
<!-- Label -->
|
|
<ng-container *ngFor="let label of labelsForm.get('labels')['controls']">
|
|
<mat-form-field class="w-full">
|
|
<input
|
|
matInput
|
|
[formControl]="label.get('title')">
|
|
<mat-select
|
|
[formControl]="label.get('color')"
|
|
[disableOptionCentering]="true"
|
|
matPrefix>
|
|
<mat-select-trigger class="h-6">
|
|
<mat-icon
|
|
[ngClass]="labelColorDefs[label.get('color').value].text"
|
|
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
|
</mat-select-trigger>
|
|
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
|
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
|
<ng-container *ngFor="let color of labelColors">
|
|
<mat-option
|
|
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
|
|
[value]="color"
|
|
#matOption="matOption">
|
|
<mat-icon
|
|
class="absolute m-3 text-white"
|
|
*ngIf="matOption.selected"
|
|
[svgIcon]="'heroicons_outline:check'"></mat-icon>
|
|
<span
|
|
class="flex w-10 h-10 m-1 rounded-full"
|
|
[ngClass]="labelColorDefs[color].bg"></span>
|
|
</mat-option>
|
|
</ng-container>
|
|
</div>
|
|
</mat-select>
|
|
<button
|
|
mat-icon-button
|
|
matSuffix
|
|
(click)="deleteLabel(label.get('id').value)">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
|
</button>
|
|
</mat-form-field>
|
|
</ng-container>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|