Restructured code components. Addd tree service to allow node updates…

… to be listened to.

Added bootstrap + jquery for style simplicity.
Changed tree data from string to object (including target pdf name).

angular.json

@@ -25,11 +25,15 @@
             ],
             "styles": [
               "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/primeng/resources/themes/nova-light/theme.css",
               "node_modules/primeng/resources/primeng.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -148,6 +152,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "SystemNavigationFrontend"
 }

package.json

@@ -26,7 +26,9 @@
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
+    "bootstrap": "^4.4.1",
     "chart.js": "^2.9.3",
+    "jquery": "^3.4.1",
     "primeicons": "^2.0.0",
     "primeng": "^8.1.1",
     "quill": "^1.3.7",

src/app/app.component.html

@@ -1,5 +1 @@
-<div class="container">
-  <div class="row">
-    <app-tree></app-tree>
-  </div>
-</div>
+<app-main></app-main>

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ResourceService } from './services/api/resource.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-root',
@@ -12,7 +13,7 @@ export class AppComponent implements OnInit {
 
   constructor(
     private resourceService: ResourceService
-  ) {}
+  ) { }
 
   ngOnInit() {
     // Example usage of resource service.
@@ -26,7 +27,10 @@ export class AppComponent implements OnInit {
       console.log('Adblock prevents it from opening');
       // window.open(url);
     })
-      .catch(err => console.log(err));
+      .catch((err: HttpErrorResponse) => {
+        console.log('Error occurred with status value', err.status);
+        console.log(err);
+      });
   }
 
 }

src/app/app.module.ts

@@ -1,31 +1,24 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { NgModule } from "@angular/core";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
 
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-import { TreeComponent } from "./tree/tree.component";
-import { ButtonModule, MessageService, TreeModule } from "primeng/primeng";
-import { MainComponent } from "./main/main.component";
-import { CenterComponent } from "./center/center.component";
-import { LeftComponent } from "./left/left.component";
-import { HttpClientModule } from "@angular/common/http";
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { ButtonModule, MessageService, TreeModule } from 'primeng/primeng';
+import { HttpClientModule } from '@angular/common/http';
+import { MainComponent } from './main/main.component';
+import { MainCenterComponent } from './main/main-center/main-center.component';
+import { TreeComponent } from './main/tree/tree.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    TreeComponent,
-    MainComponent,
-    CenterComponent,
-    LeftComponent
-  ],
+  declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     TreeModule,
     HttpClientModule,
     ButtonModule
   ],
-  providers: [MessageService],
+  providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }

src/app/main/main-center/main-center.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngIf="this.currentNode != null; else noNode">
+    <p>Current node is {{this.currentNode.label}}</p>
+    <!-- Add pdf container here -->
+</ng-container>
+
+<ng-template #noNode>
+    <p>No node selected</p>
+</ng-template>

src/app/center/center.component.spec.ts → src/app/main/main-center/main-center.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CenterComponent } from './center.component';
+import { MainCenterComponent } from './main-center.component';
 
-describe('CenterComponent', () => {
-  let component: CenterComponent;
-  let fixture: ComponentFixture<CenterComponent>;
+describe('MainCenterComponent', () => {
+  let component: MainCenterComponent;
+  let fixture: ComponentFixture<MainCenterComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CenterComponent ]
+      declarations: [ MainCenterComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CenterComponent);
+    fixture = TestBed.createComponent(MainCenterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/main/main-center/main-center.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { TreeService } from 'src/app/services/tree.service';
+import { Subscription } from 'rxjs';
+import { TreeNode } from 'primeng/api';
+import { ResourceService } from 'src/app/services/api/resource.service';
+import { HttpErrorResponse } from '@angular/common/http';
+
+@Component({
+  selector: 'app-main-center',
+  templateUrl: './main-center.component.html',
+  styleUrls: ['./main-center.component.css']
+})
+export class MainCenterComponent implements OnInit, OnDestroy {
+
+  private treeSubscription: Subscription;
+  currentNode: TreeNode;
+
+  constructor(
+    private treeService: TreeService,
+    private resourceService: ResourceService
+  ) { }
+
+  ngOnInit() {
+    this.treeSubscription = this.treeService.node$.subscribe(async (node) => {
+      if (node == null) {
+        return;
+      }
+      console.log('Selected node is', node);
+      this.currentNode = node;
+      const data = node.data as { pdfName: string };
+      try {
+        console.log('I will load', data.pdfName);
+        const pdfData = await this.resourceService.getResourcePDF(data.pdfName);
+        // render pdf to screen
+
+      } catch (err) {
+        console.log(err);
+        if ((err as HttpErrorResponse).status === 404) {
+          // handle not found
+        }
+      }
+
+    });
+  }
+
+  ngOnDestroy() {
+    this.treeSubscription.unsubscribe();
+  }
+}

src/app/main/main.component.html

@@ -1 +1,2 @@
-<p>main works!</p>
+<app-tree></app-tree>
+<app-main-center></app-main-center>

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

@@ -0,0 +1 @@
+<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)"></p-tree>

src/app/left/left.component.spec.ts → src/app/main/tree/tree.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LeftComponent } from './left.component';
+import { TreeComponent } from './tree.component';
 
-describe('LeftComponent', () => {
-  let component: LeftComponent;
-  let fixture: ComponentFixture<LeftComponent>;
+describe('TreeComponent', () => {
+  let component: TreeComponent;
+  let fixture: ComponentFixture<TreeComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LeftComponent ]
+      declarations: [ TreeComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LeftComponent);
+    fixture = TestBed.createComponent(TreeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { NodeService } from 'src/app/node.service';
+import { TreeService } from 'src/app/services/tree.service';
+
+@Component({
+  selector: 'app-tree',
+  templateUrl: './tree.component.html',
+  styleUrls: ['./tree.component.css']
+})
+export class TreeComponent implements OnInit {
+
+  filesTree: TreeNode[];
+
+  constructor(
+    private treeService: TreeService,
+    private nodeService: NodeService
+  ) { }
+
+  ngOnInit() {
+    this.nodeService.getFiles().then(files => (this.filesTree = files));
+  }
+
+  nodeSelect(event: { node: TreeNode }) {
+    this.treeService.changeNode(event.node);
+  }
+
+}

src/app/node.service.ts

@@ -1,16 +1,14 @@
-import {HttpClient, HttpClientModule} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
 import { TreeNode } from 'primeng/api';
 
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
 export class NodeService {
 
   constructor(private http: HttpClient) { }
 
-  getFiles() {
-    return this.http.get<any>('http://localhost:4200/assets/files.json')
-      .toPromise()
-      .then(res => res.data as TreeNode[]);
+  async getFiles() {
+    return (await this.http.get<any>('http://localhost:4200/assets/files.json').toPromise()).data as TreeNode[];
   }
 }

src/app/services/api/resource.service.ts

@@ -32,6 +32,9 @@ export class ResourceService extends APIService {
     }
 
     getResourcePDF(key: string) {
+        if (key == null) {
+            throw new TypeError('Key must not be null!');
+        }
         return this.get(`pdf/${key}`, {
             responseType: 'arraybuffer'
         });

src/app/services/tree.service.ts

@@ -0,0 +1,16 @@
+import { BehaviorSubject } from 'rxjs';
+import { TreeNode } from 'primeng/api';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TreeService {
+
+  private nodeChange = new BehaviorSubject<TreeNode>(null);
+  node$ = this.nodeChange.asObservable();
+
+  changeNode(newNode: TreeNode) {
+    this.nodeChange.next(newNode);
+  }
+}