From 1a0491f2462d2c309bd8e310b22c11019a79ce1e Mon Sep 17 00:00:00 2001
From: rsanchez <rsanchez@curisit.net>
Date: Mon, 20 Mar 2017 16:02:14 +0000
Subject: [PATCH] #3527 fix - Added applications forms and metadata component
---
securis/src/main/webapp/src/app/forms/base.ts | 212 ++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 200 insertions(+), 12 deletions(-)
diff --git a/securis/src/main/webapp/src/app/forms/base.ts b/securis/src/main/webapp/src/app/forms/base.ts
index 708c83e..17cba6d 100644
--- a/securis/src/main/webapp/src/app/forms/base.ts
+++ b/securis/src/main/webapp/src/app/forms/base.ts
@@ -1,11 +1,13 @@
import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
+import { TdDialogService } from '@covalent/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { LocaleService } from '../common/i18n';
+import { BasicService } from '../common/utils';
import { SeCurisResourceServices } from '../resources/base';
-import { AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, Input } from '@angular/core';
export interface IComboOption {
@@ -14,17 +16,19 @@
}
-export class FormBase {
+export class FormBase extends BasicService {
protected form_title: string = '';
protected form_subtitle: string = '';
protected data: any = {};
protected isNew : boolean = true;
- constructor(protected $L: LocaleService,
+ constructor($L: LocaleService,
protected route: ActivatedRoute,
protected toaster: ToastsManager,
protected resourceServices: SeCurisResourceServices,
- protected resourceName: string ) {
+ protected resourceName: string,
+ protected dialogs : TdDialogService ) {
+ super($L);
}
public getFieldName(fieldId: string) : string {
@@ -36,15 +40,30 @@
save() {
var command = this.isNew ? this.resourceServices.create(this.data) : this.resourceServices.modify(this.data.id, this.data);
command.subscribe(
- data => this.toaster.success(this.$L.get('{} saved sucessfully', this.$L.get(this.resourceName).capitalize())),
- err => {
- console.error(err);
- this.toaster.success(this.$L.get('Error saving {}', this.$L.get(this.resourceName)));
- }
- );
+ data => this.toaster.success(this.$L.get('{} saved sucessfully', this.resourceName.capitalize())),
+ err => this.toaster.error(err.message, this.$L.get('Error saving {}', this.resourceName))
+ );
}
- protected prepareData(idparam: string, default_values: any = {}) : void {
+ delete(eleId: number | string) : void {
+ this.dialogs.openConfirm({
+ message: this.$L.get('The {} with ID {} will be deleted. Do you want to continue ?', this.resourceName, eleId),
+ disableClose: false, // defaults to false
+ title: this.$L.get('Delete {}', this.resourceName),
+ cancelButton: this.$L.get('Cancel'),
+ acceptButton: this.$L.get('Yes, delete')
+ }).afterClosed().subscribe((accept: boolean) => {
+ if (accept) {
+ this.resourceServices.remove(eleId)
+ .subscribe(
+ responseData => this.toaster.success(this.$L.get('{} was sucessfully deleted', this.resourceName.capitalize())),
+ err => this.toaster.success(err.message, this.$L.get('Error deleting the {}', this.resourceName))
+ );
+ }
+ });
+ }
+
+ protected prepareInitialData(idparam: string, default_values: any = {}) : void {
this.form_title = this.$L.get('{} data', this.resourceName.capitalize());
this.isNew = true;
!!this.route && this.route.params.subscribe(params => {
@@ -61,4 +80,173 @@
});
}
-}
\ No newline at end of file
+}
+
+@Component({
+ selector: 'error-checker',
+ template: `
+ <div *ngIf="formField?.touched && formField.invalid" layout="column">
+ <span class="error-msg" *ngFor="let err of getFieldErrors()" align="end">{{err}}</span>
+ </div>`,
+ styles: [
+ ':host {margin-top: -10px;}',
+ `.error-msg {
+ color: darkred;
+ font-size: 0.8em;
+ }`
+ ]
+})
+export class ErrorCheckerComponent {
+
+ @Input() formField: any;
+ @Input() fieldName: string;
+
+ constructor(private $L: LocaleService) {
+ }
+
+ getFieldErrors() : string[] {
+ if (this.formField.valid) {
+ return []
+ } else {
+ return (<string[]>Object.keys(this.formField.errors)).map((err:string) => this.getErrorMsg(err));
+ }
+ }
+
+ private updateFieldErrors() {
+ }
+
+ private getErrorMsg(err: string) : string{
+ switch(err) {
+ case 'required': {
+ return this.fieldName + ' '+ this.$L.get('is required');
+ }
+ case 'number': {
+ return this.fieldName + ' '+ this.$L.get('should be a number');
+ }
+ default: {
+ return this.fieldName + ' '+ this.$L.get('unknown error') + ' ' + err;
+ }
+ }
+ }
+
+ log(obj: any) {
+ console.log(obj)
+ }
+
+}
+
+
+@Component({
+ selector: 'field-readonly',
+ template: `
+ <div layout="column" class="mat-input-container readonly" >
+ <div class="mat-input-wrapper">
+ <div class="mat-input-table">
+ <div class="mat-input-prefix"></div>
+ <div class="mat-input-infix">
+ <div class="label-value mat-input-element">{{value}}</div>
+ <span class="mat-input-placeholder-wrapper" >
+ <label class="mat-input-placeholder mat-float">
+ <span class="placeholder">{{label}}</span>
+ </label>
+ </span>
+ </div>
+ <div class="mat-input-suffix"></div>
+ </div>
+ <div class="mat-input-underline"></div>
+ </div>
+ </div>`,
+ styles: [`.readonly .mat-input-element {
+ margin-top: 0px !important;
+ color: rgba(0, 0, 0, 0.50);
+ }`,
+ `.readonly .mat-input-element {
+ margin-top: 0px;
+ color: rgba(0, 0, 0, 0.50);
+ }`,
+ `.readonly.mat-input-container {
+ width: 100%;
+ }`]
+})
+export class FieldReadonlyComponent {
+ @Input('value') value: any;
+
+ private _label : string;
+ @Input('label')
+ set label(txt: string) {
+ this._label = this.$L.get(txt);
+ }
+ get label(): string { return this._label; }
+
+ constructor(private $L : LocaleService) {
+
+ }
+}
+
+interface MetadataPair {
+ key: string,
+ value: string,
+ readonly: boolean,
+ mandatory: boolean
+}
+
+@Component({
+ selector: 'metadata-manager',
+ template: `
+ <div layout="column" layout-fill flex>
+ <div layout="row" layout-align="start center">
+ <span class="md-title">{{title}}</span>
+ <span flex></span>
+ <button *ngIf="addOrDelete" type="button" md-icon-button color="primary" (click)="newMetadata()"><md-icon>add</md-icon></button>
+ </div>
+ <div layout="row" layout-align="start center" *ngFor="let pair of metadata" class="values">
+ <md-input-container flex="35" >
+ <input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" [readonly]="!editKeys" [mdTooltip]="pair.key" />
+ <md-placeholder>
+ <span i18n="field.key"></span>
+ </md-placeholder>
+ </md-input-container>
+ <md-input-container flex >
+ <input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" [readonly]="pair.readonly" [required]="pair.mandatory"
+ [mdTooltip]="pair.value" />
+ <md-placeholder>
+ <span i18n="field.value"></span>
+ </md-placeholder>
+ </md-input-container>
+ <md-checkbox *ngIf="addOrDelete" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.mandatory" name="mandatory" [mdTooltip]="$L.get('field.mandatory')">
+ </md-checkbox>
+ <button *ngIf="addOrDelete" type="button" md-icon-button color="warn" (click)="deleteMetadata(pair)"><md-icon>delete</md-icon></button>
+ </div>
+ </div>`,
+ styles: [
+ ':host { width:100%; }',
+ `.values > * {
+ margin-left: 5px;
+ margin-right: 5px;
+ }`
+ ]
+})
+export class MetadataManagerComponent {
+ @Input('metadata') metadata: MetadataPair[];
+ @Input('addOrDelete') addOrDelete: boolean = false;
+ @Input('editKeys') editKeys: boolean = false;
+ @Input('title') title: string;
+
+ constructor(private $L : LocaleService) {
+ this.title = $L.get('License metadata');
+ }
+
+ newMetadata() : void{
+ this.metadata.push(<MetadataPair>{
+ mandatory: false,
+ readonly: false
+ });
+ }
+
+ deleteMetadata(pair: MetadataPair) : void {
+ let indexToRemove = this.metadata.findIndex(ele => ele.key === pair.key);
+ if (indexToRemove !== -1) {
+ this.metadata.splice(indexToRemove, 1);
+ }
+ }
+}
--
Gitblit v1.3.2