From e560fb593b75e48cffebd723d5854c5236b54b1a Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 7 Aug 2024 17:31:00 +0300 Subject: [PATCH] RED-9788 - wip on refactoring workload component --- .../file-workload/base-workload.component.ts | 6 ++ .../documine-file-workload.component.html | 25 +++++ .../documine-file-workload.component.scss | 29 +++++ .../documine-file-workload.component.ts | 20 ++++ .../file-workload.component.scss | 94 ---------------- .../redact-file-workload.component.html} | 36 ++----- .../redact-file-workload.component.scss | 54 ++++++++++ .../redact-file-workload.component.ts} | 101 +++++++++--------- .../quick-navigation.component.html | 30 ++++++ .../quick-navigation.component.scss | 39 +++++++ .../quick-navigation.component.ts | 34 ++++++ ...ile-preview-right-container.component.html | 24 +++-- .../file-preview-right-container.component.ts | 12 ++- apps/red-ui/src/assets/config/config.json | 10 +- apps/red-ui/src/assets/i18n/redact/de.json | 4 +- apps/red-ui/src/assets/i18n/redact/en.json | 4 +- apps/red-ui/src/assets/i18n/scm/de.json | 4 +- apps/red-ui/src/assets/i18n/scm/en.json | 4 +- apps/red-ui/src/styles.scss | 3 +- 19 files changed, 337 insertions(+), 196 deletions(-) create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-workload/base-workload.component.ts create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.html create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.scss create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.ts delete mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss rename apps/red-ui/src/app/modules/file-preview/components/file-workload/{file-workload.component.html => redact-file-workload/redact-file-workload.component.html} (88%) create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-workload/redact-file-workload/redact-file-workload.component.scss rename apps/red-ui/src/app/modules/file-preview/components/file-workload/{file-workload.component.ts => redact-file-workload/redact-file-workload.component.ts} (84%) create mode 100644 apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.html create mode 100644 apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.scss create mode 100644 apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.ts diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/base-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/base-workload.component.ts new file mode 100644 index 000000000..5441eae19 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/base-workload.component.ts @@ -0,0 +1,6 @@ +import { Directive } from '@angular/core'; + +@Directive() +export class BaseWorkloadComponent { + constructor() {} +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.html new file mode 100644 index 000000000..65557936c --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.html @@ -0,0 +1,25 @@ +
+
+
+ + + + + + + + + +
+
+ + @if (documentInfoService.shown()) { + + } @else { + + } +
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.scss new file mode 100644 index 000000000..afc24436f --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.scss @@ -0,0 +1,29 @@ +:host { + height: 100%; +} + +.workload-container { + display: flex; + justify-content: space-between; + height: 100%; + + .workload { + width: var(--documine-workload-content-width); + border-right: 1px solid var(--iqser-separator); + height: 100%; + + .workload-header { + min-height: 37px; + background: var(--iqser-grey-8); + justify-content: space-between; + padding: 0 10px; + + ::ng-deep span { + color: var(--iqser-text); + font-size: var(--iqser-font-size); + line-height: 20px; + font-weight: 600; + } + } + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.ts new file mode 100644 index 000000000..727115eea --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/documine-file-workload/documine-file-workload.component.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; +import { NgIf } from '@angular/common'; +import { PopupFilterComponent } from '@common-ui/filtering'; +import { PagesComponent } from '../../pages/pages.component'; +import { DocumentInfoService } from '../../../services/document-info.service'; +import { DocumentInfoComponent } from '../../document-info/document-info.component'; + +@Component({ + selector: 'redaction-documine-file-workload', + templateUrl: './documine-file-workload.component.html', + styleUrls: ['./documine-file-workload.component.scss'], + standalone: true, + imports: [TranslateModule, NgIf, PopupFilterComponent, PagesComponent, DocumentInfoComponent], +}) +export class DocumineFileWorkloadComponent { + pages = [1, 2, 3, 4, 5]; + + constructor(readonly documentInfoService: DocumentInfoService) {} +} diff --git 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 deleted file mode 100644 index 5ca2bfd51..000000000 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss +++ /dev/null @@ -1,94 +0,0 @@ -@use 'common-mixins'; - -:host { - display: contents; -} - -.disabled-auto-analysis { - background-color: var(--iqser-yellow-2); -} - -.right-content { - flex-direction: column; - overflow: hidden; - - .no-annotations-buttons-container { - display: flex; - align-items: center; - flex-direction: column; - - iqser-icon-button { - width: 100%; - } - } - - .annotations-wrapper { - display: flex; - flex: 1; - overflow: hidden; - - .content { - overflow: hidden; - width: 100%; - display: flex; - flex-direction: column; - } - } - - .quick-navigation, - .annotations { - outline: none; - - &.active-panel { - background-color: var(--iqser-workload-pages-bg); - } - } - - .quick-navigation { - border-right: 1px solid var(--iqser-separator); - min-width: 61px; - overflow: hidden; - display: flex; - flex-direction: column; - - .jump { - min-height: 32px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - transition: background-color 0.25s; - - &:not(.disabled):hover { - background-color: var(--iqser-tab-hover); - } - - mat-icon { - width: 16px; - height: 16px; - } - - &.disabled { - cursor: default; - pointer-events: none; - - mat-icon { - opacity: 0.3; - } - } - } - } - - .annotations { - width: 100%; - display: flex; - flex: 1; - align-items: center; - flex-direction: column; - overflow: hidden; - } -} - -[hidden] { - display: none !important; -} diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/redact-file-workload/redact-file-workload.component.html similarity index 88% rename from apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html rename to apps/red-ui/src/app/modules/file-preview/components/file-workload/redact-file-workload/redact-file-workload.component.html index e6efce1ce..f054d652a 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/redact-file-workload/redact-file-workload.component.html @@ -76,36 +76,12 @@
-
-
- -
- - - -
- -
-
+
{ - this._scrollViews(); - this.scrollAnnotationsToPage(pageNumber, 'always'); + effect(() => { + this.#scrollViews(); + this.scrollAnnotationsToPage(this.currentPage(), 'always'); }); - this.addActiveScreenSubscription = this.listingService.selected$.subscribe(annotationIds => { - if (annotationIds.length > 0) { + effect(() => { + if (this.selectedAnnotationIds().length > 0) { this.pagesPanelActive = false; } this.scrollToSelectedAnnotation(); }); - this.addActiveScreenSubscription = this._documentViewer.keyUp$.subscribe($event => { - this.handleKeyEvent($event); + effect(() => { + this.handleKeyEvent(this.keyUp()); }); - this.displayedAnnotations$ = this._displayedAnnotations$; + this.displayedAnnotations$ = this.#displayedAnnotations$; effect(() => { if (this.multiSelectService.inactive()) { @@ -142,7 +149,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On effect(() => { this.viewModeService.viewMode(); - this._scrollViews(); + this.#scrollViews(); }); effect( @@ -168,7 +175,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On return this.listingService.selected.length ? this.listingService.selected[0] : null; } - private get _displayedAnnotations$(): Observable[]>> { + get #displayedAnnotations$(): Observable[]>> { const primary$ = this.filterService.getFilterModels$('primaryFilters'); const secondary$ = this.filterService.getFilterModels$('secondaryFilters'); @@ -226,7 +233,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On @HostListener('window:keyup', ['$event']) handleKeyEvent($event: KeyboardEvent): void { if ( - !ALL_HOTKEY_ARRAY.includes($event.key) || + !ALL_HOTKEY_ARRAY.includes($event?.key) || this._dialog.openDialogs.length || ($event.target as IqserEventTarget).localName === 'input' ) { @@ -276,7 +283,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On scrollAnnotationsToPage(page: number, mode: 'always' | 'if-needed' = 'if-needed'): void { if (this._annotationsElement) { const elements: HTMLElement[] = this._annotationsElement.nativeElement.querySelectorAll(`div[anotation-page-header="${page}"]`); - FileWorkloadComponent._scrollToFirstElement(elements, mode); + RedactFileWorkloadComponent._scrollToFirstElement(elements, mode); } } @@ -288,7 +295,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On const elements: HTMLElement[] = this._annotationsElement.nativeElement.querySelectorAll( `[annotation-id="${this._firstSelectedAnnotation?.id}"]`, ); - FileWorkloadComponent._scrollToFirstElement(elements); + RedactFileWorkloadComponent._scrollToFirstElement(elements); } scrollQuickNavigation(): void { @@ -300,14 +307,6 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On this.#scrollQuickNavigationToPage(this.displayedPages[quickNavPageIndex]); } - scrollQuickNavFirst(): void { - this.pdf.navigateTo(1); - } - - scrollQuickNavLast() { - this.pdf.navigateTo(this.state.file().numberOfPages); - } - preventKeyDefault($event: KeyboardEvent): void { if (COMMAND_KEY_ARRAY.includes($event.key) && !(($event.target as any).localName === 'input')) { $event.preventDefault(); @@ -383,8 +382,9 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On } } + // @ts-ignore @Debounce(0) - private _scrollViews() { + #scrollViews() { this.scrollQuickNavigation(); this.scrollAnnotations(); } @@ -500,9 +500,10 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On } #scrollQuickNavigationToPage(page: number) { + console.log('scrollQuickNavigationToPage'); if (this._quickNavigationElement) { const elements: HTMLElement[] = this._quickNavigationElement.nativeElement.querySelectorAll(`#quick-nav-page-${page}`); - FileWorkloadComponent._scrollToFirstElement(elements); + RedactFileWorkloadComponent._scrollToFirstElement(elements); } } diff --git a/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.html b/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.html new file mode 100644 index 000000000..9078c6038 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.html @@ -0,0 +1,30 @@ +
+
+ +
+ + + +
+ +
+
diff --git a/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.scss b/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.scss new file mode 100644 index 000000000..fa8b3f634 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.scss @@ -0,0 +1,39 @@ +.quick-navigation { + height: 100%; + border-right: 1px solid var(--iqser-separator); + min-width: 61px; + overflow: hidden; + display: flex; + flex-direction: column; + + .jump { + min-height: 32px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: background-color 0.25s; + + &:not(.disabled):hover { + background-color: var(--iqser-tab-hover); + } + + mat-icon { + width: 16px; + height: 16px; + } + + &.disabled { + cursor: default; + pointer-events: none; + + mat-icon { + opacity: 0.3; + } + } + } + + &.active-panel { + background-color: var(--iqser-workload-pages-bg); + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.ts b/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.ts new file mode 100644 index 000000000..ca76aeac0 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/quick-navigation/quick-navigation.component.ts @@ -0,0 +1,34 @@ +import { Component, EventEmitter, input, Output } from '@angular/core'; +import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service'; +import { FilePreviewStateService } from '../../services/file-preview-state.service'; +import { MatIcon } from '@angular/material/icon'; +import { PagesComponent } from '../pages/pages.component'; +import { MatTooltip } from '@angular/material/tooltip'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'redaction-quick-navigation', + templateUrl: './quick-navigation.component.html', + styleUrls: ['./quick-navigation.component.scss'], + standalone: true, + imports: [MatIcon, PagesComponent, MatTooltip, TranslateModule], +}) +export class QuickNavigationComponent { + readonly pagesPanelActive = input(false); + readonly displayedPages = input([]); + @Output() readonly pagesPanelActiveChange = new EventEmitter(); + @Output() readonly preventKeyDefault = new EventEmitter(); + + constructor( + readonly pdf: PdfViewer, + readonly state: FilePreviewStateService, + ) {} + + scrollQuickNavFirst() { + this.pdf.navigateTo(1); + } + + scrollQuickNavLast() { + this.pdf.navigateTo(this.state.file().numberOfPages); + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html index c11a4a464..0c8052de1 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html @@ -1,12 +1,16 @@ - - +@if (state.file(); as file) { + @if (isDocumine) { + + } @else { + - + - - + + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts index add707e86..a23857c06 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts @@ -6,15 +6,23 @@ import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service'; import { DocumentInfoService } from '../../services/document-info.service'; import { FilePreviewStateService } from '../../services/file-preview-state.service'; import { DocumentInfoComponent } from '../document-info/document-info.component'; -import { FileWorkloadComponent } from '../file-workload/file-workload.component'; import { getConfig } from '@iqser/common-ui'; +import { RedactFileWorkloadComponent } from '../file-workload/redact-file-workload/redact-file-workload.component'; +import { DocumineFileWorkloadComponent } from '../file-workload/documine-file-workload/documine-file-workload.component'; @Component({ selector: 'redaction-file-preview-right-container', templateUrl: './file-preview-right-container.component.html', styleUrls: ['./file-preview-right-container.component.scss'], standalone: true, - imports: [EmptyStateComponent, NgIf, TranslateModule, DocumentInfoComponent, FileWorkloadComponent], + imports: [ + EmptyStateComponent, + NgIf, + TranslateModule, + DocumentInfoComponent, + RedactFileWorkloadComponent, + DocumineFileWorkloadComponent, + ], }) export class FilePreviewRightContainerComponent { readonly isDocumine = getConfig().IS_DOCUMINE; diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index 2ccc6f6d1..5f6c0ce6e 100644 --- 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://frontend2.iqser.cloud", + "API_URL": "https://dan2.iqser.cloud", "APP_NAME": "RedactManager", - "IS_DOCUMINE": true, + "IS_DOCUMINE": false, "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://frontend2.iqser.cloud/auth", + "OAUTH_URL": "https://dan2.iqser.cloud/auth", "RECENT_PERIOD_IN_HOURS": 24, "SELECTION_MODE": "structural", "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview", "ANNOTATIONS_THRESHOLD": 1000, - "THEME": "scm", - "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/", + "THEME": "redact", + "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/", "AVAILABLE_NOTIFICATIONS_DAYS": 30, "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60, "NOTIFICATIONS_THRESHOLD": 1000, diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index d22fb33cc..000351bfd 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -392,7 +392,6 @@ "annotation": { "pending": "(Analyse steht aus)" }, - "annotations": "Annotationen", "archived-dossiers-listing": { "no-data": { "title": "Keine archivierten Dossiers." @@ -855,6 +854,9 @@ "export": "Export", "export-tooltip": "Export" }, + "documine-workload": { + "header-label": "" + }, "dossier-attribute-types": { "date": "Datum", "image": "Bild", diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index 43d9a6dc4..c7425201b 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -392,7 +392,6 @@ "annotation": { "pending": "(Pending analysis)" }, - "annotations": "Annotations", "archived-dossiers-listing": { "no-data": { "title": "No archived dossiers." @@ -855,6 +854,9 @@ "export": "Export", "export-tooltip": "Export" }, + "documine-workload": { + "header-label": "" + }, "dossier-attribute-types": { "date": "Date", "image": "Image", diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index 65b12bd58..542c74227 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -392,7 +392,6 @@ "annotation": { "pending": "(Pending analysis)" }, - "annotations": "Annotations", "archived-dossiers-listing": { "no-data": { "title": "No archived dossiers." @@ -855,6 +854,9 @@ "export": "Component download", "export-tooltip": "Component download" }, + "documine-workload": { + "header-label": "" + }, "dossier-attribute-types": { "date": "Datum", "image": "Bild", diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index f3a3b9bd1..0ca02cccc 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -392,7 +392,6 @@ "annotation": { "pending": "(Pending analysis)" }, - "annotations": "Annotations", "archived-dossiers-listing": { "no-data": { "title": "No archived dossiers." @@ -855,6 +854,9 @@ "export": "Component download", "export-tooltip": "Component download" }, + "documine-workload": { + "header-label": "Annotations" + }, "dossier-attribute-types": { "date": "Date", "image": "Image", diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index da0a70cfa..006ce1439 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -187,7 +187,8 @@ body { ); height: calc(100% - calc(var(--iqser-top-bar-height) + 50px)); bottom: 0; - right: calc(var(--qiuck-navigation-width) + 3px); + //right: calc(var(--qiuck-navigation-width) + 3px); + right: calc(var(--qiuck-navigation-width)); position: absolute; &.document-info {