Project

General

Profile

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
import {ConfirmationDialogComponent} from "../confirmation-dialog.component";
12
import {nonRemovableInterface} from "../../../domain/shared-messages";
13

    
14

    
15
@Component({
16
  selector : 'form-repeat',
17
  template : `
18
    <div [formGroup]="parentGroup" 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">
19
      <!--<div formArrayName="{{name}}">-->
20
      <ng-template my-form></ng-template>
21
      <!--</div>-->
22
      <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade">
23
        <div class="interface-box new" style="text-align: center">
24
          <a class="add-new-element add-new-group" (click)="push()"><i class="fa fa-plus-square-o" aria-hidden="true"></i>
25
            <span class="info">Add New {{ description.label }}</span></a>
26
        </div>
27
      </div>
28
    </div>
29

    
30

    
31
    <confirmation-dialog #confirmDelete [title]="'Delete Interface'" [isModalShown]="isModalShown"
32
                         [confirmActionButton]="'Yes, delete it'" (emitObject)="confirmedRemove($event)">
33
      Are you sure you want to delete this interface?
34
    </confirmation-dialog>
35

    
36
  `
37

    
38
})
39
export class MyArray extends MyGroup {
40

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

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

    
45
  @Input() public initEmpty : boolean = false;
46

    
47
  @ViewChild(MyFormDirective) protected formComponents: MyFormDirective;
48

    
49
  protected _cfr : ComponentFactoryResolver;
50

    
51
  protected viewContainerRef : ViewContainerRef;
52

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

    
55
  components : MyGroup[] = [];
56

    
57
  push() {
58
    this.createView();
59
  }
60

    
61
  constructor(injector : Injector) {
62
    super(injector);
63
    this._cfr = injector.get(ComponentFactoryResolver);
64
  }
65

    
66
  protected createView() : void {
67
    let componentFactory = this._cfr.resolveComponentFactory(this.component);
68
    let wrapperFactory = this._cfr.resolveComponentFactory(this.wrapper);
69
    let wrapperView = wrapperFactory.create(this.viewContainerRef.injector);
70
    let componentView = componentFactory.create(this.viewContainerRef.injector);
71
    this.components.push(componentView.instance);
72
    (<MyGroup>componentView.instance).index = this.viewContainerRef.length;
73
    (<MyGroup>componentView.instance).required = this.required;
74
    (<MyGroup>componentView.instance).data = this.data;
75
    (<MyGroup>componentView.instance).otherData = this.otherData;
76
    this.arrayData_.push((<MyGroup>componentView.instance).patchData);
77
    (<MyGroup>componentView.instance).description = this.description;
78
    let arrayGroup = (<MyGroup>componentView.instance).generate();
79
    (<MyGroup>componentView.instance).parentGroup = arrayGroup as FormGroup;
80
    (<MyWrapper>wrapperView.instance).component = componentView.hostView;
81
    (<MyWrapper>wrapperView.instance).viewRef = wrapperView.hostView;
82
    (<MyWrapper>wrapperView.instance).description = this.description;
83

    
84
    (<MyWrapper>wrapperView.instance).first = this.viewContainerRef.length == 0;
85
    (<MyWrapper>wrapperView.instance).deleteNotifier.subscribe($event => {
86
      let index = this.viewContainerRef.indexOf($event);
87
      console.log(index);
88
      if( this.viewContainerRef.length == 1 && this.description.mandatory==true) {
89
        console.log(this.viewContainerRef.get(0));
90
        ((this.parentGroup as FormArray).controls[this.name].at(0).corpus((<MyGroup>componentView.instance).generate().value));
91
      } else {
92
        if (index>0){
93
          this.curIntrf = <MyGroup>componentView.instance;
94
          this.curIndex = index;
95
          this.components.splice(index,1);
96
          this.confirmRemoveInterface();
97
        } else {
98
          (<MyGroup>componentView.instance).groupErrorMessage = nonRemovableInterface;
99
        }
100
        /*(<MyGroup>componentView.instance).toBeDeleted = true;
101
        this.remove(index);
102
        (this.parentGroup as FormArray).controls[this.name].removeAt(index-1);
103
        this.arrayData_.splice(index-1,1);*/
104
      }
105
    });
106

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

    
109
    this.viewContainerRef.insert(wrapperView.hostView);
110
    console.log("ADDED NEW GROUP IN CREATEVIEW");
111
  }
112

    
113
  public checkIfOneElementExists() {
114
    console.log(`searching`);
115
    return this.components.some(data => data.wasSaved);
116
  }
117

    
118
  isModalShown: boolean = false;
119
  curIntrf: any;
120
  curIndex: number;
121

    
122
  @ViewChild('confirmDelete')
123
  public confirmDelete: ConfirmationDialogComponent;
124

    
125
  confirmRemoveInterface(){
126
    this.confirmDelete.showModal();
127
  }
128

    
129
  confirmedRemove(event: any){
130
    if (this.curIndex!=0) {
131
      this.curIntrf.toBeDeleted = true;
132
      this.remove(this.curIndex);
133
      (this.parentGroup as FormArray).controls[this.name].removeAt(this.curIndex - 1);
134
      this.arrayData_.splice(this.curIndex - 1, 1);
135
    }
136
  }
137

    
138
  remove(i : number) : void {
139
    this.viewContainerRef.remove(i);
140
  }
141

    
142
  ngOnInit(): void {
143
    // super.ngOnInit();
144
    this.viewContainerRef = this.formComponents.viewContainerRef;
145
    (<FormGroup>this.parentGroup).addControl(<string>this.name, this._fb.array([]));
146
/*    (<FormGroup>this.parentGroup).addControl(<string>this.name, this._fb.array([]));
147
    !this.initEmpty && this.createView();
148
    this.parentGroup.get(this.name as string).patchValue = this.patchValue();*/
149
    if (this.data && this.data.length) {
150
      for (let i=0; i<this.data.length; i++ ) {
151
        !this.initEmpty && this.createView();
152
        this.parentGroup.get(this.name as string).patchValue = this.patchValue();
153
      }
154
    } else {
155
      !this.initEmpty && this.createView();
156
      this.parentGroup.get(this.name as string).patchValue = this.patchValue();
157
    }
158

    
159
  }
160

    
161
  get valid() {
162
    return this.parentGroup.valid;//true;//this.registerGroup_.valid;
163
  }
164

    
165

    
166
  protected patchValue() {
167
    let self = this;
168
    return (value: {[key: string]: any}, {onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}) => {
169
      for (let i = (<FormArray>self.parentGroup.get(this.name as string)).length; i < Object.keys(value).length; i++) {
170
        self.createView();
171
        console.log("ADDED NEW GROUP");
172
      }
173
      for (let i = 0; i < Object.keys(value).length; i++) {
174
        self.arrayData_[i].next(value[i]);
175
      }
176
    };
177
  }
178
}
179

    
180
@Component({
181
  selector : 'form-repeat-inline',
182
  template : `
183
    <form-inline [description]="description" [valid]="valid">
184
      <ng-template my-form></ng-template>
185
      <a class="add-new-element" (click)="push()">
186
        <i class="fa fa-plus" aria-hidden="true"></i> Add another
187
      </a>
188
    </form-inline>
189
  `
190

    
191
})
192
export class MyArrayInline extends MyArray {
193
  @Input()
194
  public wrapper : Type<MyWrapper> = MyInlineArrayWrapper;
195

    
196
  @Input()
197
  public description : Description;
198
}
199

    
200

    
201
@Component({
202
  selector : 'form-repeat-wrapper',
203
  template : `
204
    <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade">
205
      <div class="interfaceActionsPanel" style="margin-left: 5px;">
206
        <a (click)="remove()"><i class="fa fa-remove fa-lg"></i></a>
207
      </div>
208
      <ng-template my-form></ng-template>
209
    </div>
210

    
211
  `
212

    
213
})
214
export class MyArrayWrapper extends MyWrapper{
215

    
216
}
217

    
218
@Component({
219
  selector : 'form-inline-repeat-wrapper',
220
  template : `
221
    <div class="uk-grid uk-margin">
222
      <div class="uk-width-5-6">
223
        <ng-template my-form></ng-template>
224
      </div>
225
      <a *ngIf="canDelete" class="remove-element uk-width-1-6" (click)="remove()"><i
226
        class="fa fa-times" aria-hidden="true"></i></a>
227
    </div>
228
  `
229

    
230
})
231
export class MyInlineArrayWrapper extends MyWrapper {
232
}
(1-1/4)