Project

General

Profile

« Previous | Next » 

Revision 50255

continued with forms

View differences:

modules/uoa-repository-dashboard-gui/trunk/app/domain/my-group.interface.ts
1
import { AbstractControl, FormBuilder, FormGroup } from "@angular/forms";
2
import {
3
  AfterContentInit,
4
  Component,
5
  EventEmitter,
6
  Injector,
7
  Input,
8
  OnChanges,
9
  OnInit,
10
  SimpleChanges
11
} from "@angular/core";
12

  
13
import { Subject } from "rxjs/Subject";
14
import { Description } from "./oa-description";
15

  
16
/**
17
 * Created by stefanos on 15/5/2017.
18
 */
19

  
20

  
21
@Component({
22
  template:``
23
})
24
export class MyGroup implements OnInit, AfterContentInit {
25

  
26
  @Input() public parentGroup: AbstractControl;
27

  
28
  @Input() public name : string | number;
29

  
30
  @Input() public data : any = null;
31

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

  
34
  @Input() public required : boolean = false;
35

  
36
  @Input() public description : Description = null;
37

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

  
40
  protected _fb : FormBuilder;
41

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

  
44
  public group : AbstractControl;
45

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

  
48
  constructor(injector : Injector) {
49
    this._fb = injector.get(FormBuilder);
50
    this.patchData.subscribe(_ => {
51
      if(typeof _ != 'undefined') {
52
        setTimeout( () => {
53
          (this.group as FormGroup).patchValue(_);
54
        },1000);
55
      }
56
    });
57
  }
58

  
59
  protected get isArray() {
60
    return this.index != -1;
61
  }
62

  
63
  public generate() : FormGroup {
64
    let ret = this._fb.group(this.groupDefinition);
65
    if (this.patchData) {
66
      // console.log(this.patchData);
67
    }
68
    if (!this.required)
69
      Object.keys(ret.controls).forEach(item => ret.controls[item].clearValidators());
70
    return ret;
71
  }
72

  
73
  public getMyControl(name : string) : AbstractControl {
74
    if (this.isArray) {
75
      return this.group.get(<string>name);
76
    }
77
    else {
78
      return this.group.get(name as string);
79
    }
80
  }
81

  
82
  ngOnInit(): void {
83
    if(this.index == -1) {
84
      if(<string>this.name == '' || (<FormGroup>this.parentGroup).contains(<string>this.name)) {
85
        let obj = this.generate();
86
        Object.keys(obj.controls).forEach(c => {
87
          (<FormGroup>this.parentGroup.get(<string>this.name)).addControl(c,obj.controls[c]);
88
        });
89
        this.group = this.parentGroup.get(this.name as string) as FormGroup;
90
      } else {
91
        (<FormGroup>this.parentGroup).addControl(<string>this.name, this.generate());
92
        this.group = this.parentGroup.get(this.name as string) as FormGroup;
93
      }
94
    } else {
95
      this.name = this.index;
96
      this.group = this.parentGroup as FormGroup;
97
    }
98
  }
99

  
100
  ngAfterContentInit(): void {
101
    this.createdEvent.emit(this.name);
102
    // setTimeout(() => {
103
    //     if(this.patchData != null) {
104
    //         (this.group as FormGroup).patchValue(this.patchData);
105
    //     }
106
    // },1000);
107
    // setTimeout(() => {
108
    //     console.log(this.group,this.parentGroup);
109
    //     (this.group as FormGroup).updateValueAndValidity();
110
    // },2000);
111
  }
112

  
113
  public get valid() {
114
    return this.group.valid;
115
  }
116

  
117
}
118

  
119
@Component({
120
  selector : 'form-inline',
121
  template : `
122
<ng-template #descTemplate>{{description.desc}}</ng-template>
123
<div class="uk-grid uk-form-horizontal">
124
    <!--<label class="uk-width-1-5 uk-form-label" *ngIf="description.label!=null" [ngClass]="{'required' : description.mandatory==true}">-->
125
    <label class="uk-width-1-5" *ngIf="description.label!=null" [ngClass]="{'required' : description.mandatory==true}">
126
        <!--<span *ngIf="description.mandatory==true && !valid"><i class="fa fa-star" style="color : red"></i></span>-->
127
        <!--<span *ngIf="description.recommended==true"><i class="fa fa-star" style="color : green"></i></span>-->
128
        {{description.label}}
129
        <span *ngIf="params==='tooltip'"><i class="fa fa-info-circle" [tooltip]="descTemplate" container="body"></i></span>
130
    </label>
131
    <!--<div class="uk-width-expand@m uk-form-controls" [ngClass]="{'has-error': !valid}">-->
132
    <div class="uk-width-expand\@m" [ngClass]="{'has-error': !valid}">
133
        <ng-content></ng-content>
134
        <div *ngIf="params==='inline'">
135
            <i><small>{{description.desc}}</small></i>
136
        </div>
137
    </div>
138
</div>
139
`,
140
  styleUrls : ['../shared/templates/common.css']
141

  
142
})
143
export class InlineFormWrapper implements OnChanges {
144

  
145
  @Input() public description : Description = null;
146

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

  
149
  @Input() public width : number = 9;
150

  
151
  @Input() public valid : boolean = true;
152

  
153
  ngOnChanges(changes: SimpleChanges): void {
154
    if (changes && changes.valid)
155
      this.valid = <boolean>changes.valid.currentValue;
156
  }
157

  
158
}
modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.ts
1
import { Component, Injector } from '@angular/core';
2
import { MyGroup } from '../../domain/my-group.interface';
3
import { baseUrlDesc, Description } from '../../domain/oa-description';
1
import { Component, Injector, Input } from '@angular/core';
2
import { MyGroup } from '../../shared/reusablecomponents/forms/my-group.interface';
3
import { baseUrlDesc, validationSetDesc, Description } from '../../domain/oa-description';
4
import { FormGroup, Validators } from '@angular/forms';
4 5

  
5 6
@Component ({
6 7
  selector: 'update-datasource-interface-form',
......
12 13
  errorMessage: string;
13 14

  
14 15
  baseUrlDesc: Description = baseUrlDesc;
16
  validationSetDesc: Description = validationSetDesc;
15 17

  
18
  readonly groupDefinition = {
19
    baseUrl: this._fb.group({}),
20
    validationSet: ['', Validators.required],
21
    compatibilityLevel: ''
22
  }
23

  
16 24
  constructor(private injector: Injector) {
17 25
    super(injector);
18 26
  }
19 27

  
28
  ngOnInit(){
29
    this.generate();
30
  }
20 31
}
modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-register/sr-literature.component.html
71 71
                  <span class="loading">{{ loadingMessage }}</span><br>
72 72
                  <img src="/assets/imgs/loader-big.gif">
73 73
                </div>
74
                <div class="alert alert-warning" *ngIf="noRepositories">{{ noRepositories }}</div>
74
                <div class="uk-alert uk-alert-warning" *ngIf="noRepositories">{{ noRepositories }}</div>
75 75
                <div class="repositoriesRadioButtonForm" *ngIf="countryRepos">
76 76
                  <div class="form-group"
77 77
                       *ngFor="let repo of countryRepos | repoFilter: searchBox">
78
                    <label class="btn btn-link" style="display: block; text-align: left;">
78
                    <label class="uk-button uk-button-link" style="display: block; text-align: left;">
79 79
                      <input type="radio" value="{{ repo.id }}" name="repositories" (change)="onChooseRepository()" [disabled]="repo.registered">
80 80
                      <span>
81 81
                        {{ repo.officialName }}
82
                        <span class="label label-warning registeredLabel" *ngIf="repo.registered">Registered</span>
82
                        <span class="uk-label uk-label-warning registeredLabel" *ngIf="repo.registered">Registered</span>
83 83
                        <a target="_blank" href="{{repo.websiteUrl }}">
84 84
                          <i class="fa fa-external-link externalLink"></i>
85 85
                        </a>
modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update-repo.component.html
105 105
            </div>
106 106
          </li>
107 107
          <li class="el-item">
108
            <div class="uk-width-1-1@m uk-first-column">
109
              <div class="interfacesForm uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-2@m uk-grid-small uk-grid uk-scrollspy-inview uk-animation-fade">
110
                <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade">
108
            <div class="uk-grid">
109
              <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-width-1-2@m">
110
                <div>
111 111
                  <div>
112
                    <div>
113
                      <h5>OpenDOAR Interface (non-removable)</h5>
114
                    </div>
115
                    <div class="interfaceActionsPanel">
116
                      <a><i class="fa fa-save fa-lg" style=""></i></a>
117
                    </div>
112
                    <h5>OpenDOAR Interface (non-removable)</h5>
118 113
                  </div>
114
                  <div class="interfaceActionsPanel">
115
                    <a><i class="fa fa-save fa-lg" style=""></i></a>
116
                  </div>
117
                </div>
118
                <div>
119
                  <update-datasource-interface-form></update-datasource-interface-form>
119 120
                  <!-- SPACE FOR FORM GROUP -->
120 121
                </div>
121
                <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade">
122
                  <div class="interface-box new" style="text-align: center">
123
                    <a (click)="showInterfaceFormToggle()"><i class="fa fa-plus-square-o"></i></a>
124
                    <span class="info">Add new Interface</span>
125
                  </div>
122
              </div>
123
              <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-width-1-2@m">
124
                <div class="interface-box new" style="text-align: center">
125
                  <a (click)="showInterfaceFormToggle()"><i class="fa fa-plus-square-o"></i></a>
126
                  <span class="info">Add new Interface</span>
126 127
                </div>
127 128
              </div>
128 129
            </div>
modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources.module.ts
14 14
import { SourcesUpdateRepoComponent } from './sources-update-repo.component';
15 15
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
16 16
import { RepoFilter } from './sourcesPipes';
17
import { UpdateDatasourceInterfaceFormComponent } from './update-datasource-interface-form.component';
17 18

  
18 19
@NgModule ({
19 20
  imports: [
......
30 31
    SourcesUpdateComponent,
31 32
    SRLiteratureComponent,
32 33
    SourcesUpdateRepoComponent,
34
    UpdateDatasourceInterfaceFormComponent,
33 35
    RepoFilter
34 36
  ]
35 37
})
modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.html
1
    <div [formGroup]="updInterfaceGroup" class="uk-child-width-1-2@m">
1
    <div [formGroup]="parentGroup">
2 2
      <div *ngIf="successMessage" class="uk-alert uk-alert-success" style="display:none;" aria-hidden="true"></div>
3 3
      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" style="display:none;" aria-hidden="true"></div>
4
      <form-inline [description]="baseUrlDesc" [valid]="updInterfaceGroup.valid">
5
        <input class="uk-input" type="text" formControlName="baseUrl" placeholder="Not Identified [span class help-block]">
6
      </form-inline>
7
<!--
8
        <div class="form-group">
9
          <label class="control-label">Validation Set</label>
10
          <div>
11
            <label class="btn btn-link validationSetRadio disabled">
12
              <input name="validationSet" value="on" tabindex="0" checked="" disabled="" type="radio">
13
              <span>choose existing</span>
14
            </label>
15
          </div>
16
          <select class="form-control" disabled="">
17
            <option value="noneSelected">&#45;&#45; none selected &#45;&#45;</option>
4

  
5
      <div class="uk-fieldset">
6
        <label class="uk-form-controls-text control-label">Base URL (*)
7
          <input type="text" class="uk-input" formControlName="baseUrl" disabled="">
8
        </label>
9
      </div>
10
      <div class="uk-fieldset">
11
        <label class="uk-form-controls-text control-label">Validation Set</label>
12
        <div>
13
          <label class="uk-button uk-button-link validationSetRadio disabled">
14
            <input name="validationSet" value="select" formControlName="validationSet" type="radio" class="uk-radio">
15
            <span>choose existing</span>
16
          </label>
17
          <select name="selectedValidationSet" class="uk-select" disabled="">
18
            <option value="noneSelected">-- none selected --</option>
18 19
          </select>
19
          <div>
20
            <label class="btn btn-link validationSetRadio disabled">
21
              <input name="validationSet" value="on" tabindex="0" checked="" disabled="" type="radio">
22
              <span>or a custom one</span>
23
            </label>
24
          </div>
25
          <input class="form-control" disabled="" type="text">
20
          <label class="uk-button uk-button-link validationSetRadio disabled">
21
            <input name="validationSet" value="custom" formControlname="validationSet" type="radio" class="uk-radio">
22
            <span>or a custom one</span>
23
          </label>
24
          <input class="uk-input" disabled="" type="text">
26 25
        </div>
27
        <div class="form-group">
28
          <label class="control-label">Desired Compatibility Level (*)</label>
29
          <select class="form-control">
30
            <option value="noneSelected">&#45;&#45; none selected &#45;&#45;</option>
26
      </div>
27
      <div class="uk-fieldset">
28
        <label class="uk-form-controls-select control-label">Desired Compatibility Level (*)
29
          <select class="uk-select" name="compatibilityLevel" formControlname="compatibilityLevel">
30
            <option value="">-- none selected --</option>
31 31
          </select>
32
        </div>
33
        <div class="form-group">
34
          <label class="control-label">Current Compatibility Level</label>
35
          <div>not available</div>
36
        </div>
37
-->
32
        </label>
33
      </div>
34
      <div>
35
        <label class="uk-form-controls-text control-label">Current Compatibility Level
36
          <!-- SHOW CURRENT LEVEL -->
37
        </label>
38
      </div>
38 39
    </div>
modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-choice.interface.ts
1
/**
2
 * Created by stefanos on 15/5/2017.
3
 */
4
import { FormGroup } from "@angular/forms";
5
import { Component, ComponentFactoryResolver, Injector, Input, Type, ViewChild, ViewContainerRef } from "@angular/core";
6
import { MyFormDirective } from "./my-form.directive";
7
import { MyGroup } from "./my-group.interface";
8
import { MyWrapper } from "./my-wrapper.interface";
9
import { Subject } from "rxjs/Subject";
10
import { Description } from '../../../domain/oa-description';
11

  
12

  
13
@Component({
14
  selector : 'form-choice',
15
  template : `
16
<form-inline [description]="{label : 'Choose'}" [params]="null">
17
    <div class="uk-margin uk-grid-small uk-child-width-auto">
18
        <label *ngFor="let radio of radioButton">
19
            <input type="radio" name="{{uniqueId}}" class="uk-radio" [checked]="radio === radioButtonSelected"
20
            (click)="changeType(radio)">
21
            {{radio}}
22
        </label>
23
    </div>
24
</form-inline>
25
<div [formGroup]="parentGroup">
26
    <ng-template my-form></ng-template>
27
</div>
28
`,
29
  styleUrls : ['']
30

  
31
})
32
export class MyChoice extends MyGroup {
33

  
34
  @Input() public components : MyChoiceComponents[];
35

  
36
  wrapper : Type<MyWrapper> = MyChoiceWrapper;
37

  
38
  @ViewChild(MyFormDirective) protected formComponents: MyFormDirective;
39

  
40
  protected _cfr : ComponentFactoryResolver;
41

  
42
  protected viewContainerRef : ViewContainerRef;
43

  
44
  arrayData_ : Subject<any>[] = [];
45
  wrapperViews : {[key : string] : MyChoiceWrapper} = {};
46

  
47
  radioButton : string[] = [];
48

  
49
  radioButtonSelected : string;
50

  
51
  registerGroup_ : FormGroup;
52

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

  
55
  constructor(injector : Injector) {
56
    super(injector);
57
    this._cfr = injector.get(ComponentFactoryResolver);
58
  }
59

  
60
  protected createView(component : MyChoiceComponents,index : number) : void {
61
    console.log(component);
62
    let componentFactory = this._cfr.resolveComponentFactory(component.component);
63
    let wrapperFactory = this._cfr.resolveComponentFactory(this.wrapper);
64
    let wrapperView = wrapperFactory.create(this.viewContainerRef.injector);
65
    let componentView = componentFactory.create(this.viewContainerRef.injector);
66

  
67
    (<MyGroup>componentView.instance).index = this.viewContainerRef.length;
68
    (<MyGroup>componentView.instance).required = this.required;
69
    (<MyGroup>componentView.instance).data = this.data;
70
    this.arrayData_.push((<MyGroup>componentView.instance).patchData);
71
    (<MyGroup>componentView.instance).description = component.description;
72
    let arrayGroup = (<MyGroup>componentView.instance).generate();
73

  
74
    (<MyGroup>componentView.instance).parentGroup = arrayGroup as FormGroup;
75
    (<MyChoiceWrapper>wrapperView.instance).component = componentView.hostView;
76
    (<MyChoiceWrapper>wrapperView.instance).viewRef = wrapperView.hostView;
77
    (<MyChoiceWrapper>wrapperView.instance).description = this.description;
78
    (<MyChoiceWrapper>wrapperView.instance).hidden = (index != 0);
79
    (<MyChoiceWrapper>wrapperView.instance).first = this.viewContainerRef.length == 0;
80

  
81
    let registerGroup : FormGroup = this.parentGroup as FormGroup;
82
    if(this.name) {
83
      registerGroup = this.parentGroup.get(this.name as string) as FormGroup;
84
    }
85

  
86
    this.registerGroup_.registerControl(component.name, arrayGroup);
87
    if(index != 0) {
88
      setTimeout(() => {
89
        console.log(component);
90
        registerGroup.get(component.name).disable();
91
      },500)
92
    }
93
    // (<FormArray>this.parentGroup.controls[this.name]).push(arrayGroup);
94
    this.wrapperViews[component.name] = wrapperView.instance as MyChoiceWrapper;
95
    this.viewContainerRef.insert(wrapperView.hostView);
96
  }
97

  
98
  ngOnInit(): void {
99
    // super.ngOnInit();
100
    this.components.forEach(c => this.radioButton.push(c.description.label));
101
    this.radioButtonSelected = this.radioButton[0];
102
    this.viewContainerRef = this.formComponents.viewContainerRef;
103
    //if there is no name, register with the children's control
104
    if(this.name) {
105
      (<FormGroup>this.parentGroup).addControl(this.name as string, this._fb.group({}));
106
      this.registerGroup_ = this.parentGroup.get(this.name as string) as FormGroup;
107
    } else {
108
      this.registerGroup_ = this.parentGroup as FormGroup;
109
    }
110
    this.components.forEach((item,index) => {
111
      this.createView(item,index);
112
    });
113

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

  
116
  }
117

  
118
  changeType(radio : string) {
119
    let newSelected : string  = this.components[this.radioButton.indexOf(radio)].name;
120
    let currentSelected : string  = this.components[this.radioButton.indexOf(this.radioButtonSelected)].name;
121
    (this.registerGroup_.get(currentSelected) as FormGroup).disable();
122
    (this.registerGroup_.get(newSelected) as FormGroup).enable();
123
    this.wrapperViews[currentSelected].hidden = true;
124
    this.wrapperViews[newSelected].hidden = false;
125
    this.radioButtonSelected = radio;
126
  }
127

  
128
  protected patchValue() {
129
    let self = this;
130
    return (value: {[key: string]: any}, {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}) => {
131
      Object.keys(value).forEach(v => {
132
        if (v != null) {
133
          let component = self.components.find(component => component.name == v);
134
          self.changeType(component.description.label);
135
          self.registerGroup_.get(v).patchValue(value[v]);
136
          console.log(value[v]);
137
        }
138
      });
139
    };
140
  }
141
}
142

  
143
@Component({
144
  selector : 'form-choice-wrapper',
145
  template : `
146
<div class="uk-grid uk-margin" [hidden]="hidden">
147
    <div class="uk-width-5-6">
148
        <ng-template my-form></ng-template>
149
    </div>
150
</div>
151
`,
152
  styleUrls : ['']
153

  
154
})
155
export class MyChoiceWrapper extends MyWrapper {
156
  @Input()
157
  public hidden = false;
158
}
159

  
160
export class MyChoiceComponents {
161
  public component : Type<MyGroup>;
162
  public name : string;
163
  public description : Description;
164

  
165
  constructor(name : string , component : Type<MyGroup>,description : Description) {
166
    this.component = component;
167
    this.name = name;
168
    this.description = description;
169

  
170
  }
171
}
modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-group.interface.ts
1
import { AbstractControl, FormBuilder, FormGroup } from "@angular/forms";
2
import {
3
  AfterContentInit,
4
  Component,
5
  EventEmitter,
6
  Injector,
7
  Input,
8
  OnChanges,
9
  OnInit,
10
  SimpleChanges
11
} from "@angular/core";
12

  
13
import { Subject } from "rxjs/Subject";
14
import { Description } from '../../../domain/oa-description';
15

  
16
/**
17
 * Created by stefanos on 15/5/2017.
18
 */
19

  
20

  
21
@Component({
22
  template:``
23
})
24
export class MyGroup implements OnInit, AfterContentInit {
25

  
26
  @Input() public parentGroup: AbstractControl;
27

  
28
  @Input() public name : string | number;
29

  
30
  @Input() public data : any = null;
31

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

  
34
  @Input() public required : boolean = false;
35

  
36
  @Input() public description : Description = null;
37

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

  
40
  protected _fb : FormBuilder;
41

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

  
44
  public group : AbstractControl;
45

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

  
48
  constructor(injector : Injector) {
49
    this._fb = injector.get(FormBuilder);
50
    this.patchData.subscribe(_ => {
51
      if(typeof _ != 'undefined') {
52
        setTimeout( () => {
53
          (this.group as FormGroup).patchValue(_);
54
        },1000)exit;
55
      }
56
    });
57
  }
58

  
59
  protected get isArray() {
60
    return this.index != -1;
61
  }
62

  
63
  public generate() : FormGroup {
64
    let ret = this._fb.group(this.groupDefinition);
65
    if (this.patchData) {
66
      // console.log(this.patchData);
67
    }
68
    if (!this.required)
69
      Object.keys(ret.controls).forEach(item => ret.controls[item].clearValidators());
70
    return ret;
71
  }
72

  
73
  public getMyControl(name : string) : AbstractControl {
74
    if (this.isArray) {
75
      return this.group.get(<string>name);
76
    }
77
    else {
78
      return this.group.get(name as string);
79
    }
80
  }
81

  
82
  ngOnInit(): void {
83
    if(this.index == -1) {
84
      if(<string>this.name == '' || (<FormGroup>this.parentGroup).contains(<string>this.name)) {
85
        let obj = this.generate();
86
        Object.keys(obj.controls).forEach(c => {
87
          (<FormGroup>this.parentGroup.get(<string>this.name)).addControl(c,obj.controls[c]);
88
        });
89
        this.group = this.parentGroup.get(this.name as string) as FormGroup;
90
      } else {
91
        (<FormGroup>this.parentGroup).addControl(<string>this.name, this.generate());
92
        this.group = this.parentGroup.get(this.name as string) as FormGroup;
93
      }
94
    } else {
95
      this.name = this.index;
96
      this.group = this.parentGroup as FormGroup;
97
    }
98
  }
99

  
100
  ngAfterContentInit(): void {
101
    this.createdEvent.emit(this.name);
102
    // setTimeout(() => {
103
    //     if(this.patchData != null) {
104
    //         (this.group as FormGroup).patchValue(this.patchData);
105
    //     }
106
    // },1000);
107
    // setTimeout(() => {
108
    //     console.log(this.group,this.parentGroup);
109
    //     (this.group as FormGroup).updateValueAndValidity();
110
    // },2000);
111
  }
112

  
113
  public get valid() {
114
    return this.group.valid;
115
  }
116

  
117
}
118

  
119
@Component({
120
  selector : 'form-inline',
121
  template : `
122
  <ng-template #descTemplate>{{description.desc}}</ng-template>
123
  <div class="uk-grid uk-form-horizontal">
124
      <!--<label class="uk-width-1-5 uk-form-label" *ngIf="description.label!=null" [ngClass]="{'required' : description.mandatory==true}">-->
125
      <label class="uk-width-1-5" *ngIf="description.label!=null" [ngClass]="{'required' : description.mandatory==true}">
126
          <!--<span *ngIf="description.mandatory==true && !valid"><i class="fa fa-star" style="color : red"></i></span>-->
127
          <!--<span *ngIf="description.recommended==true"><i class="fa fa-star" style="color : green"></i></span>-->
128
          {{description.label}}
129
          <span *ngIf="params==='tooltip'"><i class="fa fa-info-circle" [tooltip]="descTemplate" container="body"></i></span>
130
      </label>
131
      <!--<div class="uk-width-expand@m uk-form-controls" [ngClass]="{'has-error': !valid}">-->
132
      <div class="uk-width-expand\@m" [ngClass]="{'has-error': !valid}">
133
          <ng-content></ng-content>
134
          <div *ngIf="params==='inline'">
135
              <i><small>{{description.desc}}</small></i>
136
          </div>
137
      </div>
138
  </div>
139
  `
140
})
141
export class InlineFormWrapper implements OnChanges {
142

  
143
  @Input() public description : Description = null;
144

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

  
147
  @Input() public width : number = 9;
148

  
149
  @Input() public valid : boolean = true;
150

  
151
  ngOnChanges(changes: SimpleChanges): void {
152
    if (changes && changes.valid)
153
      this.valid = <boolean>changes.valid.currentValue;
154
  }
155

  
156
}
modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-array.interface.ts
1
/**
2
 * Created by stefanos on 15/5/2017.
3
 */
4
import { FormArray, FormGroup } from "@angular/forms";
5
import { Component, ComponentFactoryResolver, Injector, Input, Type, ViewChild, ViewContainerRef } from "@angular/core";
6
import { MyFormDirective } from "./my-form.directive";
7
import { MyGroup } from "./my-group.interface";
8
import { MyWrapper } from "./my-wrapper.interface";
9
import { Description } from '../../../domain/oa-description';
10
import { Subject } from "rxjs/Subject";
11

  
12

  
13
@Component({
14
  selector : 'form-repeat',
15
  template : `
16
<div [formGroup]="parentGroup">
17
    <!--<div formArrayName="{{name}}">-->
18
        <ng-template my-form></ng-template>
19
    <!--</div>-->
20
</div>
21
<div class="uk-grid">
22
    <div class="uk-width-1-5"></div>
23
    <div class="uk-width-expand\@m">
24
        <a class="add-new-element add-new-group" (click)="push()"><i class="fa fa-plus" aria-hidden="true"></i>
25
            Add New {{description.label}}</a>
26
    </div>
27
</div>
28
`,
29
  styleUrls : ['']
30

  
31
})
32
export class MyArray extends MyGroup {
33

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

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

  
38
  @Input() public initEmpty : boolean = false;
39

  
40
  @ViewChild(MyFormDirective) protected formComponents: MyFormDirective;
41

  
42
  protected _cfr : ComponentFactoryResolver;
43

  
44
  protected viewContainerRef : ViewContainerRef;
45

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

  
48
  push() {
49
    this.createView();
50
  }
51

  
52
  constructor(injector : Injector) {
53
    super(injector);
54
    this._cfr = injector.get(ComponentFactoryResolver);
55
  }
56

  
57
  protected createView() : void {
58
    let componentFactory = this._cfr.resolveComponentFactory(this.component);
59
    let wrapperFactory = this._cfr.resolveComponentFactory(this.wrapper);
60
    let wrapperView = wrapperFactory.create(this.viewContainerRef.injector);
61
    let componentView = componentFactory.create(this.viewContainerRef.injector);
62

  
63
    (<MyGroup>componentView.instance).index = this.viewContainerRef.length;
64
    (<MyGroup>componentView.instance).required = this.required;
65
    (<MyGroup>componentView.instance).data = this.data;
66
    this.arrayData_.push((<MyGroup>componentView.instance).patchData);
67
    (<MyGroup>componentView.instance).description = this.description;
68
    let arrayGroup = (<MyGroup>componentView.instance).generate();
69
    (<MyGroup>componentView.instance).parentGroup = arrayGroup as FormGroup;
70
    (<MyWrapper>wrapperView.instance).component = componentView.hostView;
71
    (<MyWrapper>wrapperView.instance).viewRef = wrapperView.hostView;
72
    (<MyWrapper>wrapperView.instance).description = this.description;
73

  
74
    (<MyWrapper>wrapperView.instance).first = this.viewContainerRef.length == 0;
75
    (<MyWrapper>wrapperView.instance).deleteNotifier.subscribe($event => {
76
      let index = this.viewContainerRef.indexOf($event);
77
      console.log(index);
78
      if( this.viewContainerRef.length == 1 && this.description.mandatory==true) {
79
        console.log(this.viewContainerRef.get(0));
80
        ((this.parentGroup as FormArray).controls[this.name].at(0).corpus((<MyGroup>componentView.instance).generate().value));
81
      } else {
82
        this.remove(index);
83
        (this.parentGroup as FormArray).controls[this.name].removeAt(index-1);
84
        this.arrayData_.splice(index-1,1);
85
      }
86
    });
87

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

  
90
    this.viewContainerRef.insert(wrapperView.hostView);
91
  }
92

  
93
  remove(i : number) : void {
94
    this.viewContainerRef.remove(i);
95
  }
96

  
97
  ngOnInit(): void {
98
    // super.ngOnInit();
99
    this.viewContainerRef = this.formComponents.viewContainerRef;
100
    (<FormGroup>this.parentGroup).addControl(<string>this.name, this._fb.array([]));
101
    !this.initEmpty && this.createView();
102
    this.parentGroup.get(this.name as string).patchValue = this.patchValue();
103

  
104
  }
105

  
106
  get valid() {
107
    return this.parentGroup.valid;//true;//this.registerGroup_.valid;
108
  }
109

  
110

  
111
  protected patchValue() {
112
    let self = this;
113
    return (value: {[key: string]: any}, {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}) => {
114
      for (let i = (<FormArray>self.parentGroup.get(this.name as string)).length; i < Object.keys(value).length; i++) {
115
        self.createView();
116
      }
117
      for (let i = 0; i < Object.keys(value).length; i++) {
118
        self.arrayData_[i].next(value[i]);
119
      }
120
    };
121
  }
122
}
123

  
124
@Component({
125
  selector : 'form-repeat-inline',
126
  template : `
127
    <form-inline [description]="description" [valid]="valid">
128
        <ng-template my-form></ng-template>
129
        <a class="add-new-element" (click)="push()">
130
            <i class="fa fa-plus" aria-hidden="true"></i> Add {{description.label}}
131
        </a>
132
    </form-inline>
133
    `,
134
  styleUrls : ['']
135

  
136
})
137
export class MyArrayInline extends MyArray {
138
  @Input()
139
  public wrapper : Type<MyWrapper> = MyInlineArrayWrapper;
140

  
141
  @Input()
142
  public description : Description;
143
}
144

  
145

  
146
@Component({
147
  selector : 'form-repeat-wrapper',
148
  template : `
149
    <div class="group">
150
        <div class="uk-grid">
151
            <div class="uk-width-1-5"></div>
152
            <div class="uk-width-expand\@m">
153
                <label class="">
154
                    {{description.label}}
155
                    <a *ngIf="canDelete" class="remove-element" (click)="remove()">
156
                        <i class="fa fa-times" aria-hidden="true"></i>
157
                    </a>
158
                </label>
159
            </div>
160
        </div>
161
        <ng-template my-form></ng-template>
162
    </div>
163
`,
164
  styleUrls : ['']
165

  
166
})
167
export class MyArrayWrapper extends MyWrapper{
168
}
169

  
170
@Component({
171
  selector : 'form-inline-repeat-wrapper',
172
  template : `
173
<div class="uk-grid uk-margin">
174
    <div class="uk-width-5-6">
175
        <ng-template my-form></ng-template>
176
    </div>
177
    <a *ngIf="canDelete" class="remove-element uk-width-1-6" (click)="remove()"><i
178
            class="fa fa-times" aria-hidden="true"></i></a>
179
</div>
180
`,
181
  styleUrls : ['']
182

  
183
})
184
export class MyInlineArrayWrapper extends MyWrapper {
185
}
modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-wrapper.interface.ts
1
/**
2
 * Created by stefanos on 19/5/2017.
3
 */
4
import { EventEmitter, Input, OnInit, Output, ViewChild, ViewRef } from "@angular/core";
5
import { MyFormDirective } from "./my-form.directive";
6
import { Description } from '../../../domain/oa-description';
7

  
8

  
9
export abstract class MyWrapper implements OnInit{
10

  
11
  @Input() public component : ViewRef;
12

  
13
  @Input() description : Description = null;
14

  
15
  @Input() viewRef : ViewRef;
16

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

  
19
  @ViewChild(MyFormDirective) private formComponents: MyFormDirective;
20

  
21
  public first = true;
22

  
23
  ngOnInit() {
24
    if (!this.formComponents) {
25
      console.log(this.formComponents);
26
      throw "Maybe you forgot [my-form] directive in the template";
27
    }
28
    this.formComponents.viewContainerRef.insert(this.component);
29
  }
30

  
31
  public remove(){
32
    this.deleteNotifier.emit(this.viewRef);
33
  };
34

  
35

  
36
  public get canDelete() {
37
    return !(this.description.mandatory == true && this.first == true);
38
  }
39

  
40
}
modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-form.directive.ts
1
/**
2
 * Created by stefanos on 15/5/2017.
3
 */
4
import { AfterViewInit, Directive, TemplateRef, ViewContainerRef } from "@angular/core";
5

  
6
@Directive({
7
  selector: '[my-form]',
8
})
9
export class MyFormDirective implements AfterViewInit {
10

  
11

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

  
14
  ngAfterViewInit(): void {
15
    this.viewContainerRef.createEmbeddedView(this.templateRef);
16
  }
17
}
modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/reusable-components.module.ts
13 13
import { HelpContentService } from "../../services/help-content.service";
14 14
import { RepositoryTilesComponent } from './repository-tiles.component';
15 15
import { ConfirmationDialogComponent } from './confirmation-dialog.component';
16
import { MyGroup } from './forms/my-group.interface';
17
import { MyArray, MyArrayInline, MyArrayWrapper, MyInlineArrayWrapper } from './forms/my-array.interface';
18
import { MyChoice, MyChoiceComponents, MyChoiceWrapper } from './forms/my-choice.interface';
19
import { MyFormDirective } from './forms/my-form.directive';
16 20

  
17 21

  
18 22
@NgModule({
......
31 35
    HelpContentComponent,
32 36
    AsideHelpContentComponent,
33 37
    ConfirmationDialogComponent,
34
    RepositoryTilesComponent
38
    RepositoryTilesComponent,
39
    MyGroup,
40
/*
41
    MyInlineArrayWrapper,
42
    MyArrayWrapper,
43
    MyArray,
44
    MyArrayInline,
45
    MyChoiceWrapper,
46
    MyChoice,
47
    MyChoiceComponents,
48
    MyFormDirective
49
*/
35 50
  ],
36 51
  exports: [
37 52
    ReadMoreComponent,
38 53
    HelpContentComponent,
39 54
    AsideHelpContentComponent,
40 55
    ConfirmationDialogComponent,
41
    RepositoryTilesComponent
56
    RepositoryTilesComponent,
57
    MyGroup,
42 58
  ],
43 59
  providers: [
44 60
    HelpContentService
modules/uoa-repository-dashboard-gui/trunk/app/domain/oa-description.ts
14 14
  mandatory: true,
15 15
  recommended: false
16 16
};
17

  
18
export let validationSetDesc = {
19
  desc: 'Field to choose a validation set for the repository interface or create a new one',
20
  label: 'Validation Set',
21
  mandatory: true,
22
  recommended: false
23
};

Also available in: Unified diff