From daf70820797cf852450843d6f0150d67f9603d72 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 22 Jun 2018 14:20:33 +0100 Subject: [PATCH] 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 | 2 +- .../settings/settings.component.html | 49 ++++++++++++++----- .../components/settings/settings.component.ts | 42 ++++++++++------ src/app/directives/experimental.directive.ts | 15 ++++-- src/assets/i18n/en.json | 2 + 5 files changed, 80 insertions(+), 30 deletions(-) diff --git a/src/app.config.json b/src/app.config.json index 5aa7fd007..56759d248 100644 --- a/src/app.config.json +++ b/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, diff --git a/src/app/components/settings/settings.component.html b/src/app/components/settings/settings.component.html index 89c2e8cb7..c17358f9e 100644 --- a/src/app/components/settings/settings.component.html +++ b/src/app/components/settings/settings.component.html @@ -1,18 +1,18 @@ - + - - {{ appName }} + + {{ appName$ | async }} -
- - - - {{ 'APP.SETTINGS.REPOSITORY-SETTINGS' | translate }} - + + + + {{ 'APP.SETTINGS.REPOSITORY-SETTINGS' | translate }} + +
+ + - -
- + + + + {{ 'APP.SETTINGS.APPLICATION-SETTINGS' | translate }} + + + + Language Picker + + + + + + + {{ 'APP.SETTINGS.EXPERIMENTAL-FEATURES' | translate }} + + + + Library Management + + + diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts index 27507dd1a..e2ff08280 100644 --- a/src/app/components/settings/settings.component.ts +++ b/src/app/components/settings/settings.component.ts @@ -23,10 +23,15 @@ * along with Alfresco. If not, see . */ -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; + headerColor$: Observable; + languagePicker$: Observable; + libraries: boolean; + constructor( + private store: Store, private appConfig: AppConfigService, - private sanitizer: DomSanitizer, private settingsService: SettingsService, private storage: StorageService, private fb: FormBuilder) { - + this.appName$ = store.select(selectAppName); + this.languagePicker$ = store.select(appLanguagePicker); + this.headerColor$ = store.select(selectHeaderColor); } - get appName(): string { - return this.appConfig.get('application.name'); - } - 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()); + } } diff --git a/src/app/directives/experimental.directive.ts b/src/app/directives/experimental.directive.ts index 1370a7136..3546f8c50 100644 --- a/src/app/directives/experimental.directive.ts +++ b/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, 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(`experimental.${featureKey}`); - if (value) { + const value = this.config.get(key); + if (value === true || value === 'true') { this.viewContainerRef.createEmbeddedView(this.templateRef); return; } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 51afdae0c..c9f2ee408 100644 --- a/src/assets/i18n/en.json +++ b/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",