app settings page (#1997)

- custom app setttings service to use isolated storage (demo shell)
- restore settings UI
- redirect angular and rxjs to the same version as components use.

demo-shell-ng2/app/app.component.html

@@ -21,6 +21,7 @@
                 <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
                 <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
                 <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
+                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
             </nav>
 
         </div>
@@ -59,6 +60,7 @@
             <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
             <a class="mdl-navigation__link" href="" routerLink="/social" (click)="hideDrawer()">Social</a>
             <a class="mdl-navigation__link" href="" routerLink="/about" (click)="hideDrawer()">About</a>
+            <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
         </nav>
     </div>
     <main class="mdl-layout__content" (dragover)="onDragOverMainPage($event)"

demo-shell-ng2/app/app.module.ts

@@ -18,7 +18,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { CoreModule } from 'ng2-alfresco-core';
+import { CoreModule, AppConfigService } from 'ng2-alfresco-core';
 import { SearchModule } from 'ng2-alfresco-search';
 import { LoginModule } from 'ng2-alfresco-login';
 import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -42,6 +42,7 @@ import { CustomEditorsModule } from './components/activiti/custom-editor/custom-
 import { Editor3DModule } from 'ng2-3d-editor';
 import { ChartsModule } from 'ng2-charts';
 import { CreateFolderDialog } from './dialogs/create-folder.dialog';
+import { DebugAppConfigService } from './services/debug-app-config.service';
 
 import {
     HomeComponent,
@@ -58,7 +59,8 @@ import {
     SocialComponent,
     AboutComponent,
     FilesComponent,
-    FormNodeViewer
+    FormNodeViewer,
+    SettingsComponent
 } from './components/index';
 
 let appConfigFile = 'app.config-dev.json';
@@ -110,9 +112,12 @@ if (process.env.ENV === 'production') {
         AboutComponent,
         FilesComponent,
         FormNodeViewer,
-        CreateFolderDialog
+        CreateFolderDialog,
+        SettingsComponent
+    ],
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService }
     ],
-    providers: [],
     bootstrap: [ AppComponent ],
     entryComponents: [
         CreateFolderDialog

demo-shell-ng2/app/app.routes.ts

@@ -33,7 +33,8 @@ import {
     SocialComponent,
     AboutComponent,
     FormViewer,
-    FormNodeViewer
+    FormNodeViewer,
+    SettingsComponent
 } from './components/index';
 
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
@@ -128,7 +129,8 @@ export const appRoutes: Routes = [
         component: SocialComponent,
         canActivate: [AuthGuardEcm]
     },
-    { path: 'about', component: AboutComponent }
+    { path: 'about', component: AboutComponent },
+    { path: 'settings', component: SettingsComponent }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

demo-shell-ng2/app/components/index.ts

@@ -30,3 +30,4 @@ export { AboutComponent } from './about/about.component';
 export { FilesComponent } from './files/files.component';
 export { FormNodeViewer } from './activiti/form-node-viewer.component';
 export { ActivitiAppsView } from './activiti/apps.view';
+export { SettingsComponent } from './settings/settings.component';

demo-shell-ng2/app/components/login/login-demo.component.html

@@ -23,6 +23,13 @@
     </p>
 </div>
 
+<!--SETTING BUTTON-->
+<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
+    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+        <i class="material-icons">settings</i>
+    </button>
+</a>
+
 <alfresco-login #alfrescologin
                 [providers]="providers"
                 [fieldsValidation]="customValidation"

demo-shell-ng2/app/components/settings/settings.component.css

@@ -0,0 +1,35 @@
+.setting-card.mdl-card {
+    width: 100%;
+    height: 100%;
+}
+
+.setting-card > .mdl-card__title {
+    color: #fff;
+    background: bottom right 15% no-repeat #1fbcd2;
+}
+
+.setting-card-padding {
+    width: 50%;
+    display: table-cell;
+    vertical-align: middle;
+    margin: 0;
+}
+
+.setting-container {
+    display: table;
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+}
+
+.icon-margin {
+    margin-right: 9px;
+}
+
+.table-row {
+    display: table-row;
+}
+
+.adf-setting-input-padding {
+    padding-top: 0px !important;
+}

demo-shell-ng2/app/components/settings/settings.component.html

@@ -0,0 +1,46 @@
+<div class="setting-container">
+    <div class="table-row">
+        <div class="setting-card-padding"></div>
+        <div class="setting-card mdl-card mdl-shadow--2dp">
+            <div class="mdl-card__title mdl-card--expand">
+                <h2 class="mdl-card__title-text">SETTINGS</h2>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+                <div class="mdl-card__supporting-text">
+                    Content Services host URL configuration
+                </div>
+                <nav class="mdl-navigation">
+                    <i class="icon material-icons icon-margin">link</i>
+                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
+                        <input data-automation-id="ecmHost" class="mdl-textfield__input" tabindex="1" type="text" tabindex="1" (change)="onChangeECMHost($event)"
+                            pattern="^(http|https):\/\/.*" id="ecmHost" value="{{ecmHost}}">
+                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
+                        <span class="mdl-textfield__error">ECM host is not valid!</span>
+                    </div>
+                </nav>
+
+                <div class="mdl-card__supporting-text">
+                    Process Services host URL configuration
+                </div>
+                <nav class="mdl-navigation">
+                    <i class="icon material-icons icon-margin">link</i>
+                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
+                        <input class="mdl-textfield__input" type="text" (change)="onChangeBPMHost($event)" tabindex="2" pattern="^(http|https):\/\/.*"
+                            id="bpmHost" value="{{bpmHost}}">
+                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
+                        <span class="mdl-textfield__error">BPM host is not valid!</span>
+                    </div>
+                </nav>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
+                    Back
+                </a>
+                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
+                    Apply
+                </a>
+            </div>
+        </div>
+        <div class="setting-card-padding"></div>
+    </div>
+</div>

demo-shell-ng2/app/components/settings/settings.component.ts

@@ -0,0 +1,73 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, AfterViewChecked } from '@angular/core';
+import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
+
+declare var componentHandler: any;
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html',
+    styleUrls: ['settings.component.css']
+})
+export class SettingsComponent implements AfterViewChecked {
+
+    ecmHost: string;
+    bpmHost: string;
+
+    constructor(private settingsService: AlfrescoSettingsService,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
+        this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    public onChangeECMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`ECM host: ${value}`);
+            this.ecmHost = value;
+            this.storage.setItem(`ecmHost`, value);
+        } else {
+            console.error('Ecm address does not match the pattern');
+        }
+    }
+
+    public onChangeBPMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`BPM host: ${value}`);
+            this.bpmHost = value;
+            this.storage.setItem(`bpmHost`, value);
+        } else {
+            console.error('Bpm address does not match the pattern');
+        }
+    }
+
+    isValidUrl(url: string) {
+        return /^(http|https):\/\/.*/.test(url);
+    }
+
+}

demo-shell-ng2/app/services/debug-app-config.service.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { AppConfigService, StorageService } from 'ng2-alfresco-core';
+
+@Injectable()
+export class DebugAppConfigService extends AppConfigService {
+
+    constructor(private storage: StorageService, http: Http) {
+        super(http);
+    }
+
+    /** @override */
+    get<T>(key: string): T {
+        if (key === 'ecmHost' || key === 'bpmHost') {
+            return <T>(<any>this.storage.getItem(key) || super.get<T>(key));
+        }
+        return super.get<T>(key);
+    };
+
+}

demo-shell-ng2/tsconfig.json

@@ -38,7 +38,9 @@
             "ng2-alfresco-upload": ["../ng2-components/ng2-alfresco-upload/"],
             "ng2-alfresco-viewer": ["../ng2-components/ng2-alfresco-viewer/"],
             "ng2-alfresco-webscript": ["../ng2-components/ng2-alfresco-webscript/"],
-            "ng2-alfresco-userinfo": ["../ng2-components/ng2-alfresco-userinfo/"]
+            "ng2-alfresco-userinfo": ["../ng2-components/ng2-alfresco-userinfo/"],
+            "@angular/*": ["../ng2-components/node_modules/@angular/*"],
+            "rxjs/*": ["../ng2-components/node_modules/rxjs/*"]
         },
         "suppressImplicitAnyIndexErrors": true
     },