D-Net

import { Component, Injector, Input } from '@angular/core';

import { MyGroup } from '../../shared/reusablecomponents/forms/my-group.interface';

import { baseUrlDesc, validationSetDesc, Description } from '../../domain/oa-description';

import { FormGroup, Validators } from '@angular/forms';

  validationSetDesc: Description = validationSetDesc;

  readonly groupDefinition = {

    baseUrl: this._fb.group({}),

    validationSet: ['', Validators.required],

    compatibilityLevel: ''

  }

  ngOnInit(){

    this.generate();

  }

                <div class="uk-alert uk-alert-warning" *ngIf="noRepositories">{{ noRepositories }}</div>

                    <label class="uk-button uk-button-link" style="display: block; text-align: left;">

                        <span class="uk-label uk-label-warning registeredLabel" *ngIf="repo.registered">Registered</span>

            <div class="uk-grid">

              <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-width-1-2@m">

                <div>

                    <h5>OpenDOAR Interface (non-removable)</h5>

                  <div class="interfaceActionsPanel">

                    <a><i class="fa fa-save fa-lg" style=""></i></a>

                  </div>

                </div>

                <div>

                  <update-datasource-interface-form></update-datasource-interface-form>

              </div>

              <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-width-1-2@m">

                <div class="interface-box new" style="text-align: center">

                  <a (click)="showInterfaceFormToggle()"><i class="fa fa-plus-square-o"></i></a>

                  <span class="info">Add new Interface</span>

import { UpdateDatasourceInterfaceFormComponent } from './update-datasource-interface-form.component';

    UpdateDatasourceInterfaceFormComponent,

    <div [formGroup]="parentGroup">

      <div class="uk-fieldset">

        <label class="uk-form-controls-text control-label">Base URL (*)

          <input type="text" class="uk-input" formControlName="baseUrl" disabled="">

        </label>

      </div>

      <div class="uk-fieldset">

        <label class="uk-form-controls-text control-label">Validation Set</label>

        <div>

          <label class="uk-button uk-button-link validationSetRadio disabled">

            <input name="validationSet" value="select" formControlName="validationSet" type="radio" class="uk-radio">

            <span>choose existing</span>

          </label>

          <select name="selectedValidationSet" class="uk-select" disabled="">

            <option value="noneSelected">-- none selected --</option>

          <label class="uk-button uk-button-link validationSetRadio disabled">

            <input name="validationSet" value="custom" formControlname="validationSet" type="radio" class="uk-radio">

            <span>or a custom one</span>

          </label>

          <input class="uk-input" disabled="" type="text">

      </div>

      <div class="uk-fieldset">

        <label class="uk-form-controls-select control-label">Desired Compatibility Level (*)

          <select class="uk-select" name="compatibilityLevel" formControlname="compatibilityLevel">

            <option value="">-- none selected --</option>

        </label>

      </div>

      <div>

        <label class="uk-form-controls-text control-label">Current Compatibility Level

          <!-- SHOW CURRENT LEVEL -->

        </label>

      </div>

/**

 * Created by stefanos on 15/5/2017.

 */

import { FormGroup } from "@angular/forms";

import { Component, ComponentFactoryResolver, Injector, Input, Type, ViewChild, ViewContainerRef } from "@angular/core";

import { MyFormDirective } from "./my-form.directive";

import { MyGroup } from "./my-group.interface";

import { MyWrapper } from "./my-wrapper.interface";

import { Subject } from "rxjs/Subject";

import { Description } from '../../../domain/oa-description';

@Component({

  selector : 'form-choice',

  template : `

<form-inline [description]="{label : 'Choose'}" [params]="null">

    <div class="uk-margin uk-grid-small uk-child-width-auto">

        <label *ngFor="let radio of radioButton">

            <input type="radio" name="{{uniqueId}}" class="uk-radio" [checked]="radio === radioButtonSelected"

            (click)="changeType(radio)">

            {{radio}}

        </label>

    </div>

</form-inline>

<div [formGroup]="parentGroup">

    <ng-template my-form></ng-template>

</div>

`,

  styleUrls : ['']

})

export class MyChoice extends MyGroup {

  @Input() public components : MyChoiceComponents[];

  wrapper : Type<MyWrapper> = MyChoiceWrapper;

  @ViewChild(MyFormDirective) protected formComponents: MyFormDirective;

  protected _cfr : ComponentFactoryResolver;

  protected viewContainerRef : ViewContainerRef;

  arrayData_ : Subject<any>[] = [];

  wrapperViews : {[key : string] : MyChoiceWrapper} = {};

  radioButton : string[] = [];

  radioButtonSelected : string;

  registerGroup_ : FormGroup;

  uniqueId : string = Math.random().toString(36).substring(2);

  constructor(injector : Injector) {

    super(injector);

    this._cfr = injector.get(ComponentFactoryResolver);

  }

  protected createView(component : MyChoiceComponents,index : number) : void {

    console.log(component);

    let componentFactory = this._cfr.resolveComponentFactory(component.component);

    let wrapperFactory = this._cfr.resolveComponentFactory(this.wrapper);

    let wrapperView = wrapperFactory.create(this.viewContainerRef.injector);

    let componentView = componentFactory.create(this.viewContainerRef.injector);

    (<MyGroup>componentView.instance).index = this.viewContainerRef.length;

    (<MyGroup>componentView.instance).required = this.required;

    (<MyGroup>componentView.instance).data = this.data;

    this.arrayData_.push((<MyGroup>componentView.instance).patchData);

    (<MyGroup>componentView.instance).description = component.description;

    let arrayGroup = (<MyGroup>componentView.instance).generate();

    (<MyGroup>componentView.instance).parentGroup = arrayGroup as FormGroup;

    (<MyChoiceWrapper>wrapperView.instance).component = componentView.hostView;

    (<MyChoiceWrapper>wrapperView.instance).viewRef = wrapperView.hostView;

    (<MyChoiceWrapper>wrapperView.instance).description = this.description;

    (<MyChoiceWrapper>wrapperView.instance).hidden = (index != 0);

    (<MyChoiceWrapper>wrapperView.instance).first = this.viewContainerRef.length == 0;

    let registerGroup : FormGroup = this.parentGroup as FormGroup;

    if(this.name) {

      registerGroup = this.parentGroup.get(this.name as string) as FormGroup;

    }

    this.registerGroup_.registerControl(component.name, arrayGroup);

    if(index != 0) {

      setTimeout(() => {

        console.log(component);

        registerGroup.get(component.name).disable();

      },500)

    }

    // (<FormArray>this.parentGroup.controls[this.name]).push(arrayGroup);

    this.wrapperViews[component.name] = wrapperView.instance as MyChoiceWrapper;

    this.viewContainerRef.insert(wrapperView.hostView);

  }

  ngOnInit(): void {

    // super.ngOnInit();

    this.components.forEach(c => this.radioButton.push(c.description.label));

    this.radioButtonSelected = this.radioButton[0];

    this.viewContainerRef = this.formComponents.viewContainerRef;

    //if there is no name, register with the children's control

    if(this.name) {

      (<FormGroup>this.parentGroup).addControl(this.name as string, this._fb.group({}));

      this.registerGroup_ = this.parentGroup.get(this.name as string) as FormGroup;

    } else {

      this.registerGroup_ = this.parentGroup as FormGroup;

    }

    this.components.forEach((item,index) => {

      this.createView(item,index);

    });

    this.registerGroup_.patchValue = this.patchValue();

  }

  changeType(radio : string) {

    let newSelected : string  = this.components[this.radioButton.indexOf(radio)].name;

    let currentSelected : string  = this.components[this.radioButton.indexOf(this.radioButtonSelected)].name;

    (this.registerGroup_.get(currentSelected) as FormGroup).disable();

    (this.registerGroup_.get(newSelected) as FormGroup).enable();

    this.wrapperViews[currentSelected].hidden = true;

    this.wrapperViews[newSelected].hidden = false;

    this.radioButtonSelected = radio;

  }

  protected patchValue() {

    let self = this;

    return (value: {[key: string]: any}, {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}) => {

      Object.keys(value).forEach(v => {

        if (v != null) {

          let component = self.components.find(component => component.name == v);

          self.changeType(component.description.label);

          self.registerGroup_.get(v).patchValue(value[v]);

          console.log(value[v]);

        }

      });

    };

  }

}

@Component({

  selector : 'form-choice-wrapper',

  template : `

<div class="uk-grid uk-margin" [hidden]="hidden">

    <div class="uk-width-5-6">

        <ng-template my-form></ng-template>

    </div>

</div>

`,

  styleUrls : ['']

})

export class MyChoiceWrapper extends MyWrapper {

  @Input()

  public hidden = false;

}

export class MyChoiceComponents {

  public component : Type<MyGroup>;

  public name : string;

  public description : Description;

  constructor(name : string , component : Type<MyGroup>,description : Description) {

    this.component = component;

    this.name = name;

    this.description = description;

  }

}

import { AbstractControl, FormBuilder, FormGroup } from "@angular/forms";

import {

  AfterContentInit,

  Component,

  EventEmitter,

  Injector,

  Input,

  OnChanges,

  OnInit,

  SimpleChanges

} from "@angular/core";

import { Subject } from "rxjs/Subject";

import { Description } from '../../../domain/oa-description';

/**

 * Created by stefanos on 15/5/2017.

 */

@Component({

  template:``

})

export class MyGroup implements OnInit, AfterContentInit {

  @Input() public parentGroup: AbstractControl;

  @Input() public name : string | number;

  @Input() public data : any = null;

  public patchData : Subject<any> = new Subject();

  @Input() public required : boolean = false;

  @Input() public description : Description = null;

  @Input() public index : number = -1;

  protected _fb : FormBuilder;

  protected groupDefinition : { [key:string]:any };

  public group : AbstractControl;

  public createdEvent : EventEmitter<any> = new EventEmitter();

  constructor(injector : Injector) {

    this._fb = injector.get(FormBuilder);

    this.patchData.subscribe(_ => {

      if(typeof _ != 'undefined') {

        setTimeout( () => {

          (this.group as FormGroup).patchValue(_);

        },1000)exit;

      }

    });

  }

  protected get isArray() {

    return this.index != -1;

  }

  public generate() : FormGroup {

    let ret = this._fb.group(this.groupDefinition);

    if (this.patchData) {

      // console.log(this.patchData);

    }

    if (!this.required)

      Object.keys(ret.controls).forEach(item => ret.controls[item].clearValidators());

    return ret;

  }

  public getMyControl(name : string) : AbstractControl {

    if (this.isArray) {

      return this.group.get(<string>name);

    }

    else {

      return this.group.get(name as string);

    }

  }

  ngOnInit(): void {

    if(this.index == -1) {

      if(<string>this.name == '' || (<FormGroup>this.parentGroup).contains(<string>this.name)) {

        let obj = this.generate();

        Object.keys(obj.controls).forEach(c => {

          (<FormGroup>this.parentGroup.get(<string>this.name)).addControl(c,obj.controls[c]);

        });

        this.group = this.parentGroup.get(this.name as string) as FormGroup;

      } else {

        (<FormGroup>this.parentGroup).addControl(<string>this.name, this.generate());

        this.group = this.parentGroup.get(this.name as string) as FormGroup;

      }

    } else {

      this.name = this.index;

      this.group = this.parentGroup as FormGroup;

    }

  }

  ngAfterContentInit(): void {

    this.createdEvent.emit(this.name);

    // setTimeout(() => {

    //     if(this.patchData != null) {

    //         (this.group as FormGroup).patchValue(this.patchData);

    //     }

    // },1000);

    // setTimeout(() => {

    //     console.log(this.group,this.parentGroup);

    //     (this.group as FormGroup).updateValueAndValidity();

    // },2000);

  }

  public get valid() {

    return this.group.valid;

  }

}

@Component({

  selector : 'form-inline',

  template : `

  <ng-template #descTemplate>{{description.desc}}</ng-template>

  <div class="uk-grid uk-form-horizontal">

      <!--<label class="uk-width-1-5 uk-form-label" *ngIf="description.label!=null" [ngClass]="{'required' : description.mandatory==true}">-->

      <label class="uk-width-1-5" *ngIf="description.label!=null" [ngClass]="{'required' : description.mandatory==true}">

          <!--<span *ngIf="description.mandatory==true && !valid"><i class="fa fa-star" style="color : red"></i></span>-->

          <!--<span *ngIf="description.recommended==true"><i class="fa fa-star" style="color : green"></i></span>-->

          {{description.label}}

          <span *ngIf="params==='tooltip'"><i class="fa fa-info-circle" [tooltip]="descTemplate" container="body"></i></span>

      </label>

      <!--<div class="uk-width-expand@m uk-form-controls" [ngClass]="{'has-error': !valid}">-->

      <div class="uk-width-expand\@m" [ngClass]="{'has-error': !valid}">

          <ng-content></ng-content>

          <div *ngIf="params==='inline'">

              <i><small>{{description.desc}}</small></i>

          </div>

      </div>

  </div>

  `

})

export class InlineFormWrapper implements OnChanges {

  @Input() public description : Description = null;

  @Input() public params : string = 'inline';

  @Input() public width : number = 9;

  @Input() public valid : boolean = true;

  ngOnChanges(changes: SimpleChanges): void {

    if (changes && changes.valid)

      this.valid = <boolean>changes.valid.currentValue;

  }

}

/**

 * Created by stefanos on 15/5/2017.

 */

import { FormArray, FormGroup } from "@angular/forms";

import { Component, ComponentFactoryResolver, Injector, Input, Type, ViewChild, ViewContainerRef } from "@angular/core";

import { MyFormDirective } from "./my-form.directive";

import { MyGroup } from "./my-group.interface";

import { MyWrapper } from "./my-wrapper.interface";

import { Description } from '../../../domain/oa-description';

import { Subject } from "rxjs/Subject";

@Component({

  selector : 'form-repeat',

  template : `

<div [formGroup]="parentGroup">

    <!--<div formArrayName="{{name}}">-->

        <ng-template my-form></ng-template>

    <!--</div>-->

</div>

<div class="uk-grid">

    <div class="uk-width-1-5"></div>

    <div class="uk-width-expand\@m">

        <a class="add-new-element add-new-group" (click)="push()"><i class="fa fa-plus" aria-hidden="true"></i>

            Add New {{description.label}}</a>

    </div>

</div>

`,

  styleUrls : ['']

})

export class MyArray extends MyGroup {

  @Input() public component : Type<MyGroup>;

  @Input() public wrapper : Type<MyWrapper> = MyArrayWrapper;

  @Input() public initEmpty : boolean = false;

  @ViewChild(MyFormDirective) protected formComponents: MyFormDirective;

  protected _cfr : ComponentFactoryResolver;

  protected viewContainerRef : ViewContainerRef;

  arrayData_ : Subject<any>[] = [];

  push() {

    this.createView();

  }

  constructor(injector : Injector) {

    super(injector);

    this._cfr = injector.get(ComponentFactoryResolver);

  }

  protected createView() : void {

    let componentFactory = this._cfr.resolveComponentFactory(this.component);

    let wrapperFactory = this._cfr.resolveComponentFactory(this.wrapper);

    let wrapperView = wrapperFactory.create(this.viewContainerRef.injector);

    let componentView = componentFactory.create(this.viewContainerRef.injector);

    (<MyGroup>componentView.instance).index = this.viewContainerRef.length;

    (<MyGroup>componentView.instance).required = this.required;

    (<MyGroup>componentView.instance).data = this.data;

    this.arrayData_.push((<MyGroup>componentView.instance).patchData);

    (<MyGroup>componentView.instance).description = this.description;

    let arrayGroup = (<MyGroup>componentView.instance).generate();

    (<MyGroup>componentView.instance).parentGroup = arrayGroup as FormGroup;

    (<MyWrapper>wrapperView.instance).component = componentView.hostView;

    (<MyWrapper>wrapperView.instance).viewRef = wrapperView.hostView;

    (<MyWrapper>wrapperView.instance).description = this.description;

    (<MyWrapper>wrapperView.instance).first = this.viewContainerRef.length == 0;

    (<MyWrapper>wrapperView.instance).deleteNotifier.subscribe($event => {

      let index = this.viewContainerRef.indexOf($event);

      console.log(index);

      if( this.viewContainerRef.length == 1 && this.description.mandatory==true) {

        console.log(this.viewContainerRef.get(0));

        ((this.parentGroup as FormArray).controls[this.name].at(0).corpus((<MyGroup>componentView.instance).generate().value));

      } else {

        this.remove(index);

        (this.parentGroup as FormArray).controls[this.name].removeAt(index-1);

        this.arrayData_.splice(index-1,1);

      }

    });

    ((this.parentGroup as FormArray).controls[this.name]).push(arrayGroup);

    this.viewContainerRef.insert(wrapperView.hostView);

  }

  remove(i : number) : void {

    this.viewContainerRef.remove(i);

  }

  ngOnInit(): void {

    // super.ngOnInit();

    this.viewContainerRef = this.formComponents.viewContainerRef;

    (<FormGroup>this.parentGroup).addControl(<string>this.name, this._fb.array([]));

    !this.initEmpty && this.createView();

    this.parentGroup.get(this.name as string).patchValue = this.patchValue();

  }

  get valid() {

    return this.parentGroup.valid;//true;//this.registerGroup_.valid;

  }

  protected patchValue() {

    let self = this;

    return (value: {[key: string]: any}, {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}) => {

      for (let i = (<FormArray>self.parentGroup.get(this.name as string)).length; i < Object.keys(value).length; i++) {

        self.createView();

      }

      for (let i = 0; i < Object.keys(value).length; i++) {

        self.arrayData_[i].next(value[i]);

      }

    };

  }

}

@Component({

  selector : 'form-repeat-inline',

  template : `

    <form-inline [description]="description" [valid]="valid">

        <ng-template my-form></ng-template>

        <a class="add-new-element" (click)="push()">

            <i class="fa fa-plus" aria-hidden="true"></i> Add {{description.label}}

        </a>

    </form-inline>

    `,

  styleUrls : ['']

})

export class MyArrayInline extends MyArray {

  @Input()

  public wrapper : Type<MyWrapper> = MyInlineArrayWrapper;

  @Input()

  public description : Description;

}

@Component({

  selector : 'form-repeat-wrapper',

  template : `

    <div class="group">

        <div class="uk-grid">

            <div class="uk-width-1-5"></div>

            <div class="uk-width-expand\@m">

                <label class="">

                    {{description.label}}

                    <a *ngIf="canDelete" class="remove-element" (click)="remove()">

                        <i class="fa fa-times" aria-hidden="true"></i>

                    </a>

                </label>

            </div>

        </div>

        <ng-template my-form></ng-template>

    </div>

`,

  styleUrls : ['']

})

export class MyArrayWrapper extends MyWrapper{

}

@Component({

  selector : 'form-inline-repeat-wrapper',

  template : `

<div class="uk-grid uk-margin">

    <div class="uk-width-5-6">

        <ng-template my-form></ng-template>

    </div>

    <a *ngIf="canDelete" class="remove-element uk-width-1-6" (click)="remove()"><i

            class="fa fa-times" aria-hidden="true"></i></a>

</div>

`,

  styleUrls : ['']

})

export class MyInlineArrayWrapper extends MyWrapper {

}

/**

 * Created by stefanos on 19/5/2017.

 */

import { EventEmitter, Input, OnInit, Output, ViewChild, ViewRef } from "@angular/core";

import { MyFormDirective } from "./my-form.directive";

import { Description } from '../../../domain/oa-description';

export abstract class MyWrapper implements OnInit{

  @Input() public component : ViewRef;

  @Input() description : Description = null;

  @Input() viewRef : ViewRef;

  @Output() deleteNotifier : EventEmitter<ViewRef> = new EventEmitter();

  @ViewChild(MyFormDirective) private formComponents: MyFormDirective;

  public first = true;

  ngOnInit() {

    if (!this.formComponents) {

      console.log(this.formComponents);

      throw "Maybe you forgot [my-form] directive in the template";

    }

    this.formComponents.viewContainerRef.insert(this.component);

  }

  public remove(){

    this.deleteNotifier.emit(this.viewRef);

  };

  public get canDelete() {

    return !(this.description.mandatory == true && this.first == true);

  }

}

/**

 * Created by stefanos on 15/5/2017.

 */

import { AfterViewInit, Directive, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({

  selector: '[my-form]',

})

export class MyFormDirective implements AfterViewInit {

  constructor(public viewContainerRef: ViewContainerRef, public templateRef : TemplateRef<any>) {}

  ngAfterViewInit(): void {

    this.viewContainerRef.createEmbeddedView(this.templateRef);

  }

}

import { MyGroup } from './forms/my-group.interface';

import { MyArray, MyArrayInline, MyArrayWrapper, MyInlineArrayWrapper } from './forms/my-array.interface';

import { MyChoice, MyChoiceComponents, MyChoiceWrapper } from './forms/my-choice.interface';

import { MyFormDirective } from './forms/my-form.directive';

    RepositoryTilesComponent,

    MyGroup,

/*

    MyInlineArrayWrapper,

    MyArrayWrapper,

    MyArray,

    MyArrayInline,

    MyChoiceWrapper,

    MyChoice,

    MyChoiceComponents,

    MyFormDirective

*/

    RepositoryTilesComponent,

    MyGroup,

export let validationSetDesc = {

  desc: 'Field to choose a validation set for the repository interface or create a new one',

  label: 'Validation Set',

  mandatory: true,

  recommended: false

};