3 files changed, 97 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html
new file mode 100644
index 000000000..fbb16949a
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html
@@ -0,0 +1,14 @@
+<div class="form-wrapper">
+  <form #form="ngForm">
+    <div class="network" *ngFor="let group of groups">
+      <label class="placeholder" [attr.data-tests-id]="'groupLabel'">{{getValueOfLabelInGroup(group,'Group Name')}}</label>
+      <select [(ngModel)]="groupSelection[getValueOfLabelInGroup(group,'Group Name')]" class="form-control input-text"
+              [attr.data-tests-id]="'groupTestId'"
+              id="{{getGroupName(group)}}" name="{{getGroupName(group)}}" required>
+        <option class="placeholder" [value]="undefined" disabled>Select Network</option>
+        <option *ngFor="let singleGroup of getNetworksByNetworkFunctionRole(group) | async"
+        [ngValue]="singleGroup">{{singleGroup["instance-group"]["instance-group-name"]}}</option>
+      </select>
+    </div>
+  </form>
+</div>
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss
new file mode 100644
index 000000000..aa45b34f3
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss
@@ -0,0 +1,17 @@
+.form-wrapper{
+  width:640px;
+  padding-left: 50px;
+  padding-top: 50px;
+  .network{
+    padding-bottom: 30px;
+  }
+  .network {
+    select {
+      font-family: OpenSans-Italic;
+      font-size: 14px;
+      color: #959595 !important;
+    }
+  }
+}
+
+
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
new file mode 100644
index 000000000..46a176984
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
@@ -0,0 +1,66 @@
+import {Component, Input, OnInit, ViewChild} from "@angular/core";
+import {NgRedux, select} from "@angular-redux/store";
+import {AppState} from "../../store/reducers";
+import {ModelInformationItem} from "../../shared/components/model-information/model-information.component";
+import {Observable} from "rxjs/Observable";
+import {NgForm} from "@angular/forms";
+import * as _ from 'lodash';
+
+@Component({
+  selector: "app-network-selector",
+  templateUrl: "./network-selector.component.html",
+  styleUrls: ["./network-selector.component.scss"]
+})
+export class NetworkSelectorComponent implements OnInit {
+  private localStore: NgRedux<AppState>;
+  networkSelection: any;
+  groupSelection :any;
+  @Input() groups: Array<string>;
+  @Input() cloudOwner : string;
+  @Input() cloudRegionId : string;
+  @select(['service', 'networkFunctions'])
+  readonly networkFunctions: Observable<any>;
+
+  @ViewChild('form') form: NgForm;
+
+  constructor(store: NgRedux<AppState>) {
+    this.localStore = store;
+    this.groupSelection = {};
+    console.log(store);
+  }
+
+  getValueOfLabelInGroup(group: any, label: string){
+    let item = _.find(group, {"label": label});
+    if (item) {
+      return item["values"][0];
+    }
+  }
+
+  getNetworksByNetworkFunctionRole(group: any): Observable<string[]> {
+    let filteredItem = this.getValueOfLabelInGroup(group,"Network Collection Function");
+    return this.networkFunctions.map(data => {
+      return (data && data[filteredItem]) || [];
+    });
+  }
+
+  getGroupName(group: ModelInformationItem[]) {
+    return this.getValueOfLabelInGroup(group,"Group Name");
+  }
+
+  /**
+   * [ncf=>aaiResonse]
+   * groups => groupsModel
+   */
+
+  ngOnInit() {
+    let store = this.localStore;
+    this.networkSelection = {};
+
+  }
+}
+
+
+//
+/*
+Info inside redux = {ncfNetworkMap }
+*/