RED-8748 - updated DocuMine component view based on active tenant

This commit is contained in:
Valentin Mihai 2024-04-08 13:59:14 +03:00
parent 5e548798a5
commit a41f4a6639
14 changed files with 281 additions and 186 deletions

View File

@ -26,27 +26,22 @@
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>
<ng-container *ngTemplateOutlet="annotationsFilter"></ng-container>
</div>
</div>
</ng-template>
</ng-container>
<div class="right-content">
<redaction-readonly-banner
*ngIf="showAnalysisDisabledBanner; else readOnlyBanner"
[customTranslation]="translations.analysisDisabled"
></redaction-readonly-banner>
<ng-template #readOnlyBanner>
<redaction-readonly-banner *ngIf="state.isReadonly()"></redaction-readonly-banner>
</ng-template>
<ng-container *ngIf="!isDocumine">
<redaction-readonly-banner
*ngIf="showAnalysisDisabledBanner; else readOnlyBanner"
[customTranslation]="translations.analysisDisabled"
></redaction-readonly-banner>
<ng-template #readOnlyBanner>
<redaction-readonly-banner *ngIf="state.isReadonly()"></redaction-readonly-banner>
</ng-template>
</ng-container>
<div *ngIf="multiSelectService.active()" class="multi-select">
<div class="selected-wrapper">
@ -90,6 +85,7 @@
(click)="scrollQuickNavFirst()"
[class.disabled]="pdf.currentPage() === 1"
[matTooltip]="'file-preview.quick-nav.jump-first' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
@ -102,6 +98,7 @@
(click)="scrollQuickNavLast()"
[class.disabled]="pdf.currentPage() === state.file()?.numberOfPages"
[matTooltip]="'file-preview.quick-nav.jump-last' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
@ -109,7 +106,7 @@
</div>
</div>
<div class="content" [class.documine-content]="isDocumine">
<div class="content" [class.documine-width]="isDocumine">
<div
*ngIf="!viewModeService.isEarmarks()"
[attr.anotation-page-header]="pdf.currentPage()"
@ -117,21 +114,23 @@
class="workload-separator"
>
<span *ngIf="!!pdf.currentPage()" class="flex-align-items-center">
<iqser-circle-button
(action)="excludedPagesService.toggle()"
*ngIf="currentPageIsExcluded()"
[size]="14"
[tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
class="mr-10 primary"
icon="red:exclude-pages"
tooltipPosition="above"
></iqser-circle-button>
<ng-container *ngIf="!isDocumine; else documineHeader">
<iqser-circle-button
(action)="excludedPagesService.toggle()"
*ngIf="currentPageIsExcluded()"
[size]="14"
[tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
class="mr-10 primary"
icon="red:exclude-pages"
tooltipPosition="above"
></iqser-circle-button>
<span
[translateParams]="{ page: pdf.currentPage(), count: activeAnnotations.length }"
[translate]="'page'"
class="all-caps-label"
></span>
<span
[translateParams]="{ page: pdf.currentPage(), count: activeAnnotations.length }"
[translate]="'page'"
class="all-caps-label"
></span>
</ng-container>
</span>
<div *ngIf="multiSelectService.active()">
@ -229,3 +228,19 @@
iqserPreventDefault
></iqser-circle-button>
</ng-template>
<ng-template #documineHeader>
<span [translate]="'annotations'"></span>
<ng-container *ngTemplateOutlet="annotationsFilter"></ng-container>
</ng-template>
<ng-template #annotationsFilter>
<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>
</ng-template>

View File

@ -33,8 +33,27 @@
display: flex;
flex-direction: column;
&.documine-content {
width: var(--documine-workload-content-width);
&.documine-width {
width: calc(var(--documine-workload-content-width));
border-right: 1px solid var(--iqser-separator);
z-index: 1;
.workload-separator {
min-height: 37px;
background: var(--iqser-grey-8);
.flex-align-items-center {
width: 100%;
justify-content: space-between;
::ng-deep span {
color: var(--iqser-text);
font-size: var(--iqser-font-size);
line-height: 20px;
font-weight: 600;
}
}
}
}
}
@ -53,6 +72,7 @@
.quick-navigation {
border-right: 1px solid var(--iqser-separator);
border-left: 1px solid var(--iqser-separator);
min-width: var(--qiuck-navigation-width);
overflow: hidden;
display: flex;
@ -66,6 +86,10 @@
cursor: pointer;
transition: background-color 0.25s;
&.documine-height {
min-height: 37px;
}
&:not(.disabled):hover {
background-color: var(--iqser-tab-hover);
}

View File

@ -1,92 +1,93 @@
<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>-->
<div class="components-header">
<span [translate]="'component-management.components'"></span>
<iqser-popup-filter [primaryFiltersSlug]="'primaryFilters'" [secondaryFiltersSlug]="'secondaryFilters'"></iqser-popup-filter>
</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>-->
<!--<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>-->
<!-- &lt;!&ndash; <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>&ndash;&gt;-->
<!-- &lt;!&ndash; <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>&ndash;&gt;-->
<!-- <ng-template #noReferences>-</ng-template>-->
<!-- </div>-->
</ng-container>
</div>
</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>-->
<!-- &lt;!&ndash; <div>{{ entry.componentValues[0].valueDescription }}</div>&ndash;&gt;-->
<!-- &lt;!&ndash; <div>&ndash;&gt;-->
<!-- &lt;!&ndash; <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">&ndash;&gt;-->
<!-- &lt;!&ndash; <li&ndash;&gt;-->
<!-- &lt;!&ndash; *ngFor="let reference of entry.componentValues[0].entityReferences"&ndash;&gt;-->
<!-- &lt;!&ndash; [innerHTML]="&ndash;&gt;-->
<!-- &lt;!&ndash; 'component-log-dialog.annotations'&ndash;&gt;-->
<!-- &lt;!&ndash; | translate&ndash;&gt;-->
<!-- &lt;!&ndash; : {&ndash;&gt;-->
<!-- &lt;!&ndash; type: parseType(reference.displayValue),&ndash;&gt;-->
<!-- &lt;!&ndash; page: reference.page,&ndash;&gt;-->
<!-- &lt;!&ndash; ruleNumber: reference.entityRuleId&ndash;&gt;-->
<!-- &lt;!&ndash; }&ndash;&gt;-->
<!-- &lt;!&ndash; "&ndash;&gt;-->
<!-- &lt;!&ndash; class="mb-8"&ndash;&gt;-->
<!-- &lt;!&ndash; ></li>&ndash;&gt;-->
<!-- &lt;!&ndash; </ul>&ndash;&gt;-->
<!-- <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>-->
<!-- &lt;!&ndash; <ng-template #noReferences>-</ng-template>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </ng-container>-->
<!--</div>-->
<!-- <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>-->
<!-- &lt;!&ndash; <div class="dialog-actions">&ndash;&gt;-->
<!-- &lt;!&ndash; <iqser-icon-button&ndash;&gt;-->
<!-- &lt;!&ndash; (action)="exportJSON()"&ndash;&gt;-->
<!-- &lt;!&ndash; [label]="'component-log-dialog.actions.export-json' | translate"&ndash;&gt;-->
<!-- &lt;!&ndash; [submit]="true"&ndash;&gt;-->
<!-- &lt;!&ndash; [type]="iconButtonTypes.primary"&ndash;&gt;-->
<!-- &lt;!&ndash; [attr.help-mode-key]="'scm_export_DIALOG'"&ndash;&gt;-->
<!-- &lt;!&ndash; ></iqser-icon-button>&ndash;&gt;-->
<!-- <iqser-icon-button-->
<!-- (action)="exportAllInDossier()"-->
<!-- *ngIf="userPreferences.isIqserDevMode"-->
<!-- [type]="iconButtonTypes.primary"-->
<!-- label="Export All"-->
<!-- ></iqser-icon-button>-->
<!-- &lt;!&ndash; <iqser-icon-button&ndash;&gt;-->
<!-- &lt;!&ndash; (action)="exportXML()"&ndash;&gt;-->
<!-- &lt;!&ndash; [label]="'component-log-dialog.actions.export-xml' | translate"&ndash;&gt;-->
<!-- &lt;!&ndash; [type]="iconButtonTypes.primary"&ndash;&gt;-->
<!-- &lt;!&ndash; [attr.help-mode-key]="'scm_export_DIALOG'"&ndash;&gt;-->
<!-- &lt;!&ndash; ></iqser-icon-button>&ndash;&gt;-->
<!-- <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>
<!-- &lt;!&ndash; <iqser-icon-button&ndash;&gt;-->
<!-- &lt;!&ndash; (action)="exportAllInDossier()"&ndash;&gt;-->
<!-- &lt;!&ndash; *ngIf="userPreferences.isIqserDevMode"&ndash;&gt;-->
<!-- &lt;!&ndash; [type]="iconButtonTypes.primary"&ndash;&gt;-->
<!-- &lt;!&ndash; label="Export All"&ndash;&gt;-->
<!-- &lt;!&ndash; ></iqser-icon-button>&ndash;&gt;-->
<!-- &lt;!&ndash; <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"&ndash;&gt;-->
<!-- &lt;!&ndash; >{{ 'component-log-dialog.actions.display-by-default' | translate }}&ndash;&gt;-->
<!-- &lt;!&ndash; </mat-checkbox>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->

View File

@ -1,61 +1,79 @@
.rss-row {
.components-header {
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--iqser-separator);
.rss-key {
font-weight: bold;
flex: 30;
text-align: right;
padding: 4px;
}
.rss-value {
padding: 4px;
flex: 70;
}
}
.dialog-content {
overflow: auto;
}
.table {
display: grid;
grid-template-columns: repeat(2, 1fr);
> div {
padding: 8px 10px;
}
.bold {
font-weight: 600;
}
.table-header {
margin: 10px 0;
border-bottom: 1px solid var(--iqser-separator);
background-color: var(--iqser-grey-2);
font-weight: 600;
}
}
.annotation-grid {
display: grid;
grid-template-columns: 3fr 1fr 1fr 5fr;
}
ul {
margin: 0;
}
.output-data > div:nth-child(8n + 9),
.output-data > div:nth-child(8n + 10) {
//.output-data > div:nth-child(8n + 11),
//.output-data > div:nth-child(8n + 12) {
justify-content: space-between;
align-items: center;
min-height: 36px;
background: var(--iqser-grey-8);
border-bottom: 1px solid var(--iqser-separator);
padding: 0 10px;
::ng-deep span {
color: var(--iqser-text);
font-size: var(--iqser-font-size);
line-height: 20px;
font-weight: 600;
}
}
.ml-auto {
margin-left: auto;
}
//.rss-row {
// display: flex;
// flex-direction: row;
// border-bottom: 1px solid var(--iqser-separator);
//
// .rss-key {
// font-weight: bold;
// flex: 30;
// text-align: right;
// padding: 4px;
// }
//
// .rss-value {
// padding: 4px;
// flex: 70;
// }
//}
//
//.dialog-content {
// overflow: auto;
//}
//
//.table {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
//
// > div {
// padding: 8px 10px;
// }
//
// .bold {
// font-weight: 600;
// }
//
// .table-header {
// margin: 10px 0;
// border-bottom: 1px solid var(--iqser-separator);
// background-color: var(--iqser-grey-2);
// font-weight: 600;
// }
//}
//
//.annotation-grid {
// display: grid;
// grid-template-columns: 3fr 1fr 1fr 5fr;
//}
//
//ul {
// margin: 0;
//}
//
//.output-data > div:nth-child(8n + 9),
//.output-data > div:nth-child(8n + 10) {
// //.output-data > div:nth-child(8n + 11),
// //.output-data > div:nth-child(8n + 12) {
// background: var(--iqser-grey-8);
//}
//
//.ml-auto {
// margin-left: auto;
//}

View File

@ -14,10 +14,6 @@
display: flex;
flex-direction: column;
&.documine-container {
width: 70%;
}
::ng-deep .right-title {
min-height: 70px;
display: flex;
@ -41,6 +37,10 @@
display: flex;
flex: 1;
}
&.documine-container {
width: 70%;
}
}
.analysis-progress {

View File

@ -1,3 +1,3 @@
<redaction-compare-file-input></redaction-compare-file-input>
<redaction-paginator></redaction-paginator>
<redaction-paginator *ngIf="!isDocumine"></redaction-paginator>

View File

@ -1,8 +1,11 @@
import { Component } from '@angular/core';
import { getConfig } from '@iqser/common-ui';
@Component({
selector: 'redaction-pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer.component.scss'],
})
export class PdfViewerComponent {}
export class PdfViewerComponent {
protected readonly isDocumine = getConfig().IS_DOCUMINE;
}

View File

@ -275,6 +275,15 @@ export class ViewerHeaderService {
updateElements(): void {
this._pdf.instance?.UI.setHeaderItems(header => {
let deletedDividers = 0;
if (this.#isDocumine) {
const secondHeaderElement = header.getItems()[1] as IHeaderElement;
if (secondHeaderElement.type === 'divider') {
header.getItems().splice(1, 1);
deletedDividers = 1;
}
}
const enabledItems: IHeaderElement[] = [];
const groups: HeaderElementType[][] = [
[HeaderElements.COMPARE_BUTTON, HeaderElements.CLOSE_COMPARE_BUTTON],
@ -291,8 +300,8 @@ export class ViewerHeaderService {
];
const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS);
let startButtons = 10;
let deleteCount = 14;
let startButtons = 10 - deletedDividers;
let deleteCount = 14 - deletedDividers;
groups.forEach(group => this.#pushGroup(enabledItems, group));
@ -300,11 +309,12 @@ export class ViewerHeaderService {
if (!header.getItems().includes(loadAllAnnotationsButton)) {
header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton);
}
startButtons = 11;
deleteCount = 15;
startButtons = 11 - deletedDividers;
deleteCount = 15 - deletedDividers;
} else {
header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS);
}
header.getItems().splice(startButtons, header.getItems().length - deleteCount, ...enabledItems);
});

View File

@ -371,6 +371,7 @@
"annotation": {
"pending": "(Pending analysis)"
},
"annotations": "",
"archived-dossiers-listing": {
"no-data": {
"title": "No archived dossiers."
@ -508,6 +509,9 @@
"value": "Value"
}
},
"component-management": {
"components": ""
},
"component-rules-screen": {
"error": {
"generic": ""

View File

@ -371,6 +371,7 @@
"annotation": {
"pending": "(Pending analysis)"
},
"annotations": "Annotations",
"archived-dossiers-listing": {
"no-data": {
"title": "No archived dossiers."
@ -508,6 +509,9 @@
"value": "Value"
}
},
"component-management": {
"components": "Components"
},
"component-rules-screen": {
"error": {
"generic": ""

View File

@ -371,6 +371,7 @@
"annotation": {
"pending": "(Pending analysis)"
},
"annotations": "",
"archived-dossiers-listing": {
"no-data": {
"title": "No archived dossiers."
@ -508,6 +509,9 @@
"value": "Value"
}
},
"component-management": {
"components": ""
},
"component-rules-screen": {
"error": {
"generic": "Something went wrong... Component rules update failed!"

View File

@ -371,6 +371,7 @@
"annotation": {
"pending": "(Pending analysis)"
},
"annotations": "Annotations",
"archived-dossiers-listing": {
"no-data": {
"title": "No archived dossiers."
@ -508,6 +509,9 @@
"value": "Value"
}
},
"component-management": {
"components": "Components"
},
"component-rules-screen": {
"error": {
"generic": "Something went wrong... Component rules update failed!"

View File

@ -47,3 +47,11 @@ button.Button[data-element='LOAD_ALL_ANNOTATIONS'] > img[src='/ui/assets/icons/g
opacity: 0.5;
cursor: default;
}
.MainHeader {
height: 36px !important;
}
.view-header-border {
background: rgba(226, 228, 233, 0.9);
}

View File

@ -183,10 +183,10 @@ body {
.documine-viewer {
visibility: hidden;
width: calc(
100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width)
100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width) - 3px
);
height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
bottom: 0;
right: calc(var(--qiuck-navigation-width) + 1px);
right: calc(var(--qiuck-navigation-width) + 2px);
position: absolute;
}