RED-8748 - added DocuMine component view

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

@@ -0,0 +1,7 @@
+<button [class.active]="true" [matTooltipPosition]="'above'" [matTooltip]="'documine-export.document-tooltip' | translate" class="red-tab">
+    {{ 'documine-export.document' | translate }}
+</button>
+
+<button [matTooltipPosition]="'above'" [matTooltip]="'documine-export.export-tooltip' | translate" class="red-tab">
+    {{ 'documine-export.export' | translate }}
+</button>

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

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'redaction-documine-export',
+    templateUrl: './documine-export.component.html',
+})
+export class DocumineExportComponent {}

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

@@ -1,37 +1,32 @@
 <div class="page-header">
-    <div class="flex flex-1">
+    <div class="flex">
-        <redaction-view-switch></redaction-view-switch>
+        <redaction-view-switch *ngIf="!isDocumine"></redaction-view-switch>
+        <redaction-documine-export *ngIf="isDocumine"></redaction-documine-export>
     </div>
 
     <!-- TODO: mode this file preview header to a separate component-->
     <div #actionsWrapper class="flex-2 actions-container">
-        <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
+        <div class="assignee" [class.documine]="isDocumine">
+            <div class="vertical-line" *ngIf="isDocumine"></div>
 
-        <redaction-user-management></redaction-user-management>
+            <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
 
-        <ng-container *ngIf="permissionsService.isApprover(state.dossier()) && !!file.lastReviewer">
+            <redaction-user-management></redaction-user-management>
-            <div class="vertical-line"></div>
 
-            <div class="all-caps-label mr-16 ml-8 label">
+            <ng-container *ngIf="permissionsService.isApprover(state.dossier()) && !!file.lastReviewer">
-                {{ 'file-preview.last-assignee' | translate }}
+                <div class="vertical-line"></div>
-            </div>
 
-            <iqser-initials-avatar [user]="lastAssignee()" [withName]="true"></iqser-initials-avatar>
+                <div class="all-caps-label mr-16 ml-8 label">
-        </ng-container>
+                    {{ 'file-preview.last-assignee' | translate }}
+                </div>
 
-        <div class="vertical-line"></div>
+                <iqser-initials-avatar [user]="lastAssignee()" [withName]="true"></iqser-initials-avatar>
+            </ng-container>
+        </div>
+
+        <div class="vertical-line" *ngIf="!isDocumine"></div>
 
         <!-- TODO: mode these actions to a separate component -->
-        <iqser-circle-button
-            (action)="openComponentLogView()"
-            *allow="roles.getRss"
-            [attr.help-mode-key]="'editor_scm'"
-            [tooltip]="'file-preview.open-rss-view' | translate"
-            class="ml-8"
-            icon="red:extract"
-            tooltipPosition="below"
-            iqserDisableStopPropagation
-        ></iqser-circle-button>
 
         <redaction-file-actions
             [dossier]="state.dossier()"

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

@@ -4,6 +4,22 @@
 
 .actions-container {
     display: flex;
-    justify-content: flex-end;
     align-items: center;
+    justify-content: flex-end;
+
+    .assignee {
+        display: flex;
+        align-items: center;
+
+        &.documine {
+            flex: 1;
+        }
+    }
+}
+
+.vertical-line {
+    width: 1px;
+    height: 30px;
+    background-color: var(--iqser-separator);
+    margin: 0 16px;
 }

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

@@ -12,7 +12,15 @@ import {
     ViewChild,
 } from '@angular/core';
 import { Roles } from '@users/roles';
-import { CircleButtonTypes, HelpModeService, IqserDialog, IqserPermissionsService, isIqserDevMode, LoadingService } from '@iqser/common-ui';
+import {
+    CircleButtonTypes,
+    getConfig,
+    HelpModeService,
+    IqserDialog,
+    IqserPermissionsService,
+    isIqserDevMode,
+    LoadingService,
+} from '@iqser/common-ui';
 import { Bind, Debounce, OnDetach } from '@iqser/common-ui/lib/utils';
 import { File } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
@@ -32,7 +40,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { download } from '@utils/file-download-utils';
 import { firstValueFrom } from 'rxjs';
 import { FileManagementService } from '@services/files/file-management.service';
-import { StructuredComponentManagementDialogComponent } from '../../dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component';
 
 @Component({
     selector: 'redaction-file-header',
@@ -48,6 +55,7 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
 
     readonly lastAssignee = computed(() => this.getLastAssignee());
     readonly isIqserDevMode = isIqserDevMode();
+    readonly isDocumine = getConfig().IS_DOCUMINE;
     width: number;
     fullScreen = false;
 
@@ -73,7 +81,6 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
     ) {}
 
     ngOnInit() {
-        this.#openComponentLogDialogIfDefault();
         document.documentElement.addEventListener('fullscreenchange', this.fullscreenListener);
     }
 
@@ -103,11 +110,6 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
         return isApproved ? (isRss ? lastReviewer : lastApprover) : lastReviewer;
     }
 
-    openComponentLogView() {
-        const data = { file: this.state.file(), dictionaries: this.state.dictionaries };
-        this._iqserDialog.openDefault(StructuredComponentManagementDialogComponent, { data });
-    }
-
     async getTables() {
         this._loadingService.start();
 
@@ -203,12 +205,6 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
         }
     }
 
-    #openComponentLogDialogIfDefault() {
-        if (this.permissionsService.canViewRssDialog() && this._userPreferenceService.getOpenScmDialogByDefault()) {
-            this.openComponentLogView();
-        }
-    }
-
     @Debounce(30)
     private _updateItemWidth(entry: ResizeObserverEntry): void {
         this.width = entry.contentRect.width;

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

@@ -1,41 +1,43 @@
-<div
+<ng-container *ngIf="!isDocumine">
-    *ngIf="excludedPagesService.shown(); else selectAndFilter"
+    <div
-    class="right-title heading"
+        *ngIf="excludedPagesService.shown(); else selectAndFilter"
-    translate="file-preview.tabs.exclude-pages.label"
+        class="right-title heading"
->
+        translate="file-preview.tabs.exclude-pages.label"
-    <div>
+    >
-        <iqser-circle-button
-            (action)="excludedPagesService.toggle()"
-            [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
-            icon="iqser:close"
-            tooltipPosition="before"
-        ></iqser-circle-button>
-    </div>
-</div>
-
-<ng-template #selectAndFilter>
-    <div class="right-title heading">
-        {{ title() | translate }}
         <div>
-            <div
+            <iqser-circle-button
-                (click)="multiSelectService.activate()"
+                (action)="excludedPagesService.toggle()"
-                *ngIf="multiSelectService.enabled() && multiSelectService.inactive()"
+                [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
-                [attr.help-mode-key]="'workload_bulk_selection'"
+                icon="iqser:close"
-                class="all-caps-label primary pointer"
+                tooltipPosition="before"
-                translate="file-preview.tabs.annotations.select"
+            ></iqser-circle-button>
-            ></div>
-
-            <iqser-popup-filter
-                *ngIf="documentInfoService.hidden()"
-                [actionsTemplate]="annotationFilterActionTemplate"
-                [attr.help-mode-key]="'workload_filter'"
-                [fileId]="state.file()?.id"
-                [primaryFiltersSlug]="'primaryFilters'"
-                [secondaryFiltersSlug]="'secondaryFilters'"
-            ></iqser-popup-filter>
         </div>
     </div>
-</ng-template>
+
+    <ng-template #selectAndFilter>
+        <div class="right-title heading">
+            {{ title() | translate }}
+            <div>
+                <div
+                    (click)="multiSelectService.activate()"
+                    *ngIf="multiSelectService.enabled() && multiSelectService.inactive()"
+                    [attr.help-mode-key]="'workload_bulk_selection'"
+                    class="all-caps-label primary pointer"
+                    translate="file-preview.tabs.annotations.select"
+                ></div>
+
+                <iqser-popup-filter
+                    *ngIf="documentInfoService.hidden()"
+                    [actionsTemplate]="annotationFilterActionTemplate"
+                    [attr.help-mode-key]="'workload_filter'"
+                    [fileId]="state.file()?.id"
+                    [primaryFiltersSlug]="'primaryFilters'"
+                    [secondaryFiltersSlug]="'secondaryFilters'"
+                ></iqser-popup-filter>
+            </div>
+        </div>
+    </ng-template>
+</ng-container>
 
 <div class="right-content">
     <redaction-readonly-banner
@@ -92,11 +94,7 @@
                 <mat-icon svgIcon="iqser:nav-first"></mat-icon>
             </div>
 
-            <redaction-pages
+            <redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
-                (click)="pagesPanelActive = true"
-                [displayedAnnotations]="displayedAnnotations"
-                [pages]="displayedPages"
-            ></redaction-pages>
 
             <div
                 (click)="scrollQuickNavLast()"
@@ -109,7 +107,7 @@
             </div>
         </div>
 
-        <div class="content">
+        <div class="content" [class.documine-content]="isDocumine">
             <div
                 *ngIf="!viewModeService.isEarmarks()"
                 [attr.anotation-page-header]="pdf.currentPage()"

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

@@ -32,7 +32,14 @@
             width: 100%;
             display: flex;
             flex-direction: column;
+
+            &.documine-content {
+                width: var(--documine-workload-content-width);
+            }
         }
+
+        flex-direction: row-reverse;
+        justify-content: space-between;
     }
 
     .quick-navigation,
@@ -46,7 +53,7 @@
 
     .quick-navigation {
         border-right: 1px solid var(--iqser-separator);
-        min-width: 61px;
+        min-width: var(--qiuck-navigation-width);
         overflow: hidden;
         display: flex;
         flex-direction: column;

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

@@ -38,7 +38,6 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, OnDestroy {
     @ViewChild('annotationsElement') private readonly _annotationsElement: ElementRef;
     @ViewChild('quickNavigation') private readonly _quickNavigationElement: ElementRef;
-    readonly #isDocumine = getConfig().IS_DOCUMINE;
     readonly #isIqserDevMode = this._userPreferenceService.isIqserDevMode;
     displayedAnnotations = new Map<number, AnnotationWrapper[]>();
     displayedPages: number[] = [];
@@ -51,6 +50,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
     );
     protected readonly currentPageIsExcluded = computed(() => this.state.file().excludedPages.includes(this.pdf.currentPage()));
     protected readonly translations = workloadTranslations;
+    protected readonly isDocumine = getConfig().IS_DOCUMINE;
 
     constructor(
         readonly filterService: FilterService,
@@ -362,7 +362,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
             annotations = annotations.filter(a => !a.isRemoved);
         }
 
-        if (this.#isDocumine && !this.#isIqserDevMode) {
+        if (this.isDocumine && !this.#isIqserDevMode) {
             annotations = annotations.filter(a => !a.isOCR);
         }
 
@@ -476,6 +476,6 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
 
     get showAnalysisDisabledBanner() {
         const file = this.state.file();
-        return this.#isDocumine && file.excludedFromAutomaticAnalysis && file.workflowStatus !== WorkflowFileStatuses.APPROVED;
+        return this.isDocumine && file.excludedFromAutomaticAnalysis && file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 }

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

@@ -20,7 +20,6 @@ export class PagesComponent implements AfterViewInit {
     readonly #listingService = inject(AnnotationsListingService);
     protected readonly _pdf = inject(PdfViewer);
     @Input({ required: true }) pages: List<number>;
-    @Input({ required: true }) displayedAnnotations: Map<number, AnnotationWrapper[]>;
     readonly viewedPages$ = inject(ViewedPagesMapService).get$(this.#state.fileId);
 
     ngAfterViewInit() {

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

@@ -0,0 +1,92 @@
+<section class="dialog">
+    <div class="dialog-content" id="scm-edit">
+        <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>
+            <!--            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>-->
+            <!--            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>-->
+
+            <ng-container *ngFor="let entry of componentLogEntries; let index = index">
+                <div class="bold">{{ entry.name }}</div>
+                <div [id]="getValueCellId(index)">
+                    <iqser-editable-input
+                        (save)="saveEdit($event, entry.originalKey)"
+                        [canEdit]="canEdit"
+                        [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
+                        [editTooltip]="'component-log-dialog.actions.edit' | translate"
+                        [id]="'value-' + index"
+                        [parentId]="getValueCellId(index)"
+                        [saveTooltip]="'component-log-dialog.actions.save' | translate"
+                        [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"
+                        [attr.helpModeKey]="'scm_edit_DIALOG'"
+                    >
+                        <ng-container slot="editing">
+                            <iqser-circle-button
+                                (action)="undo(entry.originalKey)"
+                                *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
+                                [showDot]="true"
+                                [tooltip]="
+                                    'component-log-dialog.actions.undo'
+                                        | translate: { value: entry.componentValues[0].originalValue }
+                                        | replaceNbsp
+                                "
+                                [attr.help-mode-key]="'scm_undo_DIALOG'"
+                                class="ml-2"
+                                icon="red:undo"
+                            ></iqser-circle-button>
+                        </ng-container>
+                    </iqser-editable-input>
+                </div>
+                <!--                <div>{{ entry.componentValues[0].valueDescription }}</div>-->
+                <!--                <div>-->
+                <!--                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">-->
+                <!--                        <li-->
+                <!--                            *ngFor="let reference of entry.componentValues[0].entityReferences"-->
+                <!--                            [innerHTML]="-->
+                <!--                                'component-log-dialog.annotations'-->
+                <!--                                    | translate-->
+                <!--                                        : {-->
+                <!--                                              type: parseType(reference.displayValue),-->
+                <!--                                              page: reference.page,-->
+                <!--                                              ruleNumber: reference.entityRuleId-->
+                <!--                                          }-->
+                <!--                            "-->
+                <!--                            class="mb-8"-->
+                <!--                        ></li>-->
+                <!--                    </ul>-->
+
+                <!--                    <ng-template #noReferences>-</ng-template>-->
+                <!--                </div>-->
+            </ng-container>
+        </div>
+    </div>
+
+    <!--    <div class="dialog-actions">-->
+    <!--        <iqser-icon-button-->
+    <!--            (action)="exportJSON()"-->
+    <!--            [label]="'component-log-dialog.actions.export-json' | translate"-->
+    <!--            [submit]="true"-->
+    <!--            [type]="iconButtonTypes.primary"-->
+    <!--            [attr.help-mode-key]="'scm_export_DIALOG'"-->
+    <!--        ></iqser-icon-button>-->
+
+    <!--        <iqser-icon-button-->
+    <!--            (action)="exportXML()"-->
+    <!--            [label]="'component-log-dialog.actions.export-xml' | translate"-->
+    <!--            [type]="iconButtonTypes.primary"-->
+    <!--            [attr.help-mode-key]="'scm_export_DIALOG'"-->
+    <!--        ></iqser-icon-button>-->
+
+    <!--        <iqser-icon-button-->
+    <!--            (action)="exportAllInDossier()"-->
+    <!--            *ngIf="userPreferences.isIqserDevMode"-->
+    <!--            [type]="iconButtonTypes.primary"-->
+    <!--            label="Export All"-->
+    <!--        ></iqser-icon-button>-->
+
+    <!--        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>-->
+    <!--        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"-->
+    <!--        >{{ 'component-log-dialog.actions.display-by-default' | translate }}-->
+    <!--        </mat-checkbox>-->
+    <!--    </div>-->
+</section>

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

@@ -22,7 +22,7 @@
 
 .table {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(2, 1fr);
 
     > div {
         padding: 8px 10px;
@@ -50,9 +50,9 @@ ul {
 }
 
 .output-data > div:nth-child(8n + 9),
-.output-data > div:nth-child(8n + 10),
+.output-data > div:nth-child(8n + 10) {
-.output-data > div:nth-child(8n + 11),
+    //.output-data > div:nth-child(8n + 11),
-.output-data > div:nth-child(8n + 12) {
+    //.output-data > div:nth-child(8n + 12) {
     background: var(--iqser-grey-8);
 }
 

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

@@ -1,52 +1,20 @@
-import { ComponentLogEntry, Dictionary, IFile, WorkflowFileStatuses } from '@red/domain';
+import { Component, Input, signal } from '@angular/core';
-import { ChangeDetectionStrategy, Component, Inject, OnInit, signal } from '@angular/core';
+import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
-import { KeyValuePipe, NgForOf, NgIf } from '@angular/common';
+import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
-import {
-    CircleButtonComponent,
-    EditableInputComponent,
-    IconButtonComponent,
-    IconButtonTypes,
-    IqserDialogComponent,
-    LoadingService,
-} from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
 import { ComponentLogService } from '@services/files/component-log.service';
-import { UserPreferenceService } from '@users/user-preference.service';
 import { FilesMapService } from '@services/files/files-map.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
 
-interface ScmData {
-    file: IFile;
-    dictionaries: Dictionary[];
-}
-
-interface ScmResult {}
-
 @Component({
-    templateUrl: './structured-component-management-dialog.component.html',
+    selector: 'redaction-structured-component-management',
-    styleUrls: ['./structured-component-management-dialog.component.scss'],
+    templateUrl: './structured-component-management.component.html',
-    standalone: true,
+    styleUrls: ['/structured-component-management.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-        NgIf,
-        EditableInputComponent,
-        NgForOf,
-        KeyValuePipe,
-        TranslateModule,
-        CircleButtonComponent,
-        IconButtonComponent,
-        MatCheckboxModule,
-        MatDialogModule,
-        ReplaceNbspPipe,
-    ],
 })
-export class StructuredComponentManagementDialogComponent
+export class StructuredComponentManagementComponent {
-    extends IqserDialogComponent<StructuredComponentManagementDialogComponent, ScmData, ScmResult>
+    @Input() file: File;
-    implements OnInit
+    @Input() dictionaries: Dictionary[];
-{
+
     readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
     readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
     readonly iconButtonTypes = IconButtonTypes;
@@ -56,13 +24,10 @@ export class StructuredComponentManagementDialogComponent
         private readonly _filesMapService: FilesMapService,
         private readonly _loadingService: LoadingService,
         readonly userPreferences: UserPreferenceService,
-        @Inject(MAT_DIALOG_DATA) readonly data: ScmData,
+    ) {}
-    ) {
-        super();
-    }
 
     get canEdit() {
-        return this.data.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
+        return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 
     async ngOnInit(): Promise<void> {
@@ -74,22 +39,18 @@ export class StructuredComponentManagementDialogComponent
     }
 
     exportJSON() {
-        return firstValueFrom(
+        return firstValueFrom(this._componentLogService.exportJSON(this.file.dossierTemplateId, this.file.dossierId, this.file));
-            this._componentLogService.exportJSON(this.data.file.dossierTemplateId, this.data.file.dossierId, this.data.file),
-        );
     }
 
     exportXML() {
-        return firstValueFrom(
+        return firstValueFrom(this._componentLogService.exportXML(this.file.dossierTemplateId, this.file.dossierId, this.file));
-            this._componentLogService.exportXML(this.data.file.dossierTemplateId, this.data.file.dossierId, this.data.file),
-        );
     }
 
     async exportAllInDossier() {
-        const allFilesInDossier = this._filesMapService.get(this.data.file.dossierId);
+        const allFilesInDossier = this._filesMapService.get(this.file.dossierId);
         for (const file of allFilesInDossier) {
-            await firstValueFrom(this._componentLogService.exportJSON(this.data.file.dossierTemplateId, file.dossierId, file));
+            await firstValueFrom(this._componentLogService.exportJSON(this.file.dossierTemplateId, file.dossierId, file));
-            await firstValueFrom(this._componentLogService.exportXML(this.data.file.dossierTemplateId, file.dossierId, file));
+            await firstValueFrom(this._componentLogService.exportXML(this.file.dossierTemplateId, file.dossierId, file));
         }
     }
 
@@ -109,24 +70,20 @@ export class StructuredComponentManagementDialogComponent
 
     async undo(originalKey: string) {
         this._loadingService.start();
-        await firstValueFrom(this._componentLogService.revertOverride(this.data.file.dossierId, this.data.file.fileId, [originalKey]));
+        await firstValueFrom(this._componentLogService.revertOverride(this.file.dossierId, this.file.fileId, [originalKey]));
         await this.#loadData();
     }
 
     async saveEdit(event: string, originalKey: string) {
         this._loadingService.start();
-        await firstValueFrom(this._componentLogService.override(this.data.file.dossierId, this.data.file.fileId, { [originalKey]: event }));
+        await firstValueFrom(this._componentLogService.override(this.file.dossierId, this.file.fileId, { [originalKey]: event }));
         await this.#loadData();
     }
 
     async #loadData(): Promise<void> {
         this._loadingService.start();
         const componentLogData = await firstValueFrom(
-            this._componentLogService.getComponentLogData(
+            this._componentLogService.getComponentLogData(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId),
-                this.data.file.dossierTemplateId,
-                this.data.file.dossierId,
-                this.data.file.fileId,
-            ),
         );
         this.#updateDisplayValue(componentLogData);
         this.componentLogData.set(componentLogData);
@@ -134,7 +91,7 @@ export class StructuredComponentManagementDialogComponent
     }
 
     #updateDisplayValue(componentLogs: ComponentLogEntry[]) {
-        const dictionaries = this.data.dictionaries;
+        const dictionaries = this.dictionaries;
         for (const componentLog of componentLogs) {
             let foundDictionary: Dictionary;
             for (const reference of componentLog.componentValues[0].entityReferences) {

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

@@ -1,97 +0,0 @@
-<section class="dialog">
-    <div [translate]="'component-log-dialog.title'" class="dialog-header heading-l"></div>
-
-    <hr />
-    <div class="dialog-content" id="scm-edit">
-        <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>
-            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>
-            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>
-
-            <ng-container *ngFor="let entry of componentLogEntries; let index = index">
-                <div class="bold">{{ entry.name }}</div>
-                <div [id]="getValueCellId(index)">
-                    <iqser-editable-input
-                        (save)="saveEdit($event, entry.originalKey)"
-                        [canEdit]="canEdit"
-                        [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
-                        [editTooltip]="'component-log-dialog.actions.edit' | translate"
-                        [id]="'value-' + index"
-                        [parentId]="getValueCellId(index)"
-                        [saveTooltip]="'component-log-dialog.actions.save' | translate"
-                        [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"
-                        [attr.helpModeKey]="'scm_edit_DIALOG'"
-                    >
-                        <ng-container slot="editing">
-                            <iqser-circle-button
-                                (action)="undo(entry.originalKey)"
-                                *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
-                                [showDot]="true"
-                                [tooltip]="
-                                    'component-log-dialog.actions.undo'
-                                        | translate: { value: entry.componentValues[0].originalValue }
-                                        | replaceNbsp
-                                "
-                                [attr.help-mode-key]="'scm_undo_DIALOG'"
-                                class="ml-2"
-                                icon="red:undo"
-                            ></iqser-circle-button>
-                        </ng-container>
-                    </iqser-editable-input>
-                </div>
-                <div>{{ entry.componentValues[0].valueDescription }}</div>
-                <div>
-                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">
-                        <li
-                            *ngFor="let reference of entry.componentValues[0].entityReferences"
-                            [innerHTML]="
-                                'component-log-dialog.annotations'
-                                    | translate
-                                        : {
-                                              type: parseType(reference.displayValue),
-                                              page: reference.page,
-                                              ruleNumber: reference.entityRuleId
-                                          }
-                            "
-                            class="mb-8"
-                        ></li>
-                    </ul>
-
-                    <ng-template #noReferences>-</ng-template>
-                </div>
-            </ng-container>
-        </div>
-    </div>
-
-    <div class="dialog-actions">
-        <iqser-icon-button
-            (action)="exportJSON()"
-            [label]="'component-log-dialog.actions.export-json' | translate"
-            [submit]="true"
-            [type]="iconButtonTypes.primary"
-            [attr.help-mode-key]="'scm_export_DIALOG'"
-        ></iqser-icon-button>
-
-        <iqser-icon-button
-            (action)="exportXML()"
-            [label]="'component-log-dialog.actions.export-xml' | translate"
-            [type]="iconButtonTypes.primary"
-            [attr.help-mode-key]="'scm_export_DIALOG'"
-        ></iqser-icon-button>
-
-        <iqser-icon-button
-            (action)="exportAllInDossier()"
-            *ngIf="userPreferences.isIqserDevMode"
-            [type]="iconButtonTypes.primary"
-            label="Export All"
-        ></iqser-icon-button>
-
-        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>
-        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"
-            >{{ 'component-log-dialog.actions.display-by-default' | translate }}
-        </mat-checkbox>
-    </div>
-
-    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
-</section>

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

@@ -5,10 +5,14 @@
 
     <div class="content-inner">
         <div class="content-container">
-            <!-- Here comes PDF Viewer-->
+            <redaction-structured-component-management
+                *ngIf="isDocumine"
+                [file]="file"
+                [dictionaries]="state.dictionaries"
+            ></redaction-structured-component-management>
         </div>
 
-        <div class="right-container">
+        <div class="right-container" [class.documine-container]="isDocumine">
             <redaction-file-preview-right-container
                 [iqserDisableStopPropagation]="state.isEditingReviewer()"
             ></redaction-file-preview-right-container>

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss

@@ -1,10 +1,3 @@
-.vertical-line {
-    width: 1px;
-    height: 30px;
-    background-color: var(--iqser-separator);
-    margin: 0 16px;
-}
-
 .content-inner {
     position: absolute;
 }
@@ -15,12 +8,16 @@
 
 .right-container {
     padding: 0;
-    width: 350px;
+    width: var(--workload-width);
-    min-width: 350px;
+    min-width: var(--workload-width);
     position: relative;
     display: flex;
     flex-direction: column;
 
+    &.documine-container {
+        width: 70%;
+    }
+
     ::ng-deep .right-title {
         min-height: 70px;
         display: flex;

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts

@@ -73,7 +73,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     })
     private readonly _filterTemplate: TemplateRef<unknown>;
     #loadAllAnnotationsEnabled = false;
-    readonly #isDocumine = getConfig().IS_DOCUMINE;
+    protected readonly isDocumine = getConfig().IS_DOCUMINE;
 
     constructor(
         readonly pdf: PdfViewer,
@@ -289,6 +289,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     async ngOnInit(): Promise<void> {
+        document.getElementById('viewer').classList.add(this.isDocumine ? 'documine-viewer' : 'redaction-viewer');
         const file = this.state.file();
 
         if (!file) {
@@ -713,7 +714,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     #getRedactTextDialog(data: RedactTextData) {
-        if (this.#isDocumine) {
+        if (this.isDocumine) {
             return this._iqserDialog.openDefault(AddAnnotationDialogComponent, { data });
         }
 

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -71,6 +71,8 @@ import { FilePreviewDialogService } from './services/file-preview-dialog.service
 import { ManualRedactionService } from './services/manual-redaction.service';
 import { TablesService } from './services/tables.service';
 import { FileHeaderComponent } from './components/file-header/file-header.component';
+import { DocumineExportComponent } from './components/documine-export/documine-export.component';
+import { StructuredComponentManagementComponent } from './components/structured-component-management/structured-component-management.component';
 
 const routes: IqserRoutes = [
     {
@@ -121,6 +123,8 @@ const components = [
     FilePreviewRightContainerComponent,
     ReadonlyBannerComponent,
     FileHeaderComponent,
+    DocumineExportComponent,
+    StructuredComponentManagementComponent,
 ];
 
 @NgModule({

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

@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -311,14 +308,14 @@
           "error": "Rekategorisierung des Bildes gescheitert: {error}",
           "success": "Bild wurde einer neuen Kategorie zugeordnet."
         },
-        "remove": {
-          "error": "Fehler beim Entfernen der Schwärzung: {error}",
-          "success": "Schwärzung entfernt!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -331,15 +328,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -358,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Redaction}} basierend auf Wörterbuch",
     "imported": "Imported",
-    "manual": "Manual",
     "ner": "Redaktion basierend auf KI",
     "rule": "Schwärzung basierend auf Regel {rule}"
   },
@@ -372,6 +368,9 @@
     "skipped": "Übersprungen",
     "text-highlight": "Earmark"
   },
+  "annotation": {
+    "pending": "(Pending analysis)"
+  },
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo to: {value}"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
+    }
-    "title": "Component view"
   },
   "component-rules-screen": {
     "error": {
@@ -577,18 +568,14 @@
     "warning": "Achtung: Diese Aktion kann nicht rückgängig gemacht werden!"
   },
   "confirmation-dialog": {
-    "approve-file": {
-      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
-      "title": "Warnung!"
-    },
     "approve-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new redactions.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
+    "approve-file": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -597,6 +584,10 @@
       "question": "Analysis required to detect new redactions for at least one file.",
       "title": "Warning"
     },
+    "approve-multiple-files": {
+      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+      "title": "Warnung!"
+    },
     "assign-file-to-me": {
       "question": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -771,6 +762,12 @@
     "save": "Dokumenteninformation speichern",
     "title": "Datei-Attribute anlegen"
   },
+  "documine-export": {
+    "document": "",
+    "document-tooltip": "",
+    "export": "",
+    "export-tooltip": ""
+  },
   "dossier-attribute-types": {
     "date": "Datum",
     "image": "Bild",
@@ -941,13 +938,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "reanalyse-dossier": {
       "error": "Die Dateien konnten nicht für eine Reanalyse eingeplant werden. Bitte versuchen Sie es erneut.",
       "success": "Dateien für Reanalyse vorgesehen."
     },
+    "reanalyse": {
+      "action": "Datei analysieren"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1016,14 +1013,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1059,6 +1048,14 @@
       "title": "{length} {length, plural, one{Dossier-Vorlage} other{Dossier-Vorlagen}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1244,15 +1241,6 @@
       "title": "{length} {length, plural, one{Wörterbuch} other{Wörterbücher}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1267,19 +1255,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1297,12 +1294,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1313,6 +1304,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "Auf dieser Seite gibt es keine Anmerkungen."
     },
-    "open-rss-view": "Open Structured Component Management View",
     "quick-nav": {
       "jump-first": "Zur ersten Seite springen",
       "jump-last": "Zur letzten Seite springen"
@@ -1528,15 +1524,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1546,6 +1533,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1816,13 +1812,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1836,6 +1825,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1853,7 +1843,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1861,6 +1850,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1952,16 +1948,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reason...",
         "revert-text": "Revert to selected text",
         "selected-text": "Selected text:",
-        "text": "Text:",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "{text}",
-        "list-item-false-positive": "<b>{text}</b> as <i>{type}</i> in the context: <b>{context}</b>",
-        "list-item-false-recommendation": "<b>{text}</b> as <i>{type}</i>",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend the selected term in any document of this dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "Do not redact the selected terms at this position in the current document.",
             "label": "Remove here"
           }
-        },
+        }
-        "redacted-text": "Selected {type}",
-        "redacted-text-bulk": "Selected {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
       },
       "title": "Remove {type, select, redaction{redaction} recommendation{recommendation} other{hint}}",
       "title-bulk": "Remove {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
@@ -2191,12 +2181,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2220,6 +2204,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} {length, plural, one{Suchergebnis} other{Suchergebnisse}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Gestern"
-}
+}

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

@@ -355,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "Based on dictionary",
     "imported": "Imported",
-    "manual": "Manual",
     "ner": "Based on AI",
     "rule": "Based on rule"
   },
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo to: {value}"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
+    }
-    "title": "Component view"
   },
   "component-rules-screen": {
     "error": {
@@ -771,6 +762,12 @@
     "save": "Save document info",
     "title": "Enter file attributes"
   },
+  "documine-export": {
+    "document": "Document",
+    "document-tooltip": "Document",
+    "export": "Export",
+    "export-tooltip": "Export"
+  },
   "dossier-attribute-types": {
     "date": "Date",
     "image": "Image",
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "There have been no changes to this page."
     },
-    "open-rss-view": "Open Structured Component Management View",
     "quick-nav": {
       "jump-first": "Jump to first page",
       "jump-last": "Jump to last page"
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reason...",
         "revert-text": "Revert to selected text",
         "selected-text": "Selected text:",
-        "text": "Text:",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "{text}",
-        "list-item-false-positive": "<b>{text}</b> as <i>{type}</i> in the context: <b>{context}</b>",
-        "list-item-false-recommendation": "<b>{text}</b> as <i>{type}</i>",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend the selected term in any document of this dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "Do not redact the selected terms at this position in the current document.",
             "label": "Remove here"
           }
-        },
+        }
-        "redacted-text": "Selected {type}",
-        "redacted-text-bulk": "Selected {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
       },
       "title": "Remove {type, select, redaction{redaction} recommendation{recommendation} other{hint}}",
       "title-bulk": "Remove {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Yesterday"
-}
+}

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

@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "Analysis disabled",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -311,14 +308,14 @@
           "error": "Rekategorisierung des Bildes gescheitert: {error}",
           "success": "Bild wurde einer neuen Kategorie zugeordnet."
         },
-        "remove": {
-          "error": "Fehler beim Entfernen der Schwärzung: {error}",
-          "success": "Schwärzung entfernt!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -331,15 +328,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -358,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Redaction}} basierend auf Wörterbuch",
     "imported": "Annotation is imported",
-    "manual": "Manual",
     "ner": "Redaktion basierend auf KI",
     "rule": "Schwärzung basierend auf Regel {rule}"
   },
@@ -372,6 +368,9 @@
     "skipped": "Übersprungen",
     "text-highlight": "Earmark"
   },
+  "annotation": {
+    "pending": "(Pending analysis)"
+  },
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
+    }
-    "title": "Structured Component Management"
   },
   "component-rules-screen": {
     "error": {
@@ -577,18 +568,14 @@
     "warning": "Achtung: Diese Aktion kann nicht rückgängig gemacht werden!"
   },
   "confirmation-dialog": {
-    "approve-file": {
-      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
-      "title": "Warnung!"
-    },
     "approve-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new components.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
+    "approve-file": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -597,6 +584,10 @@
       "question": "Analysis required to detect new components for at least one file.",
       "title": "Warning"
     },
+    "approve-multiple-files": {
+      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+      "title": "Warnung!"
+    },
     "assign-file-to-me": {
       "question": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -771,6 +762,12 @@
     "save": "Dokumenteninformation speichern",
     "title": "Datei-Attribute anlegen"
   },
+  "documine-export": {
+    "document": "",
+    "document-tooltip": "",
+    "export": "",
+    "export-tooltip": ""
+  },
   "dossier-attribute-types": {
     "date": "Datum",
     "image": "Bild",
@@ -941,13 +938,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "reanalyse-dossier": {
       "error": "Die Dateien konnten nicht für eine Reanalyse eingeplant werden. Bitte versuchen Sie es erneut.",
       "success": "Dateien für Reanalyse vorgesehen."
     },
+    "reanalyse": {
+      "action": "Datei analysieren"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1016,14 +1013,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1059,6 +1048,14 @@
       "title": "{length} dossier {length, plural, one{template} other{templates}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1244,15 +1241,6 @@
       "title": "{length} {length, plural, one{entity} other{entities}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1267,19 +1255,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1297,12 +1294,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1313,6 +1304,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "Auf dieser Seite gibt es keine Anmerkungen."
     },
-    "open-rss-view": "Open component view",
     "quick-nav": {
       "jump-first": "Zur ersten Seite springen",
       "jump-last": "Zur letzten Seite springen"
@@ -1528,15 +1524,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1546,6 +1533,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1816,13 +1812,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1836,6 +1825,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1853,7 +1843,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1861,6 +1850,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1952,16 +1948,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "Processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reasons...",
         "revert-text": "",
         "selected-text": "Selected text:",
-        "text": "",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "",
-        "list-item-false-positive": "",
-        "list-item-false-recommendation": "",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend ''{value}'' as {type} in any document of the current dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "",
             "label": "Remove here"
           }
-        },
+        }
-        "redacted-text": "",
-        "redacted-text-bulk": ""
       },
       "title": "Remove {type}",
       "title-bulk": ""
@@ -2191,12 +2181,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2220,6 +2204,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} search {length, plural, one{result} other{results}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Gestern"
-}
+}

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

@@ -355,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Annotation}} based on dictionary",
     "imported": "Annotation is imported",
-    "manual": "Manual",
     "ner": "Annotation based on AI",
     "rule": "Annotation based on rule {rule}"
   },
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo to: {value}"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
+    }
-    "title": "Component view"
   },
   "component-rules-screen": {
     "error": {
@@ -771,6 +762,12 @@
     "save": "Save document info",
     "title": "Enter file attributes"
   },
+  "documine-export": {
+    "document": "Document",
+    "document-tooltip": "Document",
+    "export": "Export",
+    "export-tooltip": "Export"
+  },
   "dossier-attribute-types": {
     "date": "Date",
     "image": "Image",
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "There have been no changes to this page."
     },
-    "open-rss-view": "Open component view",
     "quick-nav": {
       "jump-first": "Jump to first page",
       "jump-last": "Jump to last page"
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reasons...",
         "revert-text": "",
         "selected-text": "Selected text:",
-        "text": "",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "",
-        "list-item-false-positive": "",
-        "list-item-false-recommendation": "",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend ''{value}'' as {type} in any document of the current dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "",
             "label": "Remove here"
           }
-        },
+        }
-        "redacted-text": "",
-        "redacted-text-bulk": ""
       },
       "title": "Remove {type}",
       "title-bulk": ""
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Yesterday"
-}
+}

apps/red-ui/src/styles.scss

@@ -163,12 +163,15 @@ $dark-accent-10: darken(vars.$accent, 10%);
 
 body {
     --workload-width: 350px;
+    --documine-workload-content-width: 200px;
+    --structured-component-management-width: 30%;
+    --qiuck-navigation-width: 61px;
     --iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
     --iqser-app-name-font-size: 13px;
     --iqser-logo-size: 28px;
 }
 
-#viewer {
+.redaction-viewer {
     visibility: hidden;
     width: calc(100% - var(--workload-width));
     height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
@@ -176,3 +179,14 @@ body {
     left: 0;
     position: absolute;
 }
+
+.documine-viewer {
+    visibility: hidden;
+    width: calc(
+        100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width)
+    );
+    height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
+    bottom: 0;
+    right: calc(var(--qiuck-navigation-width) + 1px);
+    position: absolute;
+}