feat: display list of maps in sidebar

implemented routing module/component for home-routing

client/src/app/_globals.ts

@@ -61,9 +61,10 @@ export const globals: {
     startupSet: <boolean>false,
     treeNodeLibraries: <any[] | null>[],
     libsAndTables: <any[]>[],
-    libraries: <String[] | undefined>[],
+    libraries: <string[] | undefined>[],
     library: <string>'',
     table: <string>'',
+    xlmaps: <string[] | undefined>[],
     filter: <FilterCache>{
       cols: <any[]>[],
       vals: <any[]>[],

client/src/app/app.routing.ts

@@ -4,19 +4,19 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 import { ModuleWithProviders } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
+import { RouterModule, Routes } from '@angular/router'
 
-import { HomeComponent } from './home/home.component'
 import { NotFoundComponent } from './not-found/not-found.component'
 
+import { DeployModule } from './deploy/deploy.module'
+import { EditorModule } from './editor/editor.module'
+import { HomeModule } from './home/home.module'
+import { LicensingModule } from './licensing/licensing.module'
+import { ReviewModule } from './review/review.module'
 import { ReviewRouteComponent } from './routes/review-route/review-route.component'
 import { StageModule } from './stage/stage.module'
-import { EditorModule } from './editor/editor.module'
-import { ViewerModule } from './viewer/viewer.module'
-import { ReviewModule } from './review/review.module'
-import { DeployModule } from './deploy/deploy.module'
-import { LicensingModule } from './licensing/licensing.module'
 import { SystemModule } from './system/system.module'
+import { ViewerModule } from './viewer/viewer.module'
 
 /**
  * Defining routes
@@ -45,7 +45,7 @@ export const ROUTES: Routes = [
     path: 'licensing',
     loadChildren: () => LicensingModule
   },
-  { path: 'home', component: HomeComponent },
+  { path: 'home', loadChildren: () => HomeModule },
   {
     /**
      * Load editor module with subroutes

client/src/app/home/home-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { HomeRouteComponent } from '../routes/home-route/home-route.component'
+import { HomeComponent } from './home.component'
+import { XLMapComponent } from '../xlmap/xlmap.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeRouteComponent,
+    children: [
+      { path: '', pathMatch: 'full', redirectTo: 'tables' },
+      { path: 'tables', component: HomeComponent },
+      { path: 'files', component: XLMapComponent }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule {}

client/src/app/home/home.module.ts

@@ -1,15 +1,19 @@
-import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { HomeComponent } from './home.component'
-import { ClarityModule } from '@clr/angular'
+import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
+import { ClarityModule } from '@clr/angular'
 import { AppSharedModule } from '../app-shared.module'
-import { DcTreeModule } from '../shared/dc-tree/dc-tree.module'
 import { DirectivesModule } from '../directives/directives.module'
+import { HomeRouteComponent } from '../routes/home-route/home-route.component'
+import { DcTreeModule } from '../shared/dc-tree/dc-tree.module'
+import { HomeRoutingModule } from './home-routing.module'
+import { HomeComponent } from './home.component'
+import { XLMapComponent } from '../xlmap/xlmap.component'
 
 @NgModule({
-  declarations: [HomeComponent],
+  declarations: [HomeComponent, HomeRouteComponent, XLMapComponent],
   imports: [
+    HomeRoutingModule,
     FormsModule,
     ClarityModule,
     AppSharedModule,

client/src/app/routes/home-route/home-route.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

client/src/app/routes/home-route/home-route.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+
+@Component({
+  selector: 'app-home-route',
+  templateUrl: './home-route.component.html',
+  styleUrls: ['./home-route.component.scss'],
+  host: {
+    class: 'content-container'
+  }
+})
+export class HomeRouteComponent implements OnInit, OnDestroy {
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngOnDestroy() {}
+}

client/src/app/services/app.service.ts

@@ -74,6 +74,7 @@ export class AppService {
           missingProps.push('Globvars')
         if (!res.sasdatasets) missingProps.push('Sasdatasets')
         if (!res.saslibs) missingProps.push('Saslibs')
+        if (!res.xlmaps) missingProps.push('XLMaps')
 
         if (missingProps.length > 0) {
           startupServiceError = true
@@ -135,6 +136,8 @@ export class AppService {
           globals.editor.libsAndTables = libsAndTables
         }
 
+        globals.editor.xlmaps = res.xlmaps.map((xlmap: any) => xlmap[0])
+
         globals.editor.treeNodeLibraries = treeNodeLibraries
         globals.editor.libraries = libraries
         globals.editor.startupSet = true

client/src/app/xlmap/xlmap.component.html

@@ -0,0 +1,35 @@
+<app-sidebar>
+  <clr-tree>
+    <clr-tree-node class="search-node">
+      <div class="tree-search-wrapper">
+        <input
+          clrInput
+          #searchXLMapTreeInput
+          placeholder="Filter by Id"
+          name="input"
+          [(ngModel)]="searchString"
+          (keyup)="mapListOnFilter()"
+          autocomplete="off"
+        />
+        <clr-icon
+          *ngIf="searchXLMapTreeInput.value.length < 1"
+          shape="search"
+        ></clr-icon>
+        <clr-icon
+          *ngIf="searchXLMapTreeInput.value.length > 0"
+          (click)="searchString = ''; mapListOnFilter()"
+          shape="times"
+        ></clr-icon>
+      </div>
+    </clr-tree-node>
+
+    <ng-container *ngFor="let xlmap of xlmaps">
+      <clr-tree-node (click)="xlmapOnClick(xlmap)">
+        <p class="m-0 cursor-pointer list-padding">
+          <clr-icon shape="file"></clr-icon>
+          {{ xlmap }}
+        </p>
+      </clr-tree-node>
+    </ng-container>
+  </clr-tree>
+</app-sidebar>

client/src/app/xlmap/xlmap.component.ts

@@ -0,0 +1,40 @@
+import { Component, AfterContentInit } from '@angular/core'
+import { globals } from '../_globals'
+import { EventService } from '../services'
+
+@Component({
+  selector: 'app-xlmap',
+  templateUrl: './xlmap.component.html',
+  styleUrls: ['./xlmap.component.scss']
+})
+export class XLMapComponent implements AfterContentInit {
+  public xlmaps: string[] = []
+  public searchString = ''
+  public loading = true
+
+  constructor(private eventService: EventService) {}
+
+  public xlmapOnClick(xlmap: any) {
+    // todo/current: implement logic
+  }
+
+  public mapListOnFilter() {
+    // todo/current: implement logic
+  }
+
+  public getFromGlobals() {
+    this.xlmaps = globals.editor.xlmaps
+
+    this.loading = false
+  }
+
+  ngAfterContentInit(): void {
+    if (globals.editor.startupSet) {
+      this.getFromGlobals()
+    } else {
+      this.eventService.onStartupDataLoaded.subscribe(() => {
+        this.getFromGlobals()
+      })
+    }
+  }
+}