diff options
Diffstat (limited to 'vid-webpack-master/src/app/components/form-async')
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> + |