Improvements to the dropdown feature.

src/app/app.module.ts

@@ -1,21 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { TreeModule } from 'primeng/tree';
+import { DropdownModule } from 'primeng/dropdown';
 import { MainComponent } from './main/main.component';
 import { MainCenterComponent } from './main/main-center/main-center.component';
 import { TreeComponent } from './main/tree/tree.component';
 import { DropdownComponent } from './main/dropdown/dropdown.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent, DropdownComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
+    BrowserAnimationsModule,
     TreeModule,
+    DropdownModule,
     HttpClientModule
   ],
   providers: [],

src/app/main/dropdown/dropdown.component.html

@@ -1,13 +1,4 @@
-<h3 class="ml-2">Please select a model: </h3>
-
-<ng-container *ngIf="selectedXA == ''">
-    <p class="ml-2"></p>
-</ng-container>
-
-<select class="ml-2" ng-model="selectedXA" (change)="selectOptionHandler($event)">
-    <option *ngFor="let model of xaList" ngValue="model.value">{{model.name}}</option>
-</select>
-
-<ng-container *ngIf="selectedXA == 'Test'">
-    <p class="ml-2">No information is available for selected model</p>
-</ng-container>
+<div class="d-flex align-items-center p-2">
+    <h3 class="mr-2">End Item: </h3>
+    <p-dropdown [options]="xaList" [(ngModel)]="selectedEndItem" (onChange)="onChange($event)"></p-dropdown>
+</div>

src/app/main/dropdown/dropdown.component.ts

@@ -1,23 +1,29 @@
 import { Component, OnInit } from '@angular/core';
-import { XAService } from 'src/app/services/XAService.service';
+import { EndItemService } from 'src/app/services/enditem.service';
+import { SelectItem } from 'primeng/api';
 
 @Component({
   selector: 'app-dropdown',
   templateUrl: './dropdown.component.html',
   styleUrls: ['./dropdown.component.css']
 })
-export class DropdownComponent implements OnInit {
-  constructor(private xaService: XAService) { }
+export class DropdownComponent {
 
-  xaList = [{ name: null, value: null }, { name: 'UConn', value: 1 }, { name: 'Test', value: 2 }];
+  constructor(
+    private endItemService: EndItemService
+  ) {}
 
-  selectedXA = '';
+  // TODO replace with backend.
+  xaList: SelectItem[] = [
+    { label: 'None selected', value: null },
+    { label: 'UConn', value: 'Uconn' },
+    { label: 'Test', value: 'Test' }
+  ];
 
-  selectOptionHandler(event: any) {
-    this.selectedXA = event.target.value;
-    this.xaService.changeXA(this.selectedXA);
-  }
+  selectedEndItem = '';
 
-  ngOnInit() {
+  onChange(event: any) {
+    this.endItemService.setEndItem(this.selectedEndItem);
   }
+
 }

src/app/main/main.component.html

@@ -1,6 +1,7 @@
-<app-dropdown></app-dropdown>
-<p></p>
-<div class="d-flex h-100 w-100">
+<div class="bg-secondary">
+    <app-dropdown></app-dropdown>
+</div>
+<div *ngIf="endItemService.endItem$ | async" class="d-flex h-100 w-100" >
     <app-tree></app-tree>
     <app-main-center class="w-100"></app-main-center>
 </div>

src/app/main/main.component.ts

@@ -1,12 +1,16 @@
 import { Component, OnInit } from '@angular/core';
+import { EndItemService } from '../services/enditem.service';
 
 @Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
   styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
-  constructor() { }
+
+  constructor(
+    private endItemService: EndItemService
+  ) { }
 
   ngOnInit() {
   }

src/app/main/tree/tree.component.html

@@ -1,13 +1,7 @@
-<ng-container *ngIf="currentXA != null; else noXA">
-    <p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
-        <ng-template let-node pTemplate="default">
-            <div class="tree">
-                <div class="flex-fill">{{ node.label }}</div>
-            </div>
-        </ng-template>
-    </p-tree>
-</ng-container>
-
-<ng-template #noXA>
-    <p class="ml-2">No XA selected</p>
-</ng-template>
+<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
+    <ng-template let-node pTemplate="default">
+        <div class="tree">
+            <div class="flex-fill">{{ node.label }}</div>
+        </div>
+    </ng-template>
+</p-tree>

src/app/main/tree/tree.component.ts

@@ -3,7 +3,7 @@ import { TreeNode } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import { NodeService } from 'src/app/services/node.service';
 import { TreeService } from 'src/app/services/tree.service';
-import { XAService } from 'src/app/services/XAService.service';
+import { EndItemService } from 'src/app/services/enditem.service';
 
 @Component({
   selector: 'app-tree',
@@ -13,19 +13,18 @@ import { XAService } from 'src/app/services/XAService.service';
 export class TreeComponent implements OnInit, OnDestroy {
 
   private dropdownSubscription: Subscription;
-  currentXA: string;
+
+  selectedEndItem: string;
   filesTree: TreeNode[];
 
   constructor(
     private treeService: TreeService,
     private nodeService: NodeService,
-    private xaService: XAService
+    private endItemService: EndItemService
   ) { }
 
   ngOnInit() {
-    this.dropdownSubscription = this.xaService.xa$.subscribe(async (xa) => {
-      this.currentXA = xa;
-    });
+    this.dropdownSubscription = this.endItemService.endItem$.subscribe(xa =>  this.selectedEndItem = xa);
     this.nodeService.getFiles().then(files => (this.filesTree = files));
   }
 

src/app/services/enditem.service.ts

@@ -0,0 +1,16 @@
+import { BehaviorSubject } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class EndItemService {
+
+    private selectedEndItem = new BehaviorSubject<string>(null);
+    endItem$ = this.selectedEndItem.asObservable();
+
+    setEndItem(endItem: string) {
+        this.selectedEndItem.next(endItem);
+    }
+
+}