-
-
-
- {{ fileAttribute.label }}:
- {{ fileAttributeValue || '-' }}
-
-
-
- {{ fileAttribute.label }}:
- {{ fileAttributeValue ? (fileAttributeValue | date: 'd MMM yyyy') : '-' }}
-
-
-
-
-
-
-
-
-
+ @if (!isInEditMode || mode === 'workflow') {
+
+ @if (!fileAttribute().editable) {
+
+ }
+ @if (!isDate()) {
+
+ @if (mode === 'workflow' && !isInEditMode) {
+ {{ fileAttribute().label }}:
+ }
+ {{ value() || '-' }}
+
+ } @else {
+
+ @if (mode === 'workflow' && !isInEditMode) {
+ {{ fileAttribute().label }}:
+ }
+ {{ value() ? (value() | date: 'd MMM yyyy') : '-' }}
+
+ }
-
+ }
+
+ @if (
+ (fileAttributesService.isEditingFileAttribute() === false || isInEditMode) &&
+ !file().isInitialProcessing &&
+ permissionsService.canEditFileAttributes(file(), dossier()) &&
+ fileAttribute().editable
+ ) {
+ @if (!isInEditMode) {
+
+ } @else {
+
+
+
+ }
+ }
-
-
-
-
-
-
-
+}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
index 4ba803cf1..41f17a56b 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
@@ -1,9 +1,8 @@
-import { AsyncPipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
-import { Component, computed, effect, HostListener, Input, OnDestroy } from '@angular/core';
+import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import { Component, computed, effect, HostListener, input, untracked } from '@angular/core';
import { AbstractControl, FormBuilder, FormsModule, ReactiveFormsModule, UntypedFormGroup, ValidatorFn } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
-import { NavigationEnd, Router } from '@angular/router';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DynamicInputComponent } from '@common-ui/inputs/dynamic-input/dynamic-input.component';
import {
@@ -14,7 +13,7 @@ import {
StopPropagationDirective,
Toaster,
} from '@iqser/common-ui';
-import { Debounce, log } from '@iqser/common-ui/lib/utils';
+import { Debounce } from '@iqser/common-ui/lib/utils';
import { TranslateModule } from '@ngx-translate/core';
import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
@@ -22,9 +21,9 @@ import { FilesService } from '@services/files/files.service';
import { PermissionsService } from '@services/permissions.service';
import { DatePipe } from '@shared/pipes/date.pipe';
import dayjs from 'dayjs';
-import { firstValueFrom, Subscription } from 'rxjs';
-import { filter, map, tap } from 'rxjs/operators';
+import { firstValueFrom } from 'rxjs';
import { ConfigService } from '../../config.service';
+import { toSignal } from '@angular/core/rxjs-interop';
@Component({
selector: 'redaction-file-attribute',
@@ -32,7 +31,6 @@ import { ConfigService } from '../../config.service';
styleUrls: ['./file-attribute.component.scss'],
standalone: true,
imports: [
- NgIf,
NgClass,
MatTooltipModule,
MatIconModule,
@@ -47,29 +45,34 @@ import { ConfigService } from '../../config.service';
StopPropagationDirective,
],
})
-export class FileAttributeComponent extends BaseFormComponent implements OnDestroy {
- readonly #subscriptions = new Subscription();
- #widthFactor = window.innerWidth >= 1800 ? 0.85 : 0.7;
+export class FileAttributeComponent extends BaseFormComponent {
isInEditMode = false;
closedDatepicker = true;
- @Input({ required: true }) fileAttribute!: IFileAttributeConfig;
- @Input({ required: true }) file!: File;
+ readonly fileAttribute = input.required
();
+ readonly file = input.required();
+ readonly dossier = input();
+ readonly fileNameColumn = input(false);
+ readonly width = input();
+ readonly editFieldWidth = computed(() => (this.width() ? `${this.width() * this.#widthFactor}px` : 'unset'));
+ readonly attributeValueWidth = computed(() => (this.width() ? `${this.width() * 0.9}px` : 'unset'));
+
+ readonly isText = computed(() => this.fileAttribute().type === FileAttributeConfigTypes.TEXT);
+ readonly value = computed(() => this.file().fileAttributes.attributeIdToValue[this.fileAttribute().id]);
+ readonly isDate = computed(() => this.fileAttribute().type === FileAttributeConfigTypes.DATE);
+
+ readonly #selectedLength = toSignal(this._listingService.selectedLength$);
readonly #shouldClose = computed(
() =>
(this.fileAttributesService.isEditingFileAttribute() &&
- this.file &&
- this.fileAttribute &&
- (this.fileAttribute.id !== this.fileAttributesService.openAttributeEdit() ||
- this.file.fileId !== this.fileAttributesService.fileEdit())) ||
+ (this.fileAttribute().id !== this.fileAttributesService.openAttributeEdit() ||
+ this.file().fileId !== this.fileAttributesService.fileEdit())) ||
!this.fileAttributesService.openAttributeEdits().length,
);
- @Input({ required: true }) dossier!: Dossier;
- @Input() fileNameColumn = false;
- readonlyAttrs: string[] = [];
- @Input() width?: number;
+
+ #widthFactor = window.innerWidth >= 1800 ? 0.85 : 0.7;
+ #readonlyAttrs: string[] = [];
constructor(
- router: Router,
private readonly _toaster: Toaster,
private readonly _formBuilder: FormBuilder,
private readonly _filesService: FilesService,
@@ -80,14 +83,11 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
readonly configService: ConfigService,
) {
super();
- const sub = router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => this.close());
- this.#subscriptions.add(sub);
-
- const sub2 = this._listingService.selectedLength$.pipe(
- map(selectedLength => !!selectedLength),
- tap(() => this.close()),
- );
- this.#subscriptions.add(sub2.subscribe());
+ effect(() => {
+ if (this.#selectedLength()) {
+ this.close();
+ }
+ });
effect(
() => {
@@ -99,30 +99,6 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
);
}
- get editFieldWidth(): string {
- return this.width ? `${this.width * this.#widthFactor}px` : 'unset';
- }
-
- get attributeValueWidth(): string {
- return this.width ? `${this.width * 0.9}px` : 'unset';
- }
-
- get isDate(): boolean {
- return this.fileAttribute.type === FileAttributeConfigTypes.DATE;
- }
-
- get isNumber(): boolean {
- return this.fileAttribute.type === FileAttributeConfigTypes.NUMBER;
- }
-
- get isText(): boolean {
- return this.fileAttribute.type === FileAttributeConfigTypes.TEXT;
- }
-
- get fileAttributeValue(): string {
- return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id];
- }
-
@HostListener('window:resize')
onResize() {
if (window.innerWidth >= 1800) {
@@ -136,7 +112,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
@HostListener('document:click', ['$event'])
clickOutside($event: MouseEvent) {
const clickCalendarCell = ($event.target as HTMLElement).classList?.contains('mat-calendar-body-cell-content');
- if (this.isDate) {
+ if (this.isDate()) {
this.#focusOnEditInput();
}
@@ -150,13 +126,9 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
$event.preventDefault();
}
- ngOnDestroy() {
- this.#subscriptions.unsubscribe();
- }
-
handleFieldClick($event: MouseEvent) {
$event.preventDefault();
- if (!this.fileNameColumn) {
+ if (!this.fileNameColumn()) {
this.editFileAttribute($event);
}
}
@@ -164,34 +136,34 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
editFileAttribute($event: MouseEvent) {
$event.preventDefault();
if (
- !this.file.isInitialProcessing &&
- this.permissionsService.canEditFileAttributes(this.file, this.dossier) &&
- this.fileAttribute.editable &&
+ !this.file().isInitialProcessing &&
+ this.permissionsService.canEditFileAttributes(this.file(), this.dossier()) &&
+ this.fileAttribute().editable &&
!this.isInEditMode
) {
$event.stopPropagation();
this.fileAttributesService.openAttributeEdits.update(value => [
...value,
- { attribute: this.fileAttribute.id, file: this.file.id },
+ { attribute: this.fileAttribute().id, file: this.file().id },
]);
- this.fileAttributesService.setFileEdit(this.file.fileId);
- this.fileAttributesService.setOpenAttributeEdit(this.fileAttribute.id);
+ this.fileAttributesService.setFileEdit(this.file().fileId);
+ this.fileAttributesService.setOpenAttributeEdit(this.fileAttribute().id);
this.#toggleEdit();
}
}
async save() {
const rawFormValue = this.form.getRawValue();
- const fileAttrValue = rawFormValue[this.fileAttribute.id];
+ const fileAttrValue = rawFormValue[this.fileAttribute().id];
const attributeIdToValue = {
...this.#getForm().getRawValue(),
- [this.fileAttribute.id]: this.#formatAttributeValue(fileAttrValue),
+ [this.fileAttribute().id]: this.#formatAttributeValue(fileAttrValue),
};
try {
await firstValueFrom(
- this.fileAttributesService.setFileAttributes({ attributeIdToValue }, this.file.dossierId, this.file.fileId),
+ this.fileAttributesService.setFileAttributes({ attributeIdToValue }, this.file().dossierId, this.file().fileId),
);
- await this._filesService.reload(this.file.dossierId, this.file);
+ await this._filesService.reload(this.file().dossierId, this.file());
this.initialFormValue = rawFormValue;
this._toaster.success(_('file-attribute.update.success'));
} catch (e) {
@@ -203,6 +175,8 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
close(): void {
if (this.isInEditMode) {
+ const fileAttribute = untracked(this.fileAttribute);
+ const file = untracked(this.file);
this.form = this.#getForm();
this.#toggleEdit();
this.fileAttributesService.openAttributeEdits.update(value =>
@@ -210,8 +184,8 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
val =>
JSON.stringify(val) !==
JSON.stringify({
- attribute: this.fileAttribute.id,
- file: this.file.id,
+ attribute: fileAttribute.id,
+ file: file.id,
}),
),
);
@@ -219,24 +193,26 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
}
#initFileAttributes() {
- const configs = this.fileAttributesService.getFileAttributeConfig(this.file.dossierTemplateId).fileAttributeConfigs;
- this.readonlyAttrs = configs.filter(config => config.editable === false).map(config => config.id);
+ const file = untracked(this.file);
+ const configs = this.fileAttributesService.getFileAttributeConfig(file.dossierTemplateId).fileAttributeConfigs;
+ this.#readonlyAttrs = configs.filter(config => config.editable === false).map(config => config.id);
configs.forEach(config => {
- if (!this.file.fileAttributes.attributeIdToValue[config.id]) {
- this.file.fileAttributes.attributeIdToValue[config.id] = null;
+ if (!file.fileAttributes.attributeIdToValue[config.id]) {
+ file.fileAttributes.attributeIdToValue[config.id] = null;
}
});
}
#getForm(): UntypedFormGroup {
const config = {};
- const fileAttributes = this.file.fileAttributes.attributeIdToValue;
+ const file = untracked(this.file);
+ const fileAttributes = file.fileAttributes.attributeIdToValue;
Object.keys(fileAttributes).forEach(key => {
const attrValue = fileAttributes[key];
config[key] = [
{
value: dayjs(attrValue, 'YYYY-MM-DD', true).isValid() ? dayjs(attrValue).toDate() : attrValue,
- disabled: this.readonlyAttrs.includes(key),
+ disabled: this.#readonlyAttrs.includes(key),
},
];
});
@@ -246,19 +222,25 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
}
#checkEmptyInput(): ValidatorFn {
+ const isText = untracked(this.isText);
+ const fileAttribute = untracked(this.fileAttribute);
+ const value = untracked(this.value);
return (control: AbstractControl) =>
- (this.isText && !control.get(this.fileAttribute.id)?.value?.trim().length && !this.fileAttributeValue) ||
- control.get(this.fileAttribute.id)?.value === this.fileAttributeValue
+ (isText && !control.get(fileAttribute.id)?.value?.trim().length && !this.value()) ||
+ control.get(fileAttribute.id)?.value === value
? { emptyString: true }
: null;
}
#checkDate(): ValidatorFn {
+ const isDate = untracked(this.isDate);
+ const fileAttribute = untracked(this.fileAttribute);
+ const value = untracked(this.value);
return (control: AbstractControl) => {
const expr = new RegExp('(0?[1-9]|[12][0-9]|3[01])(/|.)(0?[1-9]|1[12])(/|.)\\d{2}');
- return this.isDate
- ? (!expr.test(control.get(this.fileAttribute.id)?.value) && control.get(this.fileAttribute.id)?.value?.length) ||
- this.#formatAttributeValue(control.get(this.fileAttribute.id)?.value) === this.fileAttributeValue
+ return isDate
+ ? (!expr.test(control.get(fileAttribute.id)?.value) && control.get(fileAttribute.id)?.value?.length) ||
+ this.#formatAttributeValue(control.get(fileAttribute.id)?.value) === value
? { invalidDate: true }
: null
: null;
@@ -266,11 +248,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
}
#formatAttributeValue(attrValue) {
- if (this.isDate) {
+ const isDate = untracked(this.isDate);
+ if (isDate) {
return attrValue && dayjs(attrValue).format('YYYY-MM-DD');
}
-
- if (this.isText) {
+ const isText = untracked(this.isText);
+ if (isText) {
return attrValue.trim().replaceAll(/\s\s+/g, ' ');
}
@@ -292,9 +275,12 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
}
#focusOnEditInput(): void {
- if (this.isDate || this.isText) {
+ const isDate = untracked(this.isDate);
+ const isText = untracked(this.isText);
+ const fileAttribute = untracked(this.fileAttribute);
+ if (isDate || isText) {
setTimeout(() => {
- const input = document.getElementById(this.fileAttribute.id) as HTMLInputElement;
+ const input = document.getElementById(fileAttribute.id) as HTMLInputElement;
if (!input) {
return;
}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html
index 5e45b10fa..429d37b58 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html
@@ -1,5 +1,5 @@
-
+ @if (permissionsService.canDownloadCsvReport(dossier())) {
+
+ }
-
+ @if (permissionsService.displayReanalyseBtn(dossier())) {
+
+ }
-
+ @if (permissionsService.canUploadFiles(dossier())) {
+
+ }
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts
index c2f10570d..5fa696132 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, input, OnInit, output, untracked } from '@angular/core';
import {
ActionConfig,
CircleButtonComponent,
@@ -25,9 +25,8 @@ import { Router } from '@angular/router';
import { Roles } from '@users/roles';
import { SortingService } from '@iqser/common-ui/lib/sorting';
import { List, some } from '@iqser/common-ui/lib/utils';
-import { ComponentLogService } from '@services/files/component-log.service';
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
import { ViewModeSelectionComponent } from '../view-mode-selection/view-mode-selection.component';
@@ -44,7 +43,6 @@ import { ViewModeSelectionComponent } from '../view-mode-selection/view-mode-sel
AsyncPipe,
TranslateModule,
FileDownloadBtnComponent,
- NgIf,
ViewModeSelectionComponent,
DisableStopPropagationDirective,
MatMenu,
@@ -52,8 +50,8 @@ import { ViewModeSelectionComponent } from '../view-mode-selection/view-mode-sel
],
})
export class DossierOverviewScreenHeaderComponent implements OnInit {
- @Input() dossier: Dossier;
- @Output() readonly upload = new EventEmitter();
+ readonly dossier = input();
+ readonly upload = output();
readonly circleButtonTypes = CircleButtonTypes;
readonly roles = Roles;
actionConfigs: List;
@@ -84,13 +82,14 @@ export class DossierOverviewScreenHeaderComponent implements OnInit {
}
ngOnInit() {
- this.actionConfigs = this.configService.actionConfig(this.dossier.id, this.listingService.areSomeSelected$);
+ this.actionConfigs = this.configService.actionConfig(this.dossier().id, this.listingService.areSomeSelected$);
}
async reanalyseDossier() {
this._loadingService.start();
try {
- await this._reanalysisService.reanalyzeDossier(this.dossier, true);
+ const dossier = untracked(this.dossier);
+ await this._reanalysisService.reanalyzeDossier(dossier, true);
this._toaster.success(_('dossier-overview.reanalyse-dossier.success'));
} catch (e) {
this._toaster.error(_('dossier-overview.reanalyse-dossier.error'));
@@ -101,12 +100,13 @@ export class DossierOverviewScreenHeaderComponent implements OnInit {
async downloadDossierAsCSV() {
const displayedEntities = await firstValueFrom(this.listingService.displayed$);
const entities = this.sortingService.defaultSort(displayedEntities);
- const fileName = this.dossier.dossierName + '.export.csv';
+ const dossier = untracked(this.dossier);
+ const fileName = dossier.dossierName + '.export.csv';
const mapper = (file?: File) => ({
...file,
hasAnnotations: file.hasRedactions,
assignee: this._userService.getName(file.assignee) || '-',
- primaryAttribute: this._primaryFileAttributeService.getPrimaryFileAttributeValue(file, this.dossier.dossierTemplateId),
+ primaryAttribute: this._primaryFileAttributeService.getPrimaryFileAttributeValue(file, this.dossier().dossierTemplateId),
});
const documineOnlyFields = ['hasAnnotations'];
const redactionOnlyFields = ['hasHints', 'hasImages', 'hasUpdates', 'hasRedactions'];
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.html
index 2d9cfd923..ef54b78de 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.html
@@ -1,19 +1,27 @@
-
-
-
-
-
-
- -
+ @if (file().analysisRequired) {
+
+ }
+ @if (updated()) {
+
+ }
+ @if (file().hasRedactions) {
+
+ }
+ @if (file().hasImages) {
+
+ }
+ @if (file().hintsOnly) {
+
+ }
+ @if (file().hasAnnotationComments) {
+
+ }
+ @if (noWorkloadItems()) {
+ -
+ }
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts
index d5351a840..f04048433 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, 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';
@@ -7,7 +7,7 @@ import { UserService } from '@users/user.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { MatIcon } from '@angular/material/icon';
@@ -17,7 +17,7 @@ import { MatIcon } from '@angular/material/icon';
styleUrls: ['./file-workload.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
- imports: [AnnotationIconComponent, AsyncPipe, TranslateModule, MatIcon, NgIf],
+ imports: [AnnotationIconComponent, AsyncPipe, TranslateModule, MatIcon],
})
export class FileWorkloadComponent implements OnInit {
#dossierTemplateId: string;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
index 3799cc423..8c0cd9703 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
@@ -1,78 +1,94 @@
-
+
-
+
-
+
-
-
-
+@for (config of displayedAttributes(); track config.id) {
+
+
+
+}
-
-
-
-
-
-
-
+@if (file().isError && !isDocumine) {
+
+
+}
+
+@if (!file().isError) {
+ @if (!isDocumine) {
+
+ @if (!file().excluded) {
+
+ }
+
+ }
-
+
- {{ file.numberOfPages }}
+ {{ file().numberOfPages }}
-
+}
-
-
+
+ @if (file().isError) {
+
+ }
-
+ @if (file().isUnprocessed) {
+
+ }
-
+ @if (file().isOcrProcessing) {
-
+ } @else {
+
+
+ @if (!file().isError && !file().isUnprocessed && !file().isInitialProcessing) {
+
+ }
+ }
-
-
-
-
-
-
-
+ @if (!file().isProcessing) {
+
+ }
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts
index 69b4dfb1f..3985eca0d 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts
@@ -1,11 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
import { getConfig } from '@iqser/common-ui';
import { Dossier, File, IFileAttributeConfig } from '@red/domain';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
import { DateColumnComponent } from '../../../shared-dossiers/components/date-column/date-column.component';
import { FileAttributeComponent } from '../file-attribute/file-attribute.component';
-import { NgForOf, NgIf } from '@angular/common';
import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
import { FileWorkloadComponent } from './file-workload/file-workload.component';
import { InitialsAvatarComponent, IqserUsersModule } from '@common-ui/users';
@@ -25,7 +24,6 @@ import { TranslateModule } from '@ngx-translate/core';
FileNameColumnComponent,
DateColumnComponent,
FileAttributeComponent,
- NgIf,
AnnotationIconComponent,
FileWorkloadComponent,
IqserUsersModule,
@@ -35,15 +33,14 @@ import { TranslateModule } from '@ngx-translate/core';
StatusBarComponent,
FileActionsComponent,
TranslateModule,
- NgForOf,
InitialsAvatarComponent,
],
})
export class TableItemComponent {
- @Input({ required: true }) file: File;
- @Input({ required: true }) dossier: Dossier;
- @Input({ required: true }) displayedAttributes: IFileAttributeConfig[];
- @Input({ required: true }) dossierTemplateId: string;
+ readonly file = input.required
();
+ readonly dossier = input.required();
+ readonly displayedAttributes = input.required();
+ readonly dossierTemplateId = input.required();
readonly isDocumine = getConfig().IS_DOCUMINE;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
index 7a92b64fa..8e3451e35 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
@@ -1,21 +1,23 @@
-
-
+@if (configService.listingMode$ | async; as mode) {
+
+
+
+}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
index f2204ff8a..d1faf28c1 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
@@ -3,7 +3,7 @@ import { CircleButtonComponent, ListingMode, ListingModes, ListingService } from
import { File } from '@red/domain';
import { ConfigService } from '../../config.service';
import { TranslateModule } from '@ngx-translate/core';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
@Component({
selector: 'redaction-view-mode-selection',
@@ -11,7 +11,7 @@ import { AsyncPipe, NgIf } from '@angular/common';
styleUrls: ['./view-mode-selection.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
- imports: [CircleButtonComponent, TranslateModule, AsyncPipe, NgIf],
+ imports: [CircleButtonComponent, TranslateModule, AsyncPipe],
})
export class ViewModeSelectionComponent {
readonly listingModes = ListingModes;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html
index 77d368eb3..8d3023a83 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html
@@ -7,41 +7,44 @@
- {{ file.filename }}
+ {{ file().filename }}
-
+
-
+
-
-
-
+ @for (config of displayedAttributes(); track config.id) {
+
+
+
+ }
-
+
-
+
-
+ @if (!file().isProcessing) {
+
+ }
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts
index 6f81ffc56..e629f488f 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, computed, ElementRef, Input, OnInit, Optional, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, computed, ElementRef, input, OnInit, Optional, ViewChild } from '@angular/core';
import { DisableStopPropagationDirective, HelpModeService } from '@iqser/common-ui';
import { Debounce, trackByFactory } from '@iqser/common-ui/lib/utils';
import { Dossier, File, IFileAttributeConfig } from '@red/domain';
@@ -11,7 +11,7 @@ import { FileAttributeComponent } from '../file-attribute/file-attribute.compone
import { FileWorkloadComponent } from '../table-item/file-workload/file-workload.component';
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 { AsyncPipe } from '@angular/common';
@Component({
selector: 'redaction-workflow-item',
@@ -27,10 +27,8 @@ import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
FileWorkloadComponent,
ProcessingIndicatorComponent,
FileActionsComponent,
- NgIf,
DisableStopPropagationDirective,
AsyncPipe,
- NgForOf,
InitialsAvatarComponent,
],
})
@@ -38,9 +36,10 @@ export class WorkflowItemComponent implements OnInit {
@ViewChild('actionsWrapper', { static: true }) private _actionsWrapper: ElementRef;
width: number;
readonly trackBy = trackByFactory();
- @Input({ required: true }) file: File;
- @Input({ required: true }) dossier: Dossier;
- @Input({ required: true }) displayedAttributes: IFileAttributeConfig[];
+ readonly file = input.required();
+ readonly dossier = input.required();
+ readonly displayedAttributes = input.required();
+ readonly fileRouterLink = computed(() => this.file().routerLink);
constructor(
readonly fileAttributesService: FileAttributesService,
diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html
index 63002d513..d6812e930 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html
@@ -1,4 +1,4 @@
-
+@if ((files$ | async) && dossier$ | async; as dossier) {
-
-
+ @if (listingMode$ | async; as mode) {
+
+ @if (mode === listingModes.table) {
+
+ } @else if (mode === listingModes.workflow) {
+
+
+
+
+
+ }
+
+ }
-
-
-
-
-
-
-
-
-
-
+ @if (dossierAttributes$ | async) {
+
+
+
+ }
@@ -82,7 +86,7 @@
[file]="file"
>