settings enhancements (#449)

* settings enhancements

* save state to local storage

* improve settings dialog

* toggle library features from settings

* fixes for app config service

src/app.config.json

@@ -9,7 +9,7 @@
             "© 2017 - 2018 Alfresco Software, Inc. All rights reserved."
     },
     "experimental": {
-        "libraries": true
+        "libraries": false
     },
     "headerColor": "#2196F3",
     "languagePicker": false,

src/app/components/settings/settings.component.html

@@ -1,18 +1,18 @@
-<adf-toolbar class="app-menu" [style.background-color]="backgroundColor">
+<adf-toolbar class="app-menu" [style.background-color]="headerColor$ | async">
     <adf-toolbar-title>
-        <a class="app-menu__title" title="{{ appName }}" [routerLink]="[ '/' ]">
-            <img [src]="logo" alt="{{ appName }}" />
+        <a class="app-menu__title" title="{{ appName$ | async }}" [routerLink]="[ '/' ]">
+            <img [src]="logo" alt="{{ appName$ | async }}" />
         </a>
     </adf-toolbar-title>
 </adf-toolbar>
 
-<form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
-    <mat-accordion multi="true" displayMode="flat">
-        <mat-expansion-panel [expanded]="true">
+
+<mat-accordion multi="true" displayMode="flat">
+    <mat-expansion-panel>
         <mat-expansion-panel-header>
             <mat-panel-title>{{ 'APP.SETTINGS.REPOSITORY-SETTINGS' | translate }}</mat-panel-title>
         </mat-expansion-panel-header>
-
+        <form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
             <div>
                 <mat-form-field class="settings-input">
                     <input matInput
@@ -37,7 +37,32 @@
                     {{ 'APP.SETTINGS.APPLY' | translate }}
                 </button>
             </div>
-
+        </form>
     </mat-expansion-panel>
-    </mat-accordion>
-</form>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{ 'APP.SETTINGS.APPLICATION-SETTINGS' | translate }}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-checkbox
+            [ngModel]="languagePicker$ | async"
+            (change)="onLanguagePickerValueChanged($event)">
+            Language Picker
+        </mat-checkbox>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{ 'APP.SETTINGS.EXPERIMENTAL-FEATURES' | translate }}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-checkbox
+            [(ngModel)]="libraries"
+            (change)="onChangeLibrariesFeature($event)">
+            Library Management
+        </mat-checkbox>
+    </mat-expansion-panel>
+</mat-accordion>

src/app/components/settings/settings.component.ts

@@ -23,10 +23,15 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, ViewEncapsulation, SecurityContext, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { AppConfigService, StorageService, SettingsService } from '@alfresco/adf-core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { Observable } from 'rxjs/Rx';
+import { Store } from '@ngrx/store';
+import { AppStore } from '../../store/states';
+import { appLanguagePicker, selectHeaderColor, selectAppName } from '../../store/selectors/app.selectors';
+import { MatCheckboxChange } from '@angular/material';
+import { SetLanguagePickerAction } from '../../store/actions';
 
 @Component({
     selector: 'aca-settings',
@@ -37,38 +42,38 @@ import { Validators, FormGroup, FormBuilder } from '@angular/forms';
 export class SettingsComponent implements OnInit {
 
     private defaultPath = '/assets/images/alfresco-logo-white.svg';
-    private defaultBackgroundColor = '#2196F3';
 
     form: FormGroup;
 
+    appName$: Observable<string>;
+    headerColor$: Observable<string>;
+    languagePicker$: Observable<boolean>;
+    libraries: boolean;
+
     constructor(
+        private store: Store<AppStore>,
         private appConfig: AppConfigService,
-        private sanitizer: DomSanitizer,
         private settingsService: SettingsService,
         private storage: StorageService,
         private fb: FormBuilder) {
-
-        }
-
-    get appName(): string {
-        return <string>this.appConfig.get('application.name');
+            this.appName$ = store.select(selectAppName);
+            this.languagePicker$ = store.select(appLanguagePicker);
+            this.headerColor$ = store.select(selectHeaderColor);
         }
 
     get logo() {
         return this.appConfig.get('application.logo', this.defaultPath);
     }
 
-    get backgroundColor() {
-        const color = this.appConfig.get('headerColor', this.defaultBackgroundColor);
-        return this.sanitizer.sanitize(SecurityContext.STYLE, color);
-    }
-
     ngOnInit() {
         this.form = this.fb.group({
             ecmHost: ['', [Validators.required, Validators.pattern('^(http|https):\/\/.*[^/]$')]]
         });
 
         this.reset();
+
+        const libraries = this.appConfig.get('experimental.libraries');
+        this.libraries = (libraries === true || libraries === 'true');
     }
 
     apply(model: any, isValid: boolean) {
@@ -83,4 +88,13 @@ export class SettingsComponent implements OnInit {
             ecmHost: this.storage.getItem('ecmHost') || this.settingsService.ecmHost
         });
     }
+
+    onLanguagePickerValueChanged(event: MatCheckboxChange) {
+        this.storage.setItem('languagePicker', event.checked.toString());
+        this.store.dispatch(new SetLanguagePickerAction(event.checked));
+    }
+
+    onChangeLibrariesFeature(event: MatCheckboxChange) {
+        this.storage.setItem('experimental.libraries', event.checked.toString());
+    }
 }

src/app/directives/experimental.directive.ts

@@ -24,7 +24,7 @@
  */
 
 import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
-import { AppConfigService } from '@alfresco/adf-core';
+import { AppConfigService, StorageService } from '@alfresco/adf-core';
 import { environment } from '../../environments/environment';
 
 @Directive({
@@ -35,13 +35,22 @@ export class ExperimentalDirective {
     constructor(
         private templateRef: TemplateRef<any>,
         private viewContainerRef: ViewContainerRef,
+        private storage: StorageService,
         private config: AppConfigService
     ) {}
 
     @Input() set ifExperimental(featureKey: string) {
+        const key = `experimental.${featureKey}`;
+
+        const override = this.storage.getItem(key);
+        if (override === 'true') {
+            this.viewContainerRef.createEmbeddedView(this.templateRef);
+            return;
+        }
+
         if (!environment.production) {
-            const value = this.config.get<boolean>(`experimental.${featureKey}`);
-            if (value) {
+            const value = this.config.get(key);
+            if (value === true || value === 'true') {
                 this.viewContainerRef.createEmbeddedView(this.templateRef);
                 return;
             }

src/assets/i18n/en.json

@@ -4,7 +4,9 @@
         "SIGN_IN": "Sign in",
         "SIGN_OUT": "Sign out",
         "SETTINGS": {
+            "APPLICATION-SETTINGS": "Application Settings",
             "REPOSITORY-SETTINGS": "Repository Settings",
+            "EXPERIMENTAL-FEATURES": "Experimental Features",
             "INVALID-VALUE-FORMAT": "Invalid value format",
             "REQUIRED-FIELD": "This field is required",
             "RESET": "Reset",