RED-9885 - wip

2024-11-25 18:19:43 +02:00 · 2024-11-25 18:19:43 +02:00 · e8c98be687
commit e8c98be687
parent bf04423524
6 changed files with 119 additions and 34 deletions
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
@ -23,6 +23,7 @@
    }

    .annotations-wrapper {
+        background-color: white;
        display: flex;
        flex: 1;
        overflow: hidden;
@ -45,6 +46,7 @@
            &.documine-width {
                width: calc(var(--documine-workload-content-width) - 55px);
                border-right: 1px solid var(--iqser-separator);
+                background: white;
                z-index: 1;

                .workload-separator {
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
@ -23,6 +23,7 @@ mat-icon {
 }

 .components-container {
+    background: white;
    display: flex;
    flex-direction: column;
    font-size: 12px;
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
@ -3,14 +3,18 @@

    <div class="overlay-shadow"></div>

-    <div class="content-inner">
-        <div class="content-container">
+    <div class="content-inner" #container>
+        <div class="content-container" [class.documine-content-container]="isDocumine">
            <redaction-structured-component-management
                *ngIf="isDocumine"
                [file]="file"
                [dictionaries]="state.dictionaries"
            ></redaction-structured-component-management>
        </div>
+        @if (isDocumine) {
+            <div class="resize" #resize></div>
+        }
+        <!-- Here comes PDF Viewer-->

        <div class="right-container" [class.documine-container]="isDocumine">
            <redaction-file-preview-right-container
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
@ -4,6 +4,11 @@

 .content-container {
    position: relative;
+
+    &.documine-content-container {
+        width: calc(var(--structured-component-management-width) + 14px);
+        transition: width 0.5s ease-in-out;
+    }
 }

 .right-container {
@ -40,6 +45,7 @@

    &.documine-container {
        width: calc(100% - var(--structured-component-management-width));
+        transition: width 0.5s ease-in-out;
    }
 }

@ -53,6 +59,26 @@ redaction-pdf-viewer.hidden {
    visibility: hidden;
 }

+.resize {
+    background: #444857;
+    height: 100%;
+    width: 14px;
+    cursor: col-resize;
+    position: relative;
+    z-index: 10;
+    user-select: none;
+}
+.resize::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 3px;
+    height: 15px;
+    border-inline: 1px solid #fff;
+}
+
@media only screen and (max-width: 1015px) {
    .label {
        display: none;
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@ -1,9 +1,22 @@
-import { ActivatedRouteSnapshot, NavigationExtras, Router, RouterLink } from '@angular/router';
-import { ChangeDetectorRef, Component, effect, NgZone, OnDestroy, OnInit, TemplateRef, untracked, ViewChild } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    effect,
+    ElementRef,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    untracked,
+    viewChild,
+    ViewChild,
+} from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ComponentCanDeactivate } from '@guards/can-deactivate.guard';
 import {
-    CircleButtonComponent,
    CircleButtonTypes,
    ConfirmOption,
    ConfirmOptions,
@ -12,20 +25,11 @@ import {
    ErrorService,
    getConfig,
    IConfirmationDialogData,
-    IqserAllowDirective,
    IqserDialog,
    LoadingService,
    Toaster,
 } from '@iqser/common-ui';
-import {
-    copyLocalStorageFiltersValues,
-    Filter,
-    FilterService,
-    IFilter,
-    INestedFilter,
-    NestedFilter,
-    processFilters,
-} from '@iqser/common-ui/lib/filtering';
+import { copyLocalStorageFiltersValues, FilterService, INestedFilter, NestedFilter, processFilters } from '@iqser/common-ui/lib/filtering';
 import { AutoUnsubscribe, Bind, bool, List, OnAttach, OnDetach } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ManualRedactionEntryTypes, ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
@ -68,12 +72,7 @@ import { ViewModeService } from './services/view-mode.service';
 import { RedactTextData } from './utils/dialog-types';
 import { MultiSelectService } from './services/multi-select.service';
 import { NgIf } from '@angular/common';
-import { ViewSwitchComponent } from './components/view-switch/view-switch.component';
-import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
-import { UserManagementComponent } from './components/user-management/user-management.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { InitialsAvatarComponent } from '@common-ui/users';
-import { FileActionsComponent } from '../shared-dossiers/components/file-actions/file-actions.component';
 import { FilePreviewRightContainerComponent } from './components/right-container/file-preview-right-container.component';
 import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
 import { FileHeaderComponent } from './components/file-header/file-header.component';
@ -90,27 +89,27 @@ import { ComponentLogService } from '@services/entity-services/component-log.ser
    standalone: true,
    imports: [
        NgIf,
-        ViewSwitchComponent,
-        ProcessingIndicatorComponent,
-        UserManagementComponent,
        TranslateModule,
-        InitialsAvatarComponent,
-        CircleButtonComponent,
-        IqserAllowDirective,
-        FileActionsComponent,
        DisableStopPropagationDirective,
-        RouterLink,
        FilePreviewRightContainerComponent,
        TypeFilterComponent,
        FileHeaderComponent,
        StructuredComponentManagementComponent,
    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
+export class FilePreviewScreenComponent
+    extends AutoUnsubscribe
+    implements OnInit, OnDestroy, OnAttach, OnDetach, AfterViewInit, ComponentCanDeactivate
+{
    readonly circleButtonTypes = CircleButtonTypes;
    readonly roles = Roles;
    readonly fileId = this.state.fileId;
    readonly dossierId = this.state.dossierId;
+    readonly resizeHandle = viewChild<ElementRef>('resize');
+    readonly container = viewChild<ElementRef>('container');
+    drag = false;
+    moveX = 0;
    protected readonly isDocumine = getConfig().IS_DOCUMINE;
    @ViewChild('annotationFilterTemplate', {
        read: TemplateRef,
@ -243,6 +242,30 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
        );
    }

+    @Bind()
+    mouseDown(event: MouseEvent) {
+        if (!this.isDocumine) return;
+        this.drag = true;
+    }
+
+    @Bind()
+    mouseMove(event: MouseEvent) {
+        if (!this.isDocumine) return;
+        if (!this.drag) return;
+        if (this.#getPixelsInPercentage(event.screenX) <= this.#getPixelsInPercentage(250)) return;
+        this.moveX = event.screenX;
+        const newLeftWidth = this.#convertPixelsToPercent(this.moveX - this.resizeHandle().nativeElement.getBoundingClientRect().width / 2);
+
+        document.body.style.setProperty('--structured-component-management-width', newLeftWidth);
+        event.preventDefault();
+    }
+
+    @Bind()
+    mouseUp(event: MouseEvent) {
+        if (!this.isDocumine) return;
+        this.drag = false;
+    }
+
    deleteEarmarksOnViewChange$() {
        const isChangingFromEarmarksViewMode$ = this._viewModeService.viewMode$.pipe(
            pairwise(),
@ -266,12 +289,24 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
        super.ngOnDetach();
        this.pdf.instance.UI.hotkeys.off('esc');
        this.pdf.instance.UI.iframeWindow.document.removeEventListener('click', this.handleViewerClick);
+        this.resizeHandle().nativeElement.removeEventListener('mousedown', this.mouseDown);
+        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousedown', this.mouseDown);
+        this.container().nativeElement.removeEventListener('mousemove', this.mouseMove);
+        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousemove', this.mouseMove);
+        this.container().nativeElement.removeEventListener('mouseup', this.mouseUp);
+        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mouseup', this.mouseUp);
        this._changeRef.markForCheck();
    }

    ngOnDestroy() {
        this.pdf.instance.UI.hotkeys.off('esc');
        this.pdf.instance.UI.iframeWindow.document.removeEventListener('click', this.handleViewerClick);
+        this.resizeHandle().nativeElement.removeEventListener('mousedown', this.mouseDown);
+        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousedown', this.mouseDown);
+        this.container().nativeElement.removeEventListener('mousemove', this.mouseMove);
+        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousemove', this.mouseMove);
+        this.container().nativeElement.removeEventListener('mouseup', this.mouseUp);
+        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mouseup', this.mouseUp);
        super.ngOnDestroy();
    }

@ -355,6 +390,15 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
        this.pdf.instance.UI.iframeWindow.document.addEventListener('click', this.handleViewerClick);
    }

+    ngAfterViewInit() {
+        this.resizeHandle().nativeElement.addEventListener('mousedown', this.mouseDown);
+        this.pdf.instance.UI.iframeWindow.document.addEventListener('mousedown', this.mouseDown);
+        this.container().nativeElement.addEventListener('mousemove', this.mouseMove);
+        this.pdf.instance.UI.iframeWindow.document.addEventListener('mousemove', this.mouseMove);
+        this.container().nativeElement.addEventListener('mouseup', this.mouseUp);
+        this.pdf.instance.UI.iframeWindow.document.addEventListener('mouseup', this.mouseUp);
+    }
+
    async openRectangleAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
        const file = this.state.file();

@ -430,6 +474,14 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
        );
    }

+    #getPixelsInPercentage(pixels: number) {
+        return Math.round((100 - ((window.screen.width - pixels) / window.screen.width) * 100 + Number.EPSILON) * 100) / 100;
+    }
+
+    #convertPixelsToPercent(pixels: number) {
+        return `${this.#getPixelsInPercentage(pixels)}%`;
+    }
+
    async #updateViewMode(): Promise<void> {
        const viewMode = untracked(this._viewModeService.viewMode);
        this._logger.info(`[PDF] Update ${viewMode} view mode`);
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@ -1,9 +1,9 @@
 {
  "ADMIN_CONTACT_NAME": null,
  "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dan1.iqser.cloud",
+  "API_URL": "https://frontend2.iqser.cloud",
  "APP_NAME": "RedactManager",
-  "IS_DOCUMINE": false,
+  "IS_DOCUMINE": true,
  "RULE_EDITOR_DEV_ONLY": false,
  "AUTO_READ_TIME": 3,
  "BACKEND_APP_VERSION": "4.4.40",
@ -13,13 +13,13 @@
  "MAX_RETRIES_ON_SERVER_ERROR": 3,
  "OAUTH_CLIENT_ID": "redaction",
  "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dan1.iqser.cloud/auth",
+  "OAUTH_URL": "https://frontend2.iqser.cloud/auth",
  "RECENT_PERIOD_IN_HOURS": 24,
  "SELECTION_MODE": "structural",
  "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
  "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "redact",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/",
+  "THEME": "scm",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/",
  "AVAILABLE_NOTIFICATIONS_DAYS": 30,
  "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
  "NOTIFICATIONS_THRESHOLD": 1000,