finalized create-pe-it form and api

Author: joschne

client/src/app/modules/information/components/create-pe-it-form/create-pe-it-form.component.html

@@ -1,5 +1,7 @@
-<div class="gv-create-new">
+<form *ngIf="formGroup" [connect]="['information', 'entityCreateNew', 'formValue']" [formGroup]="formGroup" (ngSubmit)="submit()">
 
-  <gv-pe-it [parentPath]="basePath"></gv-pe-it>
+  <div class="form-group">
+    <gv-pe-it *ngIf="formGroup.get(formCtrlName)" [parentPath]="basePath" [formControlName]="formCtrlName"></gv-pe-it>
+  </div>
 
-</div>
+</form>

client/src/app/modules/information/components/create-pe-it-form/create-pe-it-form.component.scss

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { EntityAddModalComponent } from '../entity-add-modal/entity-add-modal.component';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { InfPersistentItem, EntityEditorService, InfPersistentItemApi, Project, InfEntityProjectRel } from 'app/core';
@@ -13,29 +13,32 @@ import { StateCreatorService } from '../../shared/state-creator.service';
 import { StateToDataService } from '../../shared/state-to-data.service';
 import { entityCreateNewReducer } from './entity-add-create-new.reducer';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
 
-@AutoUnsubscribe()
+@AutoUnsubscribe({
+  includeArrays: true
+})
 @Component({
   selector: 'gv-entity-add-create-new',
   templateUrl: './entity-add-create-new.component.html',
-  styleUrls: ['./entity-add-create-new.component.scss']
+  styleUrls: ['./entity-add-create-new.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EntityAddCreateNewComponent implements OnInit {
 
   readonly basePath = ['information', 'entityCreateNew']
   getBasePath = () => this.basePath
   localStore: ObservableStore<IEntityCreateNewState>;
 
-
-  @select() peItState$: Observable<IPeItState>;
-
-  peItToCreate: InfPersistentItem;
   loading: boolean = false;
   errorMessages: any;
 
-  isReadyToCreate: boolean;
+  formGroup: FormGroup;
 
-  pkEntity: number;
+  formCtrlName = 'persistent_item';
+
+  subs: Subscription[] = [];
 
   constructor(
     private persistentItemApi: InfPersistentItemApi,
@@ -44,42 +47,79 @@ export class EntityAddCreateNewComponent implements OnInit {
     private slimLoadingBarService: SlimLoadingBarService,
     private ngRedux: NgRedux<IEntityCreateNewState>,
     private actions: EntityCreateNewActions,
-    private stateCreator: StateCreatorService
+    private stateCreator: StateCreatorService,
+    private fb: FormBuilder,
+    private ref: ChangeDetectorRef
   ) {
     this.localStore = this.ngRedux.configureSubStore(this.basePath, entityCreateNewReducer);
 
+    this.formGroup = this.fb.group({})
+    // subscribe to the form
+    this.subs.push(this.formGroup.valueChanges.subscribe(val=>{
+      if(this.formGroup.valid){
+        this.onPeItReadyToCreate(val[this.formCtrlName])
+      }else{
+        this.onPeItNotReadyToCreate();
+      }
+
+    }))
   }
 
+
   ngOnInit() {
 
     this.modalService.previousState = EntityAddModalState[1];
 
     this.modalService.modalTitle = "Create a new " + this.modalService.selectedClass.dfh_standard_label
 
+    this.modalService.addButtonVisible = false;
 
-    this.ngRedux.select<Project>('activeProject').subscribe(project => {
-      this.stateCreator.initializePeItToCreate(this.modalService.selectedClass.dfh_pk_class).subscribe(peItState => {
-        let wrapper = new EntityCreateNewState({
-          peItState: peItState
-        });
+    // Init the state
+    const sub1 = this.stateCreator.initializePeItToCreate(this.modalService.selectedClass.dfh_pk_class, this.modalService.searchString).subscribe(peItState => {
+      let wrapper = new EntityCreateNewState({
+        peItState: peItState
+      });
 
-        this.localStore.dispatch(this.actions.entityCreateNewInitialized(wrapper));
+      this.localStore.dispatch(this.actions.entityCreateNewInitialized(wrapper));
+    })
+    this.subs.push(sub1)
+
+    // wait for the peItState and activeProject to configure the form
+    const sub2 = Observable.combineLatest(
+      this.localStore.select<IPeItState>('peItState'),
+      this.ngRedux.select<Project>('activeProject')
+    ).subscribe(results => {
+      const peItState = results[0], project = results[1];
+      if (peItState) {
+
+        this.formGroup.addControl(this.formCtrlName, new FormControl(
+          peItState.peIt,
+          [
+            Validators.required
+          ]
+        ))
+
+        this.ref.detectChanges();
+      }
+
+
+      //TEMP
+      // let epr = new  InfEntityProjectRel;
+      // epr.fk_project = project.pk_project;
+      // StateToDataService.peItStateToPeItToRelate(peItState, epr)
+    })
 
-        this.modalService.addButtonVisible = true;
+    this.subs.push(sub2)
 
-        //TEMP
-        // let epr = new  InfEntityProjectRel;
-        // epr.fk_project = project.pk_project;
-        // StateToDataService.peItStateToPeItToRelate(peItState, epr)
-
-        this.peItState$.subscribe(d => this.modalService.peItStateToAdd = d)
-      })
-    })
+    // this.peItState$.subscribe(d => this.modalService.peItStateToAdd = d)
 
 
   }
 
   ngOnDestroy() {
+    this.ref.detach()
+    this.subs.forEach(sub => { sub.unsubscribe() })
+
     this.localStore.dispatch(this.actions.entityCreateNewDestroyed())
   }
 

client/src/app/modules/information/components/create-pe-it-form/create-pe-it-form.component.spec.ts

@@ -43,21 +43,6 @@ export class PeItEntityAddComponent implements OnInit {
 
 
   constructor(
-    // peItApi: InfPersistentItemApi,
-    // peItService: PeItService,
-    // propertyPipe: PropertyPipe,
-    // activePeItService: ActivePeItService,
-    // slimLoadingBarService: SlimLoadingBarService,
-    // entityEditor: EntityEditorService,
-    // changeDetector: ChangeDetectorRef,
-    // actions: PeItActions,
-    // ngRedux: NgRedux<IPeItState>,
-    // classService: ClassService,
-    // roleService: RoleService,
-    // propertyService: PropertyService,
-    // private router: Router,
-    // private route: ActivatedRoute,
-    // roleSetListService: RoleSetListService
     private modalService: NgbModal,
     private entityAddModalService: EntityAddModalService
   ) {