fuse-angular/src/app/modules/admin/apps/notes/details/details.component.html

<div class="flex flex-col flex-auto md:w-160 md:min-w-160 -m-6">
    <ng-container *ngIf="(note$ | async) as note">
        <!-- Image -->
        <ng-container *ngIf="note.image">
            <div class="relative w-full">
                <div class="absolute right-0 bottom-0 p-4">
                    <button
                        mat-icon-button
                        (click)="removeImage(note)">
                        <mat-icon
                            class="text-white"
                            [svgIcon]="'heroicons_outline:trash'"></mat-icon>
                    </button>
                </div>
                <img
                    class="w-full object-cover"
                    [src]="note.image">
            </div>
        </ng-container>
        <div class="m-4">
            <!-- Title -->
            <div>
                <input
                    class="w-full p-2 text-2xl"
                    [placeholder]="'Title'"
                    [(ngModel)]="note.title"
                    (input)="updateNoteDetails(note)">
            </div>
            <!-- Note -->
            <div>
                <textarea
                    class="w-full my-2.5 p-2"
                    fuseAutogrow
                    [placeholder]="'Note'"
                    [(ngModel)]="note.content"
                    (input)="updateNoteDetails(note)"></textarea>
            </div>
            <!-- Tasks -->
            <ng-container *ngIf="note.tasks">
                <div class="mx-2 mt-4 space-y-1.5">
                    <ng-container *ngFor="let task of note.tasks; trackBy: trackByFn">
                        <div class="group flex items-center">
                            <mat-checkbox
                                class="flex items-center"
                                [color]="'primary'"
                                [(ngModel)]="task.completed"
                                (change)="updateTaskOnNote(note, task)"></mat-checkbox>
                            <input
                                class="w-full px-1 py-0.5"
                                [ngClass]="{'text-secondary line-through': task.completed}"
                                [placeholder]="'Task'"
                                [(ngModel)]="task.content"
                                (input)="updateTaskOnNote(note, task)">
                            <mat-icon
                                class="hidden group-hover:flex ml-auto icon-size-5 cursor-pointer"
                                [svgIcon]="'heroicons_solid:x'"
                                (click)="removeTaskFromNote(note, task)"></mat-icon>
                        </div>
                    </ng-container>
                    <div class="flex items-center">
                        <mat-icon
                            class="-ml-0.5 icon-size-5 text-hint"
                            [svgIcon]="'heroicons_solid:plus'"></mat-icon>
                        <input
                            class="w-full ml-1.5 px-1 py-0.5"
                            [placeholder]="'Add task'"
                            (keydown.enter)="addTaskToNote(note, newTaskInput.value); newTaskInput.value = ''"
                            #newTaskInput>
                    </div>
                </div>
            </ng-container>
            <!-- Labels -->
            <ng-container *ngIf="note.labels && note.labels.length">
                <div class="flex flex-wrap items-center mx-1 mt-6">
                    <ng-container *ngFor="let label of note.labels; trackBy: trackByFn">
                        <div class="flex items-center m-1 py-0.5 px-3 rounded-full text-sm font-medium text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
                            <div>
                                {{label.title}}
                            </div>
                            <mat-icon
                                class="ml-1 icon-size-4 cursor-pointer"
                                [svgIcon]="'heroicons_solid:x-circle'"
                                (click)="toggleLabelOnNote(note, label)"></mat-icon>
                        </div>
                    </ng-container>
                </div>
            </ng-container>
            <!-- Add Actions -->
            <ng-container *ngIf="!note.id">
                <div class="flex items-center justify-end mt-4">
                    <!-- Save -->
                    <button
                        mat-flat-button
                        [color]="'primary'"
                        [disabled]="!note.title && !note.content"
                        (click)="createNote(note)">
                        Save
                    </button>
                </div>
            </ng-container>
            <!-- Edit Actions -->
            <ng-container *ngIf="note.id">
                <div class="flex items-center justify-between mt-4">
                    <div class="flex items-center space-x-2">
                        <!-- Image -->
                        <div>
                            <input
                                id="image-file-input"
                                class="absolute h-0 w-0 opacity-0 invisible pointer-events-none"
                                type="file"
                                [multiple]="false"
                                [accept]="'image/jpeg, image/png'"
                                (change)="uploadImage(note, imageFileInput.files)"
                                #imageFileInput>
                            <label
                                class="flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-gray-400 hover:bg-opacity-20 dark:hover:bg-black dark:hover:bg-opacity-5"
                                for="image-file-input"
                                matRipple>
                                <mat-icon [svgIcon]="'heroicons_outline:photograph'"></mat-icon>
                            </label>
                        </div>
                        <!-- Checklist -->
                        <button
                            mat-icon-button
                            (click)="addTasksToNote(note)">
                            <mat-icon [svgIcon]="'heroicons_outline:clipboard-list'"></mat-icon>
                        </button>
                        <!-- Labels -->
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="labelsMenu">
                            <mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
                        </button>
                        <mat-menu #labelsMenu="matMenu">
                            <ng-container *ngIf="(labels$ | async) as labels">
                                <ng-container *ngFor="let label of labels">
                                    <button
                                        mat-menu-item
                                        (click)="toggleLabelOnNote(note, label)">
                                        <span class="flex items-center">
                                            <mat-checkbox
                                                class="flex items-center pointer-events-none"
                                                [color]="'primary'"
                                                [checked]="isNoteHasLabel(note, label)"
                                                disableRipple></mat-checkbox>
                                            <span class="ml-1 leading-5">{{label.title}}</span>
                                        </span>
                                    </button>
                                </ng-container>
                            </ng-container>
                        </mat-menu>
                        <!-- Archive -->
                        <button
                            mat-icon-button
                            (click)="toggleArchiveOnNote(note)">
                            <mat-icon [svgIcon]="'heroicons_outline:archive'"></mat-icon>
                        </button>
                        <!-- Delete -->
                        <button
                            mat-icon-button
                            (click)="deleteNote(note)">
                            <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
                        </button>
                    </div>
                    <!-- Close -->
                    <button
                        mat-flat-button
                        matDialogClose>
                        Close
                    </button>
                </div>
            </ng-container>
        </div>
    </ng-container>

</div>