Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Merge branch 'VM/RED-9788-2' into 'master'

Browse Source 
RED-9788 - Adapt Annotation column to display only annotations per component...

Closes RED-9788

See merge request redactmanager/red-ui!531
This commit is contained in:
Nicoleta Panaghiu 2024-08-09 09:31:21 +02:00
commit 87c4becbe6
17 changed files with 81 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html
View File

@ -1,7 +1,6 @@
<div
(mousedown)="fileAttributesService.resetEdit()"
[class.help-mode-active]="helpModeService?.isHelpModeActive$ | async"
[class.active-entity]="activeEntity()"
class="workflow-item"
>
<div class="details-wrapper">

2
apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.scss
View File

@ -12,7 +12,7 @@
}
&:hover,
&.active-entity,
&:has(iqser-circle-button[aria-expanded='true']),
&.help-mode-active {
redaction-file-actions {
display: initial;

3
apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts
View File

@ -12,7 +12,6 @@ import { FileWorkloadComponent } from '../table-item/file-workload/file-workload
import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
import { FileActionsComponent } from '../../../shared-dossiers/components/file-actions/file-actions.component';
import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
import { ActiveListingEntityService } from '@common-ui/listing/services/active-listing-entity.service';
@Component({
selector: 'redaction-workflow-item',
@ -39,14 +38,12 @@ export class WorkflowItemComponent implements OnInit {
@ViewChild('actionsWrapper', { static: true }) private _actionsWrapper: ElementRef;
width: number;
readonly trackBy = trackByFactory();
readonly activeEntity = computed(() => this._activeListingEntityService.activeEntity() === this.file?.id);
@Input({ required: true }) file: File;
@Input({ required: true }) dossier: Dossier;
@Input({ required: true }) displayedAttributes: IFileAttributeConfig[];
constructor(
readonly fileAttributesService: FileAttributesService,
readonly _activeListingEntityService: ActiveListingEntityService,
private readonly _changeRef: ChangeDetectorRef,
@Optional() readonly helpModeService: HelpModeService,
) {}

43
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
View File

@ -3,11 +3,11 @@ import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { FilterService } from '@common-ui/filtering';
import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
import { TranslateModule } from '@ngx-translate/core';
import { IComponentLogEntry, IComponentValue } from '@red/domain';
import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
import { FilePreviewStateService } from '../../services/file-preview-state.service';
@Component({
selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
@ -43,8 +43,8 @@ export class EditableStructuredComponentValueComponent implements OnInit {
selected = false;
constructor(
private readonly _filtersService: FilterService,
private readonly _iqserDialog: IqserDialog,
private readonly _state: FilePreviewStateService,
) {}
get disabled() {
@ -91,7 +91,7 @@ export class EditableStructuredComponentValueComponent implements OnInit {
}
this.deselectLast.emit();
this.selected = true;
this.#setWorkloadFilters();
this._state.componentReferenceIds = this.#getUniqueReferencesIds(this.entry.componentValues);
}
}
@ -106,7 +106,7 @@ export class EditableStructuredComponentValueComponent implements OnInit {
$event?.stopImmediatePropagation();
this.selected = false;
this.editing = false;
this._filtersService.deactivateFilters({ primaryFiltersSlug: 'primaryFilters' });
this._state.componentReferenceIds = null;
}
removeValue(index: number) {
@ -150,41 +150,14 @@ export class EditableStructuredComponentValueComponent implements OnInit {
return value.replace(/\n/g, '<br>');
}
#setWorkloadFilters() {
this._filtersService.deactivateFilters({ primaryFiltersSlug: 'primaryFilters' });
const uniqueLabels = this.#getUniqueReferencesLabels(this.entry.componentValues);
let setFilterCount = 0;
for (const label of uniqueLabels) {
const setFilter = this.#setFilter(label);
if (setFilter) {
setFilterCount++;
}
}
if (!setFilterCount) {
this.#setFilter('no-annotations-filter');
}
}
#setFilter(label: string) {
const filterGroup = this._filtersService.getGroup('primaryFilters');
for (const filter of filterGroup.filters) {
const nestedFilter = filter.children.find(f => f.label.toLowerCase() === label);
if (nestedFilter) {
this._filtersService.filterCheckboxClicked({ nestedFilter, filterGroup, primaryFiltersSlug: 'primaryFilters' });
return true;
}
}
}
#getUniqueReferencesLabels(values: IComponentValue[]) {
const labels: Set<string> = new Set();
#getUniqueReferencesIds(values: IComponentValue[]) {
const ids: Set<string> = new Set();
for (const value of values) {
for (const reference of value.entityReferences) {
const label = reference.type?.replace(/_/g, ' ')?.toLowerCase();
labels.add(label);
ids.add(reference.id);
}
}
return labels;
return Array.from(ids);
}
#updateTextAreaHeight() {

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

@ -185,26 +185,19 @@
>.
</ng-container>
<ng-container
*ngIf="(fileDataService.allLength$ | async) === 0 || filterService.noAnnotationsFilterChecked"
>
{{ 'file-preview.tabs.annotations.no-annotations' | translate }}
</ng-container>
<ng-container
*ngIf="
(fileDataService.allLength$ | async) > 0 &&
displayedPages.length === 0 &&
!filterService.noAnnotationsFilterChecked
"
>{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
<a
(click)="filterService.reset()"
class="with-underline"
translate="file-preview.tabs.annotations.reset"
></a>
{{ 'file-preview.tabs.annotations.the-filters' | translate }}
</ng-container>
@if ((fileDataService.allLength$ | async) > 0 && displayedPages.length === 0) {
@if (this.enabledFilters?.length) {
{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
<a
(click)="filterService.reset()"
class="with-underline"
translate="file-preview.tabs.annotations.reset"
></a>
{{ 'file-preview.tabs.annotations.the-filters' | translate }}
} @else if (state.componentReferenceIds?.length === 0) {
{{ 'file-preview.tabs.annotations.no-annotations' | translate }}
}
}
</iqser-empty-state>
<div *ngIf="displayedPages.length" class="no-annotations-buttons-container mt-32">

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

@ -20,7 +20,7 @@ import { AutoUnsubscribe, Debounce, IqserEventTarget } from '@iqser/common-ui/li
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { ListItem } from '@models/file/list-item';
import { TranslateModule } from '@ngx-translate/core';
import { WorkflowFileStatuses } from '@red/domain';
import { ComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
import { workloadTranslations } from '@translations/workload-translations';
import { UserPreferenceService } from '@users/user-preference.service';
import { getLocalStorageDataByFileId } from '@utils/local-storage';
@ -90,9 +90,10 @@ 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;
displayedAnnotations = new Map<number, AnnotationWrapper[]>();
displayedPages: number[] = [];
pagesPanelActive = true;
protected displayedAnnotations = new Map<number, AnnotationWrapper[]>();
protected displayedPages: number[] = [];
protected pagesPanelActive = true;
protected enabledFilters = [];
constructor(
readonly filterService: FilterService,
@ -176,11 +177,14 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
this.fileDataService.all$,
primary$,
secondary$,
this.state.componentReferenceIds$,
this.listingService.selected$,
this._pageRotationService.rotations$,
]).pipe(
delay(0),
map(([annotations, primary, secondary]) => this.#filterAnnotations(annotations, primary, secondary)),
map(([annotations, primary, secondary, componentReferenceIds]) =>
this.#filterAnnotations(annotations, primary, secondary, componentReferenceIds),
),
map(annotations => this.#mapListItemsFromAnnotationWrapperArray(annotations)),
tap(annotations => this.#scrollToFirstAnnotationPage(annotations)),
);
@ -399,6 +403,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
annotations: AnnotationWrapper[],
primary: INestedFilter[],
secondary: INestedFilter[] = [],
componentReferenceIds: string[],
): Map<number, AnnotationWrapper[]> {
const onlyPageWithAnnotations = this.viewModeService.onlyPagesWithAnnotations();
if (!primary || primary.length === 0) {
@ -410,21 +415,26 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
annotations = annotations.filter(a => !a.isRemoved);
}
if (this.isDocumine && !this.#isIqserDevMode) {
annotations = annotations.filter(a => !a.isOCR);
if (this.isDocumine) {
if (!this.#isIqserDevMode) {
annotations = annotations.filter(a => !a.isOCR);
}
if (componentReferenceIds) {
annotations = annotations.filter(a => componentReferenceIds.includes(a.id));
}
}
this.displayedAnnotations = this._annotationProcessingService.filterAndGroupAnnotations(annotations, primary, secondary);
const pagesThatDisplayAnnotations = [...this.displayedAnnotations.keys()];
const enabledFilters = this.filterService.enabledFlatFilters;
if (enabledFilters.some(f => f.id === 'pages-without-annotations')) {
if (enabledFilters.length === 1 && !onlyPageWithAnnotations) {
this.enabledFilters = this.filterService.enabledFlatFilters;
if (this.enabledFilters.some(f => f.id === 'pages-without-annotations')) {
if (this.enabledFilters.length === 1 && !onlyPageWithAnnotations) {
this.displayedPages = this.#allPages.filter(page => !pagesThatDisplayAnnotations.includes(page));
} else {
this.displayedPages = [];
}
this.displayedAnnotations.clear();
} else if (enabledFilters.length || onlyPageWithAnnotations) {
} else if (this.enabledFilters.length || onlyPageWithAnnotations || componentReferenceIds) {
this.displayedPages = pagesThatDisplayAnnotations;
} else {
this.displayedPages = this.#allPages;

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

@ -3,7 +3,6 @@ import { List } from '@common-ui/utils';
import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
import { ComponentLogService } from '@services/files/component-log.service';
import { UserPreferenceService } from '@users/user-preference.service';
import { combineLatest, firstValueFrom, Observable } from 'rxjs';
import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
import { FilterService, PopupFilterComponent } from '@common-ui/filtering';
@ -23,7 +22,6 @@ import { TranslateModule } from '@ngx-translate/core';
export class StructuredComponentManagementComponent implements OnInit {
protected readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
protected readonly componentLogData$ = toObservable(this.componentLogData);
protected readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
protected readonly iconButtonTypes = IconButtonTypes;
protected displayedComponents$: Observable<ComponentLogEntry[]>;
@Input() file: File;
@ -35,7 +33,6 @@ export class StructuredComponentManagementComponent implements OnInit {
private readonly _loadingService: LoadingService,
private readonly _componentLogFilterService: ComponentLogFilterService,
private readonly _filterService: FilterService,
readonly userPreferences: UserPreferenceService,
) {}
get canEdit() {
@ -54,12 +51,6 @@ export class StructuredComponentManagementComponent implements OnInit {
}
}
async toggleOpenScmDialogByDefault() {
await this.userPreferences.toggleOpenScmDialogByDefault();
await this.userPreferences.reload();
this.openScmDialogByDefault.set(this.userPreferences.getOpenScmDialogByDefault());
}
async revertOverride(originalKey: string) {
this._loadingService.start();
await firstValueFrom(

19
apps/red-ui/src/app/modules/file-preview/services/annotation-processing.service.ts
View File

@ -141,10 +141,6 @@ export class AnnotationProcessingService {
}
}
if (this.#isDocumine) {
this.#createNoAnnotationsFilter(filterMap, filters);
}
return filters.sort((a, b) => SuperTypeSorter[a.id] - SuperTypeSorter[b.id]);
}
@ -272,19 +268,4 @@ export class AnnotationProcessingService {
return first.pageNumber < second.pageNumber ? -1 : 1;
});
}
#createNoAnnotationsFilter(filterMap: Map<string, INestedFilter>, filters: INestedFilter[]) {
const childFilter: IFilter = {
id: 'no-annotations-filter',
label: 'no-annotations-filter',
checked: false,
matches: 1,
skipTranslation: true,
hidden: true,
};
const newChildFilter = new Filter(childFilter);
filterMap.set('no-annotations-filter', newChildFilter);
filters[0]?.children.push(newChildFilter);
}
}

13
apps/red-ui/src/app/modules/file-preview/services/file-preview-state.service.ts
View File

@ -14,7 +14,7 @@ import { FilesMapService } from '@services/files/files-map.service';
import { FilesService } from '@services/files/files.service';
import { PermissionsService } from '@services/permissions.service';
import { NGXLogger } from 'ngx-logger';
import { firstValueFrom, from, merge, Observable, of, pairwise, Subject, switchMap } from 'rxjs';
import { BehaviorSubject, firstValueFrom, from, merge, Observable, of, pairwise, Subject, switchMap } from 'rxjs';
import { filter, map, startWith, tap, withLatestFrom } from 'rxjs/operators';
import { ViewModeService } from './view-mode.service';
@ -41,6 +41,8 @@ export class FilePreviewStateService {
readonly isWritable: Signal<boolean>;
readonly dossierDictionary: Signal<Dictionary>;
readonly blob$: Observable<Blob>;
readonly componentReferenceIds$: Observable<string[] | null>;
readonly #componentReferenceIds$ = new BehaviorSubject<string[] | null>(null);
readonly dossierId = getParam(DOSSIER_ID);
readonly dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
readonly fileId = getParam(FILE_ID);
@ -62,6 +64,7 @@ export class FilePreviewStateService {
this.dossier = toSignal(dossiersServiceResolver().getEntityChanged$(this.dossierId));
this.file$ = inject(FilesMapService).watch$(this.dossierId, this.fileId);
this.file = toSignal(this.file$);
this.componentReferenceIds$ = this.#componentReferenceIds$.asObservable();
this.excludedPages = signal(this.file().excludedPages);
this.isWritable = computed(() => {
const isWritable = this._permissionsService.canPerformAnnotationActions(this.file(), this.dossier());
@ -91,6 +94,10 @@ export class FilePreviewStateService {
);
}
set componentReferenceIds(ids: string[]) {
this.#componentReferenceIds$.next(ids);
}
get dictionaries(): Dictionary[] {
const dictionaries = this._dictionariesMapService.get(this.dossierTemplateId);
if (this.dossierDictionary()) {
@ -126,6 +133,10 @@ export class FilePreviewStateService {
);
}
get componentReferenceIds() {
return this.#componentReferenceIds$.getValue();
}
reloadBlob(): void {
this.#reloadBlob$.next(true);
}

6
apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.html
View File

@ -1,4 +1,8 @@
<div [style.visibility]="documentViewer.loaded() ? 'visible' : 'hidden'" class="pagination noselect">
<div
[style.visibility]="documentViewer.loaded() ? 'visible' : 'hidden'"
class="pagination noselect"
[class.documine-pagination]="isDocumine"
>
<div (click)="pdf.navigatePreviousPage()">
<mat-icon class="chevron-icon" svgIcon="iqser:nav-prev"></mat-icon>
</div>

4
apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss
View File

@ -13,6 +13,10 @@
justify-content: center;
align-items: center;
&.documine-pagination {
left: calc(100% - (var(--documine-viewer-width) / 2) - var(--qiuck-navigation-width));
}
> div {
height: 16px;
cursor: default;

7
apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.ts
View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { PdfViewer } from '../../services/pdf-viewer.service';
import { REDDocumentViewer } from '../../services/document-viewer.service';
import { getConfig } from '@iqser/common-ui';
@Component({
selector: 'redaction-paginator',
@ -8,5 +9,9 @@ import { REDDocumentViewer } from '../../services/document-viewer.service';
styleUrls: ['./paginator.component.scss'],
})
export class PaginatorComponent {
constructor(readonly pdf: PdfViewer, readonly documentViewer: REDDocumentViewer) {}
protected readonly isDocumine = getConfig().IS_DOCUMINE;
constructor(
readonly pdf: PdfViewer,
readonly documentViewer: REDDocumentViewer,
) {}
}

2
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
View File

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

4
apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
View File

@ -1,6 +1,6 @@
@if (dropdownButton()) {
<iqser-circle-button
(click)="setActiveListingEntity($event)"
(click)="$event.stopImmediatePropagation()"
[matMenuTriggerFor]="downloadMenu"
[tooltipClass]="tooltipClass()"
[tooltipPosition]="tooltipPosition()"
@ -24,7 +24,7 @@
></iqser-circle-button>
}
<mat-menu #downloadMenu="matMenu" (closed)="onDownloadMenuClosed()">
<mat-menu #downloadMenu="matMenu">
<button (click)="downloadComponentAsJSON($event)" [innerHTML]="'component-download.json' | translate" mat-menu-item></button>
<button (click)="downloadComponentAsXML($event)" [innerHTML]="'component-download.xml' | translate" mat-menu-item></button>
<button (click)="downloadFiles($event)" [innerHTML]="'component-download.report' | translate" mat-menu-item></button>

14
apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
View File

@ -10,7 +10,6 @@ import { TranslateModule } from '@ngx-translate/core';
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
import { firstValueFrom } from 'rxjs';
import { ComponentLogService } from '@services/files/component-log.service';
import { ActiveListingEntityService } from '@common-ui/listing/services/active-listing-entity.service';
@Component({
selector: 'redaction-file-download-btn',
@ -40,7 +39,6 @@ export class FileDownloadBtnComponent implements OnChanges {
private readonly _permissionsService: PermissionsService,
private readonly _fileDownloadService: FileDownloadService,
private readonly _componentLogService: ComponentLogService,
private readonly _activeListingEntity: ActiveListingEntityService,
private readonly _dialog: IqserDialog,
private readonly _toaster: Toaster,
) {}
@ -85,18 +83,6 @@ export class FileDownloadBtnComponent implements OnChanges {
.catch(() => this._toaster.error(_('download-status.error')));
}
onDownloadMenuClosed() {
this._activeListingEntity.updateEntity();
}
setActiveListingEntity($event: MouseEvent) {
$event.stopImmediatePropagation();
if (this.dropdownButton()) {
const entityId = this.dossierDownload() ? this.dossier().id : this.files()[0].id;
this._activeListingEntity.updateEntity(entityId);
}
}
downloadComponentAsJSON($event: MouseEvent) {
$event.stopImmediatePropagation();
this.menuTrigger?.closeMenu();

12
apps/red-ui/src/styles.scss
View File

@ -169,12 +169,16 @@ body {
--iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
--iqser-app-name-font-size: 13px;
--iqser-logo-size: 28px;
--documine-viewer-width: calc(
100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width) - 3px
);
--viewer-height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
}
.redaction-viewer {
visibility: hidden;
width: calc(100% - var(--workload-width));
height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
height: var(--viewer-height);
bottom: 0;
left: 0;
position: absolute;
@ -182,10 +186,8 @@ body {
.documine-viewer {
visibility: hidden;
width: calc(
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));
width: var(--documine-viewer-width);
height: var(--viewer-height);
bottom: 0;
right: calc(var(--qiuck-navigation-width) + 3px);
position: absolute;

2
libs/common-ui

@ -1 +1 @@
Subproject commit f079b6c157a0336fb4c521d692309517317df565
Subproject commit 5b51eb85a161fccf878041abf93c607415e2f476