common/securis.git

import { Http } from '@angular/http';
import { ActivatedRoute, Router } 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 { ElementRef, ViewChild, AfterViewInit, Component, Input } from '@angular/core';
import {FormGroup } from '@angular/forms';


export interface IComboOption {
    id: number,
    label: string
}


export abstract class FormBase extends BasicService {
    @ViewChild('firstField') firstField: ElementRef;
    @ViewChild('form') form: FormGroup;

    protected form_title: string = '';
    protected form_subtitle: string = '';
    protected data: any = {};
    protected isNew : boolean = true;

    constructor($L: LocaleService, 
                protected router: Router,
                protected route: ActivatedRoute,
                protected toaster: ToastsManager,
                protected resourceServices: SeCurisResourceServices, 
                protected resourceName: string,
                protected dialogs : TdDialogService ) {
        super($L);
    }

    public getFieldName(fieldId: string) : string {
        return this.$L.get(`field.${fieldId}`);
    }

    protected setFirstFocus() :void {
        if (this.firstField) {
            this.firstField.nativeElement.focus();
        }
    }

    protected reset() :void {
        if (this.form) {
            this.form.reset();
        }
    }
    
      protected loadCombos(): void {}
      protected abstract init(): void;
      protected abstract goBack(): void;

    save(fieldId : string = 'id') {
        var command = this.isNew ? this.resourceServices.create(this.data) : this.resourceServices.modify(this.data[fieldId], this.data);
        command.subscribe(
            data => {
                this.toaster.success(this.$L.get('{} saved sucessfully', this.resourceName.capitalize()));
                if (this.isNew) {
                    this.init();
                }
            },
            err => this.toaster.error(err.message, this.$L.get('Error saving {}', this.resourceName))
        );
    }

    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()));
                            this.goBack();
                        },
                        err => this.toaster.success(err.message, this.$L.get('Error deleting the {}', this.resourceName))
                );
            }
        });
    }

    private applyDefaultValues(default_values: any, target_data: any = {}) : any {
        Object.keys(default_values).forEach((k : string) => (target_data[k] === undefined) && (target_data[k] = default_values[k]));
        return target_data;
    }

    protected prepareInitialData(idparam: string, default_values: any = {}, callback?: (data: any) => void) : void {
        super.setViewData(() => {
            this.form_title = this.$L.get('{} data', this.resourceName.capitalize());
            this.isNew = true;            
        });
        !!this.route && this.route.params.subscribe(params => {
            var eleId = params[idparam];
            if (!eleId) {
                super.setViewData(() => {
                    this.data = this.applyDefaultValues(default_values, {});
                    this.form_subtitle = this.$L.get('Create a new {}', this.resourceName) ;
                });
            } else {
                super.setViewData(() => {
                    this.isNew = false;
                    this.resourceServices.get(eleId).subscribe(eleData => {
                        super.setViewData(() => {
                            this.data = this.applyDefaultValues(default_values, eleData);
                            callback && callback(this.data);
                        });
                    });
                    this.form_subtitle = this.$L.get('Modify the {} data', this.resourceName) ;
                });
            }
        });
    }

}

@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]="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]="readonly || pair.readonly" [required]="pair.mandatory"
                 [mdTooltip]="pair.value" />
                <md-placeholder>
                    <span i18n="field.value"></span>
                </md-placeholder>
            </md-input-container>
            <md-checkbox *ngIf="!readonly && 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('readonly') readonly: 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);
        }
    }
}