chore: modifired xlmaps array in global variables

client/src/app/_globals.ts

@@ -37,6 +37,12 @@ export const initFilter: { filter: FilterCache } = {
   }
 }
 
+export interface XLMapListItem {
+  id: string
+  description: string
+  targetDS: string
+}
+
 /**
  * Cached filtering values across whole app (editor, viewer, viewboxes)
  * Cached lineage libraries, tables
@@ -47,7 +53,7 @@ export const initFilter: { filter: FilterCache } = {
 export const globals: {
   rootParam: string
   dcLib: string
-  xlmaps: string[]
+  xlmaps: XLMapListItem[]
   editor: any
   viewer: any
   viewboxes: ViewboxCache

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

@@ -136,7 +136,11 @@ export class AppService {
           globals.editor.libsAndTables = libsAndTables
         }
 
-        globals.xlmaps = res.xlmaps.map((xlmap: any) => xlmap[0])
+        globals.xlmaps = res.xlmaps.map((xlmap: any) => ({
+          id: xlmap[0],
+          description: xlmap[1],
+          targetDS: xlmap[2]
+        }))
         globals.editor.treeNodeLibraries = treeNodeLibraries
         globals.editor.libraries = libraries
         globals.editor.startupSet = true

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

@@ -32,10 +32,10 @@
         <button
           (click)="xlmapOnClick(xlmap)"
           class="clr-treenode-link"
-          [class.table-active]="isActiveXLMap(xlmap)"
+          [class.table-active]="isActiveXLMap(xlmap.id)"
         >
           <clr-icon shape="file"></clr-icon>
-          {{ xlmap }}
+          {{ xlmap.id }}
         </button>
       </clr-tree-node>
     </ng-container>
@@ -43,7 +43,7 @@
 </app-sidebar>
 
 <div class="content-area">
-  <div *ngIf="!selectedXLMapId" class="no-table-selected">
+  <div *ngIf="!selectedXLMap" class="no-table-selected">
     <clr-icon
       shape="warning-standard"
       size="60"
@@ -68,7 +68,7 @@
     appDragNdrop
     (fileDraggedOver)="onShowUploadModal()"
     class="card h-100 d-flex clr-flex-column"
-    *ngIf="!isLoading && targetDS"
+    *ngIf="!isLoading && selectedXLMap"
   >
     <clr-tabs>
       <clr-tab>
@@ -82,8 +82,29 @@
         </clr-tab-content>
       </clr-tab>
     </clr-tabs>
+
     <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
-    <ng-container *ngTemplateOutlet="title"></ng-container>
+
+    <div class="clr-row m-0 mb-10-i viewerTitle">
+      <h3 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
+        {{ selectedXLMap.id }}
+      </h3>
+      <i class="d-flex clr-col-12 clr-justify-content-center mt-5-i">{{
+        selectedXLMap.description
+      }}</i>
+      <h5 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
+        Rules Source:
+        <a class="ml-10" [routerLink]="'/view/data/' + rulesSource">
+          {{ rulesSource }}
+        </a>
+      </h5>
+      <h5 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
+        Target dataset:
+        <a class="ml-10" [routerLink]="'/view/data/' + selectedXLMap.targetDS">
+          {{ selectedXLMap.targetDS }}
+        </a>
+      </h5>
+    </div>
 
     <div class="clr-flex-1">
       <hot-table
@@ -186,26 +207,6 @@
   </clr-modal>
 </div>
 
-<ng-template #title>
-  <div class="clr-row m-0 mb-10-i viewerTitle">
-    <h3 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
-      {{ selectedXLMapId }}
-    </h3>
-    <h5 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
-      Rules Source:
-      <a class="ml-10" [routerLink]="'/view/data/' + rulesSource">
-        {{ rulesSource }}
-      </a>
-    </h5>
-    <h5 class="d-flex clr-col-12 clr-justify-content-center mt-5-i">
-      Target dataset:
-      <a class="ml-10" [routerLink]="'/view/data/' + targetDS">
-        {{ targetDS }}
-      </a>
-    </h5>
-  </div>
-</ng-template>
-
 <ng-template #actionButtons>
   <div class="clr-row m-0 clr-justify-content-center">
     <div

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

@@ -11,7 +11,7 @@ import {
 import { ActivatedRoute, Router } from '@angular/router'
 import { UploadFile } from '@sasjs/adapter'
 import * as XLSX from '@sheet/crypto'
-import { globals } from '../_globals'
+import { XLMapListItem, globals } from '../_globals'
 import {
   EventService,
   LicenceService,
@@ -69,9 +69,8 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
   public selectedTab = Tabs.Rules
   public rulesSource = globals.dcLib + '.MPE_XLMAP_RULES'
 
-  public xlmaps: string[] = []
-  public selectedXLMapId = ''
-  public targetDS = ''
+  public xlmaps: XLMapListItem[] = []
+  public selectedXLMap: XLMapListItem | undefined = undefined
   public searchString = ''
   public xlmapsLoading = true
   public isLoading = false
@@ -148,19 +147,19 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     return b as File
   }
 
-  public xlmapOnClick(xlmap: string) {
-    if (xlmap !== this.selectedXLMapId) {
-      this.selectedXLMapId = xlmap
+  public xlmapOnClick(xlmap: XLMapListItem) {
+    if (xlmap.id !== this.selectedXLMap?.id) {
+      this.selectedXLMap = xlmap
       this.viewXLMapRules()
-      this.router.navigateByUrl('/home/files/' + xlmap)
+      this.router.navigateByUrl('/home/files/' + xlmap.id)
     }
   }
 
   public xlmapListOnFilter() {
     if (this.searchString.length > 0) {
-      const array: string[] = globals.xlmaps
+      const array: XLMapListItem[] = globals.xlmaps
       this.xlmaps = array.filter((item) =>
-        item.toLowerCase().includes(this.searchString.toLowerCase())
+        item.id.toLowerCase().includes(this.searchString.toLowerCase())
       )
     } else {
       this.xlmaps = globals.xlmaps
@@ -168,7 +167,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
   }
 
   public isActiveXLMap(id: string) {
-    return this.selectedXLMapId === id
+    return this.selectedXLMap?.id === id
   }
 
   public maxWidthChecker(width: any, col: any) {
@@ -306,7 +305,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
   }
 
   public submit() {
-    if (!this.xlData.length) return
+    if (!this.selectedXLMap || !this.xlData.length) return
 
     this.status = Status.Submitting
     this.isLoading = true
@@ -337,7 +336,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     const uploadUrl = 'services/editors/loadfile'
     this.sasService
       .uploadFile(uploadUrl, filesToUpload, {
-        table: this.targetDS
+        table: this.selectedXLMap.targetDS
       })
       .then((res: any) => {
         if (res.sasjsAbort) {
@@ -616,16 +615,16 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
   }
 
   async viewXLMapRules() {
+    if (!this.selectedXLMap) return
+
     this.isLoading = true
     this.isLoadingDesc = 'Loading excel rules'
     this.status = Status.FetchingRules
 
     await this.sasStoreService
-      .getXLMapRules(this.selectedXLMapId)
+      .getXLMapRules(this.selectedXLMap.id)
       .then((res) => {
-        this.targetDS = res.xlmapinfo[0].TARGET_DS
         this.xlmapRules = res.xlmaprules
-
         this.status = Status.ReadyToUpload
       })
       .catch((err) => {
@@ -636,20 +635,18 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     this.isLoadingDesc = ''
   }
 
-  public getFromGlobals() {
-    this.xlmaps = globals.xlmaps
-    this.xlmapsLoading = false
-  }
-
   private load() {
     this.xlmaps = globals.xlmaps
     this.xlmapsLoading = false
 
     const id = this.route.snapshot.params['id']
 
-    if (id && this.xlmaps.includes(id)) {
-      this.selectedXLMapId = id
-      this.viewXLMapRules()
+    if (id) {
+      const xlmapListItem = this.xlmaps.find((item) => item.id === id)
+      if (xlmapListItem) {
+        this.selectedXLMap = xlmapListItem
+        this.viewXLMapRules()
+      }
     }
   }