New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

3 files changed, 162 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/components/form-async/form-async.component.ts b/vid-webpack-master/src/app/components/form-async/form-async.component.ts
new file mode 100644
index 000000000..e71c4446b
--- /dev/null
+++ b/vid-webpack-master/src/app/components/form-async/form-async.component.ts
@@ -0,0 +1,80 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import { NgRedux, select } from '@angular-redux/store';
+import { Observable } from "rxjs/Observable";
+import { updateProductFamilies } from "../../service.actions";
+import { AppState } from "../../store/reducers";
+import {
+  loadProductFamiliesAction, loadLcpTenant, loadAicZones,
+  loadCategoryParameters
+} from '../../services/aaiService/aai.actions';
+import { LcpRegionsAndTenants } from "../../shared/models/lcpRegionsAndTenants";
+import {NgForm} from "@angular/forms";
+import {SelectOption} from "../../shared/models/selectOption";
+import {VNFModel} from "../../shared/models/vnfModel";
+
+@Component({
+  selector: "formasync",
+  templateUrl: "form-async.template.html",
+  styleUrls: ["form-async.style.scss"],
+
+})
+
+export class formasync implements OnInit {
+
+  constructor(private store: NgRedux<AppState>) { }
+
+  @ViewChild('form') form: NgForm;
+
+  @Input()
+  set model(model: VNFModel) {
+    if (model) {
+      this.isUserProvidedNaming = model.isUserProvidedNaming;
+    }
+  };
+
+  @select(['service', 'productFamilies'])
+  readonly productFamilies: Observable<any>;
+
+  @select(['service', 'lcpRegionsAndTenants'])
+  readonly lcpRegionsAndTenants: Observable<any>;
+
+  @select(['service', 'lcpRegionsAndTenants', 'lcpRegionList'])
+  readonly lcpRegions: Observable<any>;
+
+  @select(['service', 'aicZones'])
+  readonly aicZones: Observable<any>;
+
+  @select(['service', 'categoryParameters', 'platformList'])
+  readonly platformList: Observable<any>;
+
+  @select(['service', 'categoryParameters', 'lineOfBusinessList'])
+  readonly lineOfBusinessList: Observable<any>;
+
+  rollbackOnFailure = [
+    new SelectOption({id: 'true', name: 'Rollback'}),
+    new SelectOption({id: 'false', name: 'Don\'t Rollback'})
+  ];
+  tenants = [];
+
+  serviceInstance: any = {
+    rollback:'true'
+  };
+
+  isUserProvidedNaming: boolean = false;
+
+  onLcpSelect(newValue: string) {
+    let value: LcpRegionsAndTenants = undefined;
+    this.lcpRegionsAndTenants.subscribe(data => value = data);
+    this.tenants = value.lcpRegionsTenantsMap[newValue];
+  }
+
+  ngOnInit() {
+    this.store.dispatch(loadProductFamiliesAction());
+    this.store.dispatch(loadLcpTenant());
+    this.store.dispatch(loadAicZones());
+    this.store.dispatch(loadCategoryParameters());
+  }
+}
+
+
+
diff --git a/vid-webpack-master/src/app/components/form-async/form-async.style.scss b/vid-webpack-master/src/app/components/form-async/form-async.style.scss
new file mode 100644
index 000000000..e6c89bcae
--- /dev/null
+++ b/vid-webpack-master/src/app/components/form-async/form-async.style.scss
@@ -0,0 +1,15 @@
+.form-wrapper{
+  width:640px;
+  padding-left: 50px;
+  padding-top: 50px;
+  .details-item{
+    padding-bottom: 30px;
+  }
+  .details-item {
+    select {
+      font-family: OpenSans-Italic;
+      font-size: 14px;
+      color: #959595 !important;
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/components/form-async/form-async.template.html b/vid-webpack-master/src/app/components/form-async/form-async.template.html
new file mode 100644
index 000000000..c63a7bee6
--- /dev/null
+++ b/vid-webpack-master/src/app/components/form-async/form-async.template.html
@@ -0,0 +1,67 @@
+<div class="content">
+  <form #form="ngForm" name="networkNodeForm" class="form-wrapper">
+    <div *ngIf="isUserProvidedNaming" class="details-item">
+      <label class="placeholder">Instance name*</label>
+      <input [attr.data-tests-id]="'instanceName'" id="instance-name" [(ngModel)]="serviceInstance.instanceName" name="instance-name"
+        class="form-control input-text" placeholder="Type Instance Name" type="text" required>
+    </div>
+
+    <div class="details-item">
+      <label>Product family</label>
+      <select class="form-control input-text" [(ngModel)]="serviceInstance.productFamily" data-tests-id="productFamily" id="product-family-select"
+        name="product-family-select">
+        <option class="placeholder" [value]="undefined" disabled>Select Product Family</option>
+        <option *ngFor="let productFamily of productFamilies | async" [value]="productFamily.id" [disabled]="!productFamily.isPermitted">{{productFamily.name}}</option>
+      </select>
+    </div>
+
+    <div class="details-item">
+      <label>LCP region:*</label>
+      <select (change)="onLcpSelect($event.target.value)" class="form-control input-text" [(ngModel)]="serviceInstance.lcpRegion"
+        name="lcpRegion" id="lcpRegion-select" data-tests-id="lcpRegion" required>
+        <option class="placeholder1" [value]="undefined" disabled>Select LCP Region</option>
+        <option *ngFor="let lcpRegion of lcpRegions | async" [value]="lcpRegion.id" [disabled]="!lcpRegion.isPermitted" class="lcpRegionOption">{{lcpRegion.id}}</option>
+      </select>
+    </div>
+    <div class="details-item">
+      <label>Tenant:*</label>
+      <select class="form-control input-text" [(ngModel)]="serviceInstance.tenantId" name="tenant" id="tenant-select" data-tests-id="tenant"
+        required>
+        <option class="placeholder1" [value]="undefined" disabled>Select Tenant</option>
+        <option *ngFor="let tenant of tenants" [value]="tenant.id" [disabled]="!tenant.isPermitted">{{tenant.name}}</option>
+      </select>
+    </div>
+
+    <div class="details-item">
+      <label>AIC Zone:</label>
+      <select class="form-control input-text" name="aicZone" id="aicZone-select" data-tests-id="aic_zone" [(ngModel)]="serviceInstance.aicZone">
+        <option class="placeholder1" [value]="undefined" disabled>Select AIC Zone</option>
+        <option class="aicZoneOption" *ngFor="let aicZone of aicZones | async" [value]="aicZone.id">{{aicZone.name}}</option>
+      </select>
+    </div>
+    <div class="details-item">
+      <label>Platform:</label>
+      <select data-tests-id="platform" class="form-control input-text" name="platform" id="platform" [(ngModel)]="serviceInstance.platformName">
+        <option class="placeholder1" [value]="undefined" disabled>Select Platform</option>
+        <option *ngFor="let platform of platformList | async" [value]="platform.id">{{platform.name}}</option>
+      </select>
+    </div>
+
+    <div class="details-item">
+      <label>Line Of Business:*</label>
+      <select data-tests-id="lineOfBusiness" class="form-control input-text" [(ngModel)]="serviceInstance.lineOfBusiness"
+        name="owningEntity" id="owningEntity" required>
+        <option class="placeholder1" [value]="undefined" disabled>Select Line Of Business</option>
+        <option *ngFor="let lineOfBusiness of lineOfBusinessList | async" [value]="lineOfBusiness.id">{{lineOfBusiness.name}}</option>
+      </select>
+    </div>
+    <div class="details-item">
+      <label>Rollback On Failure:</label>
+      <select data-tests-id="suppressRollback" class="form-control input-text" name="rollbackOnFailure" id="rollbackOnFailure" [(ngModel)]="serviceInstance.rollback">
+        <option *ngFor="let option of rollbackOnFailure" [value]="option.id">{{option.name}}</option>
+      </select>
+    </div>
+  </form>
+
+</div>
+