RED-8748 - WIP on component management view

apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html

@@ -2,6 +2,16 @@
     {{ 'documine-export.document' | translate }}
 </button>
 
-<button [matTooltipPosition]="'above'" [matTooltip]="'documine-export.export-tooltip' | translate" class="red-tab">
+<button
+    [matMenuTriggerFor]="bulkComponentDownloadMenu"
+    [matTooltipPosition]="'above'"
+    [matTooltip]="'documine-export.export-tooltip' | translate"
+    class="red-tab"
+>
     {{ 'documine-export.export' | translate }}
 </button>
+
+<mat-menu #bulkComponentDownloadMenu="matMenu">
+    <button (click)="downloadComponentAsJSON()" [innerHTML]="'component-download.json' | translate" mat-menu-item></button>
+    <button (click)="downloadComponentAsXML()" [innerHTML]="'component-download.xml' | translate" mat-menu-item></button>
+</mat-menu>

apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts

@@ -1,7 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { Dossier } from '@red/domain';
+import { ComponentLogService } from '@services/files/component-log.service';
 
 @Component({
     selector: 'redaction-documine-export',
     templateUrl: './documine-export.component.html',
 })
-export class DocumineExportComponent {}
+export class DocumineExportComponent {
+    @Input() dossier: Dossier;
+
+    constructor(private readonly _componentLogService: ComponentLogService) {}
+
+    downloadComponentAsJSON() {
+        return firstValueFrom(this._componentLogService.exportJSON(this.dossier.dossierTemplateId, this.dossier.dossierId));
+    }
+
+    async downloadComponentAsXML() {
+        return firstValueFrom(this._componentLogService.exportXML(this.dossier.dossierTemplateId, this.dossier.dossierId));
+    }
+}

apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html

@@ -1,7 +1,7 @@
 <div class="page-header">
     <div class="flex">
         <redaction-view-switch *ngIf="!isDocumine"></redaction-view-switch>
-        <redaction-documine-export *ngIf="isDocumine"></redaction-documine-export>
+        <redaction-documine-export *ngIf="isDocumine" [dossier]="state.dossier()"></redaction-documine-export>
     </div>
 
     <!-- TODO: mode this file preview header to a separate component-->

apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html

@@ -3,6 +3,16 @@
     <iqser-popup-filter [primaryFiltersSlug]="'primaryFilters'" [secondaryFiltersSlug]="'secondaryFilters'"></iqser-popup-filter>
 </div>
 
+<div *ngIf="componentLogData() as componentLogEntries" class="table">
+    <div class="table-header">{{ 'component-management.table-header.component' | translate }}</div>
+    <div class="table-header">{{ 'component-management.table-header.value' | translate }}</div>
+
+    <ng-container *ngFor="let entry of componentLogEntries">
+        <div>{{ entry.name }}</div>
+        <div>{{ entry.componentValues[0].value ?? entry.componentValues[0].originalValue }}</div>
+    </ng-container>
+</div>
+
 <!--<div *ngIf="componentLogData() as componentLogEntries" class="table output-data">-->
 <!--    <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>-->
 <!--    <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>-->

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

@@ -6,7 +6,7 @@
     min-height: 36px;
     background: var(--iqser-grey-8);
     border-bottom: 1px solid var(--iqser-separator);
-    padding: 0 10px;
+    padding: 0 10px 0 26px;
 
     ::ng-deep span {
         color: var(--iqser-text);
@@ -16,6 +16,34 @@
     }
 }
 
+.table {
+    display: grid;
+    grid-template-columns: 40% 1fr;
+    font-size: 12px;
+    overflow: scroll;
+    height: calc(100% - 40px);
+
+    div {
+        padding: 10px 0 10px 0;
+
+        &:not(:nth-last-child(-n + 2)) {
+            border-bottom: 1px solid var(--iqser-separator);
+        }
+
+        &:nth-of-type(odd) {
+            margin-left: 26px;
+        }
+
+        &:nth-of-type(even) {
+            margin-right: 26px;
+        }
+    }
+
+    .table-header {
+        font-weight: 600;
+    }
+}
+
 //.rss-row {
 //    display: flex;
 //    flex-direction: row;

apps/red-ui/src/assets/i18n/redact/de.json

@@ -498,20 +498,12 @@
     "tooltip": "",
     "xml": ""
   },
-  "component-log-dialog": {
-    "actions": {
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo to: {value}"
-    },
-    "table-header": {
-      "component": "Component",
-      "value": "Value"
-    }
-  },
   "component-management": {
-    "components": ""
+    "components": "",
+    "table-header": {
+      "component": "",
+      "value": ""
+    }
   },
   "component-rules-screen": {
     "error": {

apps/red-ui/src/assets/i18n/redact/en.json

@@ -498,21 +498,13 @@
     "tooltip": "",
     "xml": ""
   },
-  "component-log-dialog": {
+  "component-management": {
-    "actions": {
+    "components": "Components",
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo to: {value}"
-    },
     "table-header": {
       "component": "Component",
       "value": "Value"
     }
   },
-  "component-management": {
-    "components": "Components"
-  },
   "component-rules-screen": {
     "error": {
       "generic": ""

apps/red-ui/src/assets/i18n/scm/de.json

@@ -498,20 +498,12 @@
     "tooltip": "Component download",
     "xml": "Download as XML"
   },
-  "component-log-dialog": {
-    "actions": {
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo"
-    },
-    "table-header": {
-      "component": "Component",
-      "value": "Value"
-    }
-  },
   "component-management": {
-    "components": ""
+    "components": "",
+    "table-header": {
+      "component": "",
+      "value": ""
+    }
   },
   "component-rules-screen": {
     "error": {

apps/red-ui/src/assets/i18n/scm/en.json

@@ -498,21 +498,13 @@
     "tooltip": "Component download",
     "xml": "Download as XML"
   },
-  "component-log-dialog": {
+  "component-management": {
-    "actions": {
+    "components": "Components",
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo to: {value}"
-    },
     "table-header": {
       "component": "Component",
       "value": "Value"
     }
   },
-  "component-management": {
-    "components": "Components"
-  },
   "component-rules-screen": {
     "error": {
       "generic": "Something went wrong... Component rules update failed!"