RED-7790: File attributes editing: take into account Read-Only setting

apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.html

@@ -1,19 +1,22 @@
 <ng-container *ngIf="configService.listingMode$ | async as mode">
     <div
-        (mousedown)="handleClick($event)"
         (click)="editFileAttribute($event)"
+        (mousedown)="handleClick($event)"
         [ngClass]="{ 'workflow-attribute': mode === 'workflow', 'file-name-column': fileNameColumn }"
         class="file-attribute"
     >
         <div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value">
+            <mat-icon *ngIf="!fileAttribute.editable" svgIcon="red:read-only"></mat-icon>
+            <div>
                 <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
                 <span
                     *ngIf="!isDate; else date"
-                [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
                     [matTooltip]="fileAttributeValue"
+                    [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
                 >
                     {{ fileAttributeValue || '-' }}</span
                 >
+            </div>
             <ng-template #date>
                 <span [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
                     {{ fileAttributeValue ? (fileAttributeValue | date: 'd MMM yyyy') : '-' }}</span
@@ -25,7 +28,8 @@
             *ngIf="
                 (fileAttributesService.isEditingFileAttribute() === false || isInEditMode) &&
                 !file.isInitialProcessing &&
-                permissionsService.canEditFileAttributes(file, dossier)
+                permissionsService.canEditFileAttributes(file, dossier) &&
+                fileAttribute.editable
             "
         >
             <div

apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.scss

@@ -25,6 +25,17 @@
 
     .value {
         z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        mat-icon {
+            min-width: 12px;
+            width: 12px;
+            height: 12px;
+            line-height: 12px;
+            opacity: 0.7;
+        }
     }
 
     .workflow-value {

apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts

@@ -49,6 +49,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
     @Input() file!: File;
     @Input() dossier!: Dossier;
     @Input() fileNameColumn = false;
+    readonlyAttrs: string[] = [];
     readonly #subscriptions = new Subscription();
     readonly #shouldClose = computed(
         () =>
@@ -187,6 +188,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
 
     #initFileAttributes() {
         const configs = this.fileAttributesService.getFileAttributeConfig(this.file.dossierTemplateId).fileAttributeConfigs;
+        this.readonlyAttrs = configs.filter(config => config.editable === false).map(config => config.id);
         configs.forEach(config => {
             if (!this.file.fileAttributes.attributeIdToValue[config.id]) {
                 this.file.fileAttributes.attributeIdToValue[config.id] = null;
@@ -199,7 +201,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
         const fileAttributes = this.file.fileAttributes.attributeIdToValue;
         Object.keys(fileAttributes).forEach(key => {
             const attrValue = fileAttributes[key];
-            config[key] = [dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue];
+            config[key] = [
+                {
+                    value: dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue,
+                    disabled: this.readonlyAttrs.includes(key),
+                },
+            ];
         });
         return this._formBuilder.group(config, {
             validators: [this.#checkEmptyInput(), this.#checkDate()],

apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss

@@ -32,14 +32,6 @@
         font-weight: 600;
     }
 
-    .value-content {
-        .value {
-        }
-
-        .actions {
-        }
-    }
-
     .table-header {
         margin: 10px 0;
         border-bottom: 1px solid var(--iqser-separator);

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html

@@ -12,7 +12,6 @@
 
         <iqser-dynamic-input
             *ngFor="let attr of customAttributes"
-            [canEditInput]="!disabled"
             [classList]="'w-full'"
             [formControlName]="attr.id"
             [id]="attr.id"

libs/common-ui

@@ -1 +1 @@
-Subproject commit df01d0a910fe443a11904b74055495ebc5ffc647
+Subproject commit bfaae5adf6522a099a55c7f3546dee3b542c4c33