Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-6410 - File attributes in-place editing look & feel changes in file list

Browse Source
This commit is contained in:
Valentin Mihai 2023-05-08 14:45:37 +03:00
parent b8f07f5c31
commit 02f4f33115
2 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
View File

@ -1,5 +1,5 @@
<div class="file-attribute"> <div class="file-attribute">
<div class="value"> <div class="value" (click)="editFileAttribute($event)">
<span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span> <span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span>
<ng-template #date> <ng-template #date>
<span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span> <span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
@ -24,23 +24,23 @@
<mat-icon [svgIcon]="'iqser:edit'"></mat-icon> <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
</div> </div>
</div> </div>
<ng-template #input>
<div class="edit-input" stopPropagation>
<form (submit)="save()" [formGroup]="form">
<iqser-dynamic-input
(closedDatepicker)="closedDatepicker = $event"
(keydown.escape)="close()"
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[type]="fileAttribute.type"
></iqser-dynamic-input>
<iqser-circle-button (action)="save()" [disabled]="disabled" [icon]="'iqser:check'" class="save"></iqser-circle-button>
<iqser-circle-button (action)="close()" [icon]="'iqser:close'"></iqser-circle-button>
</form>
</div>
</ng-template>
</ng-container> </ng-container>
</div> </div>
<ng-template #input>
<div class="edit-input" stopPropagation>
<form (submit)="save()" [formGroup]="form">
<iqser-dynamic-input
(closedDatepicker)="closedDatepicker = $event"
(keydown.escape)="close()"
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[type]="fileAttribute.type"
></iqser-dynamic-input>
<iqser-circle-button (action)="save()" [disabled]="disabled" [icon]="'iqser:check'" class="save"></iqser-circle-button>
<iqser-circle-button (action)="close()" [icon]="'iqser:close'"></iqser-circle-button>
</form>
</div>
</ng-template>

8
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts
View File

@ -59,8 +59,10 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
} }
async editFileAttribute($event: MouseEvent): Promise<void> { async editFileAttribute($event: MouseEvent): Promise<void> {
$event.stopPropagation(); if (!this.file.isInitialProcessing && this.permissionsService.canEditFileAttributes(this.file, this.dossier)) {
this.#toggleEdit(); $event.stopPropagation();
this.#toggleEdit();
}
} }
async save() { async save() {
@ -139,7 +141,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
#focusOnEditInput(): void { #focusOnEditInput(): void {
setTimeout(() => { setTimeout(() => {
const input = document.getElementById(this.fileAttribute.id); const input = document.getElementById(this.fileAttribute.id);
input.focus(); input?.focus();
}, 100); }, 100);
} }
} }