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

RED-10139: rid file-preview module of anything resembling getters.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-10-16 13:46:19 +03:00
parent d06cd4be54
commit f00a92a5ea
54 changed files with 402 additions and 449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
View File

@ -22,8 +22,7 @@ import { MatFormField } from '@angular/material/form-field';
import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { PdfViewer } from '../../../../pdf-viewer/services/pdf-viewer.service';
import { formControlToSignal } from '@utils/functions';
import { AsControl } from '@common-ui/utils';
import { AsControl, formValueToSignal } from '@common-ui/utils';
interface UserProfileForm {
email: string;
@ -59,7 +58,7 @@ export class UserProfileScreenComponent extends BaseFormComponent {
readonly profileKeys = ['email', 'firstName', 'lastName'];
readonly languages = this._translateService.langs;
readonly language = formControlToSignal<UserProfileForm['language']>(this.form.controls.language);
readonly language = formValueToSignal<UserProfileForm['language']>(this.form.controls.language);
readonly languageSelectLabel = computed(() => this.translations[this.language()]);
constructor(

14
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.html
View File

@ -1,19 +1,19 @@
<div class="needs-work">
<redaction-annotation-icon
*ngIf="file.analysisRequired"
*ngIf="file().analysisRequired"
[color]="analysisColor$ | async"
label="A"
type="square"
></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="updated" [color]="updatedColor$ | async" label="U" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="updated()" [color]="updatedColor$ | async" label="U" type="square"></redaction-annotation-icon>
<redaction-annotation-icon
*ngIf="file.hasRedactions"
*ngIf="file().hasRedactions"
[color]="redactionColor$ | async"
[label]="'redaction-abbreviation' | translate"
type="square"
></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file.hasImages" [color]="imageColor$ | async" label="I" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file.hintsOnly" [color]="hintColor$ | async" label="H" type="circle"></redaction-annotation-icon>
<mat-icon *ngIf="file.hasAnnotationComments" svgIcon="red:comment"></mat-icon>
<ng-container *ngIf="noWorkloadItems"> -</ng-container>
<redaction-annotation-icon *ngIf="file().hasImages" [color]="imageColor$ | async" label="I" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file().hintsOnly" [color]="hintColor$ | async" label="H" type="circle"></redaction-annotation-icon>
<mat-icon *ngIf="file().hasAnnotationComments" svgIcon="red:comment"></mat-icon>
<ng-container *ngIf="noWorkloadItems()"> -</ng-container>
</div>

35
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, computed, input, Input, OnInit } from '@angular/core';
import { annotationDefaultColorConfig, DefaultBasedColorType, File } from '@red/domain';
import { DossiersService } from '@services/dossiers/dossiers.service';
import { DefaultColorsService } from '@services/entity-services/default-colors.service';
@ -21,13 +21,27 @@ import { MatIcon } from '@angular/material/icon';
})
export class FileWorkloadComponent implements OnInit {
#dossierTemplateId: string;
@Input() file: File;
file = input<File>();
imageColor$: Observable<string>;
updatedColor$: Observable<string>;
analysisColor$: Observable<string>;
hintColor$: Observable<string>;
redactionColor$: Observable<string>;
readonly updated = computed(
() => this.file().hasUpdates && this.file().assignee === this._userService.currentUser.id && !this.file().isApproved,
);
readonly noWorkloadItems = computed(
() =>
!this.updated() &&
!this.file().analysisRequired &&
!this.file().hasRedactions &&
!this.file().hasImages &&
!this.file().hintsOnly &&
!this.file().hasAnnotationComments,
);
constructor(
private readonly _userService: UserService,
private readonly _defaultColorsService: DefaultColorsService,
@ -35,23 +49,8 @@ export class FileWorkloadComponent implements OnInit {
private readonly _dictionariesMapService: DictionariesMapService,
) {}
get updated(): boolean {
return this.file.hasUpdates && this.file.assignee === this._userService.currentUser.id && !this.file.isApproved;
}
get noWorkloadItems(): boolean {
return (
!this.updated &&
!this.file.analysisRequired &&
!this.file.hasRedactions &&
!this.file.hasImages &&
!this.file.hintsOnly &&
!this.file.hasAnnotationComments
);
}
ngOnInit() {
this.#dossierTemplateId = this._dossiersService.find(this.file.dossierId).dossierTemplateId;
this.#dossierTemplateId = this._dossiersService.find(this.file().dossierId).dossierTemplateId;
this.updatedColor$ = this.#getDefaultColor$('updated');
this.analysisColor$ = this.#getDefaultColor$('analysis');
this.hintColor$ = this.#getDefaultColor$('hint');

2
apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
View File

@ -60,7 +60,7 @@ export class AnnotationActionsComponent {
AnnotationPermissions.forUser(
this._permissionsService.isApprover(this._state.dossier()),
this.annotations(),
this._state.dictionaries,
untracked(this._state.dictionaries),
this._iqserPermissionsService,
this._state.file().excludedFromAutomaticAnalysis,
),

34
apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html
View File

@ -1,44 +1,42 @@
<div class="details">
<redaction-annotation-icon
[color]="annotation.color"
[label]="annotation.isEarmark ? '' : ((annotationTypesTranslations[annotation.superType] | translate)?.[0] | uppercase)"
[type]="annotation.iconShape"
[color]="annotation().color"
[label]="isEarmark() ? '' : ((annotationTypesTranslations[annotation().superType] | translate)?.[0] | uppercase)"
[type]="iconShape()"
class="mt-6 mr-10"
></redaction-annotation-icon>
<div class="flex-1">
<div>
<strong>{{ annotation.superTypeLabel | translate }}</strong>
<strong>{{ annotation().superTypeLabel | translate }}</strong>
&nbsp;
<strong *ngIf="annotation.pending" class="pending-analysis">
{{ 'annotation.pending' | translate }}
<strong *ngIf="annotation().pending" class="pending-analysis">
{{ 'annotation().pending' | translate }}
</strong>
</div>
<div *ngIf="annotation.typeLabel">
<div *ngIf="annotation().typeLabel">
<strong>
<span>{{ annotation.descriptor | translate }}</span
<span>{{ descriptor() | translate }}</span
>:
</strong>
{{ annotation.typeLabel }}
{{ annotation().typeLabel }}
</div>
<div
*deny="roles.getRss; if: !!annotation.shortContent && !annotation.isHint && !annotation.isSkipped && !annotation.isIgnoredHint"
>
<strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
<div *deny="roles.getRss; if: !!annotation().shortContent && !isHint() && !isSkipped() && !isIgnoredHint()">
<strong><span translate="content"></span>: </strong>{{ annotation().shortContent }}
</div>
<div *ngIf="annotation.isEarmark">
<strong><span translate="color"></span>: </strong>{{ annotation.color }}
<div *ngIf="isEarmark()">
<strong><span translate="color"></span>: </strong>{{ annotation().color }}
</div>
<div *ngIf="annotation.isEarmark">
<strong><span translate="size"></span>: </strong>{{ annotation.width }}x{{ annotation.height }} px
<div *ngIf="isEarmark()">
<strong><span translate="size"></span>: </strong>{{ width() }}x{{ height() }} px
</div>
</div>
<div class="active-icon-marker-container">
<iqser-round-checkbox *ngIf="multiSelectService.active() && isSelected" active></iqser-round-checkbox>
<iqser-round-checkbox *ngIf="multiSelectService.active() && isSelected()" active></iqser-round-checkbox>
</div>
</div>

15
apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
View File

@ -1,5 +1,5 @@
import { NgIf, UpperCasePipe } from '@angular/common';
import { Component, Input } from '@angular/core';
import { Component, computed, input } from '@angular/core';
import { RoundCheckboxComponent } from '@common-ui/inputs/round-checkbox/round-checkbox.component';
import { getConfig, IqserDenyDirective } from '@iqser/common-ui';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
@ -20,8 +20,17 @@ export class AnnotationCardComponent {
protected readonly roles = Roles;
protected readonly annotationTypesTranslations = annotationTypesTranslations;
protected readonly isDocumine = getConfig().IS_DOCUMINE;
@Input() annotation: AnnotationWrapper;
@Input() isSelected = false;
annotation = input<AnnotationWrapper>();
isSelected = input(false);
readonly isEarmark = computed(() => this.annotation().isEarmark);
readonly iconShape = computed(() => this.annotation().iconShape);
readonly width = computed(() => this.annotation().width);
readonly height = computed(() => this.annotation().height);
readonly isHint = computed(() => this.annotation().isHint);
readonly isSkipped = computed(() => this.annotation().isSkipped);
readonly isIgnoredHint = computed(() => this.annotation().isIgnoredHint);
readonly descriptor = computed(() => this.annotation().descriptor);
constructor(readonly multiSelectService: MultiSelectService) {}
}

2
apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html
View File

@ -8,7 +8,7 @@
matTooltipPosition="above"
></redaction-annotation-card>
@if (!annotation().item.isEarmark) {
@if (!isEarmark()) {
<div class="actions-wrapper">
@if (!annotation().item.pending) {
<div

2
apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts
View File

@ -42,6 +42,8 @@ export class AnnotationWrapperComponent {
protected readonly multiSelectService = inject(MultiSelectService);
readonly #isDocumine = getConfig().IS_DOCUMINE;
readonly isEarmark = computed(() => this.annotation().item.isEarmark);
constructor() {
effect(() => {
this.active = this.annotation().isSelected;

16
apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html
View File

@ -23,7 +23,9 @@
<div class="section">
<div *ngFor="let attr of _fileAttributes()" class="attribute">
<div class="small-label">{{ attr.label }}:</div>
<div>{{ attr.value ? (isDate(attr) ? (attr.value | date : 'd MMM yyyy') : attr.value) : '-' }}</div>
<div>
{{ attr.value ? (attr.type === FileAttributeConfigTypes.DATE ? (attr.value | date: 'd MMM yyyy') : attr.value) : '-' }}
</div>
</div>
</div>
@ -31,23 +33,23 @@
<div>
<mat-icon svgIcon="red:folder"></mat-icon>
<span
[innerHTML]="'file-preview.tabs.document-info.details.dossier' | translate : { dossierName: _state.dossier().dossierName }"
[innerHTML]="'file-preview.tabs.document-info.details.dossier' | translate: { dossierName: _state.dossier().dossierName }"
></span>
</div>
<div>
<mat-icon svgIcon="iqser:document"></mat-icon>
<span>{{ 'file-preview.tabs.document-info.details.pages' | translate : { pages: _state.file().numberOfPages } }}</span>
<span>{{ 'file-preview.tabs.document-info.details.pages' | translate: { pages: _state.file().numberOfPages } }}</span>
</div>
<div *ngIf="_state.file().added | date : 'mediumDate' as added">
<div *ngIf="_state.file().added | date: 'mediumDate' as added">
<mat-icon svgIcon="iqser:calendar"></mat-icon>
<span [innerHTML]="'file-preview.tabs.document-info.details.created-on' | translate : { date: added }"></span>
<span [innerHTML]="'file-preview.tabs.document-info.details.created-on' | translate: { date: added }"></span>
</div>
<div *ngIf="_state.dossier().dueDate | date : 'mediumDate' as dueDate">
<div *ngIf="_state.dossier().dueDate | date: 'mediumDate' as dueDate">
<mat-icon svgIcon="red:lightning"></mat-icon>
<span [innerHTML]="'file-preview.tabs.document-info.details.due' | translate : { date: dueDate }"></span>
<span [innerHTML]="'file-preview.tabs.document-info.details.due' | translate: { date: dueDate }"></span>
</div>
<div>

5
apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
View File

@ -43,6 +43,7 @@ export class DocumentInfoComponent extends ContextComponent<Context> {
this._fileAttributesConfig();
return this._attributes();
});
protected readonly FileAttributeConfigTypes = FileAttributeConfigTypes;
constructor(
readonly permissionsService: PermissionsService,
@ -56,10 +57,6 @@ export class DocumentInfoComponent extends ContextComponent<Context> {
this._dialogService.openDialog('documentInfo', this._state.file());
}
isDate(attribute: FileAttribute) {
return attribute.type === FileAttributeConfigTypes.DATE;
}
closeView() {
this._documentInfoService.hide();
setLocalStorageDataByFileId(this._state.fileId, 'show-document-info', false);

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

@ -54,7 +54,7 @@
<div class="editing-actions">
<iqser-icon-button
(action)="save()"
[disabled]="disabled"
[disabled]="disabled()"
[label]="'component-management.actions.save' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>

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

@ -48,7 +48,16 @@ export class EditableStructuredComponentValueComponent implements OnInit {
protected entryLabel: string;
protected editing = false;
protected initialEntry: IComponentLogEntry;
readonly disabled = computed(() => {
for (let i = 0; i < this.currentEntry().componentValues.length; i++) {
if (this.currentEntry().componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
return false;
}
}
return this.currentEntry().componentValues.length === this.initialEntry.componentValues.length;
});
protected readonly iconButtonTypes = IconButtonTypes;
readonly #initialEntry = computed(() => JSON.parse(JSON.stringify(this.entry())));
constructor(
readonly helpModeService: HelpModeService,
@ -56,26 +65,13 @@ export class EditableStructuredComponentValueComponent implements OnInit {
private readonly _state: FilePreviewStateService,
) {}
get disabled() {
for (let i = 0; i < this.currentEntry().componentValues.length; i++) {
if (this.currentEntry().componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
return false;
}
}
return this.currentEntry().componentValues.length === this.initialEntry.componentValues.length;
}
get #initialEntry() {
return JSON.parse(JSON.stringify(this.entry()));
}
ngOnInit() {
this.currentEntry = signal(this.entry());
this.reset();
}
reset() {
this.initialEntry = this.#initialEntry;
this.initialEntry = this.#initialEntry();
this.entryLabel = this.parseName(this.currentEntry().name);
this.deselect();
}

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

@ -172,7 +172,7 @@
translate="file-preview.tabs.annotations.reset"
></a>
{{ 'file-preview.tabs.annotations.the-filters' | translate }}
} @else if (state.componentReferenceIds?.length === 0) {
} @else if (state.componentReferenceIdsSignal()?.length === 0) {
{{ 'file-preview.tabs.annotations.no-annotations' | translate }}
}
}

16
apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.html
View File

@ -1,19 +1,19 @@
<div
(click)="pageSelected.emit(number)"
(click)="pageSelected.emit(pageNumber())"
(dblclick)="toggleReadState()"
*ngIf="assigneeChanged$ | async"
[class.active]="isActive"
[class.read]="read"
[id]="'quick-nav-page-' + number"
[class.active]="isActive()"
[class.read]="read()"
[id]="'quick-nav-page-' + pageNumber()"
class="page-wrapper"
>
<mat-icon [svgIcon]="showDottedIcon ? 'red:excluded-page' : 'red:page'"></mat-icon>
<mat-icon [svgIcon]="showDottedIcon() ? 'red:excluded-page' : 'red:page'"></mat-icon>
<div class="text">{{ number }}</div>
<div class="text">{{ pageNumber() }}</div>
<div *ngIf="activeSelection" class="dot"></div>
<div *ngIf="activeSelection()" class="dot"></div>
<div *ngIf="pageRotationService.rotations()[number]" class="rotated">
<div *ngIf="pageRotationService.rotations()[pageNumber()]" class="rotated">
<mat-icon svgIcon="red:rotation"></mat-icon>
</div>
</div>

60
apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts
View File

@ -1,4 +1,4 @@
import { Component, effect, EventEmitter, inject, Input, OnChanges, Output } from '@angular/core';
import { Component, computed, effect, inject, input, output, untracked } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { ViewedPagesService } from '@services/files/viewed-pages.service';
import { FilePreviewStateService } from '../../services/file-preview-state.service';
@ -12,6 +12,9 @@ import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
import { NGXLogger } from 'ngx-logger';
import { AsyncPipe, NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
import { MultiSelectService } from '../../services/multi-select.service';
import { AnnotationsListingService } from '../../services/annotations-listing.service';
import { toSignal } from '@angular/core/rxjs-interop';
@Component({
selector: 'redaction-page-indicator',
@ -20,16 +23,26 @@ import { MatIcon } from '@angular/material/icon';
standalone: true,
imports: [NgIf, AsyncPipe, MatIcon],
})
export class PageIndicatorComponent implements OnChanges {
export class PageIndicatorComponent {
readonly #multiSelectService = inject(MultiSelectService);
readonly #listingService = inject(AnnotationsListingService);
readonly #config = getConfig<AppConfig>();
readonly #logger = inject(NGXLogger);
@Input({ required: true }) number: number;
@Input() showDottedIcon = false;
@Input() activeSelection = false;
@Input() read = false;
@Output() readonly pageSelected = new EventEmitter<number>();
readonly pageNumber = input.required<number>();
readonly viewedPages = input.required<ViewedPage[]>();
readonly showDottedIcon = computed(() => this._state.file().excludedPages.includes(this.pageNumber()));
readonly selectedLength = toSignal(this.#listingService.selectedLength$);
readonly activeSelection = computed(
() =>
this.#multiSelectService.active() &&
this.selectedLength() &&
this.#listingService.selected.find(p => p.pageNumber === this.pageNumber()),
);
readonly read = computed(() => this.viewedPages().find(p => p.page === this.pageNumber()));
readonly pageSelected = output<number>();
pageReadTimeout: number = null;
readonly assigneeChanged$: Observable<boolean>;
isActive = computed(() => untracked(this.pageNumber) === this._pdf.currentPage());
constructor(
private readonly _viewedPagesService: ViewedPagesService,
@ -48,27 +61,19 @@ export class PageIndicatorComponent implements OnChanges {
);
effect(() => {
if (this.isActive) {
if (this.isActive()) {
this.handlePageRead();
}
});
}
get isActive() {
return this.number === this._pdf.currentPage();
}
ngOnChanges() {
this.handlePageRead();
}
async toggleReadState() {
if (!this._permissionService.canMarkPagesAsViewed(this._state.file())) {
this.#logger.info('[PAGES] Cannot toggle read state');
return;
}
if (this.read) {
const read = untracked(this.read);
if (read) {
await this.#markPageUnread();
} else {
await this.#markPageRead();
@ -85,9 +90,10 @@ export class PageIndicatorComponent implements OnChanges {
clearTimeout(this.pageReadTimeout);
}
if (this.isActive && !this.read) {
const read = untracked(this.read);
if (this.isActive() && !read) {
this.pageReadTimeout = window.setTimeout(async () => {
if (this.isActive && !this.read) {
if (this.isActive() && !read) {
await this.#markPageRead();
}
}, this.#config.AUTO_READ_TIME * 1000);
@ -95,19 +101,21 @@ export class PageIndicatorComponent implements OnChanges {
}
async #markPageRead() {
this.#logger.info('[PAGES] Mark page read', this.number);
const number = untracked(this.pageNumber);
this.#logger.info('[PAGES] Mark page read', number);
const fileId = this._state.fileId;
await this._viewedPagesService.add({ page: this.number }, this._state.dossierId, fileId);
const viewedPage = new ViewedPage({ page: this.number, fileId });
await this._viewedPagesService.add({ page: number }, this._state.dossierId, fileId);
const viewedPage = new ViewedPage({ page: number, fileId });
this._viewedPagesMapService.add(fileId, viewedPage);
}
async #markPageUnread() {
this.#logger.info('[PAGES] Mark page unread', this.number);
const number = untracked(this.pageNumber);
this.#logger.info('[PAGES] Mark page unread', number);
const fileId = this._state.fileId;
await this._viewedPagesService.remove(this._state.dossierId, fileId, this.number);
this._viewedPagesMapService.delete(fileId, this.number);
await this._viewedPagesService.remove(this._state.dossierId, fileId, number);
this._viewedPagesMapService.delete(fileId, number);
}
}

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

@ -1,10 +1,9 @@
<div *ngIf="viewedPages$ | async as viewedPages" class="pages" id="pages" [attr.help-mode-key]="'workload_page_list'">
<redaction-page-indicator
(pageSelected)="pageSelectedByClick($event)"
*ngFor="let pageNumber of pages; trackBy: trackBy"
[activeSelection]="pageHasSelection(pageNumber)"
[number]="pageNumber"
[read]="!!getViewedPage(viewedPages, pageNumber)"
[showDottedIcon]="isPageExcluded(pageNumber)"
></redaction-page-indicator>
<div class="pages" id="pages" [attr.help-mode-key]="'workload_page_list'">
@for (pageNumber of pages(); track pageNumber) {
<redaction-page-indicator
(pageSelected)="pageSelectedByClick($event)"
[pageNumber]="pageNumber"
[viewedPages]="viewedPages()"
></redaction-page-indicator>
}
</div>

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

@ -1,14 +1,12 @@
import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
import { AfterViewInit, Component, inject, Input } from '@angular/core';
import { AfterViewInit, Component, inject, input } from '@angular/core';
import { List } from '@iqser/common-ui/lib/utils';
import { ViewedPage } from '@red/domain';
import { ViewedPagesMapService } from '@services/files/viewed-pages-map.service';
import scrollIntoView from 'scroll-into-view-if-needed';
import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
import { AnnotationsListingService } from '../../services/annotations-listing.service';
import { FilePreviewStateService } from '../../services/file-preview-state.service';
import { MultiSelectService } from '../../services/multi-select.service';
import { PageIndicatorComponent } from '../page-indicator/page-indicator.component';
import { toSignal } from '@angular/core/rxjs-interop';
@Component({
selector: 'redaction-pages',
@ -19,11 +17,10 @@ import { PageIndicatorComponent } from '../page-indicator/page-indicator.compone
})
export class PagesComponent implements AfterViewInit {
readonly #state = inject(FilePreviewStateService);
readonly #multiSelectService = inject(MultiSelectService);
readonly #listingService = inject(AnnotationsListingService);
protected readonly _pdf = inject(PdfViewer);
@Input({ required: true }) pages: List<number>;
readonly pages = input.required<List<number>>();
readonly viewedPages$ = inject(ViewedPagesMapService).get$(this.#state.fileId);
readonly viewedPages = toSignal(this.viewedPages$);
ngAfterViewInit() {
setTimeout(() => {
@ -45,18 +42,4 @@ export class PagesComponent implements AfterViewInit {
pageSelectedByClick($event: number): void {
this._pdf.navigateTo($event);
}
readonly trackBy = (_index: number, item: number) => item;
pageHasSelection(page: number) {
return this.#multiSelectService.active() && !!this.#listingService.selected.find(a => a.pageNumber === page);
}
isPageExcluded(pageNumber: number): boolean {
return this.#state.file().excludedPages.includes(pageNumber);
}
getViewedPage(viewedPages: ViewedPage[], pageNumber: number) {
return viewedPages.find(p => p.page === pageNumber);
}
}

4
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html
View File

@ -1,5 +1,5 @@
<cdk-virtual-scroll-viewport [itemSize]="LIST_ITEM_SIZE" [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }">
<cdk-virtual-scroll-viewport [itemSize]="LIST_ITEM_SIZE" [ngStyle]="{ height: redactedTextsAreaHeight() + 'px' }">
<ul>
<li *cdkVirtualFor="let value of values">{{ value }}</li>
<li *cdkVirtualFor="let value of values()">{{ value }}</li>
</ul>
</cdk-virtual-scroll-viewport>

11
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core';
import { Component, computed, input } from '@angular/core';
import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { NgStyle } from '@angular/common';
@ -13,10 +13,9 @@ const MAX_ITEMS_DISPLAY = 5;
styleUrl: './selected-annotations-list.component.scss',
})
export class SelectedAnnotationsListComponent {
@Input({ required: true }) values: string[];
values = input.required<string[]>();
readonly redactedTextsAreaHeight = computed(() =>
this.values.length <= MAX_ITEMS_DISPLAY ? LIST_ITEM_SIZE * this.values.length : LIST_ITEM_SIZE * MAX_ITEMS_DISPLAY,
);
protected readonly LIST_ITEM_SIZE = LIST_ITEM_SIZE;
get redactedTextsAreaHeight() {
return this.values.length <= MAX_ITEMS_DISPLAY ? LIST_ITEM_SIZE * this.values.length : LIST_ITEM_SIZE * MAX_ITEMS_DISPLAY;
}
}

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

@ -16,7 +16,7 @@
<redaction-editable-structured-component-value
#editableComponent
[entry]="entry"
[canEdit]="canEdit"
[canEdit]="canEdit()"
(deselectLast)="deselectLast()"
(revertOverride)="revertOverride($event)"
(overrideValue)="overrideValue($event)"

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

@ -1,4 +1,4 @@
import { Component, effect, Input, OnInit, signal, ViewChildren } from '@angular/core';
import { Component, computed, effect, input, OnInit, signal, viewChild } from '@angular/core';
import { List } from '@common-ui/utils';
import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
@ -21,13 +21,14 @@ import { FilePreviewStateService } from '../../services/file-preview-state.servi
imports: [PopupFilterComponent, NgIf, AsyncPipe, TranslateModule, NgForOf, EditableStructuredComponentValueComponent],
})
export class StructuredComponentManagementComponent implements OnInit {
file = input<File>();
dictionaries = input<Dictionary[]>();
editableComponents = viewChild<List<EditableStructuredComponentValueComponent>>('editableComponent');
canEdit = computed(() => this.file().workflowStatus !== WorkflowFileStatuses.APPROVED);
protected readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
protected readonly componentLogData$ = toObservable(this.componentLogData);
protected readonly iconButtonTypes = IconButtonTypes;
protected displayedComponents$: Observable<ComponentLogEntry[]>;
@Input() file: File;
@Input() dictionaries: Dictionary[];
@ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
constructor(
private readonly _componentLogService: ComponentLogService,
@ -42,17 +43,13 @@ export class StructuredComponentManagementComponent implements OnInit {
});
}
get canEdit() {
return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
}
async ngOnInit(): Promise<void> {
await this.#loadData();
this.displayedComponents$ = this.#displayedComponents$();
}
deselectLast() {
const lastSelected = this.editableComponents.find(c => c.selected);
const lastSelected = this.editableComponents().find(c => c.selected);
if (lastSelected) {
lastSelected.deselect();
}
@ -61,7 +58,9 @@ export class StructuredComponentManagementComponent implements OnInit {
async revertOverride(originalKey: string) {
this._loadingService.start();
await firstValueFrom(
this._componentLogService.revertOverride(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId, [originalKey]),
this._componentLogService.revertOverride(this.file().dossierTemplateId, this.file().dossierId, this.file().fileId, [
originalKey,
]),
);
await this.#loadData();
}
@ -69,7 +68,7 @@ export class StructuredComponentManagementComponent implements OnInit {
async overrideValue(componentLogEntry: IComponentLogEntry) {
this._loadingService.start();
await firstValueFrom(
this._componentLogService.override(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId, componentLogEntry),
this._componentLogService.override(this.file().dossierTemplateId, this.file().dossierId, this.file().fileId, componentLogEntry),
);
await this.#loadData();
}
@ -84,10 +83,10 @@ export class StructuredComponentManagementComponent implements OnInit {
async #loadData(): Promise<void> {
const componentLogData = await firstValueFrom(
this._componentLogService.getComponentLogData(
this.file.dossierTemplateId,
this.file.dossierId,
this.file.fileId,
this.dictionaries,
this.file().dossierTemplateId,
this.file().dossierId,
this.file().fileId,
this.dictionaries(),
),
);
this.#computeFilters(componentLogData);

4
apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.html
View File

@ -67,7 +67,7 @@
<mat-form-field>
<mat-select formControlName="dictionary" [placeholder]="'add-hint.dialog.content.type-placeholder' | translate">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-select-trigger>{{ displayedDictionaryLabel() }}</mat-select-trigger>
<mat-option
*ngFor="let dictionary of dictionaries"
[matTooltip]="dictionary.description"
@ -100,7 +100,7 @@
[label]="'add-hint.dialog.actions.save' | translate"
[submit]="true"
[type]="iconButtonTypes.primary"
[disabled]="disabled"
[disabled]="_disabled()"
>
</iqser-icon-button>

49
apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts
View File

@ -1,6 +1,5 @@
import { NgClass, NgForOf, NgIf, NgStyle } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Component, computed, effect, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { MatFormField } from '@angular/material/form-field';
@ -24,10 +23,10 @@ import { DictionaryService } from '@services/entity-services/dictionary.service'
import { Roles } from '@users/roles';
import { UserPreferenceService } from '@users/user-preference.service';
import { calcTextWidthInPixels, stringToBoolean } from '@utils/functions';
import { tap } from 'rxjs/operators';
import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
import { getRedactOrHintOptions } from '../../utils/dialog-options';
import { AddHintData, AddHintResult, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-types';
import { formValueToSignal } from '@common-ui/utils';
const MAXIMUM_TEXT_AREA_WIDTH = 421;
@ -67,11 +66,22 @@ export class AddHintDialogComponent extends IqserDialogComponent<AddHintDialogCo
readonly maximumSelectedTextWidth = 567;
dictionaryRequest = false;
dictionaries: Dictionary[] = [];
form!: UntypedFormGroup;
form = this.#getForm();
isEditingSelectedText = false;
selectedTextRows = 1;
textWidth: number;
dictionary = formValueToSignal(this.form.get('dictionary'));
displayedDictionaryLabel = computed(() => {
if (this.dictionary()) {
return this.dictionaries.find(d => d.type === this.dictionary())?.label ?? null;
}
return null;
});
_disabled = computed(() => this.#isRss || !this.dictionary());
readonly optionValue = formValueToSignal<DetailsRadioOption<RedactOrHintOption>>(this.form.get('option'));
constructor(
private readonly _activeDossiersService: ActiveDossiersService,
private readonly _dictionaryService: DictionaryService,
@ -80,7 +90,7 @@ export class AddHintDialogComponent extends IqserDialogComponent<AddHintDialogCo
private readonly _userPreferences: UserPreferenceService,
) {
super();
this.#dossier = _activeDossiersService.find(this.data.dossierId);
this.#dossier = this._activeDossiersService.find(this.data.dossierId);
this.#applyToAllDossiers = this.applyToAll;
this.options = getRedactOrHintOptions(
this.#dossier,
@ -92,20 +102,13 @@ export class AddHintDialogComponent extends IqserDialogComponent<AddHintDialogCo
this.#isRss,
);
this.form = this.#getForm();
this.textWidth = calcTextWidthInPixels(this.form.controls.selectedText.value);
this.form
.get('option')
.valueChanges.pipe(
tap((option: DetailsRadioOption<RedactOrHintOption>) => {
this.dictionaryRequest = option.value === RedactOrHintOptions.IN_DOSSIER;
this.#setDictionaries();
this.#resetValues();
}),
takeUntilDestroyed(),
)
.subscribe();
effect(() => {
this.dictionaryRequest = this.optionValue().value === RedactOrHintOptions.IN_DOSSIER;
this.#setDictionaries();
this.#resetValues();
});
}
toggleEditingSelectedText() {
@ -120,14 +123,6 @@ export class AddHintDialogComponent extends IqserDialogComponent<AddHintDialogCo
this.form.patchValue({ selectedText: this.initialText });
}
get displayedDictionaryLabel() {
const dictType = this.form.get('dictionary').value;
if (dictType) {
return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
}
return null;
}
get applyToAll() {
return this.isSystemDefault || this._userPreferences.getAddHintDefaultExtraOption() === 'undefined'
? this.data.applyToAllDossiers ?? true
@ -150,10 +145,6 @@ export class AddHintDialogComponent extends IqserDialogComponent<AddHintDialogCo
return defaultOption ?? this.options[0];
}
get disabled() {
return this.#isRss || !this.form.get('dictionary').value;
}
async ngOnInit(): Promise<void> {
this.#setDictionaries();
this.#resetValues();

2
apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
View File

@ -28,7 +28,7 @@
<input formControlName="section" name="section" type="text" />
</div>
<div *ngIf="this.allRectangles" class="iqser-input-group w-400">
<div *ngIf="allRectangles" class="iqser-input-group w-400">
<label [translate]="'change-legal-basis-dialog.content.classification'"></label>
<input formControlName="classification" name="classification" type="text" />
</div>

5
apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts
View File

@ -34,6 +34,7 @@ import { LegalBasisOption } from '../../utils/dialog-types';
})
export class ChangeLegalBasisDialogComponent extends BaseDialogComponent implements OnInit {
legalOptions: LegalBasisOption[] = [];
allRectangles = this._data.annotations.reduce((acc, a) => acc && a.AREA, true);
constructor(
private readonly _justificationsService: JustificationsService,
@ -44,10 +45,6 @@ export class ChangeLegalBasisDialogComponent extends BaseDialogComponent impleme
this.form = this._getForm();
}
get allRectangles(): boolean {
return this._data.annotations.reduce((acc, a) => acc && a.AREA, true);
}
async ngOnInit() {
const data = await firstValueFrom(this._justificationsService.getForDossierTemplate(this._data.dossier.dossierTemplateId));

2
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component.html
View File

@ -13,7 +13,7 @@
<mat-form-field>
<mat-select [placeholder]="'add-annotation.dialog.content.type-placeholder' | translate" formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-select-trigger>{{ displayedDictionaryLabel() }}</mat-select-trigger>
<mat-option
*ngFor="let dictionary of dictionaries"
[matTooltip]="dictionary.description"

20
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, inject, OnInit } from '@angular/core';
import { Component, computed, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
import { Dictionary, IAddRedactionRequest } from '@red/domain';
@ -11,6 +11,7 @@ import { NgForOf } from '@angular/common';
import { MatTooltip } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { MatDialogClose } from '@angular/material/dialog';
import { formValueToSignal } from '@common-ui/utils';
@Component({
templateUrl: './add-annotation-dialog.component.html',
@ -38,6 +39,15 @@ export class AddAnnotationDialogComponent
readonly iconButtonTypes = IconButtonTypes;
dictionaries: Dictionary[] = [];
readonly form = this.#getForm();
readonly dictionaryType = formValueToSignal(this.form.controls.dictionary);
readonly displayedDictionaryLabel = computed(() => {
const dictType = this.dictionaryType();
if (dictType) {
return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
}
return null;
});
constructor(
private readonly _dictionaryService: DictionaryService,
@ -46,14 +56,6 @@ export class AddAnnotationDialogComponent
super();
}
get displayedDictionaryLabel() {
const dictType = this.form.controls.dictionary.value;
if (dictType) {
return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
}
return null;
}
get disabled() {
return !this.form.controls.dictionary.value;
}

2
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html
View File

@ -12,7 +12,7 @@
<label [translate]="'edit-redaction.dialog.content.type'"></label>
<mat-form-field>
<mat-select [placeholder]="'edit-redaction.dialog.content.unchanged' | translate" formControlName="type">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-select-trigger>{{ displayedDictionaryLabel() }}</mat-select-trigger>
<mat-option
*ngFor="let dictionary of dictionaries"
[matTooltip]="dictionary.description"

31
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, computed, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
import {
CircleButtonComponent,
@ -20,6 +20,7 @@ import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select
import { MatTooltip } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { MatDialogClose } from '@angular/material/dialog';
import { formValueToSignal } from '@common-ui/utils';
@Component({
templateUrl: 'edit-annotation-dialog.component.html',
@ -50,9 +51,19 @@ export class EditAnnotationDialogComponent
readonly roles = Roles;
readonly iconButtonTypes = IconButtonTypes;
readonly redactedTexts: string[];
readonly #dossier: Dossier = this._activeDossiersService.find(this.data.dossierId);
dictionaries: Dictionary[] = [];
form: UntypedFormGroup;
readonly #dossier: Dossier;
form: UntypedFormGroup = this.#getForm();
showList = this.data.annotations.every(annotation => annotation.isSkipped || annotation.isRedacted);
selectedDictionaryType = formValueToSignal(this.form.get('type'));
displayedDictionaryLabel = computed(() => {
const selectedDictionaryType = this.selectedDictionaryType();
if (selectedDictionaryType) {
return this.dictionaries.find(d => d.type === selectedDictionaryType)?.label ?? null;
}
return null;
});
constructor(
private readonly _activeDossiersService: ActiveDossiersService,
@ -60,25 +71,11 @@ export class EditAnnotationDialogComponent
private readonly _formBuilder: FormBuilder,
) {
super();
this.#dossier = this._activeDossiersService.find(this.data.dossierId);
const annotations = this.data.annotations;
this.redactedTexts = annotations.map(annotation => annotation.value);
this.form = this.#getForm();
this.initialFormValue = JSON.parse(JSON.stringify(this.form.getRawValue()));
}
get displayedDictionaryLabel() {
const selectedDictionaryType = this.form.get('type').value;
if (selectedDictionaryType) {
return this.dictionaries.find(d => d.type === selectedDictionaryType)?.label ?? null;
}
return null;
}
get showList() {
return this.data.annotations.every(annotation => annotation.isSkipped || annotation.isRedacted);
}
async ngOnInit(): Promise<void> {
this.#setTypes();
}

2
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.html
View File

@ -20,7 +20,7 @@
<ul *cdkVirtualFor="let text of redactedTexts; let idx = index">
<li>
{{
(isFalsePositive
(isFalsePositive()
? 'remove-annotation.dialog.content.list-item-false-positive'
: 'remove-annotation.dialog.content.list-item'
)

9
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts
View File

@ -1,6 +1,6 @@
import { CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
import { NgIf, NgStyle } from '@angular/common';
import { Component } from '@angular/core';
import { Component, computed } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
@ -17,6 +17,7 @@ import {
import { TranslateModule } from '@ngx-translate/core';
import { getRemoveRedactionOptions } from '../../../utils/dialog-options';
import { RemoveAnnotationData, RemoveAnnotationOption, RemoveAnnotationOptions, RemoveAnnotationResult } from '../../../utils/dialog-types';
import { formValueToSignal } from '@common-ui/utils';
@Component({
templateUrl: 'remove-annotation-dialog.component.html',
@ -46,6 +47,8 @@ export class RemoveAnnotationDialogComponent extends IqserDialogComponent<
readonly iconButtonTypes = IconButtonTypes;
readonly options: DetailsRadioOption<RemoveAnnotationOption>[];
readonly redactedTexts: string[];
readonly option = formValueToSignal<DetailsRadioOption<RemoveAnnotationOption>>(this.form.get('option'));
readonly isFalsePositive = computed(() => this.option().value === RemoveAnnotationOptions.FALSE_POSITIVE);
form!: UntypedFormGroup;
@ -56,10 +59,6 @@ export class RemoveAnnotationDialogComponent extends IqserDialogComponent<
this.form = this.#getForm();
}
get isFalsePositive(): boolean {
return this.form.get('option').value.value === RemoveAnnotationOptions.FALSE_POSITIVE;
}
get #applyToAllDossiers(): boolean {
const selectedOption = this.form.get('option').value.value;
return selectedOption === RemoveAnnotationOptions.IN_DOSSIER || selectedOption === RemoveAnnotationOptions.FALSE_POSITIVE;

3
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
View File

@ -18,6 +18,7 @@ interface RevertValueResult {}
})
export class RevertValueDialogComponent extends IqserDialogComponent<RevertValueDialogComponent, RevertValueData, RevertValueResult> {
protected readonly entry = this.data.entry;
readonly valueDescription = this.#valueDescription;
constructor(private readonly _translateService: TranslateService) {
super();
@ -26,7 +27,7 @@ export class RevertValueDialogComponent extends IqserDialogComponent<RevertValue
this.close(ConfirmOptions.CONFIRM);
}
get valueDescription(): string {
get #valueDescription(): string {
const componentRuleString = this._translateService.instant('revert-value-dialog.component-rule');
const valueDescription = this.entry.componentValues[0]?.valueDescription || '';
return `<strong>${componentRuleString}</strong> ${valueDescription}`;

8
apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html
View File

@ -30,7 +30,7 @@
[placeholder]="isBulkEdit ? ('edit-redaction.dialog.content.unchanged' | translate) : ''"
formControlName="type"
>
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-select-trigger>{{ displayedDictionaryLabel() }}</mat-select-trigger>
<mat-option
(click)="typeChanged()"
*ngFor="let dictionary of typeSelectOptions"
@ -44,8 +44,8 @@
</mat-form-field>
</div>
<ng-container *ngIf="showExtras && !hiddenReason">
<div [class.required]="!form.controls.reason.disabled" class="iqser-input-group w-450">
<ng-container *ngIf="showExtras && !hiddenReason()">
<div [class.required]="!reasonDisabled()" class="iqser-input-group w-450">
<label [translate]="'edit-redaction.dialog.content.reason'"></label>
<mat-form-field>
<mat-select
@ -81,7 +81,7 @@
<label [translate]="'edit-redaction.dialog.content.section'"></label>
<input
[placeholder]="
isBulkEdit && !hideParagraphPlaceholder ? ('edit-redaction.dialog.content.unchanged' | translate) : ''
isBulkEdit && !hideParagraphPlaceholder() ? ('edit-redaction.dialog.content.unchanged' | translate) : ''
"
formControlName="section"
name="section"

80
apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { NgForOf, NgIf } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';
import { Component, computed, inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { MatFormField } from '@angular/material/form-field';
@ -38,6 +38,7 @@ import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-r
import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
import { validatePageRange } from '../../utils/form-validators';
import { parseRectanglePosition, parseSelectedPageNumbers } from '../../utils/enhance-manual-redaction-request.utils';
import { formStatusToSignal, formValueToSignal, isJustOne } from '@common-ui/utils';
interface TypeSelectOptions {
type: string;
@ -94,10 +95,34 @@ export class EditRedactionDialogComponent
typeSelectOptions: TypeSelectOptions[] = [];
readonly form = this.#getForm();
hasTypeChanged = false;
initialReasonDisabled = this.someSkipped;
initialReasonDisabled = this.#someSkipped;
protected readonly roles = Roles;
readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
readonly formStatus = formStatusToSignal(this.form);
readonly formInvalid = computed(() => this.formStatus() === 'INVALID');
readonly dictionaryType = formValueToSignal(this.form.controls.type);
readonly reasonStatus = formStatusToSignal(this.form.controls.reason);
readonly reasonValue = formValueToSignal(this.form.controls.reason);
readonly sectionValue = formValueToSignal(this.form.controls.section);
readonly displayedDictionaryLabel = computed(() => {
const selectedDictionaryType = this.dictionaryType();
if (selectedDictionaryType) {
return this.typeSelectOptions.find(option => option.type === selectedDictionaryType)?.label ?? null;
}
return null;
});
readonly reasonDisabled = computed(() => this.reasonStatus() === 'DISABLED');
readonly hiddenReason = computed(() => this.isImage && this.reasonDisabled());
readonly hideParagraphPlaceholder = computed(
() => this.sectionValue() !== this.initialFormValue['section'] || this.#isFieldEmpty('section'),
);
readonly hideReasonPlaceholder = this.#hideReasonPlaceholder;
readonly isBulkEdit = !isJustOne(this.annotations);
readonly showExtras = (this.isImage && this.isRedacted) || !(this.isImage || this.isHint);
constructor(
private readonly _justificationsService: JustificationsService,
private readonly _dictionaryService: DictionaryService,
@ -105,54 +130,27 @@ export class EditRedactionDialogComponent
super();
}
get displayedDictionaryLabel() {
const selectedDictionaryType = this.form.controls.type.value;
if (selectedDictionaryType) {
return this.typeSelectOptions.find(option => option.type === selectedDictionaryType)?.label ?? null;
}
return null;
}
get showExtras() {
return (this.isImage && this.isRedacted) || !(this.isImage || this.isHint);
}
get disabled() {
return (
this.form.invalid ||
(!this.isImage && this.showExtras && !this.form.controls.reason.disabled ? !this.form.controls.reason.value : false)
);
return this.formInvalid() || (!this.isImage && this.showExtras && !this.reasonDisabled() ? !this.reasonValue() : false);
}
get someSkipped() {
get #someSkipped() {
return this.annotations.some(annotation => annotation.isSkipped);
}
get redactBasedTypes() {
get #redactBasedTypes() {
return this._dictionaryService.getRedactionTypes(this.#dossier.dossierTemplateId).map(dictionary => dictionary.type);
}
get isRedactBasedType() {
return this.redactBasedTypes.includes(this.form.controls.type.value);
get #isRedactBasedType() {
return this.#redactBasedTypes.includes(this.form.controls.type.value);
}
get hideReasonPlaceholder() {
return (this.hasTypeChanged && this.isRedactBasedType) || this.#isFieldEmpty('legalBasisValue');
get #hideReasonPlaceholder() {
return (this.hasTypeChanged && this.#isRedactBasedType) || this.#isFieldEmpty('legalBasisValue');
}
get hideParagraphPlaceholder() {
return this.form.controls.section.value !== this.initialFormValue['section'] || this.#isFieldEmpty('section');
}
get hiddenReason() {
return this.isImage && this.form.controls.reason.disabled;
}
get isBulkEdit() {
return this.annotations.length > 1;
}
get sameType() {
get #sameType() {
return this.annotations.every(annotation => annotation.type === this.annotations[0].type);
}
@ -187,7 +185,7 @@ export class EditRedactionDialogComponent
const selectedDictionaryType = this.form.controls.type.value;
const initialReason = this.form.get('type').value === this.initialFormValue.type && !this.initialReasonDisabled;
if (this.redactBasedTypes.includes(selectedDictionaryType) || initialReason) {
if (this.#redactBasedTypes.includes(selectedDictionaryType) || initialReason) {
this.form.controls.reason.enable();
this.hasTypeChanged = true;
if (initialReason) {
@ -230,7 +228,7 @@ export class EditRedactionDialogComponent
this.isImage,
this.isHint,
this.annotations.every(annotation => annotation.isOCR),
this.sameType ? this.annotations[0].type : null,
this.#sameType ? this.annotations[0].type : null,
);
this.typeSelectOptions = this.dictionaries.map(dictionary => ({
@ -248,10 +246,10 @@ export class EditRedactionDialogComponent
#getForm() {
const sameSection = this.annotations.every(annotation => annotation.section === this.annotations[0].section);
return new FormGroup({
reason: new FormControl<LegalBasisOption>({ value: null, disabled: this.someSkipped }),
reason: new FormControl<LegalBasisOption>({ value: null, disabled: this.#someSkipped }),
comment: new FormControl<string>(null),
type: new FormControl<string>({
value: this.sameType ? this.annotations[0].type : null,
value: this.#sameType ? this.annotations[0].type : null,
disabled: this.isImported,
}),
section: new FormControl<string>({ value: sameSection ? this.annotations[0].section : null, disabled: this.isImported }),

2
apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html
View File

@ -33,7 +33,7 @@
<div class="iqser-input-group w-400">
<label [translate]="'manual-annotation.dialog.content.legalBasis'"></label>
<input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
<input [value]="reasonValue().legalBasis" disabled type="text" />
</div>
}

17
apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts
View File

@ -30,6 +30,7 @@ import { ForceAnnotationOption, LegalBasisOption } from '../../utils/dialog-type
import { getForceAnnotationOptions } from '../../utils/dialog-options';
import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-radio.component';
import { SystemDefaults } from '../../../account/utils/dialog-defaults';
import { formValueToSignal } from '@common-ui/utils';
const DOCUMINE_LEGAL_BASIS = 'n-a.';
@ -68,6 +69,12 @@ export class ForceAnnotationDialogComponent extends BaseDialogComponent implemen
]);
legalOptions: LegalBasisOption[] = [];
readonly isImageHint = this._data.annotations.every(annotation => annotation.IMAGE_HINT);
readonly isHintDialog = this._data.hint;
readonly dialogTitle = this.#dialogTitle;
readonly reasonValue = formValueToSignal<ILegalBasisChangeRequest>(this.form.get('reason'));
protected readonly roles = Roles;
constructor(
@ -81,19 +88,11 @@ export class ForceAnnotationDialogComponent extends BaseDialogComponent implemen
this.form = this.#getForm();
}
get isImageHint() {
return this._data.annotations.every(annotation => annotation.IMAGE_HINT);
}
get isHintDialog() {
return this._data.hint;
}
get disabled(): boolean {
return !this.valid;
}
get dialogTitle(): string {
get #dialogTitle(): string {
return this.isImageHint
? _('manual-annotation.dialog.header.force-redaction-image-hint')
: this.isHintDialog

7
apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.html
View File

@ -9,12 +9,7 @@
<div class="iqser-input-group required w-150">
<label translate="highlight-action-dialog.form.color.label"></label>
<input class="hex-color-input" formControlName="color" name="color" type="text" />
<div
[colorPicker]="form.get('color').value"
[cpDisabled]="true"
[style.background]="form.get('color').value"
class="input-icon"
></div>
<div [colorPicker]="colorValue()" [cpDisabled]="true" [style.background]="colorValue()" class="input-icon"></div>
</div>
<iqser-details-radio [displayInRow]="true" [options]="options" class="mt-25" formControlName="option"></iqser-details-radio>

3
apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
View File

@ -14,6 +14,7 @@ import { highlightsTranslations } from '@translations/highlights-translations';
import { Roles } from '@users/roles';
import { ColorPickerModule } from 'ngx-color-picker';
import { firstValueFrom } from 'rxjs';
import { formValueToSignal } from '@common-ui/utils';
export interface HighlightActionData {
readonly operation: EarmarkOperation;
@ -59,6 +60,8 @@ export class HighlightActionDialogComponent extends BaseDialogComponent {
},
];
readonly colorValue = formValueToSignal(this.form.get('color'));
constructor(
protected readonly _dialogRef: MatDialogRef<HighlightActionDialogComponent>,
private readonly _textHighlightService: EarmarksService,

2
apps/red-ui/src/app/modules/file-preview/dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component.html
View File

@ -28,7 +28,7 @@
<div *deny="roles.getRss" class="iqser-input-group w-450">
<label [translate]="'manual-annotation.dialog.content.legalBasis'"></label>
<input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
<input [value]="reasonValue().legalBasis" disabled type="text" />
</div>
<div class="iqser-input-group w-450">

7
apps/red-ui/src/app/modules/file-preview/dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component.ts
View File

@ -9,7 +9,7 @@ import {
IqserDialogComponent,
Toaster,
} from '@iqser/common-ui';
import { Dossier, IAddRedactionRequest, SuperTypes } from '@red/domain';
import { Dossier, IAddRedactionRequest, ILegalBasisChangeRequest, SuperTypes } from '@red/domain';
import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
import { JustificationsService } from '@services/entity-services/justifications.service';
import { Roles } from '@users/roles';
@ -33,6 +33,7 @@ import { getRectangleRedactOptions } from '../../utils/dialog-options';
import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-radio.component';
import { SystemDefaults } from '../../../account/utils/dialog-defaults';
import { validatePageRange } from '../../utils/form-validators';
import { formValueToSignal } from '@common-ui/utils';
export const NON_READABLE_CONTENT = 'non-readable content';
@ -68,7 +69,8 @@ export class RectangleAnnotationDialog
protected readonly options: DetailsRadioOption<RectangleRedactOption>[];
protected legalOptions: LegalBasisOption[] = [];
readonly form: UntypedFormGroup;
readonly form: UntypedFormGroup = this.#getForm();
readonly reasonValue = formValueToSignal<ILegalBasisChangeRequest>(this.form.get('reason'));
constructor(
private readonly activeDossiersService: ActiveDossiersService,
@ -81,7 +83,6 @@ export class RectangleAnnotationDialog
this.options = getRectangleRedactOptions();
this.form = this.#getForm();
this.initialFormValue = this.form.getRawValue();
}

2
apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html
View File

@ -22,7 +22,7 @@
<mat-form-field>
<mat-select [placeholder]="'redact-text.dialog.content.unchanged' | translate" formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-select-trigger>{{ displayedDictionaryLabel() }}</mat-select-trigger>
<mat-option
(click)="typeChanged()"
*ngFor="let dictionary of dictionaries"

45
apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
View File

@ -1,6 +1,5 @@
import { NgForOf, NgIf } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Component, computed, effect, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { MatFormField } from '@angular/material/form-field';
@ -16,7 +15,6 @@ import { ActiveDossiersService } from '@services/dossiers/active-dossiers.servic
import { DictionaryService } from '@services/entity-services/dictionary.service';
import { JustificationsService } from '@services/entity-services/justifications.service';
import { firstValueFrom } from 'rxjs';
import { tap } from 'rxjs/operators';
import {
SelectedAnnotationsTableComponent,
ValueColumn,
@ -30,6 +28,7 @@ import {
RedactRecommendationResult,
ResizeOptions,
} from '../../utils/dialog-types';
import { formValueToSignal } from '@common-ui/utils';
@Component({
templateUrl: './redact-recommendation-dialog.component.html',
@ -81,6 +80,17 @@ export class RedactRecommendationDialogComponent
{ label: redaction.typeLabel },
]);
readonly dictionaryType = formValueToSignal(this.form.controls.dictionary);
readonly optionValue = formValueToSignal<DetailsRadioOption<RedactOrHintOption>>(this.form.controls.option);
readonly displayedDictionaryLabel = computed(() => {
const dictType = this.dictionaryType();
if (dictType) {
return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
}
return null;
});
constructor(
private readonly _justificationsService: JustificationsService,
private readonly _dictionaryService: DictionaryService,
@ -88,32 +98,19 @@ export class RedactRecommendationDialogComponent
super();
this.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover, false, true);
this.form.controls.option.valueChanges
.pipe(
tap((option: DetailsRadioOption<RedactOrHintOption>) => {
this.dictionaryRequest = option.value === RedactOrHintOptions.IN_DOSSIER;
this.#setDictionaries();
this.#resetValues();
}),
takeUntilDestroyed(),
)
.subscribe();
effect(() => {
this.dictionaryRequest = this.optionValue().value === RedactOrHintOptions.IN_DOSSIER;
this.#setDictionaries();
this.#resetValues();
});
this.form.controls.option.setValue(this.options[0]);
}
get isBulkLocal(): boolean {
get #isBulkLocal(): boolean {
return this.form.controls.option.value.value === ResizeOptions.IN_DOCUMENT;
}
get displayedDictionaryLabel() {
const dictType = this.form.controls.dictionary.value;
if (dictType) {
return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
}
return null;
}
get disabled() {
return !this.form.controls.dictionary.value;
}
@ -157,7 +154,7 @@ export class RedactRecommendationDialogComponent
this.close({
redaction,
isMulti: this.isMulti,
bulkLocal: this.isBulkLocal,
bulkLocal: this.#isBulkLocal,
});
}
@ -185,7 +182,7 @@ export class RedactRecommendationDialogComponent
}
const commentValue = this.form.controls.comment.value;
addRedactionRequest.comment = commentValue ? (this.isBulkLocal ? commentValue : { text: commentValue }) : null;
addRedactionRequest.comment = commentValue ? (this.#isBulkLocal ? commentValue : { text: commentValue }) : null;
addRedactionRequest.addToAllDossiers = this.data.isApprover && this.dictionaryRequest && this.#applyToAllDossiers;
return addRedactionRequest;
}

4
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
View File

@ -91,7 +91,7 @@
<mat-form-field>
<mat-select [placeholder]="'redact-text.dialog.content.type-placeholder' | translate" formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel$ | async }}</mat-select-trigger>
<mat-select-trigger>{{ displayedDictionaryLabel() }}</mat-select-trigger>
<mat-option
(click)="typeChanged()"
*ngFor="let dictionary of dictionaries"
@ -120,7 +120,7 @@
<div class="dialog-actions">
<iqser-icon-button
[disabled]="!form.valid"
[disabled]="!isFormValid()"
[label]="'redact-text.dialog.actions.save' | translate"
[submit]="true"
[type]="iconButtonTypes.primary"

85
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
View File

@ -1,6 +1,5 @@
import { AsyncPipe, NgClass, NgForOf, NgIf, NgStyle } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Component, computed, effect, inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { MatFormField } from '@angular/material/form-field';
@ -17,8 +16,7 @@ import { JustificationsService } from '@services/entity-services/justifications.
import { Roles } from '@users/roles';
import { UserPreferenceService } from '@users/user-preference.service';
import { calcTextWidthInPixels, stringToBoolean } from '@utils/functions';
import { firstValueFrom, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { firstValueFrom } from 'rxjs';
import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
import { getRedactOrHintOptions } from '../../utils/dialog-options';
import {
@ -30,6 +28,7 @@ import {
ResizeOptions,
} from '../../utils/dialog-types';
import { enhanceManualRedactionRequest, EnhanceRequestData } from '../../utils/enhance-manual-redaction-request.utils';
import { formStatusToSignal, formValueToSignal } from '@common-ui/utils';
const MAXIMUM_TEXT_AREA_WIDTH = 421;
@ -63,19 +62,33 @@ export class RedactTextDialogComponent
{
readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
#applyToAllDossiers = this.applyToAll;
#applyToAllDossiers = this.#applyToAll;
readonly roles = Roles;
readonly iconButtonTypes = IconButtonTypes;
readonly initialText = this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value;
readonly form: FormGroup;
readonly options: DetailsRadioOption<RedactOrHintOption>[] = getRedactOrHintOptions(
this.#dossier,
this.#applyToAllDossiers,
this.data.isApprover,
this.data.isPageExcluded,
);
readonly form: FormGroup = this.#getForm();
readonly formStatus = formStatusToSignal(this.form);
readonly isFormValid = computed(() => this.formStatus() === 'VALID');
readonly dictionaryType = formValueToSignal(this.form.controls.dictionary);
readonly displayedDictionaryLabel = computed(() => {
return this.dictionaries.find(d => d.type === this.dictionaryType())?.label ?? null;
});
readonly optionValue = formValueToSignal<DetailsRadioOption<RedactOrHintOption>>(this.form.controls.option);
dictionaryRequest = false;
legalOptions: LegalBasisOption[] = [];
dictionaries: Dictionary[] = [];
isEditingSelectedText = false;
modifiedText = this.initialText;
selectedTextRows = 1;
readonly options: DetailsRadioOption<RedactOrHintOption>[];
readonly displayedDictionaryLabel$: Observable<string>;
readonly maximumTextAreaWidth = MAXIMUM_TEXT_AREA_WIDTH;
readonly maximumSelectedTextWidth = 567;
@ -88,44 +101,34 @@ export class RedactTextDialogComponent
private readonly _userPreferences: UserPreferenceService,
) {
super();
this.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover, this.data.isPageExcluded);
this.form = this.#getForm();
this.#setupValidators(this.dictionaryRequest ? RedactOrHintOptions.IN_DOSSIER : RedactOrHintOptions.ONLY_HERE);
this.textWidth = calcTextWidthInPixels(this.form.controls.selectedText.value);
this.form.controls.option.valueChanges
.pipe(
tap((option: DetailsRadioOption<RedactOrHintOption>) => {
this.dictionaryRequest = option.value === RedactOrHintOptions.IN_DOSSIER;
if (this.dictionaryRequest) {
this.#setDictionaries();
this.form.patchValue({ selectedText: this.modifiedText });
} else {
this.isEditingSelectedText = false;
this.modifiedText = this.form.controls.selectedText.value;
this.form.patchValue({ selectedText: this.initialText }, { emitEvent: true });
}
this.#setupValidators(option.value);
this.#resetValues();
}),
takeUntilDestroyed(),
)
.subscribe();
this.displayedDictionaryLabel$ = this.form.controls.dictionary.valueChanges.pipe(
map(dictionary => this.dictionaries.find(d => d.type === dictionary)?.label ?? null),
);
effect(() => {
this.dictionaryRequest = this.optionValue().value === RedactOrHintOptions.IN_DOSSIER;
if (this.dictionaryRequest) {
this.#setDictionaries();
this.form.patchValue({ selectedText: this.modifiedText });
} else {
this.isEditingSelectedText = false;
this.modifiedText = this.form.controls.selectedText.value;
this.form.patchValue({ selectedText: this.initialText }, { emitEvent: true });
}
this.#setupValidators(this.optionValue().value);
this.#resetValues();
});
}
get isBulkLocal() {
get #isBulkLocal() {
return this.form.controls.option.value.value === ResizeOptions.IN_DOCUMENT;
}
get isSystemDefault(): boolean {
get #isSystemDefault(): boolean {
return this._userPreferences.getAddRedactionDefaultOption() === SystemDefaultOption.SYSTEM_DEFAULT;
}
get defaultOption() {
const defaultOption = this.isSystemDefault
get #defaultOption() {
const defaultOption = this.#isSystemDefault
? this.#getOption(SystemDefaults.ADD_REDACTION_DEFAULT)
: this.#getOption(this._userPreferences.getAddRedactionDefaultOption() as RedactOrHintOption);
this.dictionaryRequest = defaultOption.value === RedactOrHintOptions.IN_DOSSIER;
@ -136,8 +139,8 @@ export class RedactTextDialogComponent
return defaultOption ?? this.options[0];
}
get applyToAll() {
return this.isSystemDefault || this._userPreferences.getAddRedactionDefaultExtraOption() === 'undefined'
get #applyToAll() {
return this.#isSystemDefault || this._userPreferences.getAddRedactionDefaultExtraOption() === 'undefined'
? this.data.applyToAllDossiers ?? true
: stringToBoolean(this._userPreferences.getAddRedactionDefaultExtraOption());
}
@ -186,7 +189,7 @@ export class RedactTextDialogComponent
this.close({
redaction,
dictionary: this.dictionaries.find(d => d.type === this.form.controls.dictionary.value),
bulkLocal: this.isBulkLocal,
bulkLocal: this.#isBulkLocal,
});
}
@ -228,7 +231,7 @@ export class RedactTextDialogComponent
reason: [null as LegalBasisOption],
comment: [null],
dictionary: [this.#manualRedactionTypeExists ? SuperTypes.ManualRedaction : null],
option: this.defaultOption,
option: this.#defaultOption,
});
}
@ -239,7 +242,7 @@ export class RedactTextDialogComponent
}
#resetValues() {
this.#applyToAllDossiers = this.applyToAll;
this.#applyToAllDossiers = this.#applyToAll;
this.options[2].additionalCheck.checked = this.#applyToAllDossiers;
if (this.dictionaryRequest) {
this.form.controls.reason.setValue(null);
@ -263,7 +266,7 @@ export class RedactTextDialogComponent
comment: this.form.controls.comment.value,
isApprover: this.data.isApprover,
applyToAllDossiers: this.#applyToAllDossiers,
bulkLocal: this.isBulkLocal,
bulkLocal: this.#isBulkLocal,
};
}
}

39
apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
View File

@ -1,6 +1,5 @@
import { NgStyle } from '@angular/common';
import { Component, computed } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
@ -18,7 +17,6 @@ import { TranslateModule } from '@ngx-translate/core';
import { Roles } from '@users/roles';
import { UserPreferenceService } from '@users/user-preference.service';
import { stringToBoolean } from '@utils/functions';
import { map } from 'rxjs/operators';
import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
import {
SelectedAnnotationsTableComponent,
@ -34,7 +32,7 @@ import {
RemoveRedactionResult,
ResizeOptions,
} from '../../utils/dialog-types';
import { isJustOne } from '@common-ui/utils';
import { formValueToSignal, isJustOne } from '@common-ui/utils';
import { validatePageRange } from '../../utils/form-validators';
import { parseRectanglePosition, parseSelectedPageNumbers } from '../../utils/enhance-manual-redaction-request.utils';
@ -112,11 +110,13 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
readonly redactedTexts = this.data.redactions.map(annotation => annotation.value);
form: UntypedFormGroup = this._formBuilder.group({
comment: [null],
option: [this.defaultOption, validatePageRange(true)],
option: [this.#defaultOption, validatePageRange(true)],
});
readonly selectedOption = toSignal(this.form.get('option').valueChanges.pipe(map(value => value.value)));
readonly isFalsePositive = computed(() => this.selectedOption() === RemoveRedactionOptions.FALSE_POSITIVE);
readonly optionValue = formValueToSignal<DetailsRadioOption<RectangleRedactOption | RemoveRedactionOption>>(this.form.controls.option);
readonly isFalsePositive = computed(() => this.optionValue().value === RemoveRedactionOptions.FALSE_POSITIVE);
readonly hasFalsePositiveOption = !!this.options.find(option => option.value === RemoveRedactionOptions.FALSE_POSITIVE);
readonly tableColumns = computed<ValueColumn[]>(() => [
{ label: 'Value', width: '25%' },
{ label: 'Type', width: '25%' },
@ -135,6 +135,11 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
]),
);
readonly isBulk = !isJustOne(this.data.redactions);
readonly redactedTextsAreaHeight = this.redactedTexts.length <= 10 ? 18 * this.redactedTexts.length : 180;
readonly dialogContentHeight = this.options.length * 75 + 230;
readonly typeTranslationArg = { type: this.annotationsType };
constructor(
private readonly _formBuilder: FormBuilder,
private readonly _userPreferences: UserPreferenceService,
@ -142,32 +147,12 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
super();
}
get hasFalsePositiveOption() {
return !!this.options.find(option => option.value === RemoveRedactionOptions.FALSE_POSITIVE);
}
get defaultOption() {
get #defaultOption() {
const removeDefaultOption = this.#getOption(this.defaultOptionPreference as RemoveRedactionOption);
if (!!removeDefaultOption && !removeDefaultOption.disabled) return removeDefaultOption;
return this.options[0];
}
get typeTranslationArg() {
return { type: this.annotationsType };
}
get isBulk() {
return !isJustOne(this.data.redactions);
}
get redactedTextsAreaHeight() {
return this.redactedTexts.length <= 10 ? 18 * this.redactedTexts.length : 180;
}
get dialogContentHeight() {
return this.options.length * 75 + 230;
}
extraOptionChanged(option: DetailsRadioOption<RemoveRedactionOption | RectangleRedactOption>): void {
if (option.value === RectangleRedactOptions.MULTIPLE_PAGES) {
setTimeout(() => {

4
apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.html
View File

@ -3,7 +3,7 @@
<div [innerHTML]="'resize-redaction.dialog.header' | translate: { type: dialogHeaderType }" class="dialog-header heading-l"></div>
<div class="dialog-content redaction">
<ng-container *ngIf="!redaction.isImage && !redaction.AREA">
<ng-container *ngIf="!isImage && !redaction.AREA">
<div class="flex-start">
<label [translate]="'resize-redaction.dialog.content.original-text'"></label>
<span class="multi-line-ellipsis"
@ -26,7 +26,7 @@
<mat-form-field>
<mat-select formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-select-trigger>{{ displayedDictionaryLabel() }}</mat-select-trigger>
<mat-option [value]="entity?.type">
<span> {{ redaction.typeLabel }} </span>
</mat-option>

38
apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { NgIf } from '@angular/common';
import { Component, inject } from '@angular/core';
import { Component, computed, inject } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { MatFormField } from '@angular/material/form-field';
@ -12,6 +12,13 @@ import { ActiveDossiersService } from '@services/dossiers/active-dossiers.servic
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { getResizeRedactionOptions } from '../../utils/dialog-options';
import { ResizeOptions, ResizeRedactionData, ResizeRedactionOption, ResizeRedactionResult } from '../../utils/dialog-types';
import { AsControl, formValueToSignal } from '@common-ui/utils';
interface ResizeForm {
comment: string;
dictionary: string;
option: DetailsRadioOption<ResizeRedactionOption>;
}
@Component({
templateUrl: './resize-redaction-dialog.component.html',
@ -44,11 +51,17 @@ export class ResizeRedactionDialogComponent extends IqserDialogComponent<
readonly dictionaries = inject(DictionariesMapService).get(this.#dossier.dossierTemplateId);
readonly entity = this.dictionaries.find(d => d.type === this.data.redaction.type);
readonly redaction = this.data.redaction;
readonly form: FormGroup<{
comment: FormControl<string>;
dictionary: FormControl<string>;
option: FormControl<DetailsRadioOption<ResizeRedactionOption>>;
}>;
readonly isImage = this.redaction.isImage;
readonly form: FormGroup<AsControl<ResizeForm>> = this.#getForm();
readonly dialogHeaderType = this.data.redaction.HINT ? 'hint' : this.data.redaction.isSkippedImageHint ? 'image' : 'redaction';
readonly dictionaryType = formValueToSignal(this.form.get('dictionary'));
readonly displayedDictionaryLabel = computed(() => {
const dictType = this.dictionaryType();
if (dictType) {
return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
}
return null;
});
constructor(private readonly _formBuilder: FormBuilder) {
super();
@ -60,19 +73,6 @@ export class ResizeRedactionDialogComponent extends IqserDialogComponent<
this.data.isApprover,
this.data.permissions.canResizeInDictionary,
);
this.form = this.#getForm();
}
get dialogHeaderType() {
return this.data.redaction.HINT ? 'hint' : this.data.redaction.isSkippedImageHint ? 'image' : 'redaction';
}
get displayedDictionaryLabel() {
const dictType = this.form.get('dictionary').value;
if (dictType) {
return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
}
return null;
}
save() {

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

@ -5,11 +5,12 @@
<div class="content-inner">
<div class="content-container">
<redaction-structured-component-management
*ngIf="isDocumine"
[file]="file"
[dictionaries]="state.dictionaries"
></redaction-structured-component-management>
@if (isDocumine) {
<redaction-structured-component-management
[file]="file"
[dictionaries]="state.dictionaries()"
></redaction-structured-component-management>
}
</div>
<div class="right-container" [class.documine-container]="isDocumine">

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

@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, untracked } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { getConfig } from '@iqser/common-ui';
import { Filter, handleCheckedValue, IFilter, INestedFilter, NestedFilter } from '@iqser/common-ui/lib/filtering';
@ -78,7 +78,8 @@ export class AnnotationProcessingService {
const filters: INestedFilter[] = [];
this._fileDataService.all?.forEach(a => {
const dictionary = this._state.dictionaries.find(dictionary => dictionary.type === a.type);
const dictionaries = untracked(this._state.dictionaries);
const dictionary = dictionaries.find(dictionary => dictionary.type === a.type);
const doesTypeExist = !!dictionary;
if (
(this.#isDocumine && !this.#devMode && a.isOCR) ||

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

@ -1,4 +1,4 @@
import { effect, inject, Injectable, Signal, signal } from '@angular/core';
import { effect, inject, Injectable, Signal, signal, untracked } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { EntitiesService, getConfig, Toaster } from '@iqser/common-ui';
@ -180,7 +180,7 @@ export class FileDataService extends EntitiesService<AnnotationWrapper, Annotati
const file = this._state.file();
let annotations: AnnotationWrapper[] = [];
const defaultColors = this._defaultColorsService.find(this._state.dossierTemplateId);
let dictionaries = this._state.dictionaries;
let dictionaries = untracked(this._state.dictionaries);
let checkDictionary = true;
for (const entry of entityLog.entityLogEntry) {

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

@ -43,12 +43,14 @@ export class FilePreviewStateService {
readonly blob$: Observable<Blob>;
readonly componentReferenceIds$: Observable<string[] | null>;
readonly #componentReferenceIds$ = new BehaviorSubject<string[] | null>(null);
readonly componentReferenceIdsSignal: Signal<string[] | null>;
readonly dossierId = getParam(DOSSIER_ID);
readonly dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
readonly fileId = getParam(FILE_ID);
readonly excludedPages: WritableSignal<number[]>;
readonly updateExcludedPagesStyle = computed(() => this.excludedPages());
readonly isEditingReviewer = signal(false);
readonly dictionaries: Signal<Dictionary[]>;
constructor(
private readonly _permissionsService: PermissionsService,
@ -76,6 +78,14 @@ export class FilePreviewStateService {
this.blob$ = this.#blob$;
this.dossierDictionary = toSignal(inject(DossierDictionariesMapService).watch$(this.dossierId, 'dossier_redaction'));
this.dictionaries = computed(() => {
const dictionaries = this._dictionariesMapService.get(this.dossierTemplateId);
if (this.dossierDictionary()) {
dictionaries.push(this.dossierDictionary());
}
return dictionaries;
});
this.#dossierFilesChange$
.pipe(
switchMap(() => this._filesService.loadAll(this.dossierId)),
@ -92,21 +102,14 @@ export class FilePreviewStateService {
},
{ allowSignalWrites: true },
);
this.componentReferenceIdsSignal = toSignal(this.componentReferenceIds$);
}
set componentReferenceIds(ids: string[]) {
this.#componentReferenceIds$.next(ids);
}
get dictionaries(): Dictionary[] {
const dictionaries = this._dictionariesMapService.get(this.dossierTemplateId);
if (this.dossierDictionary()) {
dictionaries.push(this.dossierDictionary());
}
return dictionaries;
}
get blob(): Promise<Blob> {
return firstValueFrom(this.blob$);
}
@ -133,10 +136,6 @@ export class FilePreviewStateService {
);
}
get componentReferenceIds() {
return this.#componentReferenceIds$.getValue();
}
reloadBlob(): void {
this.#reloadBlob$.next(true);
}

4
apps/red-ui/src/app/modules/file-preview/services/pdf-annotation-actions.service.ts
View File

@ -1,4 +1,4 @@
import { inject, Injectable, NgZone } from '@angular/core';
import { inject, Injectable, NgZone, untracked } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { getConfig, IqserPermissionsService } from '@iqser/common-ui';
import { AnnotationPermissions } from '@models/file/annotation.permissions';
@ -135,7 +135,7 @@ export class PdfAnnotationActionsService {
#getAnnotationsPermissions(annotations: AnnotationWrapper[]): AnnotationPermissions {
const dossier = this.#state.dossier();
const isApprover = this.#permissionsService.isApprover(dossier);
const dictionaries = this.#state.dictionaries;
const dictionaries = untracked(this.#state.dictionaries);
const autoAnalysisDisabled = this.#state.file().excludedFromAutomaticAnalysis;
const permissions = annotations.map(a =>
AnnotationPermissions.forUser(isApprover, a, dictionaries, this.#iqserPermissionsService, autoAnalysisDisabled),

6
apps/red-ui/src/app/utils/functions.ts
View File

@ -2,8 +2,6 @@ import { ITrackable } from '@iqser/common-ui';
import type { List } from '@iqser/common-ui/lib/utils';
import type { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { Dayjs } from 'dayjs';
import { FormControl } from '@angular/forms';
import { toSignal } from '@angular/core/rxjs-interop';
export function hexToRgb(hex: string) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@ -145,7 +143,3 @@ export function urlFileId() {
const fileId = splitUrl[splitUrl.length - 1];
return fileId.split('?')[0];
}
export function formControlToSignal<T>(control: FormControl<T>) {
return toSignal(control.valueChanges, { initialValue: control.value });
}

2
libs/common-ui

@ -1 +1 @@
Subproject commit ba85260cc4a3e780a37b3f41be26b83d045a1dcb
Subproject commit 3f214d9726e17cd204acae8a4ef95749260b3c9a