mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-03 07:01:38 +00:00
f380d8ca16
Updated Angular Material to v13 Updated version numbers and added the changelog Updated various packages
123 lines
5.2 KiB
HTML
123 lines
5.2 KiB
HTML
<div class="flex flex-col flex-auto md:w-160 md:min-w-160 max-h-160 -m-6 overflow-y-auto">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary">
|
|
<div class="text-lg font-medium">Card</div>
|
|
<button
|
|
mat-icon-button
|
|
(click)="matDialogRef.close()"
|
|
[tabIndex]="-1">
|
|
<mat-icon
|
|
class="text-current"
|
|
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Card form -->
|
|
<form
|
|
class="flex flex-col flex-0 items-start w-full p-6 sm:p-8 space-y-6 overflow-y-auto"
|
|
[formGroup]="cardForm">
|
|
|
|
<!-- Title -->
|
|
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
|
<mat-label>Title</mat-label>
|
|
<textarea
|
|
matInput
|
|
[formControlName]="'title'"
|
|
[rows]="1"
|
|
cdkTextareaAutosize
|
|
[cdkAutosizeMinRows]="1">
|
|
</textarea>
|
|
</mat-form-field>
|
|
|
|
<!-- Description -->
|
|
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
|
<mat-label>Description</mat-label>
|
|
<textarea
|
|
matInput
|
|
[formControlName]="'description'"
|
|
[rows]="1"
|
|
cdkTextareaAutosize
|
|
[cdkAutosizeMinRows]="1">
|
|
</textarea>
|
|
</mat-form-field>
|
|
|
|
<!-- Due date -->
|
|
<div>
|
|
<div class="font-medium">Due date</div>
|
|
<div
|
|
class="relative flex items-center mt-1.5 px-4 leading-9 rounded-full cursor-pointer"
|
|
[ngClass]="{'text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700': !card.dueDate,
|
|
'text-green-800 bg-green-200 dark:text-green-100 dark:bg-green-500': card.dueDate && !isOverdue(card.dueDate),
|
|
'text-red-800 bg-red-200 dark:text-red-100 dark:bg-red-500': card.dueDate && isOverdue(card.dueDate)}"
|
|
(click)="dueDatePicker.open()">
|
|
<mat-icon
|
|
class="icon-size-5 text-current"
|
|
[svgIcon]="'heroicons_solid:calendar'"></mat-icon>
|
|
<span class="ml-2 text-md font-medium">
|
|
<ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container>
|
|
<ng-container *ngIf="!card.dueDate">Not set</ng-container>
|
|
</span>
|
|
<mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
|
|
<input
|
|
matInput
|
|
[formControlName]="'dueDate'"
|
|
[matDatepicker]="dueDatePicker">
|
|
<mat-datepicker #dueDatePicker>
|
|
<mat-datepicker-actions>
|
|
<button
|
|
mat-button
|
|
(click)="cardForm.get('dueDate').setValue(null)"
|
|
matDatepickerCancel>
|
|
Clear
|
|
</button>
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
matDatepickerApply>
|
|
Select
|
|
</button>
|
|
</mat-datepicker-actions>
|
|
</mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Labels -->
|
|
<div class="w-full">
|
|
<div class="font-medium">Labels</div>
|
|
<div class="mt-1 rounded-md border border-gray-300 shadow-sm overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="flex items-center my-2 mx-3">
|
|
<div class="flex items-center flex-auto min-w-0">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
|
<input
|
|
class="min-w-0 ml-2 py-1 border-0"
|
|
type="text"
|
|
placeholder="Enter label name"
|
|
(input)="filterLabels($event)"
|
|
(keydown)="filterLabelsInputKeyDown($event)"
|
|
[maxLength]="50">
|
|
</div>
|
|
</div>
|
|
<!-- Available labels -->
|
|
<div class="max-h-40 leading-none overflow-y-auto border-t">
|
|
<!-- Labels -->
|
|
<ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn">
|
|
<mat-checkbox
|
|
class="flex items-center h-10 min-h-10 px-4"
|
|
[color]="'primary'"
|
|
[checked]="hasLabel(label)"
|
|
(change)="toggleProductTag(label, $event)">
|
|
{{label.title}}
|
|
</mat-checkbox>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|