From 9a3baf0b20d6bfbf49a469596c105426307693dc Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 27 Jul 2022 19:02:36 +0300 Subject: [PATCH] RED-4774 - used user preferences to set listing mode for files --- .../app/modules/dossier-overview/config.service.ts | 9 ++++++--- .../screen/dossier-overview-screen.component.ts | 13 ++----------- .../src/app/services/user-preference.service.ts | 11 ++++++++++- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts index 2c9753ba6..43f801bc3 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts @@ -38,8 +38,7 @@ import dayjs from 'dayjs'; import { DefaultColorsService } from '@services/entity-services/default-colors.service'; import { map } from 'rxjs/operators'; import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service'; - -export const PREVIOUS_LISTING_MODE_KEY = 'previousListingMode'; +import { UserPreferenceService } from '@services/user-preference.service'; @Injectable() export class ConfigService { @@ -55,8 +54,12 @@ export class ConfigService { private readonly _bulkActionsService: BulkActionsService, private readonly _defaultColorsService: DefaultColorsService, private readonly _dictionariesMapService: DictionariesMapService, + private readonly _userPreferenceService: UserPreferenceService, ) { this.listingMode$ = this._listingMode$.asObservable(); + + const previousListingMode = this._userPreferenceService.getFilesListingMode(); + this._listingMode$.next(previousListingMode ? previousListingMode : ListingModes.table); } get listingMode(): ListingMode { @@ -65,7 +68,7 @@ export class ConfigService { set listingMode(listingMode: ListingMode) { this._listingMode$.next(listingMode); - localStorage.setItem(PREVIOUS_LISTING_MODE_KEY, listingMode); + this._userPreferenceService.saveFilesListingMode(listingMode); } workflowConfig(dossier: Dossier): WorkflowConfig { diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts index 29bc3e22d..8b0fbff7c 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, HostListener, OnInit, TemplateRef, ViewChild } from '@angular/core'; +import { Component, ElementRef, HostListener, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { Dossier, DOSSIER_ID, DossierAttributeWithValue, File, IFileAttributeConfig, WorkflowFileStatus } from '@red/domain'; import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service'; import { FileUploadModel } from '@upload-download/model/file-upload.model'; @@ -29,7 +29,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { PermissionsService } from '@services/permissions.service'; import { NavigationEnd, Router } from '@angular/router'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; -import { ConfigService, PREVIOUS_LISTING_MODE_KEY } from '../config.service'; +import { ConfigService } from '../config.service'; import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service'; import { UserPreferenceService } from '@services/user-preference.service'; import { FilesMapService } from '@services/files/files-map.service'; @@ -89,7 +89,6 @@ export class DossierOverviewScreenComponent extends ListingComponent imple private readonly _dossierAttributesService: DossierAttributesService, ) { super(); - this.#setListingMode(); this.dossier$ = _dossiersService.getEntityChanged$(this.dossierId).pipe(tap(dossier => (this.#currentDossier = dossier))); this.#currentDossier = _dossiersService.find(this.dossierId); this.workflowConfig = configService.workflowConfig(this.#currentDossier); @@ -152,7 +151,6 @@ export class DossierOverviewScreenComponent extends ListingComponent imple } ngOnAttach() { - this.#setListingMode(); this.#initFileDropHandling(); this._setRemovableSubscriptions(); this._tableComponent?.scrollToLastIndex(); @@ -182,13 +180,6 @@ export class DossierOverviewScreenComponent extends ListingComponent imple } } - #setListingMode(): void { - const listingMode = (localStorage.getItem(PREVIOUS_LISTING_MODE_KEY) as ListingMode) ?? ListingModes.table; - if (listingMode !== this.configService.listingMode) { - this.configService.listingMode = listingMode; - } - } - private _setRemovableSubscriptions(): void { this.addActiveScreenSubscription = this._dossiersService .getEntityDeleted$(this.dossierId) diff --git a/apps/red-ui/src/app/services/user-preference.service.ts b/apps/red-ui/src/app/services/user-preference.service.ts index 785062401..96797d857 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -1,10 +1,11 @@ import { Injectable } from '@angular/core'; -import { BaseUserPreferenceService } from '@iqser/common-ui'; +import { BaseUserPreferenceService, ListingMode } from '@iqser/common-ui'; const KEYS = { dossierRecent: 'Dossier-Recent', filePreviewTooltips: 'File-Preview-Tooltips', lastDossierTemplate: 'Last-Dossier-Template', + filesListingMode: 'Files-Listing-Mode', } as const; @Injectable({ @@ -38,4 +39,12 @@ export class UserPreferenceService extends BaseUserPreferenceService { const nextValue = (!this.getFilePreviewTooltipsPreference()).toString(); await this._save(KEYS.filePreviewTooltips, nextValue); } + + getFilesListingMode(): ListingMode { + return this._getAttribute(KEYS.filesListingMode) as ListingMode; + } + + async saveFilesListingMode(listingMode: ListingMode): Promise { + await this._save(KEYS.filesListingMode, listingMode); + } }