RED-4774 - used user preferences to set listing mode for files

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';
-
+import { UserPreferenceService } from '@services/user-preference.service';
-export const PREVIOUS_LISTING_MODE_KEY = 'previousListingMode';
 
 @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<File, WorkflowFileStatus> {

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<File> 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<File> imple
     }
 
     ngOnAttach() {
-        this.#setListingMode();
         this.#initFileDropHandling();
         this._setRemovableSubscriptions();
         this._tableComponent?.scrollToLastIndex();
@@ -182,13 +180,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> 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)

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<void> {
+        await this._save(KEYS.filesListingMode, listingMode);
+    }
 }