[ADF-2387] added a stream for pagination size change (#3014)

* [ADF-2387] added a stream for pagination size change

* [ADF-2387] added test for page size stream

* [ADF-2387] start refactoring adding a general stream for user preference attributes

* [ADF-2387] added documentation and test for user values stream

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -32,7 +32,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ProcessInstanceFilterRepresentation, Pagination } from 'alfresco-js-api';
 import {
     FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
-    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent
+    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues
 } from '@alfresco/adf-core';
 
 import { AnalyticsReportListComponent } from '@alfresco/adf-insights';
@@ -166,7 +166,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 private preferenceService: UserPreferencesService) {
         this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
-        this.paginationPageSize = this.preferenceService.paginationSize;
+
 
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
         this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
@@ -185,6 +185,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
             this.logService.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
         });
 
+        this.preferenceService.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => {
+            this.paginationPageSize = pageSize;
+        });
+
         formService.validateDynamicTableRow.subscribe(
             (validateDynamicTableRowEvent: ValidateDynamicTableRowEvent) => {
                 const row: DynamicTableRow = validateDynamicTableRowEvent.row;

docs/user-preferences.service.md

@@ -31,6 +31,9 @@ Stores preferences for components.
 -   `getDefaultLocale(): string`  
     Gets the default locale.   
 
+-   `select : Observable`
+    Return the value for the user status property changed 
+
 
 ## Details
 
@@ -82,3 +85,24 @@ The service also provides quick access to a set of the "known" properties used a
 | disableCSRF | `boolean` | Prevents the CSRF Token from being submitted if true. Only valid for Process Services. |
 | paginationSize | `number` | Pagination size. |
 | locale | `string` | Current locale setting. |
+
+## User Preference onChange Stream
+Whenever a property is set to the user preference service an onChange event is sent with the whole set of user properties. This comes in handy when a component wants to react to some property change.
+
+```ts
+    userPreferences.paginationSize = 10;
+    userPreferences.onChange().subscribe((userStatusValues) => {
+        console.log(userStatusValues.PAGINATION_SIZE); //this will be 10
+    });
+```
+
+We have added also the `select` method where the user can give the property name which wants to be notified the changes and get the updated value.
+A set of basic properties is added into the enumeration `UserPreferenceValues` which gives you the key value to access the standard user preference service properties : **PaginationSize**, **DisableCSRF**, **Locale** and **SupportedPageSizes**.
+
+```ts
+    userPreferences.disableCSRF = true;
+    userPreferences.select(UserPreferenceValues.DisableCSRF).subscribe((CSRFflag) => {
+        console.log(CSRFflag); //this will be true;
+    });
+```
+

lib/core/services/user-preferences.service.spec.ts

@@ -24,10 +24,11 @@ import { AppConfigModule } from '../app-config/app-config.module';
 import { StorageService } from './storage.service';
 import { TranslateLoaderService } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';
+import { UserPreferenceValues } from './user-preferences.service';
 
 describe('UserPreferencesService', () => {
 
-    const defaultPaginationSize: number = 10;
+    const defaultPaginationSize: number = 25;
     const supportedPaginationSize = [5, 10, 15, 20];
     let preferences: UserPreferencesService;
     let storage: StorageService;
@@ -66,6 +67,7 @@ describe('UserPreferencesService', () => {
     });
 
     it('should get default pagination from app config', () => {
+        appConfig.config.pagination.size = 0;
         expect(preferences.defaults.paginationSize).toBe(defaultPaginationSize);
     });
 
@@ -75,6 +77,7 @@ describe('UserPreferencesService', () => {
     });
 
     it('should use [GUEST] as default storage prefix', () => {
+        preferences.setStoragePrefix(null);
         expect(preferences.getStoragePrefix()).toBe('GUEST');
     });
 
@@ -145,4 +148,25 @@ describe('UserPreferencesService', () => {
         expect(preferences.locale).toBe('fake-store-locate');
     });
 
+    it('should stream the page size value when is set', async(() => {
+        preferences.paginationSize = 5;
+        preferences.onChange.subscribe((userPreferenceStatus) => {
+            expect(userPreferenceStatus.PAGINATION_SIZE).toBe(5);
+        });
+    }));
+
+    it('should stream the user preference status when changed', async(() => {
+        preferences.set('propertyA', 'valueA');
+        preferences.onChange.subscribe((userPreferenceStatus) => {
+            expect(userPreferenceStatus.propertyA).toBe('valueA');
+        });
+    }));
+
+    it('should stream only the selected attribute changes when using select', async(() => {
+        preferences.disableCSRF = true;
+        preferences.select(UserPreferenceValues.DisableCSRF).subscribe((disableCSRFFlag) => {
+            expect(disableCSRFFlag).toBeTruthy();
+        });
+    }));
+
 });

lib/core/services/user-preferences.service.ts

@@ -22,6 +22,14 @@ import { Observable } from 'rxjs/Observable';
 import { AppConfigService } from '../app-config/app-config.service';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { StorageService } from './storage.service';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+export enum UserPreferenceValues {
+    PaginationSize = 'PAGINATION_SIZE',
+    DisableCSRF = 'DISABLE_CSRF',
+    Locale = 'LOCALE',
+    SupportedPageSizes = 'supportedPageSizes'
+}
 
 @Injectable()
 export class UserPreferencesService {
@@ -32,8 +40,20 @@ export class UserPreferencesService {
         locale: 'en'
     };
 
-    private localeSubject: BehaviorSubject<string> ;
+    private userPreferenceStatus: any = {
+        paginationSize: 25,
+        supportedPageSizes: [5, 10, 15, 20],
+        LOCALE: 'en'
+    };
+
+    /**
+     * @deprecated we are grouping every value changed on the user preference in a single stream : userPreferenceValue$
+     */
     locale$: Observable<string>;
+    private localeSubject: BehaviorSubject<string> ;
+
+    private onChangeSubject: BehaviorSubject<any>;
+    onChange: Observable<any>;
 
     constructor(
         public translate: TranslateService,
@@ -41,11 +61,22 @@ export class UserPreferencesService {
         private storage: StorageService,
         private apiService: AlfrescoApiService
     ) {
-        const currentLocale = this.locale || this.getDefaultLocale();
+        this.initUserPreferenceStatus();
-        this.localeSubject = new BehaviorSubject(currentLocale);
+        this.localeSubject = new BehaviorSubject(this.defaults.locale);
         this.locale$ = this.localeSubject.asObservable();
-        this.defaults.paginationSize = this.appConfig.get('pagination.size', this.defaults.paginationSize);
+        this.onChangeSubject = new BehaviorSubject(this.userPreferenceStatus);
-        this.defaults.supportedPageSizes = this.appConfig.get('pagination.supportedPageSizes', this.defaults.supportedPageSizes);
+        this.onChange = this.onChangeSubject.asObservable();
+    }
+
+    private initUserPreferenceStatus() {
+        this.userPreferenceStatus[UserPreferenceValues.Locale] = this.locale || this.getDefaultLocale();
+        this.userPreferenceStatus[UserPreferenceValues.PaginationSize] = this.appConfig.get('pagination.size', this.defaults.paginationSize);
+        this.userPreferenceStatus[UserPreferenceValues.SupportedPageSizes] = this.appConfig.get('pagination.supportedPageSizes', this.defaults.supportedPageSizes);
+        this.userPreferenceStatus[UserPreferenceValues.DisableCSRF] = this.disableCSRF;
+    }
+
+    select(property: string): Observable<any> {
+        return this.onChange.map((userPreferenceStatus) => userPreferenceStatus[property]).distinctUntilChanged();
     }
 
     /**
@@ -69,11 +100,12 @@ export class UserPreferencesService {
      */
     set(property: string, value: any) {
         if (!property) { return; }
-
         this.storage.setItem(
             this.getPropertyKey(property),
             value
         );
+        this.userPreferenceStatus[property] = value;
+        this.onChangeSubject.next(this.userPreferenceStatus);
     }
 
     /** Gets the active storage prefix for preferences. */

lib/process-services/task-list/components/task-list.component.ts

@@ -29,7 +29,8 @@ import {
     PaginationComponent,
     PaginatedComponent,
     PaginationQueryParams,
-    UserPreferencesService
+    UserPreferencesService,
+    UserPreferenceValues
 } from '@alfresco/adf-core';
 import {
     AfterContentInit,
@@ -163,7 +164,11 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit, P
     constructor(private taskListService: TaskListService,
                 private appConfig: AppConfigService,
                 private userPreferences: UserPreferencesService) {
-        this.size = this.userPreferences.paginationSize;
+
+        this.userPreferences.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => {
+            this.size = pageSize;
+        });
+
         this.pagination = new BehaviorSubject<Pagination>(<Pagination> {
             maxItems: this.size,
             skipCount: 0,