From b3e3a64db3340584828fd295190506f5db74a84a Mon Sep 17 00:00:00 2001 From: Timo Date: Mon, 26 Apr 2021 21:02:00 +0300 Subject: [PATCH] state management improvemenets --- .../project-listing-screen.component.ts | 42 +++++++++++----- .../project-overview-screen.component.ts | 48 ++++++++++++------- apps/red-ui/src/assets/config/config.json | 2 +- 3 files changed, 63 insertions(+), 29 deletions(-) diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts index bd1f2ac7a..298afcc19 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts @@ -20,18 +20,19 @@ import { filter, tap } from 'rxjs/operators'; import { TranslateChartService } from '../../../../services/translate-chart.service'; import { RedactionFilterSorter } from '../../../../utils/sorters/redaction-filter-sorter'; import { StatusSorter } from '../../../../utils/sorters/status-sorter'; -import { NavigationEnd, NavigationStart, Router } from '@angular/router'; +import { ActivatedRouteSnapshot, NavigationEnd, NavigationStart, Router } from '@angular/router'; import { FilterComponent } from '../../../shared/components/filter/filter.component'; import { ProjectsDialogService } from '../../services/projects-dialog.service'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { BaseListingComponent } from '../../../shared/base/base-listing.component'; +import { OnAttach, OnDetach } from '../../../../utils/custom-route-reuse.strategy'; @Component({ selector: 'redaction-project-listing-screen', templateUrl: './project-listing-screen.component.html', styleUrls: ['./project-listing-screen.component.scss'] }) -export class ProjectListingScreenComponent extends BaseListingComponent implements OnInit, OnDestroy { +export class ProjectListingScreenComponent extends BaseListingComponent implements OnInit, OnDestroy, OnAttach, OnDetach { protected readonly _searchKey = 'name'; protected readonly _sortKey = 'project-listing'; @@ -59,6 +60,9 @@ export class ProjectListingScreenComponent extends BaseListingComponent { @@ -83,23 +89,35 @@ export class ProjectListingScreenComponent extends BaseListingComponent { + + this._fileChangedSub = this._appStateService.fileChanged.subscribe(() => { this._calculateData(); }); - this._router.events.pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd)).subscribe((event) => { - if (event instanceof NavigationStart && event.url !== '/main/projects') { - this._lastScrollPosition = this._scrollBar.getOffsetToRenderedContentStart() + this._scrollBar.getRenderedRange().end; - } - if (event instanceof NavigationEnd && event.url === '/main/projects') { - this._scrollBar.scrollTo({ top: this._lastScrollPosition }); - } - }); + this._routerEventsScrollPositionSub = this._router.events + .pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd)) + .subscribe((event) => { + if (event instanceof NavigationStart && event.url !== '/main/projects') { + this._lastScrollPosition = this._scrollBar.measureScrollOffset('top'); + } + }); + } + + ngOnAttach(previousRoute: ActivatedRouteSnapshot) { + this._appStateService.reset(); + this._loadEntitiesFromState(); + this.ngOnInit(); + this._scrollBar.scrollTo({ top: this._lastScrollPosition }); + } + + ngOnDetach() { + this.ngOnDestroy(); } ngOnDestroy(): void { this._projectAutoUpdateTimer.unsubscribe(); + this._routerEventsScrollPositionSub.unsubscribe(); + this._fileChangedSub.unsubscribe(); } private _loadEntitiesFromState() { diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts index 0e3dbe7a2..3d45f8cde 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts @@ -1,5 +1,5 @@ import { Component, HostListener, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { NavigationEnd, NavigationStart, Router } from '@angular/router'; +import { ActivatedRouteSnapshot, NavigationEnd, NavigationStart, Router } from '@angular/router'; import { NotificationService, NotificationType } from '../../../../services/notification.service'; import { AppStateService } from '../../../../state/app-state.service'; import { FileDropOverlayService } from '../../../upload-download/services/file-drop-overlay.service'; @@ -26,13 +26,14 @@ import { ProjectsDialogService } from '../../services/projects-dialog.service'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { BaseListingComponent } from '../../../shared/base/base-listing.component'; import { ProjectWrapper } from '../../../../state/model/project.wrapper'; +import { OnAttach, OnDetach } from '../../../../utils/custom-route-reuse.strategy'; @Component({ selector: 'redaction-project-overview-screen', templateUrl: './project-overview-screen.component.html', styleUrls: ['./project-overview-screen.component.scss'] }) -export class ProjectOverviewScreenComponent extends BaseListingComponent implements OnInit, OnDestroy { +export class ProjectOverviewScreenComponent extends BaseListingComponent implements OnInit, OnDestroy, OnDetach, OnAttach { protected readonly _searchKey = 'filename'; protected readonly _selectionKey = 'fileId'; protected readonly _sortKey = 'project-overview'; @@ -58,6 +59,8 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent { - this.calculateData(); - }); } ngOnInit(): void { + this._fileDropOverlayService.initFileDropHandling(); + + this.calculateData(); + this._filesAutoUpdateTimer = timer(0, 7500) .pipe( tap(async () => { @@ -89,23 +92,36 @@ export class ProjectOverviewScreenComponent extends BaseListingComponent events instanceof NavigationStart || events instanceof NavigationEnd)).subscribe((event) => { - if (event instanceof NavigationStart && !event.url.endsWith(this._appStateService.activeProjectId)) { - this._lastScrollPosition = this._scrollBar.getOffsetToRenderedContentStart() + this._scrollBar.getRenderedRange().end; - } - - if (event instanceof NavigationEnd && event.url.endsWith(this._appStateService.activeProjectId)) { - this._scrollBar.scrollTo({ top: this._lastScrollPosition }); - } + this._fileChangedSub = this._appStateService.fileChanged.subscribe(() => { + this.calculateData(); }); + + this._routerEventsScrollPositionSub = this._router.events + .pipe(filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd)) + .subscribe((event) => { + if (event instanceof NavigationStart && !event.url.endsWith(this._appStateService.activeProjectId)) { + this._lastScrollPosition = this._scrollBar.measureScrollOffset('top'); + console.log('file list: ', this._lastScrollPosition); + } + }); } ngOnDestroy(): void { this._fileDropOverlayService.cleanupFileDropHandling(); this._filesAutoUpdateTimer.unsubscribe(); + this._fileChangedSub.unsubscribe(); + this._routerEventsScrollPositionSub.unsubscribe(); + } + + ngOnAttach(previousRoute: ActivatedRouteSnapshot) { + this._loadEntitiesFromState(); + this.ngOnInit(); + this._scrollBar.scrollTo({ top: this._lastScrollPosition }); + } + + ngOnDetach() { + this.ngOnDestroy(); } public get activeProject(): ProjectWrapper { diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index 25cccef17..478b507aa 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -1,6 +1,6 @@ { "OAUTH_URL": "https://redkc-staging.iqser.cloud/auth/realms/redaction", - "API_URL": "https://timo-redaction-dev.iqser.cloud/redaction-api", + "API_URL": "https://redapi-staging.iqser.cloud", "OAUTH_CLIENT_ID": "redaction", "BACKEND_APP_VERSION": "4.4.40", "FRONTEND_APP_VERSION": "1.1",