inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #968 from Alfresco/dev-eromano-908

Browse Source 
move settings in another page and hide the bar if you are not logged …
This commit is contained in:
Denys Vuika 2016-11-01 15:26:44 +00:00 committed by GitHub
commit 8cffb16132
11 changed files with 235 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
demo-shell-ng2/app/app.component.html
View File

@ -1,68 +1,70 @@
<!-- Always shows a header, even in smaller screens. -->
<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Demo Application</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<div *ngIf="isLoggedIn()">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Demo Application</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Search bar -->
<search-bar (expand)="onToggleSearch($event)"></search-bar>
<!-- Search bar -->
<search-bar (expand)="onToggleSearch($event)"></search-bar>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
<a class="mdl-navigation__link" data-automation-id="datatable" href="" routerLink="/datatable">DataTable</a>
<a class="mdl-navigation__link" data-automation-id="uploader" href="" routerLink="/uploader">Uploader</a>
<a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Activiti</a>
<a class="mdl-navigation__link" data-automation-id="webscript" href="" routerLink="/webscript">Webscript</a>
<a class="mdl-navigation__link" data-automation-id="tag" href="" routerLink="/tag">Tag</a>
<a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
</nav>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" data-automation-id="files" href=""
routerLink="/files">DocumentList</a>
<a class="mdl-navigation__link" data-automation-id="datatable" href="" routerLink="/datatable">DataTable</a>
<a class="mdl-navigation__link" data-automation-id="uploader" href="" routerLink="/uploader">Uploader</a>
<a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Activiti</a>
<a class="mdl-navigation__link" data-automation-id="webscript" href="" routerLink="/webscript">Webscript</a>
<a class="mdl-navigation__link" data-automation-id="tag" href="" routerLink="/tag">Tag</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 class="user-profile" *ngIf="isLoggedIn()">
<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
<div class="user-profile" *ngIf="isLoggedIn()">
<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
</div>
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right" data-automation-id="right-action-menu"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item" (click)="changeLanguage('en')"><span
class="flag-icon flag-icon-gb"></span><label tabindex="0"> English</label></li>
<li class="mdl-menu__item" (click)="changeLanguage('gr')"><span
class="flag-icon flag-icon-gr"></span><label tabindex="0"> Greek</label></li>
<li class="mdl-menu__item" (click)="changeLanguage('it')"><span
class="flag-icon flag-icon-it"></span><label tabindex="0"> Italian</label></li>
<a class="mdl-menu__item" routerLink="/about"><label tabindex="0">About</label></a>
<a *ngIf="!isLoggedIn()" class="mdl-menu__item" routerLink="/login"><label
tabindex="0">Login</label></a>
<li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)"><label tabindex="0">Logout</label>
</li>
</ul>
</div>
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right" data-automation-id="right-action-menu"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item" (click)="changeLanguage('en')"><span class="flag-icon flag-icon-gb"></span><label tabindex="0"> English</label></li>
<li class="mdl-menu__item" (click)="changeLanguage('gr')"><span class="flag-icon flag-icon-gr"></span><label tabindex="0"> Greek</label></li>
<li class="mdl-menu__item" (click)="changeLanguage('it')"><span class="flag-icon flag-icon-it"></span><label tabindex="0"> Italian</label></li>
<a class="mdl-menu__item" routerLink="/about"><label tabindex="0">About</label></a>
<a *ngIf="!isLoggedIn()" class="mdl-menu__item" routerLink="/login"><label tabindex="0">Login</label></a>
<li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)"><label tabindex="0">Logout</label></li>
</ul>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Components List</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable
Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti
Components Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
<a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
<a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Components List</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti Components Demo</a>
<a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
<a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
</nav>
<span class="mdl-layout-title">ECM host</span>
<nav class="mdl-navigation">
<input type="text" class="mdl-textfield__input" id="ecmHost" data-automation-id="ecmHost"
tabindex="1" (change)="onChangeECMHost($event)" value="{{ecmHost}}"/>
</nav>
<span class="mdl-layout-title">BPM host</span>
<nav class="mdl-navigation">
<input type="text" class="mdl-textfield__input" id="bpmHost" data-automation-id="bpmHost"
tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">

29
demo-shell-ng2/app/app.component.ts
View File

@ -19,9 +19,9 @@ import { Component } from '@angular/core';
import { Router } from '@angular/router';
import {
AlfrescoSettingsService,
AlfrescoTranslationService,
AlfrescoAuthenticationService
AlfrescoAuthenticationService,
AlfrescoSettingsService
} from 'ng2-alfresco-core';
declare var document: any;
@ -40,29 +40,16 @@ export class AppComponent {
constructor(public auth: AlfrescoAuthenticationService,
public router: Router,
translate: AlfrescoTranslationService,
public alfrescoSettingsService: AlfrescoSettingsService) {
public alfrescoSettingsService: AlfrescoSettingsService,
translate: AlfrescoTranslationService) {
this.setEcmHost();
this.setBpmHost();
this.setProvider();
this.translate = translate;
this.translate.addTranslationFolder();
}
public onChangeECMHost(event: KeyboardEvent): void {
console.log((<HTMLInputElement>event.target).value);
this.ecmHost = (<HTMLInputElement>event.target).value;
this.alfrescoSettingsService.ecmHost = this.ecmHost;
localStorage.setItem(`ecmHost`, this.ecmHost);
}
public onChangeBPMHost(event: KeyboardEvent): void {
console.log((<HTMLInputElement>event.target).value);
this.bpmHost = (<HTMLInputElement>event.target).value;
this.alfrescoSettingsService.bpmHost = this.bpmHost;
localStorage.setItem(`bpmHost`, this.bpmHost);
}
isLoggedIn(): boolean {
return this.auth.isLoggedIn();
}
@ -120,4 +107,10 @@ export class AppComponent {
this.alfrescoSettingsService.bpmHost = this.bpmHost;
}
}
private setProvider() {
if (localStorage.getItem(`providers`)) {
this.alfrescoSettingsService.setProviders(localStorage.getItem(`providers`));
}
}
}

6
demo-shell-ng2/app/app.module.ts
View File

@ -47,7 +47,8 @@ import {
TagComponent,
AboutComponent,
FilesComponent,
FormNodeViewer
FormNodeViewer,
SettingComponent
} from './components/index';
@NgModule({
@ -82,7 +83,8 @@ import {
TagComponent,
AboutComponent,
FilesComponent,
FormNodeViewer
FormNodeViewer,
SettingComponent
],
providers: [],
bootstrap: [ AppComponent ]

6
demo-shell-ng2/app/app.routes.ts
View File

@ -28,7 +28,8 @@ import {
TagComponent,
AboutComponent,
FormViewer,
FormNodeViewer
FormNodeViewer,
SettingComponent
} from './components/index';
import { UploadButtonComponent } from 'ng2-alfresco-upload';
@ -47,7 +48,8 @@ export const appRoutes: Routes = [
{ path: 'activiti/tasksnode/:id', component: FormNodeViewer },
{ path: 'webscript', component: WebscriptComponent },
{ path: 'tag', component: TagComponent },
{ path: 'about', component: AboutComponent }
{ path: 'about', component: AboutComponent },
{ path: 'settings', component: SettingComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

1
demo-shell-ng2/app/components/index.ts
View File

@ -26,3 +26,4 @@ export { TagComponent } from './tag/tag.component';
export { AboutComponent } from './about/about.component';
export { FilesComponent } from './files/files.component';
export { FormNodeViewer } from './activiti/form-node-viewer.component';
export { SettingComponent } from './setting/setting.component';

6
demo-shell-ng2/app/components/login/login-demo.component.css
View File

@ -7,4 +7,8 @@
.toggle {
width:120px;margin: 20px;
}
}
.setting-button {
position: absolute; right: 10px; top: 10px; z-index: 1;
}

16
demo-shell-ng2/app/components/login/login-demo.component.html
View File

@ -1,27 +1,35 @@
<div class="setting">
<p class="toggle">
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch1" class="mdl-switch__input" checked (click)="toggleECM(ecm.checked)" #ecm>
<input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
(click)="toggleECM(ecm.checked)" #ecm>
<span class="mdl-switch__label">ECM</span>
</label>
</p>
<p class="toggle">
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch2" class="mdl-switch__input" (click)="toggleBPM(bpm.checked)" #bpm>
<input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
(click)="toggleBPM(bpm.checked)" #bpm>
<span class="mdl-switch__label">BPM</span>
</label>
</p>
<p class="toggle">
<label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
<input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
<span class="mdl-switch__label">CSRF</span>
</label>
</p>
<p class="banned">
<label for="blacklistusername">Banned username</label><br>
<input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername" />
<input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
</p>
</div>
<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 [providers]="providers" [fieldsValidation]="customValidation" [disableCsrf]="disableCsrf"
(executeSubmit)="validateForm($event)"
(onSuccess)="onLogin($event)"

32
demo-shell-ng2/app/components/login/login-demo.component.ts
View File

@ -37,6 +37,9 @@ export class LoginDemoComponent implements OnInit {
blackListUsername: string;
customValidation: any;
isECM: boolean = true;
isBPM: boolean = false;
constructor(public router: Router) {
this.customValidation = {
username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
@ -48,6 +51,25 @@ export class LoginDemoComponent implements OnInit {
this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN');
this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
if (localStorage.getItem('providers')) {
this.providers = localStorage.getItem('providers');
}
this.setProviders();
}
setProviders() {
if (this.providers === 'BPM') {
this.isECM = false;
this.isBPM = true;
} else if (this.providers == 'ECM') {
this.isECM = true;
this.isBPM = false;
} else if (this.providers === 'ALL') {
this.isECM = true;
this.isBPM = true;
}
}
onLogin($event) {
@ -66,9 +88,9 @@ export class LoginDemoComponent implements OnInit {
this.providers = 'ECM';
} else if (!checked && this.providers === 'ALL') {
this.providers = 'BPM';
} else {
this.providers = undefined;
}
localStorage.setItem('providers', this.providers);
}
toggleBPM(checked) {
@ -78,9 +100,9 @@ export class LoginDemoComponent implements OnInit {
this.providers = 'BPM';
} else if (!checked && this.providers === 'ALL') {
this.providers = 'ECM';
} else {
this.providers = undefined;
}
localStorage.setItem('providers', this.providers);
}
toggleCSRF() {
@ -89,7 +111,7 @@ export class LoginDemoComponent implements OnInit {
validateForm(event: any) {
let values = event.values;
if (values.controls['username'].value === this.blackListUsername ) {
if (values.controls['username'].value === this.blackListUsername) {
this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked');
event.preventDefault();
}

26
demo-shell-ng2/app/components/setting/setting.component.css Normal file
View File

@ -0,0 +1,26 @@
.setting-card.mdl-card {
width: 320px;
height: 320px;
}
.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;
}

30
demo-shell-ng2/app/components/setting/setting.component.html Normal file
View File

@ -0,0 +1,30 @@
<div class="setting-container">
<div style="display: 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">
ECM host URL configuration
</div>
<nav class="mdl-navigation">
<div class="icon material-icons icon-margin">link</div>
<input type="text" class="mdl-textfield__input" id="ecmHost" data-automation-id="ecmHost"
tabindex="1" (change)="onChangeECMHost($event)" value="{{ecmHost}}"/>
</nav>
<div class="mdl-card__supporting-text">
BPM host URL configuration
</div>
<nav class="mdl-navigation">
<div class="icon material-icons icon-margin">link</div>
<input type="text" class="mdl-textfield__input" id="bpmHost" data-automation-id="bpmHost"
tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
</nav>
</div>
</div>
<div class="setting-card-padding"></div>
</div>
</div>

55
demo-shell-ng2/app/components/setting/setting.component.ts Normal file
View File

@ -0,0 +1,55 @@
/*!
* @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 } from '@angular/core';
import {
AlfrescoSettingsService
} from 'ng2-alfresco-core';
declare let __moduleName: string;
@Component({
moduleId: __moduleName,
selector: 'alfresco-setting-demo',
templateUrl: './setting.component.html',
styleUrls: ['./setting.component.css']
})
export class SettingComponent {
ecmHost: string;
bpmHost: string;
constructor(public alfrescoSettingsService: AlfrescoSettingsService) {
this.ecmHost = this.alfrescoSettingsService.ecmHost;
this.bpmHost = this.alfrescoSettingsService.bpmHost
}
public onChangeECMHost(event: KeyboardEvent): void {
console.log((<HTMLInputElement>event.target).value);
this.ecmHost = (<HTMLInputElement>event.target).value;
this.alfrescoSettingsService.ecmHost = this.ecmHost;
localStorage.setItem(`ecmHost`, this.ecmHost);
}
public onChangeBPMHost(event: KeyboardEvent): void {
console.log((<HTMLInputElement>event.target).value);
this.bpmHost = (<HTMLInputElement>event.target).value;
this.alfrescoSettingsService.bpmHost = this.bpmHost;
localStorage.setItem(`bpmHost`, this.bpmHost);
}
}