Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

update restore last scrolled position

Browse Source
This commit is contained in:
Dan Percic 2021-08-11 01:54:00 +03:00
parent 9e7edc6b69
commit 86a84393b5
6 changed files with 44 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
View File

@ -1,5 +1,4 @@
import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { Dossier } from '@redaction/red-ui-http';
import { LoadingService } from '@services/loading.service';
import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
@ -29,7 +28,7 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
readonly circleButtonTypes = CircleButtonTypes;
readonly tableHeaderLabel = _('trash.table-header.title');
readonly canRestoreSelected$ = this._canRestoreSelected$;
readonly tableColumnConfigs: TableColumnConfig<DossierListItem>[] = [
readonly tableColumnConfigs: readonly TableColumnConfig<DossierListItem>[] = [
{
label: _('trash.table-col-names.name'),
sortByKey: 'dossierName'
@ -51,12 +50,11 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
constructor(
readonly permissionsService: PermissionsService,
protected readonly _injector: Injector,
private readonly _dossiersService: DossiersService,
private readonly _loadingService: LoadingService,
private readonly _adminDialogService: AdminDialogService,
private readonly _appConfigService: AppConfigService
private readonly _dossiersService: DossiersService,
private readonly _appConfigService: AppConfigService,
private readonly _adminDialogService: AdminDialogService
) {
super(_injector);
}

28
apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { AfterViewInit, Component, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http';
import { AppStateService } from '@state/app-state.service';
import { UserService } from '@services/user.service';
@ -7,11 +7,11 @@ import { groupBy } from '@utils/functions';
import { TranslateService } from '@ngx-translate/core';
import { DossierWrapper } from '@state/model/dossier.wrapper';
import { timer } from 'rxjs';
import { filter } from 'rxjs/operators';
import { 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 { NavigationStart, Router } from '@angular/router';
import { Router } from '@angular/router';
import { DossiersDialogService } from '../../services/dossiers-dialog.service';
import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
import { UserPreferenceService } from '@services/user-preference.service';
@ -29,8 +29,6 @@ import {
import { PermissionsService } from '@services/permissions.service';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
const isLeavingScreen = event => event instanceof NavigationStart && event.url !== '/main/dossiers';
interface ListItem {
readonly dossierName: string;
readonly routerLink: string;
@ -43,7 +41,10 @@ interface ListItem {
styleUrls: ['./dossier-listing-screen.component.scss'],
providers: [...DefaultListingServices]
})
export class DossierListingScreenComponent extends ListingComponent<ListItem> implements OnInit, OnDestroy, OnAttach, OnDetach {
export class DossierListingScreenComponent
extends ListingComponent<ListItem>
implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach
{
readonly itemSize = 85;
protected readonly _primaryKey = 'dossierName';
readonly currentUser = this._userService.currentUser;
@ -77,7 +78,7 @@ export class DossierListingScreenComponent extends ListingComponent<ListItem> im
dossiersChartData: DoughnutChartConfig[] = [];
documentsChartData: DoughnutChartConfig[] = [];
private _lastScrollPosition: number;
private _lastScrolledIndex: number;
@ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
private readonly _needsWorkTemplate: TemplateRef<any>;
@ -120,24 +121,25 @@ export class DossierListingScreenComponent extends ListingComponent<ListItem> im
this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
this.calculateData();
});
}
this.addSubscription = this._router.events.pipe(filter(isLeavingScreen)).subscribe(() => {
this._lastScrollPosition = this._scrollViewport.measureScrollOffset('top');
});
ngAfterViewInit() {
this.addSubscription = this._scrollViewport.scrolledIndexChange.pipe(tap(index => (this._lastScrolledIndex = index))).subscribe();
}
ngOnAttach() {
this._scrollViewport.scrollTo({ top: this._lastScrollPosition });
this._appStateService.reset();
this._loadEntitiesFromState();
this.ngOnInit();
this.ngAfterViewInit();
this._scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
}
ngOnDetach(): void {
this.ngOnDestroy();
}
getDossierTemplate(dossierTemplateId: string): DossierTemplateModel {
private _getDossierTemplate(dossierTemplateId: string): DossierTemplateModel {
return this._appStateService.getDossierTemplateById(dossierTemplateId);
}
@ -184,7 +186,7 @@ export class DossierListingScreenComponent extends ListingComponent<ListItem> im
return {
dossierName: dossier.dossierName,
routerLink: '/main/dossiers/' + dossier.dossierId.toString(),
dossierTemplateName: this.getDossierTemplate(dossier.dossierTemplateId).name,
dossierTemplateName: this._getDossierTemplate(dossier.dossierTemplateId).name,
dossier
};
}

4
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
View File

@ -1,4 +1,4 @@
<section *ngIf="!!activeDossier">
<section *ngIf="!!currentDossier">
<redaction-page-header
[actionConfigs]="actionConfigs"
[searchPlaceholder]="'dossier-overview.search' | translate"
@ -6,7 +6,7 @@
>
<redaction-file-download-btn
[disabled]="entitiesService.areSomeSelected$ | async"
[dossier]="activeDossier"
[dossier]="currentDossier"
[file]="entitiesService.all$ | async"
tooltipPosition="below"
></redaction-file-download-btn>

51
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
View File

@ -1,5 +1,4 @@
import { ChangeDetectorRef, Component, ElementRef, HostListener, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { Toaster } from '@services/toaster.service';
import { AppStateService } from '@state/app-state.service';
import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
@ -12,12 +11,11 @@ import { DossierDetailsComponent } from '../../components/dossier-details/dossie
import { FileStatusWrapper } from '@models/file/file-status.wrapper';
import { UserService } from '@services/user.service';
import { timer } from 'rxjs';
import { filter } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter';
import { StatusSorter } from '@utils/sorters/status-sorter';
import { convertFiles, handleFileDrop } from '@utils/file-drop-utils';
import { DossiersDialogService } from '../../services/dossiers-dialog.service';
import { DossierWrapper } from '@state/model/dossier.wrapper';
import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
@ -42,8 +40,9 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
readonly itemSize = 80;
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
currentDossier = this._appStateService.activeDossier;
readonly tableHeaderLabel = _('dossier-overview.table-header.title');
readonly actionConfigs: ActionConfig[] = [
readonly actionConfigs: readonly ActionConfig[] = [
{
label: this._translateService.instant('dossier-overview.header-actions.edit'),
action: $event => this.openEditDossierDialog($event),
@ -51,7 +50,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
hide: !this.currentUser.isManager
}
];
readonly tableColumnConfigs: TableColumnConfig<FileStatusWrapper>[] = [
readonly tableColumnConfigs: readonly TableColumnConfig<FileStatusWrapper>[] = [
{
label: _('dossier-overview.table-col-names.name'),
sortByKey: 'filename'
@ -81,10 +80,10 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
collapsedDetails = false;
dossierAttributes: DossierAttributeWithValue[] = [];
protected readonly _primaryKey = 'filename';
private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.currentDossier.dossierId;
@ViewChild(DossierDetailsComponent, { static: false })
private readonly _dossierDetailsComponent: DossierDetailsComponent;
private _lastScrollPosition: number;
private _lastScrolledIndex: number;
@ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
private readonly _needsWorkTemplate: TemplateRef<any>;
@ViewChild('fileInput') private readonly _fileInput: ElementRef;
@ -92,7 +91,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
private readonly _scrollViewport: CdkVirtualScrollViewport;
constructor(
private readonly _router: Router,
private readonly _toaster: Toaster,
protected readonly _injector: Injector,
private readonly _userService: UserService,
@ -113,10 +111,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
this._loadEntitiesFromState();
}
get activeDossier(): DossierWrapper {
return this._appStateService.activeDossier;
}
get checkedRequiredFilters() {
return this.filterService.getGroup('quickFilters')?.filters.filter(f => f.required && f.checked);
}
@ -145,15 +139,11 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
this.calculateData();
});
this.addSubscription = this._router.events
.pipe(filter(event => event instanceof NavigationStart))
.subscribe((event: NavigationStart) => {
if (!event.url.endsWith(this._appStateService.activeDossierId)) {
this._lastScrollPosition = this._scrollViewport.measureScrollOffset('top');
}
});
this.addSubscription = this._scrollViewport.scrolledIndexChange
.pipe(tap(index => (this._lastScrolledIndex = index)))
.subscribe();
this.dossierAttributes = await this._dossierAttributesService.getValues(this.activeDossier);
this.dossierAttributes = await this._dossierAttributesService.getValues(this.currentDossier);
this.searchService.setSearchKey('searchField');
} catch (e) {
} finally {
@ -170,7 +160,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
await this._appStateService.reloadActiveDossierFiles();
this._loadEntitiesFromState();
await this.ngOnInit();
this._scrollViewport.scrollTo({ top: this._lastScrollPosition });
this._scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
}
ngOnDetach() {
@ -188,7 +178,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
}
reloadDossiers() {
this._appStateService.getFiles(this.activeDossier, false).then(() => {
this._appStateService.getFiles(this.currentDossier, false).then(() => {
this.calculateData();
});
}
@ -205,7 +195,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
@HostListener('drop', ['$event'])
onDrop(event: DragEvent) {
handleFileDrop(event, this.activeDossier, this._uploadFiles.bind(this));
handleFileDrop(event, this.currentDossier, this._uploadFiles.bind(this));
}
@HostListener('dragover', ['$event'])
@ -215,13 +205,13 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
}
async uploadFiles(files: File[] | FileList) {
await this._uploadFiles(convertFiles(files, this.activeDossier));
await this._uploadFiles(convertFiles(files, this.currentDossier));
this._fileInput.nativeElement.value = null;
}
fileLink(fileStatus: FileStatusWrapper) {
return this.permissionsService.canOpenFile(fileStatus)
? [`/main/dossiers/${this.activeDossier.dossierId}/file/${fileStatus.fileId}`]
? [`/main/dossiers/${this.currentDossier.dossierId}/file/${fileStatus.fileId}`]
: [];
}
@ -232,7 +222,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
openEditDossierDialog($event: MouseEvent) {
this._dialogService.openDialog('editDossier', $event, {
dossierWrapper: this.activeDossier
dossierWrapper: this.currentDossier
});
}
@ -241,7 +231,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
'editDossier',
null,
{
dossierWrapper: this.activeDossier,
dossierWrapper: this.currentDossier,
section: 'members'
},
() => this.reloadDossiers()
@ -249,7 +239,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
}
openDossierDictionaryDialog() {
this._dialogService.openDialog('dossierDictionary', null, this.activeDossier, () => {
this._dialogService.openDialog('dossierDictionary', null, this.currentDossier, () => {
this.reloadDossiers();
});
}
@ -262,7 +252,8 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
moment(file.lastUpdated).add(this._appConfigService.getConfig(AppConfigKey.RECENT_PERIOD_IN_HOURS), 'hours').isAfter(moment());
private _loadEntitiesFromState() {
if (this.activeDossier) this.entitiesService.setEntities(this.activeDossier.files);
this.currentDossier = this._appStateService.activeDossier;
if (this.currentDossier) this.entitiesService.setEntities(this.currentDossier.files);
}
private async _uploadFiles(files: FileUploadModel[]) {
@ -271,7 +262,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
}
private _computeAllFilters() {
if (!this.activeDossier) return;
if (!this.currentDossier) return;
const allDistinctFileStatusWrapper = new Set<string>();
const allDistinctPeople = new Set<string>();

1
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
View File

@ -40,7 +40,6 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
@Component({
selector: 'redaction-file-preview-screen',
templateUrl: './file-preview-screen.component.html',
styleUrls: ['./file-preview-screen.component.scss']
})

4
apps/red-ui/src/app/state/app-state.service.ts
View File

@ -41,8 +41,8 @@ export interface AppState {
providedIn: 'root'
})
export class AppStateService {
fileChanged$ = new Subject<FileStatusWrapper>();
fileReanalysed$ = new Subject<FileStatusWrapper>();
readonly fileChanged$ = new Subject<FileStatusWrapper>();
readonly fileReanalysed$ = new Subject<FileStatusWrapper>();
private _appState: AppState;
constructor(