aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/components/form-async
diff options
context:
space:
mode:
authorSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
committerSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
commitff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch)
treeaae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/components/form-async
parentc72d565bb58226b20625b2bce5f0019046bee649 (diff)
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/components/form-async')
-rw-r--r--vid-webpack-master/src/app/components/form-async/form-async.component.ts80
-rw-r--r--vid-webpack-master/src/app/components/form-async/form-async.style.scss15
-rw-r--r--vid-webpack-master/src/app/components/form-async/form-async.template.html67
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>
+