inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-04-16 22:24:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

setting component (#2571)

Browse Source
This commit is contained in:
Eugenio Romano
2017-10-31 17:16:14 +00:00
committed by GitHub
parent a03145f765
commit 24b590ca16
54 changed files with 478 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
demo-shell-ng2/src/app/components/settings/settings.component.html
View File

@@ -1,61 +1 @@
<div class="adf-setting-container">
<div class="adf-setting-card-padding"></div>
<mat-toolbar color="primary" >
<h3>{{'SETTINGS.TITLE' | translate}}</h3>
</mat-toolbar>
<mat-card class="adf-setting-card">
<mat-card-content>
<mat-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</mat-card-subtitle>
<mat-form-field class="full-width">
<mat-icon class="adf-settings-link-icon" matPrefix>link</mat-icon>
<input matInput
[formControl]="urlFormControlEcm"
data-automation-id="ecmHost"
type="text"
(change)="onChangeECMHost($event)"
tabindex="2"
id="ecmHost"
value="{{ecmHost}}"
placeholder="http(s)://host|ip:port(/path)">
<mat-error *ngIf="urlFormControlEcm.hasError('pattern')">
{{ 'SETTINGS.NOT_VALID'| translate }}
</mat-error>
</mat-form-field>
<p>
<p>
<mat-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</mat-card-subtitle>
<mat-form-field class="full-width">
<mat-icon class="adf-settings-link-icon" matPrefix>link</mat-icon>
<input matInput
[formControl]="urlFormControlBpm"
data-automation-id="bpmHost"
type="text"
(change)="onChangeBPMHost($event)"
tabindex="2"
id="bpmHost"
value="{{bpmHost}}"
placeholder="http(s)://host|ip:port(/path)">
<mat-error *ngIf="urlFormControlBpm.hasError('pattern')">
{{ 'SETTINGS.NOT_VALID'| translate }}
</mat-error>
</mat-form-field>
</mat-card-content>
<mat-card-actions class="adf-settings-actions">
<button mat-button onclick="window.history.back()" color="primary">
{{'SETTINGS.BACK' | translate }}
</button>
<button mat-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
{{'SETTINGS.APPLY' | translate }}
</button>
</mat-card-actions>
</mat-card>
<div class="adf-setting-card-padding"></div>
</div>
<adf-host-settings (error)="onError($event)"></adf-host-settings>

37
demo-shell-ng2/src/app/components/settings/settings.component.scss
View File

@@ -1,37 +0,0 @@
.adf-app-settings {
display: flex;
height: 100%;
align-items: center;
.adf-setting-container {
display: table;
border-collapse: collapse;
border-spacing: 0;
}
.adf-setting-card {
width: 400px;
}
.full-width {
width: 100%;
}
.adf-setting-card-padding {
width: 50%;
display: table-cell;
vertical-align: middle;
margin: 0;
}
.adf-settings-link-icon {
position: relative;
top: 6px;
margin-right: 10px;
}
.adf-settings-actions {
display: flex;
justify-content: flex-end;
}
}

66
demo-shell-ng2/src/app/components/settings/settings.component.ts
View File

@@ -15,69 +15,19 @@
* limitations under the License.
*/
import { Component, ViewEncapsulation } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
import { Component } from '@angular/core';
import { LogService } from 'ng2-alfresco-core';
@Component({
selector: 'app-settings',
templateUrl: 'settings.component.html',
host: {
'class': 'adf-app-settings'
},
styleUrls: ['settings.component.scss'],
encapsulation: ViewEncapsulation.None
templateUrl: 'settings.component.html'
})
export class SettingsComponent {
HOST_REGEX: string = '^(http|https):\/\/.*[^/]$';
ecmHost: string;
ecmHostTmp: string;
bpmHost: string;
bpmHostTmp: string;
urlFormControlEcm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
urlFormControlBpm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
constructor(private settingsService: AlfrescoSettingsService,
private storage: StorageService,
private logService: LogService) {
this.ecmHostTmp = this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
this.bpmHostTmp = this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
}
public onChangeECMHost(event: KeyboardEvent): void {
let value = (<HTMLInputElement> event.target).value.trim();
if (value && this.isValidUrl(value)) {
this.logService.info(`ECM host: ${value}`);
this.ecmHostTmp = 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.bpmHostTmp = value;
} else {
console.error('Bpm address does not match the pattern');
}
}
public save(event: KeyboardEvent): void {
if (this.bpmHost !== this.bpmHostTmp) {
this.storage.setItem(`bpmHost`, this.bpmHostTmp);
}
if (this.ecmHost !== this.ecmHostTmp) {
this.storage.setItem(`ecmHost`, this.ecmHostTmp);
}
window.location.href = '/';
}
isValidUrl(url: string) {
return /^(http|https):\/\/.*/.test(url);
}
constructor(public logService: LogService){
}
onError(error: string){
this.logService.log(error)
}
}