Merge branch 'RED10758' into 'master'

RED-10758: Fix remove and recategorize request in applicationType DocuMine

See merge request redactmanager/red-ui!767

.eslintrc.json

@@ -16,6 +16,7 @@
       },
       "rules": {
         "rxjs/no-ignored-subscription": "warn",
+        "@angular-eslint/prefer-standalone": "off",
         "@angular-eslint/no-conflicting-lifecycle": "error",
         "@angular-eslint/no-host-metadata-property": "error",
         "@angular-eslint/no-input-rename": "error",

.gitlab-ci.yml

@@ -4,38 +4,60 @@ variables:
     PROJECT: red-ui
     DOCKERFILELOCATION: 'docker/$PROJECT/Dockerfile'
 
-
 include:
     - project: 'gitlab/gitlab'
       ref: 'main'
       file: 'ci-templates/docker_build_nexus_v2.yml'
       rules:
-      - if: $CI_PIPELINE_SOURCE != "schedule"
+          - if: $CI_PIPELINE_SOURCE != "schedule"
+
+sonarqube:
+  stage: test
+  image:
+    name: sonarsource/sonar-scanner-cli:11.1
+    entrypoint:
+    - ''
+  variables:
+    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"
+    GIT_DEPTH: '0'
+  cache:
+    key: "${CI_JOB_NAME}"
+    paths:
+    - ".sonar/cache"
+  script:
+  - sonar-scanner
+  rules:
+  - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+  - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
+  - if: "$CI_COMMIT_BRANCH =~ /^release/"
 
 localazy update:
-  image: node:20.5
-  cache:
-      - key:
-            files:
-                - yarn.lock
-        paths:
-            - .yarn-cache/
-  script:
-      - git config user.email "${CI_EMAIL}"
-      - git config user.name "${CI_USERNAME}"
-      - git remote add gitlab_origin https://${CI_USERNAME}:${CI_ACCESS_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
-      - cd tools/localazy
-      - yarn install --cache-folder .yarn-cache
-      - yarn start
-      - cd ../..
-      - git add .
-      - |-
-        CHANGES=$(git status --porcelain | wc -l)
-        if [ "$CHANGES" -gt "0" ]
-        then
-          git status
-          git commit -m "push back localazy update"
-          git push gitlab_origin HEAD:${CI_COMMIT_REF_NAME}
-        fi
-  rules:
-    - if: $CI_PIPELINE_SOURCE == "schedule"
+    image: node:20.5
+    cache:
+        - key:
+              files:
+                  - yarn.lock
+          paths:
+              - .yarn-cache/
+    script:
+        # - git config user.email "${CI_EMAIL}"
+        # - git config user.name "${CI_USERNAME}"
+        # - git remote add gitlab_origin https://${CI_USERNAME}:${CI_ACCESS_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
+        - git push https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
+        - cd tools/localazy
+        - yarn install --cache-folder .yarn-cache
+        - yarn start
+        - cd ../..
+        - git add .
+        - |-
+            CHANGES=$(git status --porcelain | wc -l)
+            if [ "$CHANGES" -gt "0" ]
+            then
+              git status
+              git commit -m "push back localazy update"
+              git push gitlab_origin HEAD:${CI_COMMIT_REF_NAME}
+              # git push https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
+              # git push
+            fi
+    rules:
+        - if: $CI_PIPELINE_SOURCE == "schedule"

angular.json

@@ -50,7 +50,7 @@
               {
                 "glob": "**/*",
                 "input": "node_modules/@pdftron/webviewer/public/",
-                "output": "/assets/wv-resources/10.10.1/"
+                "output": "/assets/wv-resources/11.1.0/"
               },
               {
                 "glob": "**/*",
@@ -73,7 +73,7 @@
             "stylePreprocessorOptions": {
               "includePaths": ["./apps/red-ui/src/assets/styles", "./libs/common-ui/src/assets/styles"]
             },
-            "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js", "node_modules/chart.js/auto/auto.cjs"],
+            "scripts": ["node_modules/chart.js/auto/auto.cjs"],
             "extractLicenses": false,
             "sourceMap": true,
             "optimization": false,

apps/red-ui/src/app/app-routing.module.ts

@@ -16,7 +16,7 @@ import { CompositeRouteGuard, DEFAULT_REDIRECT_KEY, IqserPermissionsGuard, Iqser
 import { TenantSelectComponent } from '@iqser/common-ui/lib/tenants';
 import { doesNotHaveAnyRole, hasAnyRole, IqserAuthGuard } from '@iqser/common-ui/lib/users';
 import { CustomRouteReuseStrategy } from '@iqser/common-ui/lib/utils';
-import { ARCHIVE_ROUTE, BreadcrumbTypes, DOSSIER_ID, DOSSIER_TEMPLATE_ID, DOSSIERS_ARCHIVE, DOSSIERS_ROUTE, FILE_ID } from '@red/domain';
+import { ARCHIVE_ROUTE, BreadcrumbTypes, DOSSIER_ID, DOSSIER_TEMPLATE_ID, DOSSIERS_ROUTE, FILE_ID } from '@red/domain';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { Roles } from '@users/roles';
 import { mainGuard } from '@utils/main.guard';
@@ -81,7 +81,6 @@ const dossierTemplateIdRoutes: IqserRoutes = [
         canActivate: [CompositeRouteGuard, loadArchivedDossiersGuard()],
         data: {
             routeGuards: [FeaturesGuard],
-            features: [DOSSIERS_ARCHIVE],
         },
     },
     {

apps/red-ui/src/app/app.component.ts

@@ -4,26 +4,27 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { getConfig } from '@iqser/common-ui';
 import { AppConfig } from '@red/domain';
 import { NavigationEnd, Router } from '@angular/router';
-import { filter, map, switchMap, take } from 'rxjs/operators';
+import { filter, map, switchMap, take, tap } from 'rxjs/operators';
+import { APP_TYPE_PATHS } from '@common-ui/utils/constants';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { TenantsService } from '@common-ui/tenants';
 
-function loadCustomTheme() {
-    const cssFileName = getConfig<AppConfig>().THEME;
-
-    if (cssFileName) {
-        const head = document.getElementsByTagName('head')[0];
-        const link = document.createElement('link');
-        link.id = cssFileName;
-        link.rel = 'stylesheet';
-        link.type = 'text/css';
-        link.href = 'assets/styles/themes/' + cssFileName + '.css';
-        link.media = 'all';
-        head.appendChild(link);
-    }
+export function loadCustomTheme(cssFileName: string) {
+    const head = document.getElementsByTagName('head')[0];
+    const link = document.createElement('link');
+    link.id = cssFileName;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = 'assets/styles/themes/' + cssFileName + '.css';
+    link.media = 'all';
+    head.appendChild(link);
 }
 
 @Component({
     selector: 'redaction-root',
     templateUrl: './app.component.html',
+    standalone: false,
 })
 export class AppComponent {
     constructor(
@@ -34,9 +35,12 @@ export class AppComponent {
         userPreferenceService: UserPreferenceService,
         renderer: Renderer2,
         private readonly _router: Router,
+        private readonly _iconRegistry: MatIconRegistry,
+        private readonly _sanitizer: DomSanitizer,
+        private readonly _tenantsService: TenantsService,
     ) {
+        const config = getConfig<AppConfig>();
         renderer.addClass(document.body, userPreferenceService.getTheme());
-        loadCustomTheme();
 
         const removeQueryParams = _router.events.pipe(
             filter((event): event is NavigationEnd => event instanceof NavigationEnd),
@@ -47,9 +51,25 @@ export class AppComponent {
         );
         removeQueryParams.subscribe();
 
-        if (getConfig().IS_DOCUMINE) {
-            document.getElementById('favicon').setAttribute('href', 'assets/icons/documine-logo.ico');
-        }
+        this._tenantsService
+            .waitForSettingTenant()
+            .pipe(
+                tap(() => {
+                    const isDocumine = this._tenantsService.activeTenant.documine;
+                    const logo = isDocumine ? 'documine' : 'redaction';
+                    _iconRegistry.addSvgIconInNamespace(
+                        'iqser',
+                        'logo',
+                        _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/general/${logo}-logo.svg`),
+                    );
+                    if (isDocumine) {
+                        document.getElementById('favicon').setAttribute('href', 'assets/icons/documine-logo.ico');
+                    }
+                    loadCustomTheme(isDocumine ? APP_TYPE_PATHS.SCM : APP_TYPE_PATHS.REDACT);
+                }),
+                take(1),
+            )
+            .subscribe();
     }
 
     #removeKeycloakQueryParams() {

apps/red-ui/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { APP_BASE_HREF, DatePipe as BaseDatePipe } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { ENVIRONMENT_INITIALIZER, ErrorHandler, inject, NgModule } from '@angular/core';
+import { ErrorHandler, inject, NgModule, provideEnvironmentInitializer } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
@@ -117,7 +117,7 @@ export const appModuleFactory = (config: AppConfig) => {
                 resetTimeoutOnDuplicate: true,
             }),
             TenantsModule.forRoot(),
-            IqserTranslateModule.forRoot({ pathPrefix: config.BASE_TRANSLATIONS_DIRECTORY || '/assets/i18n/redact/' }),
+            IqserTranslateModule.forRoot({ pathPrefix: config.BASE_TRANSLATIONS_DIRECTORY }),
             IqserLoadingModule.forRoot(),
             ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
             LoggerModule.forRoot(undefined, {
@@ -135,20 +135,20 @@ export const appModuleFactory = (config: AppConfig) => {
                         features: {
                             ANNOTATIONS: {
                                 color: 'aqua',
-                                enabled: true,
+                                enabled: false,
                                 level: NgxLoggerLevel.DEBUG,
                             },
                             FILTERS: {
                                 enabled: false,
                             },
                             TENANTS: {
-                                enabled: true,
+                                enabled: false,
                             },
                             ROUTES: {
-                                enabled: true,
+                                enabled: false,
                             },
                             PDF: {
-                                enabled: true,
+                                enabled: false,
                             },
                             FILE: {
                                 enabled: false,
@@ -171,6 +171,9 @@ export const appModuleFactory = (config: AppConfig) => {
                             DOSSIERS_CHANGES: {
                                 enabled: false,
                             },
+                            GUARDS: {
+                                enabled: false,
+                            },
                         },
                     } as ILoggerConfig,
                 },
@@ -230,14 +233,10 @@ export const appModuleFactory = (config: AppConfig) => {
                 provide: ErrorHandler,
                 useClass: GlobalErrorHandler,
             },
-            {
-                provide: ENVIRONMENT_INITIALIZER,
-                multi: true,
-                useValue: async () => {
-                    const languageService = inject(LanguageService);
-                    return languageService.setInitialLanguage();
-                },
-            },
+            provideEnvironmentInitializer(async () => {
+                const languageService = inject(LanguageService);
+                return languageService.setInitialLanguage();
+            }),
             {
                 provide: MAX_RETRIES_ON_SERVER_ERROR,
                 useFactory: () => config.MAX_RETRIES_ON_SERVER_ERROR,
@@ -258,6 +257,7 @@ export const appModuleFactory = (config: AppConfig) => {
                 provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
                 useValue: {
                     disableTooltipInteractivity: true,
+                    showDelay: 1,
                 },
             },
             BaseDatePipe,

apps/red-ui/src/app/components/auth-error/auth-error.component.ts

@@ -7,6 +7,7 @@ import { AppConfig } from '@red/domain';
     selector: 'redaction-auth-error',
     templateUrl: './auth-error.component.html',
     styleUrls: ['./auth-error.component.scss'],
+    standalone: false,
 })
 export class AuthErrorComponent {
     readonly #config = getConfig<AppConfig>();

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -9,7 +9,7 @@
         <redaction-breadcrumbs></redaction-breadcrumbs>
     </div>
 
-    <a [matTooltip]="'top-bar.navigation-items.back-to-dashboard' | translate" [routerLink]="['/']" class="logo">
+    <a [matTooltip]="'top-bar.navigation-items.back-to-dashboard' | translate" [routerLink]="['/main']" class="logo">
         <div [attr.help-mode-key]="'home'" class="actions">
             <iqser-logo (iqserHiddenAction)="userPreferenceService.toggleDevFeatures()" icon="iqser:logo"></iqser-logo>
             <div class="app-name">{{ titleService.getTitle() }}</div>

apps/red-ui/src/app/components/base-screen/base-screen.component.ts

@@ -8,8 +8,7 @@ import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-se
 import { filter, map, startWith } from 'rxjs/operators';
 import { getConfig, IqserPermissionsService } from '@iqser/common-ui';
 import { BreadcrumbsService } from '@services/breadcrumbs.service';
-import { FeaturesService } from '@services/features.service';
-import { ARCHIVE_ROUTE, DOSSIERS_ARCHIVE, DOSSIERS_ROUTE } from '@red/domain';
+import { ARCHIVE_ROUTE, DOSSIERS_ROUTE } from '@red/domain';
 import { Roles } from '@users/roles';
 import { REDDocumentViewer } from '../../modules/pdf-viewer/services/document-viewer.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -21,6 +20,7 @@ const isSearchScreen: (url: string) => boolean = url => url.includes('/search');
 @Component({
     templateUrl: './base-screen.component.html',
     styleUrls: ['./base-screen.component.scss'],
+    standalone: false,
 })
 export class BaseScreenComponent {
     readonly roles = Roles;
@@ -36,7 +36,6 @@ export class BaseScreenComponent {
         {
             text: this._translateService.instant('search.active-dossiers'),
             icon: 'red:enter',
-            hide: () => !this._featuresService.isEnabled(DOSSIERS_ARCHIVE),
             action: (query): void => this.#search(query, [], true),
         },
         {
@@ -58,7 +57,6 @@ export class BaseScreenComponent {
         private readonly _router: Router,
         activatedRoute: ActivatedRoute,
         private readonly _translateService: TranslateService,
-        private readonly _featuresService: FeaturesService,
         readonly permissionsService: IqserPermissionsService,
         readonly userService: UserService,
         readonly userPreferenceService: UserPreferenceService,

apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -7,6 +7,7 @@ import { Breadcrumb, BreadcrumbDisplayType, BreadcrumbsService } from '@services
     selector: 'redaction-breadcrumbs',
     templateUrl: './breadcrumbs.component.html',
     styleUrls: ['./breadcrumbs.component.scss'],
+    standalone: false,
 })
 export class BreadcrumbsComponent {
     constructor(readonly breadcrumbsService: BreadcrumbsService) {}

apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts

@@ -13,6 +13,7 @@ import { firstValueFrom } from 'rxjs';
         entitiesService: FileDownloadService,
         component: DownloadsListScreenComponent,
     }),
+    standalone: false,
 })
 export class DownloadsListScreenComponent extends ListingComponent<DownloadStatus> implements OnDestroy {
     readonly #interval: number;

apps/red-ui/src/app/components/notifications/notifications.component.scss

@@ -22,7 +22,7 @@
         }
 
         .mat-mdc-menu-item.notification {
-            padding: 8px 26px 10px 8px;
+            padding: 8px 26px 10px 8px !important;
             margin: 2px 0 0 0;
             height: fit-content;
             position: relative;

apps/red-ui/src/app/components/notifications/notifications.component.ts

@@ -25,6 +25,7 @@ function chronologically(first: string, second: string) {
     selector: 'redaction-notifications',
     templateUrl: './notifications.component.html',
     styleUrls: ['./notifications.component.scss'],
+    standalone: false,
 })
 export class NotificationsComponent {
     readonly hasUnreadNotifications$: Observable<boolean>;

apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss

@@ -9,7 +9,7 @@
 
     .container {
         padding: 32px;
-        width: 900px;
+        width: 1000px;
         max-width: 100%;
         box-sizing: border-box;
     }

apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     templateUrl: './dashboard-skeleton.component.html',
     styleUrls: ['./dashboard-skeleton.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class DashboardSkeletonComponent {}

apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts

@@ -5,6 +5,7 @@ import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } fr
     templateUrl: './dossier-skeleton.component.html',
     styleUrls: ['./dossier-skeleton.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class DossierSkeletonComponent implements OnInit {
     @ViewChild('workload1', { static: true }) workload1: TemplateRef<unknown>;

apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     templateUrl: './skeleton-stats.component.html',
     styleUrls: ['./skeleton-stats.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class SkeletonStatsComponent {}

apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts

@@ -6,6 +6,7 @@ import { Title } from '@angular/platform-browser';
     templateUrl: './skeleton-top-bar.component.html',
     styleUrls: ['./skeleton-top-bar.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class SkeletonTopBarComponent {
     constructor(readonly titleService: Title) {}

apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts

@@ -9,6 +9,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
     templateUrl: './spotlight-search.component.html',
     styleUrls: ['./spotlight-search.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class SpotlightSearchComponent {
     @Input() actions: readonly SpotlightSearchAction[];

apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.ts

@@ -9,6 +9,7 @@ interface ITenant extends IStoredTenantId {
     selector: 'app-tenants-menu',
     templateUrl: './tenants-menu.component.html',
     styleUrls: ['./tenants-menu.component.scss'],
+    standalone: false,
 })
 export class TenantsMenuComponent {
     readonly tenantsService = inject(TenantsService);

apps/red-ui/src/app/components/user-menu/user-menu.component.ts

@@ -20,6 +20,7 @@ interface MenuItem {
     selector: 'app-user-menu',
     templateUrl: './user-menu.component.html',
     styleUrls: ['./user-menu.component.scss'],
+    standalone: false,
 })
 export class UserMenuComponent {
     readonly currentUser = getCurrentUser<User>();

apps/red-ui/src/app/guards/dossier-template-exists.guard.ts

@@ -11,7 +11,9 @@ import { DictionaryService } from '@services/entity-services/dictionary.service'
 import { DefaultColorsService } from '@services/entity-services/default-colors.service';
 import { WatermarkService } from '@services/entity-services/watermark.service';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
-import { getConfig } from '@iqser/common-ui';
+import { getConfig, Toaster } from '@iqser/common-ui';
+import { RulesService } from '../modules/admin/services/rules.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export function templateExistsWhenEnteringAdmin(): CanActivateFn {
     return async function (route: ActivatedRouteSnapshot): Promise<boolean> {
@@ -21,12 +23,14 @@ export function templateExistsWhenEnteringAdmin(): CanActivateFn {
         const defaultColorsService = inject(DefaultColorsService);
         const watermarksService = inject(WatermarkService);
         const router = inject(Router);
+        const rulesService = inject(RulesService);
         const isDocumine = getConfig().IS_DOCUMINE;
 
         const dossierTemplate = inject(DossierTemplateStatsService).get(dossierTemplateId);
         await firstValueFrom(fileAttributesService.loadFileAttributesConfig(dossierTemplateId));
         await firstValueFrom(dictionaryService.loadDictionaryDataForDossierTemplate(dossierTemplateId));
         await firstValueFrom(defaultColorsService.loadForDossierTemplate(dossierTemplateId));
+        await firstValueFrom(rulesService.getFor(dossierTemplateId));
         if (!isDocumine) {
             await firstValueFrom(watermarksService.loadForDossierTemplate(dossierTemplateId));
         }
@@ -50,6 +54,8 @@ export function templateExistsWhenEnteringDossierList(): CanActivateFn {
         const dictionaryService = inject(DictionaryService);
         const defaultColorsService = inject(DefaultColorsService);
         const watermarksService = inject(WatermarkService);
+        const rulesService = inject(RulesService);
+        const toaster = inject(Toaster);
         const isDocumine = getConfig().IS_DOCUMINE;
 
         await firstValueFrom(dashboardStatsService.loadForTemplate(dossierTemplateId));
@@ -64,6 +70,10 @@ export function templateExistsWhenEnteringDossierList(): CanActivateFn {
         await firstValueFrom(fileAttributesService.loadFileAttributesConfig(dossierTemplateId));
         await firstValueFrom(dictionaryService.loadDictionaryDataForDossierTemplate(dossierTemplateId));
         await firstValueFrom(defaultColorsService.loadForDossierTemplate(dossierTemplateId));
+        const rules = await firstValueFrom(rulesService.getFor(dossierTemplateId));
+        if (rules.timeoutDetected) {
+            toaster.error(_('dossier-listing.rules.timeoutError'));
+        }
         if (!isDocumine) {
             await firstValueFrom(watermarksService.loadForDossierTemplate(dossierTemplateId));
         }

apps/red-ui/src/app/guards/if-logged-in.guard.ts

@@ -40,8 +40,7 @@ export function ifLoggedIn(): AsyncGuard {
 
             logger.info('[KEYCLOAK] Keycloak init...');
             await keycloakInitializer(tenant);
-            logger.info('[KEYCLOAK] Keycloak init done!');
-            console.log({ tenant });
+            logger.info('[KEYCLOAK] Keycloak init done for tenant: ', { tenant });
             await tenantsService.selectTenant(tenant);
             await usersService.initialize();
             await licenseService.loadLicenses();
@@ -51,6 +50,7 @@ export function ifLoggedIn(): AsyncGuard {
                 const jwtToken = jwtDecode(token) as JwtToken;
                 const authTime = (jwtToken.auth_time || jwtToken.iat).toString();
                 localStorage.setItem('authTime', authTime);
+                localStorage.setItem('token', token);
             }
         }
 

apps/red-ui/src/app/models/file/annotation-permissions.utils.ts

@@ -1,6 +1,6 @@
 import { AnnotationPermissions } from '@models/file/annotation.permissions';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { Dictionary, LogEntryEngines, SuperTypes } from '@red/domain';
+import { Dictionary, SuperTypes } from '@red/domain';
 
 export const canUndo = (annotation: AnnotationWrapper, isApprover: boolean) => !isApprover && annotation.pending;
 
@@ -16,10 +16,7 @@ export const canForceRedaction = (annotation: AnnotationWrapper, canAddRedaction
 export const canAcceptRecommendation = (annotation: AnnotationWrapper) => annotation.isRecommendation && !annotation.pending;
 
 export const canMarkAsFalsePositive = (annotation: AnnotationWrapper, annotationEntity: Dictionary) =>
-    annotation.canBeMarkedAsFalsePositive &&
-    !annotation.hasBeenForcedRedaction &&
-    !annotation.hasBeenResizedLocally &&
-    annotationEntity?.hasDictionary;
+    annotation.canBeMarkedAsFalsePositive && !annotation.hasBeenResizedLocally && annotationEntity?.hasDictionary;
 
 export const canRemoveOnlyHere = (annotation: AnnotationWrapper, canAddRedaction: boolean, autoAnalysisDisabled: boolean) =>
     canAddRedaction &&
@@ -27,10 +24,10 @@ export const canRemoveOnlyHere = (annotation: AnnotationWrapper, canAddRedaction
     (annotation.isRedacted || (annotation.isHint && !annotation.isImage));
 
 export const canRemoveFromDictionary = (annotation: AnnotationWrapper, autoAnalysisDisabled: boolean) =>
-    annotation.isModifyDictionary &&
+    (annotation.isModifyDictionary || annotation.engines.includes('DICTIONARY') || annotation.engines.includes('DOSSIER_DICTIONARY')) &&
     (annotation.isRedacted || annotation.isSkipped || annotation.isHint || (annotation.isIgnoredHint && !annotation.isRuleBased)) &&
     (autoAnalysisDisabled || !annotation.pending) &&
-    [LogEntryEngines.DICTIONARY, LogEntryEngines.DOSSIER_DICTIONARY].some(engine => annotation.engines.includes(engine));
+    annotation.isDictBased;
 
 export const canRemoveRedaction = (annotation: AnnotationWrapper, permissions: AnnotationPermissions) =>
     (!annotation.isIgnoredHint || !annotation.isRuleBased) &&
@@ -72,3 +69,5 @@ export const canEditHint = (annotation: AnnotationWrapper) =>
     ((annotation.isHint && !annotation.isRuleBased) || annotation.isIgnoredHint) && !annotation.isImage;
 
 export const canEditImage = (annotation: AnnotationWrapper) => annotation.isImage;
+
+export const canRevertChanges = (annotation: AnnotationWrapper) => annotation.hasRedactionChanges;

apps/red-ui/src/app/models/file/annotation.permissions.ts

@@ -17,6 +17,7 @@ import {
     canRemoveRedaction,
     canResizeAnnotation,
     canResizeInDictionary,
+    canRevertChanges,
     canUndo,
 } from './annotation-permissions.utils';
 import { AnnotationWrapper } from './annotation.wrapper';
@@ -37,6 +38,7 @@ export class AnnotationPermissions {
     canEditAnnotations = true;
     canEditHints = true;
     canEditImages = true;
+    canRevertChanges = true;
 
     static forUser(
         isApprover: boolean,
@@ -75,6 +77,7 @@ export class AnnotationPermissions {
             permissions.canEditAnnotations = canEditAnnotation(annotation);
             permissions.canEditHints = canEditHint(annotation);
             permissions.canEditImages = canEditImage(annotation);
+            permissions.canRevertChanges = canRevertChanges(annotation);
             summedPermissions._merge(permissions);
         }
         return summedPermissions;
@@ -97,6 +100,7 @@ export class AnnotationPermissions {
         result.canEditAnnotations = permissions.reduce((acc, next) => acc && next.canEditAnnotations, true);
         result.canEditHints = permissions.reduce((acc, next) => acc && next.canEditHints, true);
         result.canEditImages = permissions.reduce((acc, next) => acc && next.canEditImages, true);
+        result.canRevertChanges = permissions.reduce((acc, next) => acc && next.canRevertChanges, true);
         return result;
     }
 

apps/red-ui/src/app/models/file/annotation.wrapper.ts

@@ -26,6 +26,12 @@ import {
 } from '@red/domain';
 import { annotationTypesTranslations } from '@translations/annotation-types-translations';
 
+interface AnnotationContent {
+    translation: string;
+    params: { [key: string]: string };
+    untranslatedContent: string;
+}
+
 export class AnnotationWrapper implements IListable {
     id: string;
     superType: SuperType;
@@ -34,9 +40,9 @@ export class AnnotationWrapper implements IListable {
     typeLabel?: string;
     color: string;
     numberOfComments = 0;
-    firstTopLeftPoint: IPoint;
+    firstBottomLeftPoint: IPoint;
     shortContent: string;
-    content: string;
+    content: AnnotationContent;
     value: string;
     pageNumber: number;
     dictionaryOperation = false;
@@ -74,11 +80,18 @@ export class AnnotationWrapper implements IListable {
     }
 
     get isDictBased() {
-        return this.engines.includes(LogEntryEngines.DICTIONARY);
+        return [LogEntryEngines.DICTIONARY, LogEntryEngines.DOSSIER_DICTIONARY].some(engine => this.engines.includes(engine));
     }
 
     get isRedactedImageHint() {
-        return this.IMAGE_HINT && this.superType === SuperTypes.Redaction;
+        return (
+            (this.IMAGE_HINT && this.superType === SuperTypes.Redaction) ||
+            (this.IMAGE_HINT && this.superType === SuperTypes.ManualRedaction)
+        );
+    }
+
+    get isSkippedImageHint() {
+        return this.IMAGE_HINT && this.superType === SuperTypes.Hint;
     }
 
     get searchKey(): string {
@@ -99,7 +112,10 @@ export class AnnotationWrapper implements IListable {
 
     get canBeMarkedAsFalsePositive() {
         return (
-            (this.isRecommendation || this.superType === SuperTypes.Redaction || (this.isSkipped && this.isDictBased)) &&
+            (this.isRecommendation ||
+                this.superType === SuperTypes.Redaction ||
+                (this.isSkipped && this.isDictBased) ||
+                (this.isRemovedLocally && this.isDictBased)) &&
             !this.isImage &&
             !this.imported &&
             !this.pending &&
@@ -183,11 +199,11 @@ export class AnnotationWrapper implements IListable {
     }
 
     get x() {
-        return this.firstTopLeftPoint.x;
+        return this.firstBottomLeftPoint.x;
     }
 
     get y() {
-        return this.firstTopLeftPoint.y;
+        return this.firstBottomLeftPoint.y;
     }
 
     get legalBasis() {
@@ -212,7 +228,7 @@ export class AnnotationWrapper implements IListable {
         annotationWrapper.value = 'Imported';
         annotationWrapper.color = earmark.hexColor;
         annotationWrapper.positions = earmark.positions;
-        annotationWrapper.firstTopLeftPoint = earmark.positions[0]?.topLeft;
+        annotationWrapper.firstBottomLeftPoint = earmark.positions[0]?.topLeft;
         annotationWrapper.superTypeLabel = annotationTypesTranslations[annotationWrapper.superType];
 
         return annotationWrapper;
@@ -233,7 +249,7 @@ export class AnnotationWrapper implements IListable {
         annotationWrapper.isChangeLogEntry = logEntry.state === EntryStates.REMOVED || !!changeLogType;
         annotationWrapper.type = logEntry.type;
         annotationWrapper.value = logEntry.value;
-        annotationWrapper.firstTopLeftPoint = { x: logEntry.positions[0].rectangle[0], y: logEntry.positions[0].rectangle[1] };
+        annotationWrapper.firstBottomLeftPoint = { x: logEntry.positions[0].rectangle[0], y: logEntry.positions[0].rectangle[1] };
         annotationWrapper.pageNumber = logEntry.positions[0].pageNumber;
         annotationWrapper.positions = logEntry.positions.map(p => ({
             page: p.pageNumber,
@@ -275,7 +291,7 @@ export class AnnotationWrapper implements IListable {
         );
 
         const content = this.#createContent(annotationWrapper, logEntry, isDocumine);
-        annotationWrapper.shortContent = this.#getShortContent(annotationWrapper, legalBasisList) || content;
+        annotationWrapper.shortContent = this.#getShortContent(annotationWrapper, legalBasisList) || content.untranslatedContent;
         annotationWrapper.content = content;
 
         const lastRelevantManualChange = logEntry.manualChanges?.at(-1);
@@ -307,44 +323,62 @@ export class AnnotationWrapper implements IListable {
     }
 
     static #createContent(annotationWrapper: AnnotationWrapper, logEntry: IEntityLogEntry, isDocumine: boolean) {
-        let content = '';
+        let untranslatedContent = '';
+        const params: { [key: string]: string } = {};
         if (logEntry.matchedRule) {
-            content += `Rule ${logEntry.matchedRule} matched${isDocumine ? ':' : ''} \n\n`;
+            params['hasRule'] = 'true';
+            params['matchedRule'] = logEntry.matchedRule.replace(/(^[, ]*)|([, ]*$)/g, '');
+            params['ruleSymbol'] = isDocumine ? ':' : '';
+
+            untranslatedContent += `Rule ${logEntry.matchedRule} matched${isDocumine ? ':' : ''} \n\n`;
         }
 
         if (logEntry.reason) {
+            params['hasReason'] = 'true';
             if (isDocumine && logEntry.reason.slice(-1) === '.') {
                 logEntry.reason = logEntry.reason.slice(0, -1);
             }
-
-            content += logEntry.reason + '\n\n';
+            if (!params['hasRule']) {
+                params['reason'] = logEntry.reason.substring(0, 1).toUpperCase() + logEntry.reason.substring(1);
+            } else {
+                params['reason'] = logEntry.reason;
+            }
+            params['reason'] = params['reason'].replace(/(^[, ]*)|([, ]*$)/g, '');
+            untranslatedContent += logEntry.reason + '\n\n';
             //remove leading and trailing commas and whitespaces
-            content = content.replace(/(^[, ]*)|([, ]*$)/g, '');
-            content = content.substring(0, 1).toUpperCase() + content.substring(1);
+            untranslatedContent = untranslatedContent.replace(/(^[, ]*)|([, ]*$)/g, '');
+            untranslatedContent = untranslatedContent.substring(0, 1).toUpperCase() + untranslatedContent.substring(1);
         }
 
         if (annotationWrapper.legalBasis && !isDocumine) {
-            content += 'Legal basis: ' + annotationWrapper.legalBasis + '\n\n';
+            params['hasLb'] = 'true';
+            params['legalBasis'] = annotationWrapper.legalBasis;
+            untranslatedContent += 'Legal basis: ' + annotationWrapper.legalBasis + '\n\n';
         }
 
         if (annotationWrapper.hasBeenRemovedByManualOverride) {
-            content += 'Removed by manual override';
+            params['hasOverride'] = 'true';
+            untranslatedContent += 'Removed by manual override';
         }
 
         if (logEntry.section) {
+            params['hasSection'] = 'true';
+            params['sectionSymbol'] = isDocumine ? '' : ':';
+            params['shouldLower'] = untranslatedContent.length.toString();
+            params['section'] = logEntry.section;
             let prefix = `In section${isDocumine ? '' : ':'} `;
-            if (content.length) {
+            if (untranslatedContent.length) {
                 prefix = ` ${prefix.toLowerCase()}`;
             }
-            content += `${prefix} "${logEntry.section}"`;
+            untranslatedContent += `${prefix} "${logEntry.section}"`;
         }
 
-        return content;
+        return { translation: _('annotation-content'), params: params, untranslatedContent: untranslatedContent };
     }
 
     static #getShortContent(annotationWrapper: AnnotationWrapper, legalBasisList: ILegalBasis[]) {
         if (annotationWrapper.legalBasis) {
-            const lb = legalBasisList.find(lbm => lbm.reason?.toLowerCase().includes(annotationWrapper.legalBasis.toLowerCase()));
+            const lb = legalBasisList.find(lbm => lbm.technicalName?.toLowerCase().includes(annotationWrapper.legalBasis.toLowerCase()));
             if (lb) {
                 return lb.name;
             }

apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts

@@ -21,7 +21,6 @@ interface NavItem {
     templateUrl: './account-side-nav.component.html',
     styleUrls: ['./account-side-nav.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [SideNavComponent, TranslateModule, NgForOf, NgIf, RouterLinkActive, RouterLink],
 })
 export class AccountSideNavComponent {

apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html

@@ -8,10 +8,11 @@
             <div class="content-container full-height">
                 <div class="overlay-shadow"></div>
                 <div [ngClass]="!isWarningsScreen && 'dialog'">
-                    <div *ngIf="!isWarningsScreen" class="dialog-header">
-                        <div class="heading-l" [translate]="translations[path]"></div>
-                    </div>
-
+                    @if (!isWarningsScreen) {
+                        <div class="dialog-header">
+                            <div class="heading-l" [translate]="translations[path]"></div>
+                        </div>
+                    }
                     <router-outlet></router-outlet>
                 </div>
             </div>

apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewContainerRef } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 import { accountTranslations } from '@translations/account-translations';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { AccountSideNavComponent } from '../account-side-nav/account-side-nav.component';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -10,8 +10,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './base-account-screen-component.html',
     styleUrls: ['./base-account-screen-component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [NgClass, NgIf, RouterOutlet, AccountSideNavComponent, TranslateModule],
+    imports: [NgClass, RouterOutlet, AccountSideNavComponent, TranslateModule],
 })
 export class BaseAccountScreenComponent implements OnInit {
     readonly translations = accountTranslations;

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts

@@ -25,7 +25,6 @@ const RSS_EXCLUDED_SETTINGS = ['USER_PROMOTED_TO_APPROVER', 'USER_DEGRADED_TO_RE
     templateUrl: './notifications-screen.component.html',
     styleUrls: ['./notifications-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [ReactiveFormsModule, NgForOf, MatSlideToggle, TranslateModule, NgIf, MatCheckbox, IconButtonComponent],
 })
 export class NotificationsScreenComponent extends BaseFormComponent implements OnInit {

apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts

@@ -41,7 +41,6 @@ interface DefaultOptionsForm {
     selector: 'redaction-dialog-defaults',
     templateUrl: './dialog-defaults.component.html',
     styleUrl: './dialog-defaults.component.scss',
-    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, MatFormField, MatSelect, MatOption, NgForOf, MatCheckbox, NgIf, IconButtonComponent],
 })
 export class DialogDefaultsComponent extends BaseFormComponent {

apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.html

@@ -11,12 +11,6 @@
                         </mat-slide-toggle>
                     </div>
 
-                    <div *ngIf="config.IS_DOCUMINE" class="iqser-input-group">
-                        <mat-slide-toggle color="primary" formControlName="openScmDialogByDefault">
-                            {{ 'preferences-screen.form.open-structured-view-by-default' | translate }}
-                        </mat-slide-toggle>
-                    </div>
-
                     <div *allow="roles.getTables" class="iqser-input-group">
                         <label [translate]="'preferences-screen.form.table-extraction-type'"></label>
                         <input formControlName="tableExtractionType" />
@@ -37,6 +31,11 @@
                             {{ 'preferences-screen.form.help-mode-dialog' | translate }}
                         </mat-checkbox>
                     </div>
+                    <div class="iqser-input-group">
+                        <mat-checkbox color="primary" formControlName="overwriteFileOption">
+                            {{ 'preferences-screen.form.overwrite-file-option' | translate }}
+                        </mat-checkbox>
+                    </div>
                 </ng-container>
             </div>
         </div>

apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import {
@@ -23,11 +23,11 @@ import { MatCheckbox } from '@angular/material/checkbox';
 interface PreferencesForm {
     // preferences
     autoExpandFiltersOnActions: boolean;
-    openScmDialogByDefault: boolean;
     tableExtractionType: string;
     // warnings preferences
     loadAllAnnotationsWarning: boolean;
     helpModeDialog: boolean;
+    overwriteFileOption: boolean;
 
     [k: string]: any;
 }
@@ -44,7 +44,6 @@ const Screens = {
     templateUrl: './preferences.component.html',
     styleUrls: ['./preferences.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [
         DialogDefaultsComponent,
         NgClass,
@@ -58,6 +57,12 @@ const Screens = {
     ],
 })
 export class PreferencesComponent extends BaseFormComponent implements OnInit {
+    readonly #formBuilder = inject(FormBuilder);
+    readonly #permissionsService = inject(IqserPermissionsService);
+    readonly #changeRef = inject(ChangeDetectorRef);
+    readonly #loadingService = inject(LoadingService);
+    readonly #userPreferenceService = inject(UserPreferenceService);
+
     readonly form: FormGroup<AsControl<PreferencesForm>>;
     readonly currentScreen: Screen;
     readonly screens = Screens;
@@ -66,81 +71,87 @@ export class PreferencesComponent extends BaseFormComponent implements OnInit {
     readonly config = getConfig();
     readonly isIqserDevMode = isIqserDevMode();
 
-    constructor(
-        route: ActivatedRoute,
-        readonly userPreferenceService: UserPreferenceService,
-        private readonly _formBuilder: FormBuilder,
-        private readonly _permissionsService: IqserPermissionsService,
-        private readonly _changeRef: ChangeDetectorRef,
-        private readonly _loadingService: LoadingService,
-    ) {
+    get #isOverwriteFileOptionActive() {
+        return !(this.#userPreferenceService.getOverwriteFileOption() === 'undefined');
+    }
+
+    constructor(route: ActivatedRoute) {
         super();
-        this.form = this._formBuilder.group({
+        this.form = this.#formBuilder.group({
             // preferences
-            autoExpandFiltersOnActions: [this.userPreferenceService.getAutoExpandFiltersOnActions()],
-            openScmDialogByDefault: [this.userPreferenceService.getOpenScmDialogByDefault()],
-            tableExtractionType: [this.userPreferenceService.getTableExtractionType()],
+            autoExpandFiltersOnActions: [this.#userPreferenceService.getAutoExpandFiltersOnActions()],
+            tableExtractionType: [this.#userPreferenceService.getTableExtractionType()],
             // warnings preferences
-            loadAllAnnotationsWarning: [this.userPreferenceService.getBool(PreferencesKeys.loadAllAnnotationsWarning)],
-            helpModeDialog: [this.userPreferenceService.getBool(KEYS.helpModeDialog)],
+            loadAllAnnotationsWarning: [this.#userPreferenceService.getBool(PreferencesKeys.loadAllAnnotationsWarning)],
+            helpModeDialog: [this.#userPreferenceService.getBool(KEYS.helpModeDialog)],
+            overwriteFileOption: [this.#isOverwriteFileOptionActive],
         });
 
-        if (!this._permissionsService.has(Roles.managePreferences)) {
+        if (!this.#permissionsService.has(Roles.managePreferences)) {
             this.form.disable();
         }
 
-        if (!this._permissionsService.has(Roles.getTables)) {
+        if (!this.#permissionsService.has(Roles.getTables)) {
             this.form.controls.tableExtractionType.disable();
         }
 
+        if (!this.#isOverwriteFileOptionActive) {
+            this.form.controls.overwriteFileOption.disable();
+        }
+
         this.initialFormValue = this.form.getRawValue();
         this.currentScreen = route.snapshot.data.screen;
     }
 
     ngOnInit() {
-        this._loadingService.stop();
+        this.#loadingService.stop();
     }
 
     async save(): Promise<any> {
-        if (this.form.controls.autoExpandFiltersOnActions.value !== this.userPreferenceService.getAutoExpandFiltersOnActions()) {
-            await this.userPreferenceService.toggleAutoExpandFiltersOnActions();
-        }
-        if (this.form.controls.openScmDialogByDefault.value !== this.userPreferenceService.getOpenScmDialogByDefault()) {
-            await this.userPreferenceService.toggleOpenScmDialogByDefault();
+        if (this.form.controls.autoExpandFiltersOnActions.value !== this.#userPreferenceService.getAutoExpandFiltersOnActions()) {
+            await this.#userPreferenceService.toggleAutoExpandFiltersOnActions();
         }
 
-        if (this.form.controls.tableExtractionType.value !== this.userPreferenceService.getTableExtractionType()) {
-            await this.userPreferenceService.save(PreferencesKeys.tableExtractionType, this.form.controls.tableExtractionType.value);
+        if (this.form.controls.tableExtractionType.value !== this.#userPreferenceService.getTableExtractionType()) {
+            await this.#userPreferenceService.save(PreferencesKeys.tableExtractionType, this.form.controls.tableExtractionType.value);
         }
 
         if (
             this.form.controls.loadAllAnnotationsWarning.value !==
-            this.userPreferenceService.getBool(PreferencesKeys.loadAllAnnotationsWarning)
+            this.#userPreferenceService.getBool(PreferencesKeys.loadAllAnnotationsWarning)
         ) {
-            await this.userPreferenceService.save(
+            await this.#userPreferenceService.save(
                 PreferencesKeys.loadAllAnnotationsWarning,
                 String(this.form.controls.loadAllAnnotationsWarning.value),
             );
         }
 
-        if (this.form.controls.helpModeDialog.value !== this.userPreferenceService.getBool(KEYS.helpModeDialog)) {
-            await this.userPreferenceService.save(KEYS.helpModeDialog, String(this.form.controls.helpModeDialog.value));
+        if (this.form.controls.helpModeDialog.value !== this.#userPreferenceService.getBool(KEYS.helpModeDialog)) {
+            await this.#userPreferenceService.save(KEYS.helpModeDialog, String(this.form.controls.helpModeDialog.value));
         }
 
-        await this.userPreferenceService.reload();
+        if (this.form.controls.overwriteFileOption.enabled && !this.form.controls.overwriteFileOption.value) {
+            await this.#userPreferenceService.saveOverwriteFileOption('undefined');
+        }
+
+        await this.#userPreferenceService.reload();
         this.#patchValues();
 
         this.initialFormValue = this.form.getRawValue();
-        this._changeRef.markForCheck();
+        this.#changeRef.markForCheck();
     }
 
     #patchValues() {
         this.form.patchValue({
-            autoExpandFiltersOnActions: this.userPreferenceService.getAutoExpandFiltersOnActions(),
-            openScmDialogByDefault: this.userPreferenceService.getOpenScmDialogByDefault(),
-            tableExtractionType: this.userPreferenceService.getTableExtractionType(),
-            loadAllAnnotationsWarning: this.userPreferenceService.getBool(PreferencesKeys.loadAllAnnotationsWarning),
-            helpModeDialog: this.userPreferenceService.getBool(KEYS.helpModeDialog),
+            autoExpandFiltersOnActions: this.#userPreferenceService.getAutoExpandFiltersOnActions(),
+            tableExtractionType: this.#userPreferenceService.getTableExtractionType(),
+            loadAllAnnotationsWarning: this.#userPreferenceService.getBool(PreferencesKeys.loadAllAnnotationsWarning),
+            helpModeDialog: this.#userPreferenceService.getBool(KEYS.helpModeDialog),
+            overwriteFileOption: this.#isOverwriteFileOptionActive,
         });
+
+        if (!this.#isOverwriteFileOptionActive) {
+            this.form.controls.overwriteFileOption.disable();
+        }
     }
 }

apps/red-ui/src/app/modules/account/screens/user-profile/confirm-password-dialog/confirm-password-dialog.component.ts

@@ -10,7 +10,6 @@ interface FormType {
 
 @Component({
     templateUrl: './confirm-password-dialog.component.html',
-    standalone: true,
     imports: [ReactiveFormsModule, IconButtonComponent, TranslateModule, CircleButtonComponent],
 })
 export class ConfirmPasswordDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html

@@ -16,13 +16,16 @@
                 <input formControlName="lastName" name="lastName" type="text" />
             </div>
 
-            <div *ngIf="devMode" class="iqser-input-group">
+            <div class="iqser-input-group">
                 <label [translate]="'top-bar.navigation-items.my-account.children.language.label'"></label>
                 <mat-form-field>
                     <mat-select formControlName="language">
-                        <mat-option *ngFor="let language of languages" [value]="language">
-                            {{ translations[language] | translate }}
-                        </mat-option>
+                        <mat-select-trigger>{{ languageSelectLabel() | translate }}</mat-select-trigger>
+                        @for (language of languages; track language) {
+                            <mat-option [value]="language">
+                                {{ translations[language] | translate }}
+                            </mat-option>
+                        }
                     </mat-select>
                 </mat-form-field>
             </div>
@@ -31,17 +34,19 @@
                 <a (click)="resetPassword()" target="_blank"> {{ 'user-profile-screen.actions.change-password' | translate }}</a>
             </div>
 
-            <div *ngIf="devMode" class="iqser-input-group">
-                <mat-slide-toggle color="primary" formControlName="darkTheme">
-                    {{ 'user-profile-screen.form.dark-theme' | translate }}
-                </mat-slide-toggle>
-            </div>
+            @if (devMode) {
+                <div class="iqser-input-group">
+                    <mat-slide-toggle color="primary" formControlName="darkTheme">
+                        {{ 'user-profile-screen.form.dark-theme' | translate }}
+                    </mat-slide-toggle>
+                </div>
+            }
         </div>
     </div>
 
     <div class="dialog-actions">
         <iqser-icon-button
-            [disabled]="form.invalid || !(profileChanged || languageChanged || themeChanged)"
+            [disabled]="disabled"
             [label]="'user-profile-screen.actions.save' | translate"
             [submit]="true"
             [type]="iconButtonTypes.primary"

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

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed } from '@angular/core';
+import { FormGroup, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     BaseFormComponent,
@@ -17,23 +17,47 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { UserService } from '@users/user.service';
 import { firstValueFrom } from 'rxjs';
 import { UserProfileDialogService } from '../services/user-profile-dialog.service';
-import { NgForOf, NgIf } from '@angular/common';
 import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
+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';
+
+interface UserProfileForm {
+    email: string;
+    firstName: string;
+    lastName: string;
+    language: string;
+    darkTheme: boolean;
+}
 
 @Component({
     templateUrl: './user-profile-screen.component.html',
     styleUrls: ['./user-profile-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [ReactiveFormsModule, NgIf, MatFormField, MatSelect, MatOption, NgForOf, TranslateModule, MatSlideToggle, IconButtonComponent],
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        TranslateModule,
+        MatSlideToggle,
+        IconButtonComponent,
+        MatSelectTrigger,
+    ],
 })
-export class UserProfileScreenComponent extends BaseFormComponent implements OnInit {
-    #profileModel: IProfile;
+export class UserProfileScreenComponent extends BaseFormComponent {
+    readonly form: FormGroup<AsControl<UserProfileForm>> = this.#getForm();
+    initialFormValue = this.form.getRawValue();
     readonly translations = languagesTranslations;
     readonly devMode = this._userPreferenceService.isIqserDevMode;
 
+    readonly profileKeys = ['email', 'firstName', 'lastName'];
+    readonly languages = this._translateService.langs;
+    readonly language = formControlToSignal<UserProfileForm['language']>(this.form.controls.language);
+    readonly languageSelectLabel = computed(() => this.translations[this.language()]);
+
     constructor(
         private readonly _userService: UserService,
         private readonly _loadingService: LoadingService,
@@ -45,43 +69,29 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI
         protected readonly _userPreferenceService: UserPreferenceService,
         private readonly _changeRef: ChangeDetectorRef,
         private readonly _toaster: Toaster,
+        private readonly _pdfViewer: PdfViewer,
     ) {
         super();
-        this._loadingService.start();
+        if (!this._permissionsService.has(Roles.updateMyProfile)) {
+            this.form.disable();
+        }
+        this._loadingService.stop();
     }
 
     get languageChanged(): boolean {
-        return this.#profileModel['language'] !== this.form.get('language').value;
+        return this.initialFormValue['language'] !== this.form.controls.language.value;
     }
 
     get themeChanged(): boolean {
-        return this.#profileModel['darkTheme'] !== this.form.get('darkTheme').value;
+        return this.initialFormValue['darkTheme'] !== this.form.controls.darkTheme.value;
     }
 
     get emailChanged(): boolean {
-        return this.#profileModel['email'] !== this.form.get('email').value;
+        return this.initialFormValue['email'] !== this.form.controls.email.value;
     }
 
     get profileChanged(): boolean {
-        const keys = Object.keys(this.form.getRawValue());
-        keys.splice(keys.indexOf('language'), 1);
-        keys.splice(keys.indexOf('darkTheme'), 1);
-
-        for (const key of keys) {
-            if (this.#profileModel[key] !== this.form.get(key).value) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    get languages(): string[] {
-        return this._translateService.langs;
-    }
-
-    ngOnInit() {
-        this._initializeForm();
+        return this.profileKeys.some(key => this.initialFormValue[key] !== this.form.get(key).value);
     }
 
     async save(): Promise<void> {
@@ -106,15 +116,17 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI
             }
 
             if (this.languageChanged) {
-                await this._languageService.change(this.form.get('language').value);
+                await this._languageService.change(this.form.controls.language.value);
+                await this._pdfViewer.instance?.UI.setLanguage(this._languageService.currentLanguage);
             }
 
             if (this.themeChanged) {
-                await this._userPreferenceService.saveTheme(this.form.get('darkTheme').value ? 'dark' : 'light');
+                await this._userPreferenceService.saveTheme(this.form.controls.darkTheme.value ? 'dark' : 'light');
             }
 
-            this._initializeForm();
-
+            this.initialFormValue = this.form.getRawValue();
+            this._changeRef.markForCheck();
+            this._loadingService.stop();
             this._toaster.success(_('user-profile-screen.update.success'));
         } catch (e) {
             this._loadingService.stop();
@@ -125,35 +137,13 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI
         await this._userService.createResetPasswordAction();
     }
 
-    private _getForm(): UntypedFormGroup {
+    #getForm() {
         return this._formBuilder.group({
-            email: ['', [Validators.required, Validators.email]],
-            firstName: [''],
-            lastName: [''],
-            language: [''],
-            darkTheme: [false],
+            email: [this._userService.currentUser.email ?? '', [Validators.required, Validators.email]],
+            firstName: [this._userService.currentUser.firstName ?? ''],
+            lastName: [this._userService.currentUser.lastName ?? ''],
+            language: [this._userPreferenceService.getLanguage()],
+            darkTheme: [this._userPreferenceService.getTheme() === 'dark'],
         });
     }
-
-    private _initializeForm(): void {
-        try {
-            this.form = this._getForm();
-            if (!this._permissionsService.has(Roles.updateMyProfile)) {
-                this.form.disable();
-            }
-            this.#profileModel = {
-                email: this._userService.currentUser.email ?? '',
-                firstName: this._userService.currentUser.firstName ?? '',
-                lastName: this._userService.currentUser.lastName ?? '',
-                language: this._languageService.currentLanguage ?? '',
-                darkTheme: this._userPreferenceService.getTheme() === 'dark',
-            };
-            this.form.patchValue(this.#profileModel, { emitEvent: false });
-            this.initialFormValue = this.form.getRawValue();
-        } catch (e) {
-        } finally {
-            this._loadingService.stop();
-            this._changeRef.markForCheck();
-        }
-    }
 }

apps/red-ui/src/app/modules/account/utils/dialog-defaults.ts

@@ -2,11 +2,18 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { addHintTranslations } from '@translations/add-hint-translations';
 import { redactTextTranslations } from '@translations/redact-text-translations';
 import { removeRedactionTranslations } from '@translations/remove-redaction-translations';
-import { RedactOrHintOptions, RemoveRedactionOptions } from '../../file-preview/utils/dialog-types';
+import {
+    ForceAnnotationOptions,
+    RectangleRedactOptions,
+    RedactOrHintOptions,
+    RemoveRedactionOptions,
+} from '../../file-preview/utils/dialog-types';
 
 export const SystemDefaults = {
+    RECTANGLE_REDACT_DEFAULT: RectangleRedactOptions.ONLY_THIS_PAGE,
     ADD_REDACTION_DEFAULT: RedactOrHintOptions.IN_DOSSIER,
     ADD_HINT_DEFAULT: RedactOrHintOptions.IN_DOSSIER,
+    FORCE_REDACTION_DEFAULT: ForceAnnotationOptions.ONLY_HERE,
     REMOVE_REDACTION_DEFAULT: RemoveRedactionOptions.ONLY_HERE,
     REMOVE_HINT_DEFAULT: RemoveRedactionOptions.ONLY_HERE,
     REMOVE_RECOMMENDATION_DEFAULT: RemoveRedactionOptions.DO_NOT_RECOMMEND,
@@ -28,6 +35,10 @@ export const redactionAddOptions = [
         label: redactTextTranslations.onlyHere.label,
         value: RedactOrHintOptions.ONLY_HERE,
     },
+    {
+        label: redactTextTranslations.inDocument.label,
+        value: RedactOrHintOptions.IN_DOCUMENT,
+    },
     {
         label: redactTextTranslations.inDossier.label,
         value: RedactOrHintOptions.IN_DOSSIER,

apps/red-ui/src/app/modules/admin/admin.routes.ts

@@ -1,22 +1,24 @@
-import { CompositeRouteGuard, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
-import { RedRoleGuard } from '@users/red-role.guard';
-import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
+import { inject, provideEnvironmentInitializer } from '@angular/core';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
-import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
-import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
-import { AuditScreenComponent } from './screens/audit/audit-screen.component';
-import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
+import { templateExistsWhenEnteringAdmin } from '@guards/dossier-template-exists.guard';
+import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
+import { entityExistsGuard } from '@guards/entity-exists-guard.service';
+import { PermissionsGuard } from '@guards/permissions-guard';
+import { CompositeRouteGuard, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
+import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
+import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
+import { CopilotService } from '@services/copilot.service';
+import { RedRoleGuard } from '@users/red-role.guard';
+import { Roles } from '@users/roles';
 import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
-import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
-import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
-import { templateExistsWhenEnteringAdmin } from '@guards/dossier-template-exists.guard';
-import { entityExistsGuard } from '@guards/entity-exists-guard.service';
 import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
-import { PermissionsGuard } from '@guards/permissions-guard';
-import { Roles } from '@users/roles';
-import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
+import { AuditScreenComponent } from './screens/audit/audit-screen.component';
+import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
+import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
+import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
+import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
+import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
 import { AdminDialogService } from './services/admin-dialog.service';
 import { AuditService } from './services/audit.service';
 import { DigitalSignatureService } from './services/digital-signature.service';
@@ -78,7 +80,12 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                     },
                     type: 'ENTITY',
                 },
-                providers: [RulesService],
+                providers: [
+                    RulesService,
+                    provideEnvironmentInitializer(() => {
+                        return inject(CopilotService).connectAsync('/api/llm/llm-websocket');
+                    }),
+                ],
             },
             {
                 path: 'component-rules',
@@ -103,6 +110,14 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                     routeGuards: [IqserAuthGuard, RedRoleGuard],
                 },
             },
+            {
+                path: 'components',
+                loadComponent: () => import('./screens/component-definitions/component-definitions.component'),
+                canActivate: [CompositeRouteGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                },
+            },
             {
                 path: 'file-attributes',
                 loadComponent: () => import('./screens/file-attributes-listing/file-attributes-listing-screen.component'),

apps/red-ui/src/app/modules/admin/base-admin-screen/base-admin-screen.component.ts

@@ -5,7 +5,6 @@ import { RouterOutlet } from '@angular/router';
 @Component({
     templateUrl: './base-admin-screen.component.html',
     styleUrls: ['./base-admin-screen.component.scss'],
-    standalone: true,
     imports: [AdminSideNavComponent, RouterOutlet],
 })
 export class BaseAdminScreenComponent {}

apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.ts

@@ -9,7 +9,6 @@ import { AdminSideNavComponent } from '../shared/components/admin-side-nav/admin
 @Component({
     templateUrl: './base-dossier-template-screen.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [
         DossierTemplateBreadcrumbsComponent,
         DossierTemplateActionsComponent,

apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts

@@ -18,7 +18,6 @@ import { AdminSideNavComponent } from '../shared/components/admin-side-nav/admin
 @Component({
     templateUrl: './base-entity-screen.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [
         DossierTemplateBreadcrumbsComponent,
         CircleButtonComponent,

apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html

@@ -23,7 +23,7 @@
 
 <div class="mt-44">
     <redaction-donut-chart
-        [config]="chartConfig"
+        [config]="chartConfig()"
         [radius]="63"
         [strokeWidth]="15"
         [subtitles]="['user-stats.chart.users' | translate]"

apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, input, Input, output, Output } from '@angular/core';
 import { DonutChartConfig } from '@red/domain';
 import { CircleButtonComponent } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
@@ -8,10 +8,9 @@ import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.
     selector: 'redaction-users-stats',
     templateUrl: './users-stats.component.html',
     styleUrls: ['./users-stats.component.scss'],
-    standalone: true,
     imports: [CircleButtonComponent, TranslateModule, DonutChartComponent],
 })
 export class UsersStatsComponent {
-    @Output() toggleCollapse = new EventEmitter();
-    @Input() chartConfig: DonutChartConfig[];
+    readonly chartConfig = input.required<DonutChartConfig[]>();
+    readonly toggleCollapse = output();
 }

apps/red-ui/src/app/modules/admin/dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component.ts

@@ -16,7 +16,6 @@ export interface CloneTemplateData {
 @Component({
     templateUrl: './add-clone-dossier-template-dialog.component.html',
     styleUrls: ['./add-clone-dossier-template-dialog.component.scss'],
-    standalone: true,
     imports: [TranslateModule, ReactiveFormsModule, IconButtonComponent, CircleButtonComponent],
 })
 export class AddCloneDossierTemplateDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts

@@ -8,7 +8,6 @@ import { UserDetailsComponent } from './user-details/user-details.component';
 @Component({
     selector: 'redaction-add-edit-user-dialog',
     templateUrl: './add-edit-user-dialog.component.html',
-    standalone: true,
     imports: [UserDetailsComponent, ResetPasswordComponent, CircleButtonComponent],
 })
 export class AddEditUserDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts

@@ -10,7 +10,6 @@ import { NamePipe } from '@common-ui/users/name.pipe';
 @Component({
     selector: 'redaction-reset-password',
     templateUrl: './reset-password.component.html',
-    standalone: true,
     imports: [TranslateModule, NamePipe, ReactiveFormsModule, IconButtonComponent],
 })
 export class ResetPasswordComponent {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html

@@ -1,6 +1,6 @@
 <div
     [translateParams]="{
-        type: user ? 'edit' : 'create'
+        type: !!user() ? 'edit' : 'create',
     }"
     [translate]="'add-edit-user.title'"
     class="dialog-header heading-l"
@@ -32,14 +32,22 @@
                     [formControlName]="role"
                     color="primary"
                 >
-                    {{ translations[role] | translate }}
+                    {{ translations[role] | translate: { count: 1 } }}
                 </mat-checkbox>
             </div>
         </div>
 
+        @if (!user()) {
+            <div class="iqser-input-group">
+                <label [translate]="'add-edit-user.form.account-setup'"></label>
+                <mat-checkbox formControlName="sendSetPasswordMail">{{ 'add-edit-user.form.send-email' | translate }}</mat-checkbox>
+                <span [translate]="'add-edit-user.form.send-email-explanation'" class="hint"></span>
+            </div>
+        }
+
         <div
             (click)="toggleResetPassword.emit()"
-            *ngIf="!!user"
+            *ngIf="!!user()"
             [translate]="'add-edit-user.form.reset-password'"
             class="mt-24 fit-content link-action"
         ></div>
@@ -48,14 +56,14 @@
     <div class="dialog-actions">
         <iqser-icon-button
             [disabled]="form.invalid || !changed"
-            [label]="(user ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save') | translate"
+            [label]="(user() ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save') | translate"
             [submit]="true"
             [type]="iconButtonTypes.primary"
         ></iqser-icon-button>
 
         <iqser-icon-button
             (action)="delete()"
-            *ngIf="user && !disabledDelete(user)"
+            *ngIf="user() && !disabledDelete(user())"
             [label]="'add-edit-user.actions.delete' | translate"
             [type]="iconButtonTypes.dark"
             icon="iqser:trash"

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.scss

@@ -5,3 +5,7 @@
     margin-top: 8px;
     width: 300px;
 }
+
+.hint {
+    margin-left: 23px;
+}

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts

@@ -1,12 +1,10 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, input, OnInit, output } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { BaseFormComponent, IconButtonComponent, LoadingService, Toaster } from '@iqser/common-ui';
 import { rolesTranslations } from '@translations/roles-translations';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { User } from '@red/domain';
 import { UserService } from '@users/user.service';
-import { HttpStatusCode } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import { IProfileUpdateRequest } from '@iqser/common-ui/lib/users';
 import { TranslateModule } from '@ngx-translate/core';
@@ -17,18 +15,17 @@ import { NgForOf, NgIf } from '@angular/common';
     selector: 'redaction-user-details',
     templateUrl: './user-details.component.html',
     styleUrls: ['./user-details.component.scss'],
-    standalone: true,
     imports: [TranslateModule, ReactiveFormsModule, MatCheckbox, NgForOf, IconButtonComponent, NgIf],
 })
-export class UserDetailsComponent extends BaseFormComponent implements OnChanges {
-    /** e.g. a RED_ADMIN is automatically a RED_USER_ADMIN => can't disable RED_USER_ADMIN as long as RED_ADMIN is checked */
-    private readonly _ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' };
-    @Input() user: User;
-    @Output() readonly toggleResetPassword = new EventEmitter();
-    @Output() readonly closeDialog = new EventEmitter();
-    @Output() readonly cancel = new EventEmitter();
+export class UserDetailsComponent extends BaseFormComponent implements OnInit {
+    user = input<User>();
+    readonly toggleResetPassword = output();
+    readonly closeDialog = output<boolean>();
+    readonly cancel = output();
     readonly ROLES = ['RED_USER', 'RED_MANAGER', 'RED_USER_ADMIN', 'RED_ADMIN'];
     readonly translations = rolesTranslations;
+    /** e.g. a RED_ADMIN is automatically a RED_USER_ADMIN => can't disable RED_USER_ADMIN as long as RED_ADMIN is checked */
+    readonly #ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' };
 
     constructor(
         private readonly _formBuilder: UntypedFormBuilder,
@@ -49,13 +46,17 @@ export class UserDetailsComponent extends BaseFormComponent implements OnChanges
         }, []);
     }
 
-    private get _rolesControls(): any {
+    get sendSetPasswordMail() {
+        return !this.form.controls.sendSetPasswordMail.value;
+    }
+
+    get #rolesControls() {
         return this.ROLES.reduce(
             (prev, role) => ({
                 ...prev,
                 [role]: [
                     {
-                        value: this.user && this.user.has(role),
+                        value: this.user() && this.user().has(role),
                         disabled: this.shouldBeDisabled(role),
                     },
                 ],
@@ -64,20 +65,20 @@ export class UserDetailsComponent extends BaseFormComponent implements OnChanges
         );
     }
 
-    ngOnChanges() {
-        this.form = this._getForm();
+    ngOnInit() {
+        this.form = this.#getForm();
         this.initialFormValue = this.form.getRawValue();
     }
 
     shouldBeDisabled(role: string): boolean {
-        const isCurrentAdminUser = this.user && this.user.isAdmin && this.user.id === this._userService.currentUser.id;
+        const isCurrentAdminUser = this.user() && this.user().isAdmin && this.user().id === this._userService.currentUser.id;
         return (
             // RED_ADMIN can't remove own RED_ADMIN role
             (role === 'RED_ADMIN' && isCurrentAdminUser) ||
             // only RED_ADMINs can edit RED_ADMIN roles
             (role === 'RED_ADMIN' && !this._userService.currentUser.isAdmin) ||
-            Object.keys(this._ROLE_REQUIREMENTS).reduce(
-                (value, key) => value || (role === this._ROLE_REQUIREMENTS[key] && this.user?.roles.includes(key)),
+            Object.keys(this.#ROLE_REQUIREMENTS).reduce(
+                (value, key) => value || (role === this.#ROLE_REQUIREMENTS[key] && this.user()?.roles.includes(key)),
                 false,
             )
         );
@@ -85,38 +86,38 @@ export class UserDetailsComponent extends BaseFormComponent implements OnChanges
 
     async save() {
         this._loadingService.start();
-        const userData: IProfileUpdateRequest = { ...this.form.getRawValue(), roles: this.activeRoles };
+        const userData: IProfileUpdateRequest = {
+            ...this.form.getRawValue(),
+            roles: this.activeRoles,
+            sendSetPasswordMail: this.sendSetPasswordMail,
+        };
 
-        if (!this.user) {
+        if (!this.user()) {
             await firstValueFrom(this._userService.create(userData))
                 .then(() => {
                     this.closeDialog.emit(true);
                 })
                 .catch(error => {
-                    if (error.status === HttpStatusCode.Conflict) {
-                        this._toaster.error(_('add-edit-user.error.email-already-used'));
-                    } else {
-                        this._toaster.error(_('add-edit-user.error.generic'));
-                    }
+                    this._toaster.error(null, { error });
                     this._loadingService.stop();
                 });
         } else {
-            await firstValueFrom(this._userService.updateProfile(userData, this.user.id));
+            await firstValueFrom(this._userService.updateProfile(userData, this.user().id));
             this.closeDialog.emit(true);
         }
     }
 
     delete() {
-        this._dialogService.deleteUsers([this.user.id], () => this.closeDialog.emit(true));
+        this._dialogService.deleteUsers([this.user().id], () => this.closeDialog.emit(true));
     }
 
     setRolesRequirements(checked: boolean, role: string): void {
-        if (Object.keys(this._ROLE_REQUIREMENTS).includes(role)) {
+        if (Object.keys(this.#ROLE_REQUIREMENTS).includes(role)) {
             if (checked) {
-                this.form.patchValue({ [this._ROLE_REQUIREMENTS[role]]: true });
-                this.form.controls[this._ROLE_REQUIREMENTS[role]].disable();
+                this.form.patchValue({ [this.#ROLE_REQUIREMENTS[role]]: true });
+                this.form.controls[this.#ROLE_REQUIREMENTS[role]].disable();
             } else {
-                this.form.controls[this._ROLE_REQUIREMENTS[role]].enable();
+                this.form.controls[this.#ROLE_REQUIREMENTS[role]].enable();
             }
         }
     }
@@ -127,18 +128,19 @@ export class UserDetailsComponent extends BaseFormComponent implements OnChanges
         return user.id === this._userService.currentUser.id || (userAdmin && !currentUserAdmin);
     }
 
-    private _getForm(): UntypedFormGroup {
+    #getForm(): UntypedFormGroup {
         return this._formBuilder.group({
-            firstName: [this.user?.firstName, Validators.required],
-            lastName: [this.user?.lastName, Validators.required],
+            firstName: [this.user()?.firstName, Validators.required],
+            lastName: [this.user()?.lastName, Validators.required],
             email: [
                 {
-                    value: this.user?.email,
-                    disabled: !!this.user?.email,
+                    value: this.user()?.email,
+                    disabled: !!this.user()?.email,
                 },
                 [Validators.required, Validators.email],
             ],
-            ...this._rolesControls,
+            ...this.#rolesControls,
+            sendSetPasswordMail: [false],
         });
     }
 }

apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts

@@ -19,7 +19,6 @@ interface DialogData {
 @Component({
     templateUrl: './add-entity-dialog.component.html',
     styleUrls: ['./add-entity-dialog.component.scss'],
-    standalone: true,
     imports: [AddEditEntityComponent, TranslateModule, IconButtonComponent, NgIf, CircleButtonComponent, HelpButtonComponent],
 })
 export class AddEntityDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/audit-info-dialog/audit-info-dialog.component.html

@@ -6,9 +6,11 @@
             <div class="table-header">Key</div>
             <div class="table-header">Value</div>
 
-            <ng-container *ngFor="let entry of data.auditEntry.details | keyvalue : originalOrder">
+            <ng-container *ngFor="let entry of data.auditEntry.details | keyvalue: originalOrder">
                 <div class="bold">{{ entry.key | humanize }}</div>
-                <div>{{ entry.value }}</div>
+                <div>
+                    <pre>{{ entry.value | json }}</pre>
+                </div>
             </ng-container>
         </div>
     </div>

apps/red-ui/src/app/modules/admin/dialogs/audit-info-dialog/audit-info-dialog.component.ts

@@ -1,4 +1,4 @@
-import { KeyValue, KeyValuePipe, NgForOf } from '@angular/common';
+import { JsonPipe, KeyValue, KeyValuePipe, NgForOf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { BaseDialogComponent, CircleButtonComponent, HumanizePipe } from '@iqser/common-ui';
@@ -16,8 +16,7 @@ type OrderFn = (a: KeyValue<string, string>, b: KeyValue<string, string>) => num
     templateUrl: './audit-info-dialog.component.html',
     styleUrls: ['./audit-info-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [TranslateModule, NgForOf, KeyValuePipe, HumanizePipe, CircleButtonComponent],
+    imports: [TranslateModule, NgForOf, KeyValuePipe, HumanizePipe, CircleButtonComponent, JsonPipe],
 })
 export class AuditInfoDialogComponent extends BaseDialogComponent {
     constructor(

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts

@@ -20,7 +20,6 @@ const KMS_SIGNATURE_DIALOG_WIDTH = '810px';
 @Component({
     templateUrl: './configure-certificate-dialog.component.html',
     styleUrls: ['./configure-certificate-dialog.component.scss'],
-    standalone: true,
     imports: [
         DetailsRadioComponent,
         NgIf,

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts

@@ -13,7 +13,6 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './kms-signature-configuration.component.html',
     styleUrls: ['./kms-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [UploadFileComponent, ReactiveFormsModule, NgIf, TranslateModule],
 })
 export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts

@@ -14,7 +14,6 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './pkcs-signature-configuration.component.html',
     styleUrls: ['./pkcs-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [UploadFileComponent, ReactiveFormsModule, NgIf, TranslateModule],
 })
 export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {

apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts

@@ -20,7 +20,6 @@ interface IEditColorData {
 @Component({
     templateUrl: './edit-color-dialog.component.html',
     styleUrls: ['./edit-color-dialog.component.scss'],
-    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, ColorPickerModule, MatIcon, NgIf, IconButtonComponent, CircleButtonComponent],
 })
 export class EditColorDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts

@@ -9,7 +9,6 @@ import { TranslateModule } from '@ngx-translate/core';
 @Component({
     selector: 'redaction-smtp-auth-dialog',
     templateUrl: './smtp-auth-dialog.component.html',
-    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, IconButtonComponent, CircleButtonComponent, MatDialogClose],
 })
 export class SmtpAuthDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts

@@ -7,7 +7,6 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './upload-dictionary-dialog.component.html',
     styleUrls: ['./upload-dictionary-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [IconButtonComponent, TranslateModule],
 })
 export class UploadDictionaryDialogComponent {

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts

@@ -17,7 +17,7 @@ import { RouterHistoryService } from '@services/router-history.service';
 import { auditCategoriesTranslations } from '@translations/audit-categories-translations';
 import { Roles } from '@users/roles';
 import { applyIntervalConstraints } from '@utils/date-inputs-utils';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { firstValueFrom } from 'rxjs';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { AuditService } from '../../services/audit.service';
@@ -36,7 +36,6 @@ const PAGE_SIZE = 50;
     templateUrl: './audit-screen.component.html',
     styleUrls: ['./audit-screen.component.scss'],
     providers: listingProvidersFactory(AuditScreenComponent),
-    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,
@@ -139,16 +138,9 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnI
         const promises = [];
         const category = this.form.get('category').value;
         const userId = this.form.get('userId').value;
-        const from = this.form.get('from').value;
-        let to = this.form.get('to').value;
-        if (to) {
-            const hoursLeft = new Date(to).getHours();
-            const minutesLeft = new Date(to).getMinutes();
-            to = to
-                .clone()
-                .add(24 - hoursLeft - 1, 'h')
-                .add(60 - minutesLeft - 1);
-        }
+        const from = this.form.get('from').value ? dayjs(this.form.get('from').value).startOf('day').toISOString() : null;
+        const to = this.form.get('to').value ? dayjs(this.form.get('to').value).endOf('day').toISOString() : null;
+
         const logsRequestBody: IAuditSearchRequest = {
             pageSize: PAGE_SIZE,
             page: page,

apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html

@@ -0,0 +1,130 @@
+@if (componentDefinitions$ | async; as componentDefinitions) {
+    <div class="content-container">
+        <div class="content-header">
+            <div class="header-title">
+                <span
+                    class="all-caps-label"
+                    [innerHTML]="'component-definitions.title' | translate: { length: componentDefinitions.length }"
+                ></span>
+            </div>
+            <div class="actions">
+                @if (permissionsService.canEditEntities()) {
+                    <iqser-icon-button
+                        (action)="createEmptyComponentDefinition()"
+                        [label]="'component-definitions.add-new' | translate"
+                        [type]="iconButtonTypes.primary"
+                        icon="iqser:plus"
+                    ></iqser-icon-button>
+                }
+            </div>
+        </div>
+        <div class="content">
+            <div class="components-list">
+                <div class="header">
+                    <div class="item-content">
+                        <div class="all-caps-label">{{ 'component-definitions.columns.position' | translate }}</div>
+                        <div class="all-caps-label">{{ 'component-definitions.columns.name' | translate }}</div>
+                    </div>
+                </div>
+
+                <div (cdkDropListDropped)="drop($event)" cdkDropList class="list-content">
+                    @for (component of componentDefinitions; track component) {
+                        <div
+                            class="list-item"
+                            [class.selected]="selectedComponent?.id === component.id"
+                            cdkDrag
+                            (click)="selectComponent(component)"
+                        >
+                            <div class="item-content">
+                                <div class="table-item-title heading">
+                                    <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
+                                    <span> {{ component.rank }} </span>
+                                </div>
+                                <div class="table-item-title heading">{{ component.displayName }}</div>
+                                <div class="right-content">
+                                    @if (permissionsService.canEditEntities()) {
+                                        <iqser-circle-button
+                                            [class]="'delete-component-definition'"
+                                            (action)="deleteComponent(component.id)"
+                                            [tooltip]="'trash.action.delete' | translate"
+                                            icon="iqser:trash"
+                                        ></iqser-circle-button>
+                                    }
+                                    <mat-icon
+                                        [class.not-visible]="selectedComponent?.id !== component.id"
+                                        class="arrow-right"
+                                        svgIcon="red:arrow-right"
+                                    ></mat-icon>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+            @if (selectedComponent) {
+                <section class="dialog">
+                    <div class="dialog-header">
+                        @if (selectedComponent.id) {
+                            <div
+                                class="heading-l"
+                                [innerHTML]="'component-definitions.edit-title' | translate: { displayName: selectedComponent.displayName }"
+                            ></div>
+                        } @else {
+                            <div class="heading-l" [innerHTML]="'component-definitions.add-title' | translate"></div>
+                        }
+                    </div>
+                    @if (form) {
+                        <form (submit)="save()" [formGroup]="form">
+                            <div class="dialog-content">
+                                <div class="iqser-input-group w-300 required">
+                                    <label [translate]="'component-definitions.form.display-name'"></label>
+                                    <input
+                                        formControlName="displayName"
+                                        name="displayName"
+                                        placeholder="{{ 'component-definitions.form.display-name-placeholder' | translate }}"
+                                        type="text"
+                                    />
+                                </div>
+
+                                <div class="iqser-input-group w-450">
+                                    <label [translate]="'component-definitions.form.description'"></label>
+                                    <textarea
+                                        [placeholder]="'component-definitions.form.description-placeholder' | translate"
+                                        formControlName="description"
+                                        iqserHasScrollbar
+                                        name="description"
+                                        rows="5"
+                                        type="text"
+                                    ></textarea>
+                                </div>
+
+                                <div class="iqser-input-group w-450">
+                                    <label [translate]="'component-definitions.form.technical-name-label'"></label>
+                                    <span class="technical-name"> {{ technicalName }} </span>
+                                    <label [translate]="'component-definitions.form.autogenerated-label'"></label>
+                                </div>
+                            </div>
+
+                            <div class="dialog-actions">
+                                <iqser-icon-button
+                                    [disabled]="disabled"
+                                    [label]="'component-definitions.actions.save' | translate"
+                                    [submit]="true"
+                                    [type]="iconButtonTypes.primary"
+                                ></iqser-icon-button>
+                                @if (selectedComponent.id) {
+                                    <div
+                                        (click)="initForm()"
+                                        [class.disabled]="disabled"
+                                        [translate]="'component-definitions.actions.revert'"
+                                        class="all-caps-label cancel"
+                                    ></div>
+                                }
+                            </div>
+                        </form>
+                    }
+                </section>
+            }
+        </div>
+    </div>
+}

apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss

@@ -0,0 +1,145 @@
+%item-content-style {
+    position: relative;
+    display: flex;
+    flex: 1;
+    margin: 5px;
+
+    div:first-child {
+        width: 100px;
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .draggable {
+            cursor: grab;
+            transform: scale(0.7);
+            width: 40px;
+            margin-left: -30px;
+
+            ::ng-deep svg {
+                fill: var(--iqser-grey-7);
+            }
+        }
+    }
+
+    .right-content {
+        visibility: hidden;
+        flex: 1;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 5px;
+
+        iqser-circle-button {
+            visibility: hidden;
+        }
+
+        .arrow-right {
+            transform: scale(0.7);
+
+            &.not-visible {
+                visibility: hidden;
+            }
+        }
+    }
+}
+
+.content-container {
+    background-color: var(--iqser-grey-6);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    .content-header {
+        display: flex;
+        height: 50px;
+        background-color: var(--iqser-grey-6);
+        align-items: center;
+        padding: 0 24px;
+
+        .actions {
+            display: flex;
+            flex: 1;
+            justify-content: flex-end;
+        }
+    }
+
+    .content {
+        flex: 1;
+        display: flex;
+        gap: 20px;
+        overflow: hidden;
+
+        .components-list {
+            flex: 1;
+            background-color: var(--iqser-white);
+            display: flex;
+            flex-direction: column;
+
+            .header {
+                height: 30px;
+            }
+
+            .list-content {
+                overflow-y: auto;
+                height: calc(100vh - 30px);
+                outline: none;
+            }
+
+            .list-item {
+                height: 80px;
+                transition: background 0.3s ease;
+            }
+
+            .header,
+            .list-item {
+                display: flex;
+                border-bottom: 1px solid var(--iqser-separator);
+
+                .item-content {
+                    @extend %item-content-style;
+                }
+            }
+
+            .list-item:hover,
+            .selected {
+                cursor: pointer;
+
+                .item-content {
+                    background-color: var(--iqser-grey-8);
+
+                    .right-content {
+                        visibility: visible;
+                    }
+                }
+            }
+
+            .list-item:hover > .item-content > .right-content > iqser-circle-button {
+                visibility: visible;
+            }
+        }
+
+        section {
+            background-color: var(--iqser-white);
+            border-radius: 8px;
+            width: 700px;
+            height: 470px;
+            margin-right: 150px;
+
+            .technical-name {
+                min-height: 16px;
+            }
+        }
+    }
+}
+
+.cdk-drag-preview {
+    .list-item {
+        transition: background 0.3s ease;
+    }
+    .item-content {
+        @extend %item-content-style;
+    }
+}

apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts

@@ -0,0 +1,138 @@
+import { Component, OnInit, signal } from '@angular/core';
+import {
+    BaseFormComponent,
+    CircleButtonComponent,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    listingProvidersFactory,
+    LoadingService,
+} from '@iqser/common-ui';
+import { ComponentDefinitionsService } from '@services/entity-services/component-definitions.service';
+import { firstValueFrom } from 'rxjs';
+import { getParam } from '@common-ui/utils';
+import { DOSSIER_TEMPLATE_ID, IComponentDefinition } from '@red/domain';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { PermissionsService } from '@services/permissions.service';
+import { MatIcon } from '@angular/material/icon';
+import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AdminDialogService } from '../../services/admin-dialog.service';
+
+@Component({
+    templateUrl: './component-definitions.component.html',
+    styleUrls: ['./component-definitions.component.scss'],
+    providers: listingProvidersFactory(ComponentDefinitionsComponent),
+    imports: [
+        IconButtonComponent,
+        TranslateModule,
+        CommonModule,
+        MatIcon,
+        CdkDragHandle,
+        CdkDropList,
+        CdkDrag,
+        FormsModule,
+        ReactiveFormsModule,
+        CircleButtonComponent,
+        HasScrollbarDirective,
+    ],
+})
+export default class ComponentDefinitionsComponent extends BaseFormComponent implements OnInit {
+    readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
+    readonly #componentDefinitions = signal<IComponentDefinition[]>([]);
+    protected readonly componentDefinitions$ = toObservable(this.#componentDefinitions);
+    protected selectedComponent: IComponentDefinition | null = null;
+
+    constructor(
+        private readonly _loadingService: LoadingService,
+        private readonly _componentDefinitionsService: ComponentDefinitionsService,
+        private readonly _formBuilder: FormBuilder,
+        private readonly _dialogService: AdminDialogService,
+        protected readonly permissionsService: PermissionsService,
+    ) {
+        super();
+    }
+
+    async ngOnInit() {
+        this._loadingService.stop();
+        await this.#loadData();
+    }
+
+    async #loadData() {
+        const componentDefinitions = await firstValueFrom(
+            this._componentDefinitionsService.getComponentDefinitions(this.#dossierTemplateId),
+        );
+        this.#componentDefinitions.set(componentDefinitions);
+    }
+
+    async createEmptyComponentDefinition() {
+        this.selectedComponent = {
+            displayName: '',
+            description: '',
+        } as IComponentDefinition;
+        this.initForm();
+    }
+
+    async save() {
+        if (this.selectedComponent.id) {
+            const component = { ...this.form.getRawValue(), id: this.selectedComponent.id };
+            await firstValueFrom(this._componentDefinitionsService.updateComponentDefinition(this.#dossierTemplateId, component));
+        } else {
+            const component = {
+                ...this.form.getRawValue(),
+                dossierTemplateId: this.#dossierTemplateId,
+                technicalName: this.technicalName,
+            };
+            await firstValueFrom(this._componentDefinitionsService.createComponentDefinition(this.#dossierTemplateId, component));
+        }
+        await this.#loadData();
+        this.selectComponent();
+        await this.initForm();
+    }
+
+    async drop(event: CdkDragDrop<string>) {
+        if (event.isPointerOverContainer) {
+            moveItemInArray(this.#componentDefinitions(), event.previousIndex, event.currentIndex);
+
+            const componentIds = this.#componentDefinitions().map(c => c.id);
+            const componentDefinitions = await firstValueFrom(
+                this._componentDefinitionsService.reorderComponentDefinitions(this.#dossierTemplateId, componentIds),
+            );
+            this.#componentDefinitions.set(componentDefinitions);
+        }
+    }
+
+    async deleteComponent(componentId: string) {
+        this._dialogService.openDialog('confirm', null, async () => {
+            await firstValueFrom(this._componentDefinitionsService.deleteComponentDefinitions(this.#dossierTemplateId, [componentId]));
+            await this.#loadData();
+            this.selectedComponent = null;
+        });
+    }
+
+    initForm() {
+        this.form = this.#getForm();
+        this.initialFormValue = this.form.getRawValue();
+    }
+
+    #getForm() {
+        return this._formBuilder.group({
+            displayName: [this.selectedComponent?.displayName, Validators.required],
+            description: [this.selectedComponent?.description],
+        });
+    }
+
+    selectComponent(component?: IComponentDefinition) {
+        if (component && this.selectedComponent?.id !== component.id) {
+            this.selectedComponent = component;
+            this.initForm();
+            return;
+        }
+        this.selectedComponent = null;
+    }
+
+    get technicalName() {
+        return this.selectedComponent.technicalName ?? this.form.get('displayName')?.value?.toLowerCase().trim().replace(/\s+/g, '_');
+    }
+}

apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html

@@ -24,10 +24,15 @@
 
             <div class="iqser-input-group required">
                 <label translate="add-edit-component-mapping.form.file"></label>
-                <iqser-upload-file (fileChanged)="fileChanged($event)" [file]="activeFile" [accept]="'.csv'" />
+                <iqser-upload-file (fileChanged)="changeFile($event)" [file]="activeFile" [accept]="'.csv'" />
             </div>
 
-            <div class="row">
+            <div
+                class="row"
+                [matTooltip]="'add-edit-component-mapping.disabled-file-options' | translate"
+                [matTooltipDisabled]="!form.get('encoding')?.disabled"
+                [matTooltipPosition]="'above'"
+            >
                 <div class="iqser-input-group required w-150">
                     <label translate="add-edit-component-mapping.form.delimiter"></label>
                     <input
@@ -37,6 +42,15 @@
                         type="text"
                     />
                 </div>
+                <div class="iqser-input-group required w-150">
+                    <label translate="add-edit-component-mapping.form.quote-char"></label>
+                    <input
+                        [placeholder]="'add-edit-component-mapping.form.quote-char-placeholder' | translate"
+                        formControlName="quoteChar"
+                        name="quoteChar"
+                        type="text"
+                    />
+                </div>
 
                 <div class="iqser-input-group required w-150">
                     <label translate="add-edit-component-mapping.form.encoding-type"></label>

apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss

@@ -19,3 +19,7 @@
         }
     }
 }
+
+.row:last-child {
+    max-width: 300px;
+}

apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialogComponent, UploadFileComponent } from '@iqser/common-ui';
+import { CircleButtonComponent, IconButtonComponent, IqserDialogComponent, UploadFileComponent } from '@iqser/common-ui';
 import { FileAttributeEncodingTypes, IComponentMapping } from '@red/domain';
 import { FormBuilder, ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
@@ -7,27 +7,30 @@ import { NgForOf, NgIf } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatOption } from '@angular/material/autocomplete';
-import { MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatSelect } from '@angular/material/select';
 import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
 import { firstValueFrom } from 'rxjs';
 import { ComponentMappingsService } from '@services/entity-services/component-mappings.service';
+import { MatTooltip } from '@angular/material/tooltip';
 
 interface DialogData {
     dossierTemplateId: string;
     mapping: IComponentMapping;
 }
+
 interface DialogResult {
     id: string;
     name: string;
     file: Blob;
     encoding: string;
     delimiter: string;
+    quoteChar: string;
+    fileName?: string;
 }
 
 @Component({
     templateUrl: './add-edit-component-mapping-dialog.component.html',
     styleUrls: ['./add-edit-component-mapping-dialog.component.scss'],
-    standalone: true,
     imports: [
         TranslateModule,
         ReactiveFormsModule,
@@ -37,10 +40,10 @@ interface DialogResult {
         CircleButtonComponent,
         MatDialogModule,
         MatOption,
-        MatSelectTrigger,
         MatSelect,
         IconButtonComponent,
         UploadFileComponent,
+        MatTooltip,
     ],
 })
 export class AddEditComponentMappingDialogComponent
@@ -63,16 +66,20 @@ export class AddEditComponentMappingDialogComponent
     async ngOnInit() {
         if (this.data.mapping?.fileName) {
             this.activeFile = { name: this.data.mapping.fileName } as File;
-            const file = await firstValueFrom(
+            const fileContent = await firstValueFrom(
                 this._componentMappingService.getComponentMappingFile(this.data.dossierTemplateId, this.data.mapping.id),
             );
+            const file = new Blob([fileContent.body as Blob], { type: 'text/csv' });
             this.form.get('file').setValue(file);
             this.initialFormValue = this.form.getRawValue();
+            this.#disableEncodingAndQuoteCharAndDelimiter();
         }
     }
 
-    fileChanged(file: Blob) {
+    changeFile(file: File) {
         this.form.get('file').setValue(file);
+        this.form.get('fileName').setValue(file?.name);
+        this.#enableEncodingAndQuoteCharAndDelimiter();
     }
 
     save() {
@@ -83,8 +90,22 @@ export class AddEditComponentMappingDialogComponent
         return this._formBuilder.group({
             name: [this.data?.mapping?.name, Validators.required],
             file: [null, Validators.required],
+            fileName: [this.data?.mapping?.fileName, Validators.required],
             encoding: this.encodingTypeOptions.find(e => e === this.data?.mapping?.encoding) ?? this.encodingTypeOptions[0],
             delimiter: [this.data?.mapping?.delimiter ?? ',', Validators.required],
+            quoteChar: [this.data?.mapping?.quoteChar ?? '"', Validators.required],
         });
     }
+
+    #disableEncodingAndQuoteCharAndDelimiter() {
+        this.form.get('encoding').disable();
+        this.form.get('delimiter').disable();
+        this.form.get('quoteChar').disable();
+    }
+
+    #enableEncodingAndQuoteCharAndDelimiter() {
+        this.form.get('encoding').enable();
+        this.form.get('delimiter').enable();
+        this.form.get('quoteChar').enable();
+    }
 }

apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.html

@@ -44,6 +44,10 @@
             <span>{{ entity.numberOfLines }}</span>
         </div>
 
+        <div class="cell" [matTooltip]="entity.columnLabelsString" [matTooltipPosition]="'above'" [matTooltipClass]="'custom-tooltip'">
+            <span class="ellipsis">{{ entity.columnLabelsString }}</span>
+        </div>
+
         <div class="cell">
             <div *allow="roles.componentMappings.write; if: currentUser.isAdmin" class="action-buttons">
                 <iqser-circle-button

apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss

@@ -0,0 +1,11 @@
+.ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+::ng-deep .custom-tooltip {
+    max-width: 300px;
+    white-space: normal;
+    word-wrap: break-word;
+}

apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts

@@ -1,6 +1,5 @@
 import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { RouterLink } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { InputWithActionComponent } from '@common-ui/inputs/input-with-action/input-with-action.component';
 import { getCurrentUser } from '@common-ui/users';
@@ -25,29 +24,24 @@ import { Roles } from '@users/roles';
 import { combineLatest, firstValueFrom } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { AdminDialogService } from '../../services/admin-dialog.service';
-import { AdminSideNavComponent } from '../../shared/components/admin-side-nav/admin-side-nav.component';
-import { DossierTemplateActionsComponent } from '../../shared/components/dossier-template-actions/dossier-template-actions.component';
-import { DossierTemplateBreadcrumbsComponent } from '../../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
 import { AddEditComponentMappingDialogComponent } from './add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component';
 import { download } from '@utils/file-download-utils';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
     templateUrl: './component-mappings-screen.component.html',
+    styleUrls: ['./component-mappings-screen.component.scss'],
     providers: listingProvidersFactory(ComponentMappingsScreenComponent),
-    standalone: true,
     imports: [
-        DossierTemplateBreadcrumbsComponent,
         AsyncPipe,
         NgIf,
-        DossierTemplateActionsComponent,
         CircleButtonComponent,
         TranslateModule,
-        RouterLink,
-        AdminSideNavComponent,
         IqserListingModule,
         InputWithActionComponent,
         IconButtonComponent,
         IqserAllowDirective,
+        MatTooltip,
     ],
 })
 export default class ComponentMappingsScreenComponent extends ListingComponent<ComponentMapping> implements OnInit {
@@ -61,6 +55,7 @@ export default class ComponentMappingsScreenComponent extends ListingComponent<C
         { label: _('component-mappings-screen.table-col-names.name'), sortByKey: 'searchKey' },
         { label: _('component-mappings-screen.table-col-names.version') },
         { label: _('component-mappings-screen.table-col-names.number-of-lines') },
+        { label: _('component-mappings-screen.table-col-names.column-labels') },
     ];
     readonly tableHeaderLabel = _('component-mappings-screen.table-header.title');
 
@@ -95,8 +90,8 @@ export default class ComponentMappingsScreenComponent extends ListingComponent<C
         const result = await dialog.result();
         if (result) {
             this._loadingService.start();
-            const { id, name, encoding, delimiter } = result;
-            const newMapping = { id, name, encoding, delimiter };
+            const { id, name, encoding, delimiter, fileName, quoteChar } = result;
+            const newMapping = { id, name, encoding, delimiter, fileName, quoteChar };
             await firstValueFrom(
                 this._componentMappingService.createUpdateComponentMapping(this.#dossierTemplateId, newMapping, result.file),
             );

apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts

@@ -33,7 +33,6 @@ interface ListItem extends IListable {
     styleUrls: ['./default-colors-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: listingProvidersFactory(DefaultColorsScreenComponent),
-    standalone: true,
     imports: [IqserListingModule, NgStyle, CircleButtonComponent, IqserAllowDirective, TranslateModule, AsyncPipe, NgIf],
 })
 export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {

apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts

@@ -25,7 +25,6 @@ import { DigitalSignatureService } from '../../services/digital-signature.servic
     selector: 'redaction-digital-signature-screen',
     templateUrl: './digital-signature-screen.component.html',
     styleUrls: ['./digital-signature-screen.component.scss'],
-    standalone: true,
     imports: [
         IqserListingModule,
         EmptyStateComponent,

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts

@@ -20,7 +20,6 @@ export interface AddEditDossierAttributeDialogData {
 @Component({
     templateUrl: './add-edit-dossier-attribute-dialog.component.html',
     styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss'],
-    standalone: true,
     imports: [
         TranslateModule,
         ReactiveFormsModule,
@@ -91,7 +90,7 @@ export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent
         const createOrUpdate = this._dossierAttributesService.createOrUpdate(attribute, this.data.dossierTemplateId);
         const result = await createOrUpdate.catch((error: HttpErrorResponse) => {
             this._loadingService.stop();
-            this._toaster.error(_('add-edit-dossier-attribute.error.generic'), { error });
+            this._toaster.rawError(error.error.message);
             return undefined;
         });
 

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts

@@ -35,7 +35,6 @@ import { TableItemComponent } from './table-item/table-item.component';
         entitiesService: DossierAttributesService,
         component: DossierAttributesListingScreenComponent,
     }),
-    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts

@@ -10,7 +10,6 @@ import { NgIf } from '@angular/common';
     selector: 'redaction-table-item [attribute] [canEditDossierAttributes]',
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
-    standalone: true,
     imports: [MatTooltip, TranslateModule, CircleButtonComponent, NgIf],
 })
 export class TableItemComponent {

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html

@@ -47,6 +47,7 @@
         <div class="dialog-actions">
             <iqser-icon-button
                 (action)="save()"
+                [buttonId]="'save-dossier-state'"
                 [disabled]="disabled"
                 [label]="'add-edit-dossier-state.save' | translate"
                 [submit]="true"

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts

@@ -18,7 +18,6 @@ export interface AddEditDossierStateDialogData {
 @Component({
     templateUrl: './add-edit-dossier-state-dialog.component.html',
     styleUrls: ['./add-edit-dossier-state-dialog.component.scss'],
-    standalone: true,
     imports: [TranslateModule, ReactiveFormsModule, ColorPickerModule, MatIcon, NgIf, IconButtonComponent, CircleButtonComponent],
 })
 export class AddEditDossierStateDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html

@@ -4,12 +4,12 @@
     </div>
 
     <div class="dialog-content">
-        <div [innerHTML]="'confirm-delete-dossier-state.warning' | translate : translateArgs" class="heading"></div>
+        <div [innerHTML]="'confirm-delete-dossier-state.warning' | translate: translateArgs" class="heading"></div>
 
         <form *ngIf="data.dossierCount !== 0 && data.otherStates.length > 0" [formGroup]="form" class="mt-16">
             <div class="iqser-input-group">
                 <mat-checkbox color="primary" formControlName="replace">
-                    {{ 'confirm-delete-dossier-state.question' | translate : { count: data.dossierCount } }}
+                    {{ 'confirm-delete-dossier-state.question' | translate: { count: data.dossierCount } }}
                 </mat-checkbox>
             </div>
 
@@ -30,7 +30,12 @@
     </div>
 
     <div class="dialog-actions">
-        <iqser-icon-button (action)="save()" [label]="label | translate" [type]="iconButtonTypes.primary"></iqser-icon-button>
+        <iqser-icon-button
+            (action)="save()"
+            [buttonId]="'confirm-delete-dossier-state'"
+            [label]="label | translate"
+            [type]="iconButtonTypes.primary"
+        ></iqser-icon-button>
         <div [translate]="'confirm-delete-dossier-state.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
     </div>
 

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts

@@ -11,7 +11,7 @@ import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.se
 import { TranslateModule } from '@ngx-translate/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatOption, MatSelect } from '@angular/material/select';
 import { NgForOf, NgIf } from '@angular/common';
 
 export interface ConfirmDeleteDossierStateDialogData {
@@ -23,13 +23,11 @@ export interface ConfirmDeleteDossierStateDialogData {
 @Component({
     templateUrl: './confirm-delete-dossier-state-dialog.component.html',
     styleUrls: ['./confirm-delete-dossier-state-dialog.component.scss'],
-    standalone: true,
     imports: [
         TranslateModule,
         ReactiveFormsModule,
         MatCheckbox,
         MatFormField,
-        MatSelectTrigger,
         MatSelect,
         MatOption,
         NgForOf,

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts

@@ -33,7 +33,6 @@ import { DossierStatesTableItemComponent } from '../dossier-states-table-item/do
     templateUrl: './dossier-states-listing-screen.component.html',
     styleUrls: ['./dossier-states-listing-screen.component.scss'],
     providers: listingProvidersFactory(DossierStatesListingScreenComponent),
-    standalone: true,
     imports: [
         IqserListingModule,
         DonutChartComponent,

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.html

@@ -13,18 +13,20 @@
     <span class="small-label">{{ state.dossierCount }}</span>
 </div>
 
-<div class="cell">
+<div [id]="'dossier_' + (state.name | snakeCase)" class="cell">
     <div *ngIf="permissionsService.canPerformDossierStatesActions()" class="action-buttons">
         <div [attr.help-mode-key]="'edit_delete_dossier_state'">
             <iqser-circle-button
                 (action)="openEditStateDialog(state)"
                 [tooltip]="'dossier-states-listing.action.edit' | translate"
+                [buttonId]="'dossier-state-edit-button'"
                 icon="iqser:edit"
             ></iqser-circle-button>
 
             <iqser-circle-button
                 (action)="openConfirmDeleteStateDialog(state)"
                 [tooltip]="'dossier-states-listing.action.delete' | translate"
+                [buttonId]="'dossier-state-delete-button'"
                 icon="iqser:trash"
             ></iqser-circle-button>
         </div>

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.ts

@@ -14,13 +14,13 @@ import {
 import { MatTooltip } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgIf } from '@angular/common';
+import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
 
 @Component({
     selector: 'redaction-dossier-states-table-item',
     templateUrl: './dossier-states-table-item.component.html',
     styleUrls: ['./dossier-states-table-item.component.scss'],
-    standalone: true,
-    imports: [MatTooltip, CircleButtonComponent, TranslateModule, NgIf],
+    imports: [MatTooltip, CircleButtonComponent, TranslateModule, NgIf, SnakeCasePipe],
 })
 export class DossierStatesTableItemComponent {
     readonly #dialog = inject(MatDialog);

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component.ts

@@ -33,7 +33,6 @@ import { TableItemComponent } from '../table-item/table-item.component';
         entitiesService: DossierTemplatesService,
         component: DossierTemplatesListingScreenComponent,
     }),
-    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts

@@ -17,7 +17,6 @@ import { DatePipe } from '@shared/pipes/date.pipe';
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [MatTooltip, NgIf, AsyncPipe, MatIcon, TranslateModule, DatePipe, DossierTemplateActionsComponent, InitialsAvatarComponent],
 })
 export class TableItemComponent implements OnChanges {

apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html

@@ -87,6 +87,7 @@
                             [routerLink]="dict.routerLink"
                             [tooltip]="'entities-listing.action.edit' | translate"
                             icon="iqser:edit"
+                            iqserStopPropagation
                         ></iqser-circle-button>
                     </div>
                 </div>

apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts

@@ -11,6 +11,7 @@ import {
     ListingComponent,
     listingProvidersFactory,
     LoadingService,
+    StopPropagationDirective,
     TableColumnConfig,
 } from '@iqser/common-ui';
 import { getParam } from '@iqser/common-ui/lib/utils';
@@ -29,7 +30,6 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
     templateUrl: './entities-listing-screen.component.html',
     styleUrls: ['./entities-listing-screen.component.scss'],
     providers: listingProvidersFactory(EntitiesListingScreenComponent),
-    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,
@@ -41,6 +41,7 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
         AnnotationIconComponent,
         AsyncPipe,
         RouterLink,
+        StopPropagationDirective,
     ],
 })
 export class EntitiesListingScreenComponent extends ListingComponent<Dictionary> implements OnInit {

apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts

@@ -16,7 +16,6 @@ import { AsyncPipe } from '@angular/common';
     templateUrl: './dictionary-screen.component.html',
     styleUrls: ['./dictionary-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [AsyncPipe, DictionaryManagerComponent],
 })
 export class DictionaryScreenComponent implements OnInit {

apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.html

@@ -1,7 +1,7 @@
 <div class="content-container" iqserHasScrollbar>
     <div class="dialog">
         <div class="dialog-header">
-            <div [translate]="'entity.info.heading'" [attr.help-mode-key]="'entity_info'" class="heading-l"></div>
+            <div [translate]="'entity.info.heading'" [attr.help-mode-key]="'entity_info'" class="heading-l w-full"></div>
 
             <div *ngIf="!permissionsService.canEditEntities()" class="read-only-indicator all-caps-label primary">
                 <mat-icon class="mr-8" svgIcon="red:read-only"></mat-icon>
@@ -26,8 +26,6 @@
             ></iqser-icon-button>
 
             <div (click)="revert()" [translate]="'entity.info.actions.revert'" class="all-caps-label cancel"></div>
-
-            <iqser-help-button *ngIf="!config.IS_DOCUMINE"></iqser-help-button>
         </div>
     </div>
 </div>

apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.scss

@@ -26,3 +26,7 @@
         min-height: unset;
     }
 }
+
+.w-full {
+    width: 100%;
+}

apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { getConfig, HasScrollbarDirective, HelpButtonComponent, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
+import { getConfig, HasScrollbarDirective, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
 import { IqserEventTarget } from '@iqser/common-ui/lib/utils';
 import { Dictionary, DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
@@ -17,17 +17,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './entity-info.component.html',
     styleUrls: ['./entity-info.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [
-        HasScrollbarDirective,
-        MatIcon,
-        NgIf,
-        TranslateModule,
-        AsyncPipe,
-        IconButtonComponent,
-        AddEditEntityComponent,
-        HelpButtonComponent,
-    ],
+    imports: [HasScrollbarDirective, MatIcon, NgIf, TranslateModule, AsyncPipe, IconButtonComponent, AddEditEntityComponent],
 })
 export class EntityInfoComponent {
     @ViewChild(AddEditEntityComponent) private readonly _addEditEntityComponent: AddEditEntityComponent;

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts

@@ -22,7 +22,6 @@ export interface AddEditFileAttributeDialogData {
 @Component({
     templateUrl: './add-edit-file-attribute-dialog.component.html',
     styleUrls: ['./add-edit-file-attribute-dialog.component.scss'],
-    standalone: true,
     imports: [
         ReactiveFormsModule,
         TranslateModule,

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts

@@ -13,7 +13,6 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 @Component({
     templateUrl: './file-attributes-configurations-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [
         ReactiveFormsModule,
         MatSlideToggleModule,
@@ -58,6 +57,7 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
         if (supportCsvMapping) {
             return {
                 ...this.#configuration,
+                keyColumn: this.form.get('keyColumn').value,
                 filenameMappingColumnHeaderName: this.form.get('keyColumn').value,
                 delimiter: this.form.get('delimiter').value,
                 encoding: this.form.get('encodingType').value,
@@ -67,13 +67,14 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
         return {
             ...this.#configuration,
             filenameMappingColumnHeaderName: '',
+            keyColumn: this.form.get('keyColumn').value,
         };
     }
 
     #getForm() {
         return this._formBuilder.group({
             supportCsvMapping: [!!this.#configuration.filenameMappingColumnHeaderName],
-            keyColumn: [this.#configuration.filenameMappingColumnHeaderName || '', [Validators.required]],
+            keyColumn: [this.#configuration.filenameMappingColumnHeaderName || this.#configuration.keyColumn || '', [Validators.required]],
             delimiter: [this.#configuration.delimiter || '', [Validators.required]],
             encodingType: [this.#configuration.encoding || FileAttributeEncodingTypes['UTF-8'], [Validators.required]],
         });

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts

@@ -2,8 +2,8 @@ import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormField } from '@angular/material/form-field';
-import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
-import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatOption, MatSelect } from '@angular/material/select';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ChevronButtonComponent } from '@common-ui/buttons/chevron-button';
@@ -19,7 +19,6 @@ import { fileAttributeTypesTranslations } from '@translations/file-attribute-typ
     templateUrl: './active-fields-listing.component.html',
     styleUrls: ['./active-fields-listing.component.scss'],
     providers: listingProvidersFactory(ActiveFieldsListingComponent),
-    standalone: true,
     imports: [
         IqserListingModule,
         CircleButtonComponent,
@@ -30,7 +29,6 @@ import { fileAttributeTypesTranslations } from '@translations/file-attribute-typ
         MatMenu,
         EditableInputComponent,
         MatFormField,
-        MatSelectTrigger,
         MatSelect,
         MatOption,
         FormsModule,
@@ -38,6 +36,7 @@ import { fileAttributeTypesTranslations } from '@translations/file-attribute-typ
         RoundCheckboxComponent,
         NgForOf,
         NgIf,
+        MatMenuItem,
     ],
 })
 export class ActiveFieldsListingComponent extends ListingComponent<IField> implements OnChanges {

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts

@@ -4,7 +4,7 @@ import { AbstractControl, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGr
 import { MatAutocomplete, MatAutocompleteTrigger, MatOption } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
 import { MatFormField } from '@angular/material/form-field';
-import { MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatSelect } from '@angular/material/select';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { InputWithActionComponent } from '@common-ui/inputs/input-with-action/input-with-action.component';
 import {
@@ -38,7 +38,6 @@ export interface IFileAttributesCSVImportData {
     styleUrls: ['./file-attributes-csv-import-dialog.component.scss'],
     providers: listingProvidersFactory(),
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [
         ReactiveFormsModule,
         MatFormField,
@@ -46,7 +45,6 @@ export interface IFileAttributesCSVImportData {
         MatAutocomplete,
         AsyncPipe,
         MatOption,
-        MatSelectTrigger,
         MatSelect,
         CircleButtonComponent,
         NgIf,

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts

@@ -46,7 +46,6 @@ import {
     templateUrl: './file-attributes-listing-screen.component.html',
     styleUrls: ['./file-attributes-listing-screen.component.scss'],
     providers: listingProvidersFactory(FileAttributesListingScreenComponent),
-    standalone: true,
     imports: [
         IqserListingModule,
         NgForOf,
@@ -86,6 +85,7 @@ export default class FileAttributesListingScreenComponent extends ListingCompone
         },
     ];
     readonly roles = Roles;
+    keyColumnValue: string = '';
 
     constructor(
         readonly permissionsService: PermissionsService,
@@ -172,13 +172,13 @@ export default class FileAttributesListingScreenComponent extends ListingCompone
             FileAttributesConfigurationsDialogComponent,
             {
                 ...defaultDialogConfig,
-                data: this.#existingConfiguration,
+                data: { ...this.#existingConfiguration, keyColumn: this.keyColumnValue },
             },
         );
 
         const configuration = await firstValueFrom(ref.afterClosed());
-
         if (configuration) {
+            this.keyColumnValue = configuration.keyColumn;
             await this.#setConfigAndLoadData(configuration);
         }
     }

apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.html

@@ -1,6 +1,5 @@
 <div class="dialog-header">
     <div class="heading-l" translate="general-config-screen.general.title"></div>
-    <div translate="general-config-screen.general.subtitle"></div>
 </div>
 <form (submit)="save()" *ngIf="form" [formGroup]="form">
     <div class="dialog-content">

apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.ts

@@ -13,7 +13,6 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
 @Component({
     selector: 'redaction-general-config-form',
     templateUrl: './general-config-form.component.html',
-    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, NgIf, MatSlideToggle, IconButtonComponent],
 })
 export class GeneralConfigFormComponent extends BaseFormComponent implements OnInit {

apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html

@@ -11,7 +11,12 @@
     <div class="dialog mt-24 mb-0">
         <redaction-system-preferences-form></redaction-system-preferences-form>
     </div>
-    <div class="dialog mt-24">
-        <redaction-smtp-form></redaction-smtp-form>
-    </div>
+
+    @if (smtpLicenseFeatureEnabled) {
+        <div class="dialog mt-24">
+            <redaction-smtp-form></redaction-smtp-form>
+        </div>
+    } @else {
+        <div style="visibility: hidden" class="dialog mt-24"></div>
+    }
 </div>

apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts

@@ -6,26 +6,29 @@ import { BaseFormComponent, IqserListingModule } from '@iqser/common-ui';
 import { SystemPreferencesFormComponent } from './system-preferences-form/system-preferences-form.component';
 import { RouterHistoryService } from '@services/router-history.service';
 import { TranslateModule } from '@ngx-translate/core';
+import { LicenseService } from '@services/license.service';
+import { ILicenseFeature } from '@red/domain';
 
 @Component({
     selector: 'redaction-general-config-screen',
     templateUrl: './general-config-screen.component.html',
     styleUrls: ['./general-config-screen.component.scss'],
-    standalone: true,
     imports: [IqserListingModule, GeneralConfigFormComponent, SystemPreferencesFormComponent, SmtpFormComponent, TranslateModule],
 })
 export class GeneralConfigScreenComponent extends BaseFormComponent implements AfterViewInit {
     readonly currentUser = inject(UserService).currentUser;
     readonly routerHistoryService = inject(RouterHistoryService);
+    readonly licenseService = inject(LicenseService);
 
     @ViewChild(GeneralConfigFormComponent) generalConfigFormComponent: GeneralConfigFormComponent;
     @ViewChild(SystemPreferencesFormComponent) systemPreferencesFormComponent: SystemPreferencesFormComponent;
     @ViewChild(SmtpFormComponent) smtpFormComponent: SmtpFormComponent;
     children: BaseFormComponent[];
+    smtpLicenseFeatureEnabled: boolean;
 
     get changed(): boolean {
         for (const child of this.children) {
-            if (child.changed) {
+            if (child?.changed) {
                 return true;
             }
         }
@@ -43,6 +46,8 @@ export class GeneralConfigScreenComponent extends BaseFormComponent implements A
 
     ngAfterViewInit() {
         this.children = [this.generalConfigFormComponent, this.systemPreferencesFormComponent, this.smtpFormComponent];
+        let licenseFeature: ILicenseFeature = this.licenseService.getFeature('configurableSMTPServer');
+        this.smtpLicenseFeatureEnabled = licenseFeature != null && licenseFeature.value === true;
     }
 
     async save(): Promise<void> {

apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts

@@ -21,7 +21,6 @@ import { NgIf } from '@angular/common';
 @Component({
     selector: 'redaction-smtp-form',
     templateUrl: './smtp-form.component.html',
-    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, MatSlideToggle, IconButtonComponent, NgIf],
 })
 export class SmtpFormComponent extends BaseFormComponent implements OnInit {

apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.ts

@@ -15,7 +15,6 @@ export type ValueType = 'number' | 'string' | 'boolean';
 @Component({
     selector: 'redaction-system-preferences-form',
     templateUrl: './system-preferences-form.component.html',
-    standalone: true,
     imports: [NgIf, ReactiveFormsModule, NgForOf, TranslateModule, MatSlideToggle, IconButtonComponent],
 })
 export class SystemPreferencesFormComponent extends BaseFormComponent {

apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.html

@@ -34,6 +34,20 @@
                     <span [innerHTML]="'dossier-template-info-screen.created-on' | translate: { date: createdOn }"></span>
                 </div>
 
+                <div *ngIf="areRulesLocked()">
+                    <mat-icon
+                        (click)="resetRules()"
+                        [matTooltip]="
+                            currentUser.isAdmin
+                                ? ('dossier-template-info-screen.rules-reset.tooltip' | translate)
+                                : ('dossier-template-info-screen.rules-reset.disabled-action' | translate)
+                        "
+                        [class.action-icon]="currentUser.isAdmin"
+                        svgIcon="iqser:alert-circle"
+                    ></mat-icon>
+                    <span class="error">{{ 'dossier-template-info-screen.rules-reset.label' | translate }}</span>
+                </div>
+
                 <div>
                     <mat-icon svgIcon="red:entries"></mat-icon>
                     {{ 'dossier-template-info-screen.entries' | translate: { count: ctx.stats.numberOfEntries } }}