RED-8649: made in-place editing for the primary attribute responsive.

2024-03-06 13:16:21 +02:00 · 2024-03-06 13:16:21 +02:00 · 33c16ff13c
commit 33c16ff13c
parent f16ebc505b
5 changed files with 81 additions and 23 deletions
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html
@ -5,7 +5,7 @@
        [ngClass]="{ 'workflow-attribute': mode === 'workflow', 'file-name-column': fileNameColumn }"
        class="file-attribute"
    >
-        <div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value">
+        <div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value" *ngIf="!isInEditMode || !fileNameColumn">
            <mat-icon *ngIf="!fileAttribute.editable" [matTooltip]="'readonly' | translate" svgIcon="red:read-only"></mat-icon>
            <div>
                <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
@ -55,6 +55,8 @@
            <form (ngSubmit)="form.valid && save()" [formGroup]="form">
                <iqser-dynamic-input
                    (closedDatepicker)="closedDatepicker = $event"
+                    [style.max-width]="editFieldWidth"
+                    [style.min-width]="editFieldWidth"
                    (keydown.escape)="close()"
                    [formControlName]="fileAttribute.id"
                    [id]="fileAttribute.id"
@ -66,11 +68,17 @@
                    (action)="save()"
                    [disabled]="disabled"
                    [icon]="'iqser:check'"
-                    [size]="mode === 'workflow' ? 15 : 34"
+                    [size]="mode === 'workflow' || fileNameColumn ? 15 : 34"
+                    [ngClass]="{ 'file-name-btn': fileNameColumn }"
                    class="save"
                ></iqser-circle-button>

-                <iqser-circle-button (action)="close()" [icon]="'iqser:close'" [size]="mode === 'workflow' ? 15 : 34"></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="close()"
+                    [ngClass]="{ 'file-name-btn': fileNameColumn }"
+                    [icon]="'iqser:close'"
+                    [size]="mode === 'workflow' || fileNameColumn ? 15 : 34"
+                ></iqser-circle-button>
            </form>
        </div>
    </ng-template>
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss
@ -6,7 +6,7 @@

    &.file-name-column {
        height: 20px;
-        width: fit-content;
+        width: 100%;
        border-radius: 4px;
        font-size: 11px;
        line-height: 14px;
@ -81,6 +81,18 @@

        &.file-name-column-input {
            background: transparent;
+            border: none;
+            box-shadow: none;
+
+            form {
+                iqser-circle-button {
+                    margin-left: 15px;
+
+                    @media screen and (max-width: 1395px) {
+                        margin-left: 6px;
+                    }
+                }
+            }
        }

        &.workflow-edit-input {
@ -99,10 +111,6 @@
            iqser-circle-button {
                margin: 0 5px;

-                &:nth-child(2) {
-                    padding-left: 10px;
-                }
-
                &:last-child {
                    margin-right: -8px;
                }
@ -118,7 +126,6 @@
                margin-top: 0;
            }

-            .file-name-input,
            .workflow-input {
                width: 100%;
                padding-left: 2px;
@ -143,6 +150,10 @@
                }
            }

+            .file-name-input {
+                padding-left: 5px;
+            }
+
            .save {
                margin-left: 7px;
            }
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
@ -1,4 +1,4 @@
-import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
 import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
 import {
    BaseFormComponent,
@ -43,6 +43,7 @@ import { TranslateModule } from '@ngx-translate/core';
        NgTemplateOutlet,
        TranslateModule,
    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileAttributeComponent extends BaseFormComponent implements OnDestroy {
    isInEditMode = false;
@ -62,6 +63,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
                    this.file.fileId !== this.fileAttributesService.fileEdit())) ||
            !this.fileAttributesService.openAttributeEdits().length,
    );
+    @Input() width?: number;
+    #widthFactor = window.innerWidth >= 1800 ? 0.85 : 0.7;
+
+    get editFieldWidth(): string {
+        return this.width ? `${this.width * this.#widthFactor}px` : 'unset';
+    }

    get isDate(): boolean {
        return this.fileAttribute.type === FileAttributeConfigTypes.DATE;
@ -110,6 +117,15 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
        );
    }

+    @HostListener('window:resize')
+    onResize() {
+        if (window.innerWidth >= 1800) {
+            this.#widthFactor = 0.85;
+        } else {
+            this.#widthFactor = 0.7;
+        }
+    }
+
    @Debounce(60)
    @HostListener('document:click', ['$event'])
    clickOutside($event: MouseEvent) {
--- a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html
@ -1,17 +1,17 @@
-<ng-container *ngIf="componentContext$ | async as ctx">
-    <div>
-        <div
-            [attr.help-mode-key]="'document_list'"
-            [class.error]="file.isError"
-            [class.initial-processing]="file.isInitialProcessing || (ocrByDefault && !file.lastOCRTime)"
-            [matTooltip]="file.filename"
-            class="table-item-title"
-            matTooltipPosition="above"
-        >
-            {{ file.filename }}
-        </div>
+<div #filenameColumn>
+    <div
+        [attr.help-mode-key]="'document_list'"
+        [class.error]="file.isError"
+        [class.initial-processing]="file.isInitialProcessing || (ocrByDefault && !file.lastOCRTime)"
+        [matTooltip]="file.filename"
+        class="table-item-title"
+        matTooltipPosition="above"
+    >
+        {{ file.filename }}
    </div>
+</div>

+<ng-container *ngIf="componentContext$ | async as ctx">
    <div *ngIf="ctx.primaryAttribute" class="primary-attribute">
        <div class="small-label" *ngIf="file?.softDeletedTime; else editableFileAttribute">
            <div>
@ -26,6 +26,7 @@
                [dossier]="dossier"
                [fileAttribute]="ctx.primaryAttribute"
                [fileNameColumn]="true"
+                [width]="width"
            ></redaction-file-attribute>
        </ng-template>
    </div>
--- a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
@ -1,4 +1,14 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges,
+    ViewChild,
+} from '@angular/core';
 import { PrimaryFileAttributeService } from '@services/primary-file-attribute.service';
 import { Dossier, File, IFileAttributeConfig, TrashFile } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
@ -18,15 +28,18 @@ interface FileNameColumnContext {
 })
 export class FileNameColumnComponent extends ContextComponent<FileNameColumnContext> implements OnInit, OnChanges {
    readonly #reloadAttribute = new ReplaySubject<void>(1);
+    @ViewChild('filenameColumn', { static: true }) filenameColumn: ElementRef;
    @Input() file?: File | TrashFile;
    @Input() dossier: Dossier;
    @Input() dossierTemplateId: string;
    ocrByDefault: boolean;
+    width: number;

    constructor(
        private readonly _fileAttributeService: FileAttributesService,
        private readonly _primaryFileAttributeService: PrimaryFileAttributeService,
        private readonly _dossierTemplateService: DossierTemplatesService,
+        private readonly _changeDetectorRef: ChangeDetectorRef,
    ) {
        super();
    }
@ -37,6 +50,10 @@ export class FileNameColumnComponent extends ContextComponent<FileNameColumnCont
            map(() => this.#findPrimaryAttribute()),
        );
        super._initContext({ primaryAttribute: primaryAttribute$ });
+        const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            this.#updateItemWidth(entries[0]);
+        });
+        _observer.observe(this.filenameColumn.nativeElement);
    }

    ngOnChanges(changes: SimpleChanges): void {
@ -57,4 +74,9 @@ export class FileNameColumnComponent extends ContextComponent<FileNameColumnCont
        const fileAttributes = this._fileAttributeService.getFileAttributeConfig(this.dossierTemplateId);
        return fileAttributes?.fileAttributeConfigs.find(a => a.primaryAttribute);
    }
+
+    #updateItemWidth(resizeObserverEntry: ResizeObserverEntry) {
+        this.width = resizeObserverEntry.contentRect.width;
+        this._changeDetectorRef.markForCheck();
+    }
 }