chore(release): 6.4.0 [skip ci]

# [6.4.0](https://git.datacontroller.io/dc/dc/compare/v6.3.1...v6.4.0) (2024-01-24)

### Bug Fixes

* add dcLib to globals ([5d93346](5d93346b52))
* add service to get xlmap rules and fixed interface name ([9ffa30a](9ffa30ab74))
* increasing length of mpe_excel_map cols to ([2d4d068](2d4d068413))
* providing info on mapids to FE ([fd94945](fd94945466))
* removing tables from EDIT menu that are in xlmaps ([9550ae4](9550ae4d11))
* removing XLMAP_TARGETLIBDS from mpe_xlmaps_rules table ([93702c6](93702c63dc))
* renaming TABLE macvar to LOAD_REF in postdata.sas ([01915a2](01915a2db9))
* reverting xlmap in getdata change ([2d6e747](2d6e747db9))
* update edit tab to load ([516e5a2](516e5a2062))

### Features

* adding ability to define the target table for excel maps ([c86fba9](c86fba9dc7))
* adding ismap attribute to getdata response (and fixing test) ([2702bb3](2702bb3c84))
* Complex Excel Uploads ([cf19381](cf19381060)), closes [#69](#69)
* Create Tables / Files dropdown under load tab ([b473b19](b473b198a6))
* display list of maps in sidebar ([5aec024](5aec024242))
* implemented the logic for xlmap component ([50696bb](50696bb926))
* model changes for [#69](#69) ([271543a](271543a446))
* new getxlmaps service to return rules for a particular xlmap_id ([56264ec](56264ecc69))
* validating the excel map after stage (adding load-ref) ([a485c3b](a485c3b787))

.gitea/workflows/build.yaml

@@ -1,5 +1,5 @@
 name: Build
-run-name: Running Lint Check
+run-name: Running Lint Check and Licence checker on Pull Request
 on: [pull_request]
 
 jobs:
@@ -18,4 +18,11 @@ jobs:
         env:
           NPMRC: ${{ secrets.NPMRC}}
 
-      - run: npm run lint:check
+      - name: Lint check
+        run: npm run lint:check
+
+      - name: Licence checker
+        run: |
+          cd client
+          npm ci
+          npm run license-checker

.gitea/workflows/development-test.yaml

@@ -1,223 +0,0 @@
-name: Test
-run-name: Building and testing development branch
-on:
-  push:
-    branches:
-      - development
-
-jobs:
-  Build-production-and-ng-test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Write .npmrc file
-        run: |
-         touch client/.npmrc
-         echo '${{ secrets.NPMRC}}' > client/.npmrc
-
-      - name: Install Chrome for Angular tests
-        run: apt-get update
-        run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-        run: apt install -y ./google-chrome*.deb;
-        run: export CHROME_BIN=/usr/bin/google-chrome
-
-      - name: Write cypress credentials
-        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
-        shell: bash
-        env:
-          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Check audit
-      # Audit should fail and stop the CI if critical vulnerability found
-        run: |
-          npm audit --audit-level=critical
-          cd ./sas
-          npm audit --audit-level=critical
-          cd ./client
-          npm audit --audit-level=critical
-
-      - name: Angular Tests
-        run: |
-          npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
-
-      - name: Angular Production Build
-        run: |
-          npm run postinstall
-          npm run build
-
-  Build-and-test-development:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Write .npmrc file
-        run: |
-         touch client/.npmrc
-         echo '${{ secrets.NPMRC}}' > client/.npmrc
-
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
-      - run: apt -y install jq
-
-      - name: Write cypress credentials
-        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
-        shell: bash
-        env:
-          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
-
-      - name: Deploy mocked services
-        run: |
-          cd ./sas/mocks/sasjs
-          npm install -g @sasjs/cli
-          npm install -g replace-in-files-cli
-          sasjs cbd -t server-ci
-          # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
-
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
-      - name: Prepare and run frontend and cypress
-        run: |
-          cd ./client
-          mv ./cypress.env.example.json ./cypress.env.json
-          replace-in-files --regex='"username".*' --replacement='"username":"'${{ secrets.CYPRESS_USERNAME_SASJS }}'",' ./cypress.env.json
-          replace-in-files --regex='"password".*' --replacement='"password":"'${{ secrets.CYPRESS_PWD_SASJS }}'" ' ./cypress.env.json
-          cat ./cypress.env.json
-          npm run postinstall
-          # Prepare index.html to SASJS local
-          replace-in-files --regex='serverUrl=".*?"' --replacement='serverUrl="http://localhost:5000"' ./src/index.html
-          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
-          replace-in-files --regex='serverType=".*?"' --replacement='serverType="SASJS"' ./src/index.html
-          replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
-          cat ./cypress.config.ts
-          # Start frontend and run cypress
-          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
-
-      - name: Zip Cypress videos
-        if: always()
-        run: |
-          zip -r cypress-videos ./client/cypress/videos
-
-      - name: Cypress videos artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress-videos.zip
-          path: cypress-videos.zip
-
-  Build-and-test-development-latest-adapter:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Write .npmrc file
-        run: echo "$NPMRC" > client/.npmrc
-        shell: bash
-        env:
-          NPMRC: ${{ secrets.NPMRC}}
-
-      - run: apt-get update
-      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-      - run: apt install -y ./google-chrome*.deb;
-      - run: export CHROME_BIN=/usr/bin/google-chrome
-      - run: apt-get update -y
-      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
-      - run: apt -y install jq
-
-      - name: Write cypress credentials
-        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
-        shell: bash
-        env:
-          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      # Install pm2 and prepare SASJS server
-      - run: npm i -g pm2
-      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
-      - run: unzip linux.zip
-      - run: touch .env
-      - run: echo RUN_TIMES=js >> .env
-      - run: echo NODE_PATH=node >> .env
-      - run: echo CORS=enable >> .env
-      - run: echo WHITELIST=http://localhost:4200 >> .env
-      - run: cat .env
-      - run: pm2 start api-linux --wait-ready
-
-      - name: Deploy mocked services
-        run: |
-          cd ./sas/mocks/sasjs
-          npm install -g @sasjs/cli
-          npm install -g replace-in-files-cli
-          sasjs cbd -t server-ci
-
-      - name: Install ZIP
-        run: |
-          apt-get update
-          apt-get install zip
-
-      - name: Prepare and run frontend and cypress
-        run: |
-          cd ./client
-          mv ./cypress.env.example.json ./cypress.env.json
-          replace-in-files --regex='"username".*' --replacement='"username":"'${{ secrets.CYPRESS_USERNAME_SASJS }}'",' ./cypress.env.json
-          replace-in-files --regex='"password".*' --replacement='"password":"'${{ secrets.CYPRESS_PWD_SASJS }}'" ' ./cypress.env.json
-          cat ./cypress.env.json
-          npm run postinstall
-          npm install @sasjs/adapter@latest
-          # Prepare index.html to SASJS local
-          replace-in-files --regex='serverUrl=".*?"' --replacement='serverUrl="http://localhost:5000"' ./src/index.html
-          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
-          replace-in-files --regex='serverType=".*?"' --replacement='serverType="SASJS"' ./src/index.html
-          replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
-          cat ./cypress.config.ts
-          # Start frontend and run cypress
-          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
-
-      - name: Zip Cypress videos
-        if: always()
-        run: |
-          zip -r cypress-videos ./client/cypress/videos
-
-      - name: Cypress videos artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress-videos-latest-adapter.zip
-          path: cypress-videos.zip

.gitea/workflows/release.yaml

@@ -1,19 +1,157 @@
 name: Release
-run-name: Releasing DC
+run-name: Testing and Releasing DC
 on:
   push:
     branches:
       - main
 
 jobs:
-  release:
+  Build-production-and-ng-test:
     runs-on: ubuntu-latest
+
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 18
 
+      - name: Write .npmrc file
+        run: |
+         touch client/.npmrc
+         echo '${{ secrets.NPMRC}}' > client/.npmrc
+
+      - name: Install Chrome for Angular tests
+        run: |
+          apt-get update
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          apt install -y ./google-chrome*.deb;
+          export CHROME_BIN=/usr/bin/google-chrome
+
+      - name: Write cypress credentials
+        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
+        shell: bash
+        env:
+          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check audit
+      # Audit should fail and stop the CI if critical vulnerability found
+        run: |
+          npm audit --audit-level=critical --omit=dev
+          cd ./sas
+          npm audit --audit-level=critical --omit=dev
+          cd ../client
+          npm audit --audit-level=critical --omit=dev
+
+      - name: Angular Tests
+        run: |
+          cd client
+          npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
+
+      - name: Angular Production Build
+        run: |
+          cd client
+          npm run postinstall
+          npm run build
+
+  Build-and-test-development:
+    runs-on: ubuntu-latest
+    needs: Build-production-and-ng-test
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Write .npmrc file
+        run: |
+         touch client/.npmrc
+         echo '${{ secrets.NPMRC}}' > client/.npmrc
+
+      - run: apt-get update
+      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+      - run: apt install -y ./google-chrome*.deb;
+      - run: export CHROME_BIN=/usr/bin/google-chrome
+      - run: apt-get update -y
+      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+      - run: apt -y install jq
+
+      - name: Write cypress credentials
+        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
+        shell: bash
+        env:
+          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      # Install pm2 and prepare SASJS server
+      - run: npm i -g pm2
+      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+      - run: unzip linux.zip
+      - run: touch .env
+      - run: echo RUN_TIMES=js >> .env
+      - run: echo NODE_PATH=node >> .env
+      - run: echo CORS=enable >> .env
+      - run: echo WHITELIST=http://localhost:4200 >> .env
+      - run: cat .env
+      - run: pm2 start api-linux --wait-ready
+
+      - name: Deploy mocked services
+        run: |
+          cd ./sas/mocks/sasjs
+          npm install -g @sasjs/cli
+          npm install -g replace-in-files-cli
+          sasjs cbd -t server-ci
+          # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
+
+      - name: Install ZIP
+        run: |
+          apt-get update
+          apt-get install zip
+
+      - name: Prepare and run frontend and cypress
+        run: |
+          cd ./client
+          mv ./cypress.env.example.json ./cypress.env.json
+          replace-in-files --regex='"username".*' --replacement='"username":"'${{ secrets.CYPRESS_USERNAME_SASJS }}'",' ./cypress.env.json
+          replace-in-files --regex='"password".*' --replacement='"password":"'${{ secrets.CYPRESS_PWD_SASJS }}'" ' ./cypress.env.json
+          cat ./cypress.env.json
+          npm run postinstall
+          # Prepare index.html to SASJS local
+          replace-in-files --regex='serverUrl=".*?"' --replacement='serverUrl="http://localhost:5000"' ./src/index.html
+          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
+          replace-in-files --regex='serverType=".*?"' --replacement='serverType="SASJS"' ./src/index.html
+          replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
+          cat ./cypress.config.ts
+          # Start frontend and run cypress
+          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+
+      - name: Zip Cypress videos
+        if: always()
+        run: |
+          zip -r cypress-videos ./client/cypress/videos
+
+      - name: Add cypress videos artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-videos.zip
+          path: cypress-videos.zip
+
+  release:
+    runs-on: ubuntu-latest
+    needs: [Build-production-and-ng-test, Build-and-test-development]
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
       - name: Write .npmrc file
         run: |
           echo "$NPMRC" > client/.npmrc
@@ -30,11 +168,16 @@ jobs:
           npm i -g @sasjs/cli
           # jq is used to parse the release JSON
           apt-get install jq -y
+          # doxygen is used for the SASJS docs
+          apt-get update
+          apt-get install doxygen -y
 
       - name: Create Empty Release (assets are posted later)
         run: |
           npm i
           npm i -g semantic-release
+          # We do a semantic-release DRY RUN to make the job fail if there are no changes to release
+          GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.datacontroller.io semantic-release --dry-run | grep -q "There are no relevant changes, so no new version is released." && exit 1
           GITEA_TOKEN=${{ secrets.RELEASE_TOKEN }} GITEA_URL=https://git.datacontroller.io semantic-release
 
       - name: Frontend Build
@@ -48,7 +191,7 @@ jobs:
         description: Compile SAS 9 services, remove tests & create deployment program
         run: |
           cd sas
-          npm ci
+          npm i
           sasjs c -t sas9
           rm -rf sasjsbuild/tests
           sasjs b -t sas9
@@ -97,15 +240,21 @@ jobs:
         run: |
           cd client
           npm -g install cloudron-surfer
-          npm run typedoc
-          surfer put --token ${{ secrets.TSDOC_TOKEN }} --server tsdoc.datacontroller.io ../tsdoc /
+          npm run compodoc:build
+          surfer put --token ${{ secrets.TSDOC_TOKEN }} --server webdoc.datacontroller.io documentation/* /
+
+      - name: Release code.datacontroller.io
+        run: |
+          cd sas
+          sasjs doc
+          surfer put --token ${{ secrets.CODE_DATACONTROLLER_IO }} --server code.datacontroller.io sasjsbuild/sasdocs/* /
 
       - name: Upload assets to release
         run: |
           RELEASE_ID=`curl -k 'https://git.datacontroller.io/api/v1/repos/dc/dc/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.id'`
           RELEASE_BODY=`curl -k 'https://git.datacontroller.io/api/v1/repos/dc/dc/releases/latest?access_token=${{ secrets.RELEASE_TOKEN }}' | jq -r '.body'`
           # Update body
-          curl --data '{"draft": true,"body":"'"$RELEASE_BODY\n\nFor installation instructions, please visit https://docs.datacontroller.io/"'"}' -X PATCH --header 'Content-Type: application/json' -k https://git.datacontroller.io/api/v1/repos/dc/dc/releases/$RELEASE_ID?access_token=${{ secrets.RELEASE_TOKEN }}
+          curl --data '{"draft": false,"body":"'"$RELEASE_BODY\n\nFor installation instructions, please visit https://docs.datacontroller.io/"'"}' -X PATCH --header 'Content-Type: application/json' -k https://git.datacontroller.io/api/v1/repos/dc/dc/releases/$RELEASE_ID?access_token=${{ secrets.RELEASE_TOKEN }}
           # Upload assets
           URL="https://git.datacontroller.io/api/v1/repos/dc/dc/releases/$RELEASE_ID/assets?access_token=${{ secrets.RELEASE_TOKEN }}"
           curl -k $URL -F attachment=@frontend.zip

.gitignore

@@ -10,6 +10,7 @@ client/src/environments/version.ts
 client/cypress/screenshots
 client/cypress/results
 client/cypress/videos
+client/documentation
 cypress.env.json
 sasjsbuild
 sasjsresults

.npmrc

@@ -1 +1 @@
-legacy-peer-deps=false
+legacy-peer-deps=true

.releaserc

@@ -6,11 +6,13 @@
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
     "@semantic-release/changelog",
+    "@semantic-release/npm",
     [
       "@semantic-release/git",
       {
         "assets": [
-          "CHANGELOG.md"
+          "CHANGELOG.md",
+          "package.json"
         ]
       }
     ],

.vscode/settings.json

@@ -1,18 +1,19 @@
 {
   "cSpell.words": [
+    "Licence",
     "SYSERRORTEXT",
-        "SYSWARNINGTEXT"
-    ],
-    "editor.rulers": [
-        80
+    "SYSWARNINGTEXT",
+    "xlmaprules",
+    "xlmaps"
   ],
+  "editor.rulers": [80],
   "files.trimTrailingWhitespace": true,
   "[markdown]": {
     "files.trimTrailingWhitespace": false
   },
   "workbench.colorCustomizations": {
     "titleBar.activeForeground": "#ebe8e8",
-        "titleBar.activeBackground": "#95ff0053",
+    "titleBar.activeBackground": "#95ff0053"
   },
   "terminal.integrated.wordSeparators": " ()[]{}',\"`─‘’"
 }

CHANGELOG.md

@@ -1,14 +1,109 @@
-# [6.2.0](https://git.datacontroller.io/dc/dc/compare/v6.1.0...v6.2.0) (2023-08-24)
+# [6.4.0](https://git.datacontroller.io/dc/dc/compare/v6.3.1...v6.4.0) (2024-01-24)
 
 
 ### Bug Fixes
 
-* re-enabling full REPLACE uploads ([08e39c4](https://git.datacontroller.io/dc/dc/commit/08e39c4fca570406f9aad3d907cb04596421d074))
+* add dcLib to globals ([5d93346](https://git.datacontroller.io/dc/dc/commit/5d93346b52eda27c2829770e96686a713296d373))
+* add service to get xlmap rules and fixed interface name ([9ffa30a](https://git.datacontroller.io/dc/dc/commit/9ffa30ab747f5b62acbd452431a5e6e440afcb80))
+* increasing length of mpe_excel_map cols to ([2d4d068](https://git.datacontroller.io/dc/dc/commit/2d4d068413dcdac98581f08939e74bde65b73428))
+* providing info on mapids to FE ([fd94945](https://git.datacontroller.io/dc/dc/commit/fd94945466c1a797ddc89815258a65624a9cb0cf))
+* removing tables from EDIT menu that are in xlmaps ([9550ae4](https://git.datacontroller.io/dc/dc/commit/9550ae4d1154a0272f8a2427ac9d2afdfd699c96))
+* removing XLMAP_TARGETLIBDS from mpe_xlmaps_rules table ([93702c6](https://git.datacontroller.io/dc/dc/commit/93702c63dc280cdba1e46f0fd8fe0deaec879611))
+* renaming TABLE macvar to LOAD_REF in postdata.sas ([01915a2](https://git.datacontroller.io/dc/dc/commit/01915a2db9a4dfb94e4e8213e2c32181da36d349))
+* reverting xlmap in getdata change ([2d6e747](https://git.datacontroller.io/dc/dc/commit/2d6e747db9b84e9fb0dfcf9102a2f7dd2cb51891))
+* update edit tab to load ([516e5a2](https://git.datacontroller.io/dc/dc/commit/516e5a206216f79ab1dce9f4eab0d31115743160))
 
 
 ### Features
 
-* support for European numeric formats ([e48e47b](https://git.datacontroller.io/dc/dc/commit/e48e47bc635452b59e107b235e597c26e748875e))
+* adding ability to define the target table for excel maps ([c86fba9](https://git.datacontroller.io/dc/dc/commit/c86fba9dc75ddc6033132f469ad1c31b9131b12e))
+* adding ismap attribute to getdata response (and fixing test) ([2702bb3](https://git.datacontroller.io/dc/dc/commit/2702bb3c84c45903def1aa2b8cc20a6dd080281b))
+* Complex Excel Uploads ([cf19381](https://git.datacontroller.io/dc/dc/commit/cf193810606f287b8d6f864c4eb64d43c5ab5f3c)), closes [#69](https://git.datacontroller.io/dc/dc/issues/69)
+* Create Tables / Files dropdown under load tab ([b473b19](https://git.datacontroller.io/dc/dc/commit/b473b198a61f468dff74cd8e64692e7847084a80))
+* display list of maps in sidebar ([5aec024](https://git.datacontroller.io/dc/dc/commit/5aec0242429942f8a989b5fb79f8d3865e9de01a))
+* implemented the logic for xlmap component ([50696bb](https://git.datacontroller.io/dc/dc/commit/50696bb926dd00472db65a008771a4b6352871be))
+* model changes for [#69](https://git.datacontroller.io/dc/dc/issues/69) ([271543a](https://git.datacontroller.io/dc/dc/commit/271543a446a2116718f99f0540e3cd911f9f5fe7))
+* new getxlmaps service to return rules for a particular xlmap_id ([56264ec](https://git.datacontroller.io/dc/dc/commit/56264ecc6908bf6c8e3e666dfeba7068d6195df8))
+* validating the excel map after stage (adding load-ref) ([a485c3b](https://git.datacontroller.io/dc/dc/commit/a485c3b78724a36f7bacb264fb02140cc62d6512))
+
+## [6.3.1](https://git.datacontroller.io/dc/dc/compare/v6.3.0...v6.3.1) (2024-01-01)
+
+
+### Bug Fixes
+
+* enabling excel uploads to tables with retained keys, also adding more validation to MPE_TABLES updates ([3efccc4](https://git.datacontroller.io/dc/dc/commit/3efccc4cf3752763d049836724f2491c287f65db))
+
+# [6.3.0](https://git.datacontroller.io/dc/dc/compare/v6.2.8...v6.3.0) (2023-12-04)
+
+
+### Features
+
+* viewer row handle ([dadac4f](https://git.datacontroller.io/dc/dc/commit/dadac4f13f85b5446198b6340cad28844defc94d))
+
+## [6.2.8](https://git.datacontroller.io/dc/dc/compare/v6.2.7...v6.2.8) (2023-12-04)
+
+
+### Bug Fixes
+
+* bumping sasjs/core to fix mp_loadformat issue ([a1d308e](https://git.datacontroller.io/dc/dc/commit/a1d308ea078786b27bf7ec940d018fc657d4c398))
+* new logic for -fc suffix.  Closes [#63](https://git.datacontroller.io/dc/dc/issues/63) ([5579db0](https://git.datacontroller.io/dc/dc/commit/5579db0eafc668b1bc310099b7cc3062e0598fc4))
+
+## [6.2.7](https://git.datacontroller.io/dc/dc/compare/v6.2.6...v6.2.7) (2023-11-09)
+
+
+### Bug Fixes
+
+* **audit:** updated crypto-js (hashing rows in dynamic cell validation) ([a7aa42a](https://git.datacontroller.io/dc/dc/commit/a7aa42a59b71597399924b8d2d06010c806321f3))
+* missing dependency and avoiding label length limit issue ([91f128c](https://git.datacontroller.io/dc/dc/commit/91f128c2fead1e4f72267d689e67f49ec9a2ab35))
+
+## [6.2.6](https://git.datacontroller.io/dc/dc/compare/v6.2.5...v6.2.6) (2023-10-18)
+
+
+### Bug Fixes
+
+* bumping core to address mm_assigndirectlib issue ([c27cdab](https://git.datacontroller.io/dc/dc/commit/c27cdab3fccbde814a29424d0344173a73ea816c))
+
+## [6.2.5](https://git.datacontroller.io/dc/dc/compare/v6.2.4...v6.2.5) (2023-10-17)
+
+
+### Bug Fixes
+
+* enabling AUTHDOMAIN in MM_ASSIGNDIRECTLIB ([008b45a](https://git.datacontroller.io/dc/dc/commit/008b45ad175ec0e6026f5ef3bc210470226e328f))
+
+## [6.2.4](https://git.datacontroller.io/dc/dc/compare/v6.2.3...v6.2.4) (2023-10-16)
+
+
+### Bug Fixes
+
+* Enable display of metadata-only tables. Closes [#56](https://git.datacontroller.io/dc/dc/issues/56) ([f3e82b4](https://git.datacontroller.io/dc/dc/commit/f3e82b4ee2a9c1c851f812ac60e9eaf05f91a0f9))
+
+## [6.2.3](https://git.datacontroller.io/dc/dc/compare/v6.2.2...v6.2.3) (2023-10-12)
+
+
+### Bug Fixes
+
+* bumping core library to avoid non-ascii char in mp_validatecols.sas. [#50](https://git.datacontroller.io/dc/dc/issues/50) ([11b06f6](https://git.datacontroller.io/dc/dc/commit/11b06f6416300b6d70b1570c415d5a5c004976db))
+* removing copyright symbol from mpe_alerts macro. [#50](https://git.datacontroller.io/dc/dc/issues/50) ([adb7eb7](https://git.datacontroller.io/dc/dc/commit/adb7eb77550c68a2dab15a6ff358129820e9b612))
+
+## [6.2.2](https://git.datacontroller.io/dc/dc/compare/v6.2.1...v6.2.2) (2023-10-09)
+
+
+### Bug Fixes
+
+* updated SheetJS (crypto) to the latest ([8bd0dd2](https://git.datacontroller.io/dc/dc/commit/8bd0dd22c258911672303869e4df893a98e93575))
+
+## [6.2.1](https://git.datacontroller.io/dc/dc/compare/v6.2.0...v6.2.1) (2023-10-09)
+
+
+### Bug Fixes
+
+* approve, history and submit pages grouped in review module ([e056ece](https://git.datacontroller.io/dc/dc/commit/e056ece2234ef6aab050f6a5b1f8de633b163d91))
+* closes [#39](https://git.datacontroller.io/dc/dc/issues/39) upcase issue in MPE_SECURITY ([a00d31c](https://git.datacontroller.io/dc/dc/commit/a00d31caf3c5634cd61a4700fb175e76856edbb6))
+* handsontable v13 ([6f482ec](https://git.datacontroller.io/dc/dc/commit/6f482ec6d909907a304ef9975262889e2370035f))
+* latest adapter ([5e30dc0](https://git.datacontroller.io/dc/dc/commit/5e30dc0f892fab2af41f4ea56e30f27ec3b3912e))
+* sasjs/cli and sasjs/core updated to the latest ([8571e01](https://git.datacontroller.io/dc/dc/commit/8571e01e44a8cb6df9d150d271c34bb75bffdf31))
+* updating editors/stagedata to address issues in particular viya configurations as described in issue [#33](https://git.datacontroller.io/dc/dc/issues/33) ([94ab949](https://git.datacontroller.io/dc/dc/commit/94ab949df8c75072525751a2156b7a32c2e641dc))
+* updating logic for REPLACE loadtype ([1f2ce55](https://git.datacontroller.io/dc/dc/commit/1f2ce55f249f4af56f0cacdec47e69246cd47431))
 
 # [6.2.0](https://git.datacontroller.io/dc/dc/compare/v6.1.0...v6.2.0) (2023-08-24)
 
@@ -17,7 +112,6 @@
 
 * re-enabling full REPLACE uploads ([08e39c4](https://git.datacontroller.io/dc/dc/commit/08e39c4fca570406f9aad3d907cb04596421d074))
 
-
 ### Features
 
 * support for European numeric formats ([e48e47b](https://git.datacontroller.io/dc/dc/commit/e48e47bc635452b59e107b235e597c26e748875e))

CONTRIBUTING.md

@@ -53,6 +53,17 @@ npm run lint:fix
 Typedoc is used for generating typescript documentation based on the code.
 That part is automated and beign done as a part of CI job.
 
+# Release
+Release is automated as a part of CI job. Workflow file: `.gitea/workflows/release.yaml`.  
+It will run automatically when branch merged to the `main` branch.  
+IMPORTANT!  
+If release job fails, after it has been created empty release and a tag, we must not re-run the relase job until we removed the newly create GIT TAG and RELEASE.  
+To remove the git tag run:  
+```
+git push -d origin vX.X.X
+```
+To remove the release, you need to do it with repo administration over at [https://git.datacontroller.io/dc/dc](https://git.datacontroller.io/dc/dc)
+
 # Troubleshooting
 
 ## Makedata service "could not create directory" error

client/licenseChecker.js

@@ -10,7 +10,7 @@ const check = (cwd) => {
         onlyAllow:
           'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
         excludePackages:
-          '@cds/city@1.1.0;@handsontable/angular@13.0.0;handsontable@13.0.0;hyperformula@2.5.0;jackspeak@2.2.0;path-scurry@1.7.0'
+          '@cds/city@1.1.0;@handsontable/angular@13.1.0;handsontable@13.1.0;hyperformula@2.5.0;jackspeak@2.2.0;path-scurry@1.7.0'
       },
       (error, json) => {
         if (error) {

client/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "dc-client",
-  "description": "dc-client",
+  "name": "data_controller-client",
+  "description": "DataController Client",
   "angular-cli": {},
   "scripts": {
     "start": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng serve",
@@ -29,7 +29,9 @@
     "cy:run": "cypress run",
     "audit:prod": "npm audit --omit=dev",
     "sasdocs": "sasjs doc && ./sasjs/utils/deploydocs.sh",
-    "typedoc": "typedoc --options typedoc.json && cd ../tsdoc"
+    "compodoc:build": "compodoc -p tsconfig.doc.json --name 'Data Controller Client'",
+    "compodoc:build-and-serve": "compodoc -p tsconfig.doc.json -s --name 'Data Controller Client'",
+    "compodoc:serve": "compodoc -s --name 'Data Controller Client'"
   },
   "private": true,
   "dependencies": {
@@ -46,19 +48,19 @@
     "@clr/angular": "^13.17.0",
     "@clr/icons": "^13.0.2",
     "@clr/ui": "^13.17.0",
-    "@handsontable/angular": "^13.0.0",
-    "@sasjs/adapter": "4.3.6",
-    "@sasjs/utils": "^3.3.0",
+    "@handsontable/angular": "^13.1.0",
+    "@sasjs/adapter": "4.10.1",
+    "@sasjs/utils": "^3.4.0",
     "@sheet/crypto": "1.20211122.1",
     "@types/d3-graphviz": "^2.6.7",
     "@types/text-encoding": "0.0.35",
     "base64-arraybuffer": "^0.2.0",
     "buffer": "^5.4.3",
     "crypto-browserify": "3.12.0",
-    "crypto-js": "^3.3.0",
+    "crypto-js": "^4.2.0",
     "d3-graphviz": "^5.0.2",
     "fs-extra": "^7.0.1",
-    "handsontable": "^13.0.0",
+    "handsontable": "^13.1.0",
     "https-browserify": "1.0.0",
     "hyperformula": "^2.5.0",
     "iconv-lite": "^0.5.0",
@@ -87,9 +89,11 @@
     "@angular-eslint/template-parser": "16.0.3",
     "@angular/cli": "^16.1.0",
     "@angular/compiler-cli": "^16.1.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@compodoc/compodoc": "^1.1.21",
     "@cypress/webpack-preprocessor": "^5.17.1",
     "@types/core-js": "^2.5.5",
-    "@types/crypto-js": "^4.0.1",
+    "@types/crypto-js": "^4.2.1",
     "@types/es6-shim": "^0.31.39",
     "@types/jasmine": "~3.6.0",
     "@types/lodash-es": "^4.17.3",
@@ -119,7 +123,8 @@
     "rimraf": "3.0.2",
     "ts-loader": "^9.2.8",
     "ts-node": "^3.3.0",
-    "typedoc": "^0.23.24",
+    "typedoc": "^0.24.8",
+    "typedoc-plugin-external-module-name": "^4.0.6",
     "typescript": "~4.9.4",
     "wait-on": "^6.0.1",
     "watch": "^1.0.2"

client/src/app/_globals.ts

@@ -1,5 +1,8 @@
 import { QueryClause } from './models/TableData'
 
+/**
+ * Filtering cache info, to be reused when filtering modal is re-open
+ */
 interface FilterCache {
   cols: any[]
   vals: any[]
@@ -10,12 +13,18 @@ interface FilterCache {
   query: QueryClause[]
 }
 
+/**
+ * Filtering cache info in the open viewboxes, to be reused when filtering modal is re-open
+ */
 interface ViewboxCache {
   [key: number]: {
     filter: FilterCache
   }
 }
 
+/**
+ * Initial values when no cached values stored
+ */
 export const initFilter: { filter: FilterCache } = {
   filter: {
     cols: <any[]>[],
@@ -28,8 +37,23 @@ 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
+ * Cached metadata tree
+ * Cached usernav tree
+ * Cached viyaApi collections, search and selected endpoint
+ */
 export const globals: {
   rootParam: string
+  dcLib: string
+  xlmaps: XLMapListItem[]
   editor: any
   viewer: any
   viewboxes: ViewboxCache
@@ -41,11 +65,13 @@ export const globals: {
   [key: string]: any
 } = {
   rootParam: <string>'',
+  dcLib: '',
+  xlmaps: [],
   editor: {
     startupSet: <boolean>false,
     treeNodeLibraries: <any[] | null>[],
     libsAndTables: <any[]>[],
-    libraries: <String[] | undefined>[],
+    libraries: <string[] | undefined>[],
     library: <string>'',
     table: <string>'',
     filter: <FilterCache>{

client/src/app/actions/actions.component.html

@@ -1,40 +0,0 @@
-<div class="content-area">
-  <div class="card">
-    <div class="card-header d-flex flex-column justify-content-center">
-      <h3 class="text-center">
-        You succesfully edited table
-        <span class="color-blue font-weight-700">{{ libds }}</span>
-      </h3>
-      <p class="text-center">
-        <b>Please choose from the following actions</b>
-      </p>
-      <div class="row d-flex justify-content-center mt-20">
-        <button
-          class="btn btn-sm btn-outline text-center"
-          (click)="submittedTableScreen()"
-        >
-          Go to submitted table screen
-        </button>
-        <button
-          class="btn btn-sm btn-outline text-center"
-          (click)="viewerTableScreen()"
-        >
-          Go to base table screen
-        </button>
-        <button
-          id="approvalBtn"
-          class="btn btn-sm btn-success-outline text-center"
-          (click)="approveTableScreen()"
-        >
-          Go to approvals screen
-        </button>
-        <button
-          class="btn btn-sm btn-info-outline text-center"
-          (click)="goBack()"
-        >
-          Go back to editor
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

client/src/app/actions/actions.component.ts

@@ -1,50 +0,0 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-
-@Component({
-  selector: 'app-actions',
-  templateUrl: './actions.component.html',
-  styleUrls: ['./actions.component.scss'],
-  host: {
-    class: 'content-container'
-  }
-})
-export class ActionsComponent implements OnInit, AfterViewInit {
-  public dsid: any
-  public libds: string | undefined
-
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
-
-  public submittedTableScreen() {
-    this.router.navigateByUrl('/stage/' + this.dsid)
-  }
-
-  public approveTableScreen() {
-    this.router.navigateByUrl('/approve/approveDet/' + this.dsid)
-  }
-
-  public viewerTableScreen() {
-    this.router.navigateByUrl('/view/data/' + this.libds)
-  }
-
-  public goBack() {
-    this.router.navigateByUrl('/editor/' + this.libds)
-  }
-
-  async ngOnInit() {
-    this.dsid = this.route.snapshot.params['dsid']
-    this.libds = this.route.snapshot.params['libds']
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      let approvalBtn: any = window.document.getElementById('approvalBtn')
-      if (!!approvalBtn) {
-        approvalBtn.focus()
-      }
-    }, 700)
-  }
-}

client/src/app/app.component.html

@@ -168,8 +168,8 @@
           </button>
           <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
             <a [routerLink]="['/view']" clrDropdownItem>VIEW</a>
-            <a [routerLink]="['/home']" clrDropdownItem>EDIT</a>
-            <a [routerLink]="['/submitted']" clrDropdownItem>REVIEW</a>
+            <a [routerLink]="['/home']" clrDropdownItem>LOAD</a>
+            <a [routerLink]="['/review/submitted']" clrDropdownItem>REVIEW</a>
           </clr-dropdown-menu>
         </clr-dropdown>
       </div>
@@ -189,10 +189,10 @@
             router.url.includes('edit-record') ||
             router.url.includes('home')
           "
-          >EDIT</a
+          >LOAD</a
         >
         <a
-          [routerLink]="['/submitted']"
+          [routerLink]="['/review/submitted']"
           [class.active]="
             router.url.includes('submitted') ||
             router.url.includes('approve') ||
@@ -224,7 +224,7 @@
     <ul class="nav">
       <li class="nav-item">
         <a
-          [routerLink]="['/submitted']"
+          [routerLink]="['/review/submitted']"
           class="nav-link nav-text"
           routerLinkActive="active"
           >SUBMIT</a
@@ -232,15 +232,16 @@
       </li>
       <li class="nav-item">
         <a
-          [routerLink]="['/approve']"
+          [routerLink]="['/review/approve']"
           class="nav-link nav-text"
+          [class.active]="router.url.includes('approve')"
           routerLinkActive="active"
           >APPROVE</a
         >
       </li>
       <li class="nav-item">
         <a
-          [routerLink]="['/history']"
+          [routerLink]="['/review/history']"
           class="nav-link nav-text"
           routerLinkActive="active"
           >HISTORY</a

client/src/app/app.component.ts

@@ -57,24 +57,15 @@ export class AppComponent {
     private elementRef: ElementRef
   ) {
     this.parseDcAdapterSettings()
+
+    /**
+     * Prints app info in the console such as:
+     * - Adapter versions
+     * - App version
+     * - Build timestamp
+     *
+     */
     ;(window as any).appinfo = () => {
-      const licenseKeyData = this.licenceService.getLicenseKeyData()
-
-      if (licenseKeyData) {
-        const expiry_date = moment(
-          licenseKeyData.valid_until,
-          'YYYY-MM-DD'
-        ).startOf('day')
-        const current_date = moment().startOf('day')
-        const daysToExpiry = expiry_date.diff(current_date, 'days')
-
-        licenseKeyData.valid_until += ` (${daysToExpiry} ${
-          daysToExpiry === 1 ? 'day' : 'days'
-        } remaining)`
-
-        if (isNaN(daysToExpiry)) licenseKeyData.valid_until = 'Unlimited'
-      }
-
       console.table({
         'Adapter version': VERSION.adapterVersion || 'n/a',
         'App version': (VERSION.tag || '').replace('v', ''),
@@ -87,7 +78,12 @@ export class AppComponent {
 
     this.subscribeToLicenseEvents()
 
+    /**
+     * Fetches git tag ang git hash from `version.ts` file
+     * It's placed in the user drop down.
+     */
     this.commitVer = (VERSION.tag || '').replace('v', '') + '.' + VERSION.hash
+
     router.events.subscribe((val) => {
       this.routeUrl = this.router.url
 
@@ -127,8 +123,10 @@ export class AppComponent {
     this.subscribeToAppActive()
     this.subscribeToDemoLimitModal()
 
-    /* In Viya streaming apps, content is served within an iframe.  This code
-      makes that iframe "full screen" so it looks like a regular window. */
+    /**
+     * In Viya streaming apps, content is served within an iframe.  This code
+     * makes that iframe "full screen" so it looks like a regular window.
+     */
     if (window.frameElement) {
       window.frameElement.setAttribute(
         'style',
@@ -143,6 +141,9 @@ export class AppComponent {
     }
   }
 
+  /**
+   * Parses adapter settings that are found in the <sasjs> tag inside index.html
+   */
   private parseDcAdapterSettings() {
     const sasjsElement = document.querySelector('sasjs')
 
@@ -180,9 +181,14 @@ export class AppComponent {
     this.appService.sasServiceInit()
   }
 
+  /**
+   * Opens licence page with the active licence problem
+   * Problem details are encoded in the url
+   */
   public licenceProblemDetails(url: string) {
     this.router.navigateByUrl(url)
   }
+
   /**
    * Based on string provided we return true, false or null
    * True -> Compute API
@@ -199,6 +205,12 @@ export class AppComponent {
     return value === 'true' || false
   }
 
+  /**
+   * Listens for an `demo limit` event that will show the `Feature locked modal`
+   * For exmaple when in editor upload feature is not enabled
+   * When user tries to upload the excel, editor component will trgger this event
+   * And stop the execution of file upload code.
+   */
   public subscribeToDemoLimitModal() {
     this.eventService.onDemoLimitModalShow.subscribe((featureName: string) => {
       this.demoLimitNotice = {
@@ -208,6 +220,10 @@ export class AppComponent {
     })
   }
 
+  /**
+   * Listens for licence events so banner can be displayed.
+   * App is free tier, licence will expire, is expired or is invalid
+   */
   public subscribeToLicenseEvents() {
     this.licenceService.isAppFreeTier.subscribe((isAppFreeTier: boolean) => {
       this.freeTierBanner = isAppFreeTier
@@ -227,6 +243,10 @@ export class AppComponent {
     )
   }
 
+  /**
+   * Listens for an event that will activate od deactivate full application.
+   * Based on licence key prcoessing result
+   */
   public subscribeToAppActive() {
     this.licenceService.isAppActivated.subscribe((value: any) => {
       this.appActive = value
@@ -248,31 +268,51 @@ export class AppComponent {
     })
   }
 
+  /**
+   * When startupservice request is finished with valid response, this event will
+   * make sure loading screen is gone.
+   */
   public subscribeToStartupData() {
     this.eventService.onStartupDataLoaded.subscribe(() => {
       this.startupDataLoaded = true
     })
   }
 
+  /**
+   * Opens requests modal when requested from event service
+   */
   public subscribeToRequestsModal() {
     this.eventService.onRequestsModalOpen.subscribe((value: boolean) => {
       this.requestsModal = true
     })
   }
 
+  /**
+   * Closes abort modal with matching ID (there could be multiple abort modals open)
+   */
   public closeAbortModal(abortId: number) {
     let abortIndex = this.sasjsAborts.findIndex((abort) => abort.id === abortId)
     this.sasjsAborts.splice(abortIndex, 1)
   }
 
+  /**
+   * Toggles sidebar when requested from event service
+   */
   public toggleSidebar() {
     this.eventService.toggleSidebar()
   }
 
+  /**
+   * Whether or not current route includes the route from param
+   * @param route route to check
+   */
   public isMainRoute(route: string): boolean {
     return this.router.url.includes(route)
   }
 
+  /**
+   * Opens a page for updating the licence.
+   */
   public openLicencingPage() {
     this.router.navigateByUrl('/licensing/update')
   }

client/src/app/app.module.ts

@@ -11,33 +11,16 @@ import { NotFoundComponent } from './not-found/not-found.component'
 
 import { SasStoreService } from './services/sas-store.service'
 import { SharedModule } from './shared/shared.module'
-// import { EditorComponent } from './editor/editor.component'
-import { ActionsComponent } from './actions/actions.component'
+
 import { AppSharedModule } from './app-shared.module'
-import { ApproveDetailsComponent } from './approve-details/approve-details.component'
-import { ApproveComponent } from './approve/approve.component'
-import { DeployComponent } from './deploy/deploy.component'
-import { AutomaticComponent } from './deploy/sections/automatic/automatic.component'
-import { ManualComponent } from './deploy/sections/manual/manual.component'
-import { SasjsConfiguratorComponent } from './deploy/sections/sasjs-configurator/sasjs-configurator.component'
-import { GroupComponent } from './group/group.component'
-import { HistoryComponent } from './history/history.component'
-import { LicensingComponent } from './licensing/licensing.component'
-import { LineageComponent } from './lineage/lineage.component'
-import { MetadataComponent } from './metadata/metadata.component'
 import { PipesModule } from './pipes/pipes.module'
-import { RoleComponent } from './role/role.component'
-import { ApproveRouteComponent } from './routes/approve-route/approve-route.component'
-import { HistoryRouteComponent } from './routes/history-route/history-route.component'
+import { ReviewRouteComponent } from './routes/review-route/review-route.component'
 import { LicensingGuard } from './routes/licensing.guard'
 import { UsernavRouteComponent } from './routes/usernav-route/usernav-route.component'
 import { AppService } from './services/app.service'
 import { InfoModalComponent } from './shared/abort-modal/info-modal.component'
 import { RequestsModalComponent } from './shared/requests-modal/requests-modal.component'
-import { SubmitterComponent } from './submitter/submitter.component'
-import { UserComponent } from './user/user.component'
 import { HomeModule } from './home/home.module'
-import { SystemComponent } from './system/system.component'
 import { DirectivesModule } from './directives/directives.module'
 import { ViyaApiExplorerComponent } from './viya-api-explorer/viya-api-explorer.component'
 import { NgxJsonViewerModule } from 'ngx-json-viewer'
@@ -46,27 +29,11 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'
   declarations: [
     AppComponent,
     NotFoundComponent,
-    ApproveComponent,
-    ApproveDetailsComponent,
-    ActionsComponent,
-    HistoryComponent,
-    LineageComponent,
-    SubmitterComponent,
-    ApproveRouteComponent,
-    HistoryRouteComponent,
-    MetadataComponent,
+    ReviewRouteComponent,
+    ReviewRouteComponent,
     UsernavRouteComponent,
-    UserComponent,
-    GroupComponent,
-    RoleComponent,
     RequestsModalComponent,
-    DeployComponent,
     InfoModalComponent,
-    LicensingComponent,
-    ManualComponent,
-    AutomaticComponent,
-    SasjsConfiguratorComponent,
-    SystemComponent,
     ViyaApiExplorerComponent
   ],
   imports: [
@@ -84,7 +51,7 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'
     DirectivesModule,
     NgxJsonViewerModule
   ],
-  providers: [AppService, SasStoreService, ApproveComponent, LicensingGuard],
+  providers: [AppService, SasStoreService, LicensingGuard],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

client/src/app/app.routing.ts

@@ -4,25 +4,23 @@
  * 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 { ApproveComponent } from './approve/approve.component'
-import { ApproveDetailsComponent } from './approve-details/approve-details.component'
-import { ActionsComponent } from './actions/actions.component'
-import { HistoryComponent } from './history/history.component'
 import { NotFoundComponent } from './not-found/not-found.component'
-import { SubmitterComponent } from './submitter/submitter.component'
 
-import { ApproveRouteComponent } from './routes/approve-route/approve-route.component'
-import { DeployComponent } from './deploy/deploy.component'
-import { LicensingComponent } from './licensing/licensing.component'
-import { LicensingGuard } from './routes/licensing.guard'
-import { StageModule } from './stage/stage.module'
+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 { SystemModule } from './system/system.module'
 import { ViewerModule } from './viewer/viewer.module'
-import { SystemComponent } from './system/system.component'
 
+/**
+ * Defining routes
+ */
 export const ROUTES: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   {
@@ -30,23 +28,28 @@ export const ROUTES: Routes = [
     loadChildren: () => ViewerModule
   },
   {
-    path: 'approve',
-    component: ApproveRouteComponent,
+    /**
+     * Load review module (approve, history, submitted)
+     */
+    path: 'review',
+    component: ReviewRouteComponent,
     children: [
       { path: '', pathMatch: 'full', redirectTo: 'toapprove' },
-      { path: 'toapprove', component: ApproveComponent },
-      { path: 'approveDet/:tableId', component: ApproveDetailsComponent },
-      { path: 'submitted', component: SubmitterComponent }
+      {
+        path: '',
+        loadChildren: () => ReviewModule
+      }
     ]
   },
   {
-    path: 'licensing/:action',
-    component: LicensingComponent,
-    canActivate: [LicensingGuard],
-    canDeactivate: [LicensingGuard]
+    path: 'licensing',
+    loadChildren: () => LicensingModule
   },
-  { path: 'home', component: HomeComponent },
+  { path: 'home', loadChildren: () => HomeModule },
   {
+    /**
+     * Load editor module with subroutes
+     */
     path: 'editor',
     loadChildren: () => EditorModule
   },
@@ -54,16 +57,20 @@ export const ROUTES: Routes = [
     path: 'stage',
     loadChildren: () => StageModule
   },
-  { path: 'system', component: SystemComponent },
-  { path: 'actions/:libds/:dsid', component: ActionsComponent },
-  { path: 'history', component: HistoryComponent },
-  { path: 'submitted', component: SubmitterComponent },
-  { path: 'submitted/:tableId', component: SubmitterComponent },
-  { path: 'deploy', component: DeployComponent },
-  { path: 'deploy/manualdeploy', component: DeployComponent },
+  {
+    path: 'system',
+    loadChildren: () => SystemModule
+  },
+  {
+    path: 'deploy',
+    loadChildren: () => DeployModule
+  },
   { path: '**', component: NotFoundComponent }
 ]
 
+/**
+ * Exporting routes
+ */
 export const ROUTING: ModuleWithProviders<RouterModule> = RouterModule.forRoot(
   ROUTES,
   { useHash: true }

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { DeployComponent } from './deploy.component'
+
+const routes: Routes = [
+  { path: '', component: DeployComponent },
+  { path: 'manualdeploy', component: DeployComponent }
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DeployRoutingModule {}

client/src/app/deploy/deploy.component.ts

@@ -78,6 +78,9 @@ export class DeployComponent implements OnInit {
     this.setDeployDefaults()
   }
 
+  /**
+   * Setting default values used for deploy request
+   */
   public setDeployDefaults() {
     this.dcPath = this.dcAdapterSettings?.dcPath || ''
     this.selectedAdminGroup = this.dcAdapterSettings?.adminGroup || ''
@@ -86,6 +89,9 @@ export class DeployComponent implements OnInit {
     }
   }
 
+  /**
+   * Accepting terms of service shows next screen
+   */
   public termsAgreeChange() {
     if (!this.autodeploy) {
       this.getAdminGroups()
@@ -94,6 +100,9 @@ export class DeployComponent implements OnInit {
     this.step++
   }
 
+  /**
+   * Fetches admin groups from VIYA to be selected for a backend deploy
+   */
   public getAdminGroups() {
     fetch(
       this.sasJsConfig.serverUrl + '/identities/groups?sortBy=name&limit=5000',

client/src/app/deploy/deploy.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { DeployComponent } from './deploy.component'
+import { AutomaticComponent } from './sections/automatic/automatic.component'
+import { ManualComponent } from './sections/manual/manual.component'
+import { SasjsConfiguratorComponent } from './sections/sasjs-configurator/sasjs-configurator.component'
+import { ClarityModule } from '@clr/angular'
+import { FormsModule } from '@angular/forms'
+import { DeployRoutingModule } from './deploy-routing.module'
+
+@NgModule({
+  declarations: [
+    DeployComponent,
+    AutomaticComponent,
+    ManualComponent,
+    SasjsConfiguratorComponent
+  ],
+  imports: [CommonModule, FormsModule, ClarityModule, DeployRoutingModule]
+})
+export class DeployModule {}

client/src/app/deploy/sections/automatic/automatic.component.ts

@@ -55,6 +55,13 @@ export class AutomaticComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  /**
+   * Executes sas.json file to deploy the backend
+   * Method will first try to run the `auto deploy`
+   * If that fails the rest of the code is ignored.
+   * If request is successfull, method will continue to try
+   * to create database if checkbox is toggled on
+   */
   public async executeJson() {
     this.autodeploying = true
     this.isSubmittingJson = true
@@ -99,6 +106,9 @@ export class AutomaticComponent implements OnInit {
     }
   }
 
+  /**
+   * Runs the `makedata` request sending the ADMIN and DCPATH values
+   */
   public createDatabase() {
     let data = {
       fromjs: [

client/src/app/deploy/sections/manual/manual.component.ts

@@ -52,6 +52,9 @@ export class ManualComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  /**
+   * FIXME: Remove
+   */
   public async executableContext() {
     // getExecutableContexts now need AuthConfig parameter which we don't have on web
     // this.contextsLoading = true
@@ -65,10 +68,16 @@ export class ManualComponent implements OnInit {
     // this.contextsLoading = false
   }
 
+  /**
+   * Removes sas.json file attached to the input
+   */
   public clearUploadInput(event: Event) {
     this.deployService.clearUploadInput(event)
   }
 
+  /**
+   * Reads attached SAS file to be sent to sas for execution (backend deploy)
+   */
   public onSasFileChange(event: any) {
     this.preloadedFile = false
 
@@ -93,12 +102,18 @@ export class ManualComponent implements OnInit {
     fileReader.readAsText(file)
   }
 
+  /**
+   * Reads attached JSON file to be sent to sas for execution (backend deploy)
+   */
   public async onJsonFileChange(event: any) {
     let file = event.target.files[0]
 
     this.jsonFile = await this.deployService.readFile(file)
   }
 
+  /**
+   * Appending precode lines to the attached sas or json file for backend deploy
+   */
   public addPrecodeLines() {
     let headerLines = [
       `%let context=${this.selectedContext};`,
@@ -110,6 +125,9 @@ export class ManualComponent implements OnInit {
     this.linesOfCode.unshift(...headerLines)
   }
 
+  /**
+   * Downloadng file with precode included
+   */
   public downloadSasPrecodeFile() {
     let linesAsText = this.linesOfCode.join('\n')
     let filename = this.fileName.split('.')[0]
@@ -117,6 +135,9 @@ export class ManualComponent implements OnInit {
     this.downloadFile(linesAsText, filename, 'sas')
   }
 
+  /**
+   * Used for downloading log and repsonse as a file
+   */
   public downloadFile(
     content: any,
     filename: string,
@@ -125,10 +146,17 @@ export class ManualComponent implements OnInit {
     this.deployService.downloadFile(content, filename, extension)
   }
 
+  /**
+   * Saving dcpath to localstorage
+   * FIXME: maybe it'snot necessary
+   */
   public saveDcPath() {
     localStorage.setItem('deploy_dc_loc', this.dcPath)
   }
 
+  /**
+   * Send sas.json to be executed (deploying backend)
+   */
   public async executeJson() {
     this.isSubmittingJson = true
 
@@ -162,6 +190,9 @@ export class ManualComponent implements OnInit {
     this.isSubmittingJson = false
   }
 
+  /**
+   * Send sas file to be executed (deploying backend)
+   */
   public async executeSAS() {
     this.executingScript = true
     this.jobLog = ''
@@ -194,6 +225,10 @@ export class ManualComponent implements OnInit {
     }
   }
 
+  /**
+   * Running makedata service
+   * @param newTab open and run in new tab
+   */
   public createDatabase(newTab: boolean = true) {
     if (newTab) {
       let url =

client/src/app/deploy/sections/sasjs-configurator/sasjs-configurator.component.ts

@@ -5,7 +5,6 @@ import { ServerType } from '@sasjs/utils/types/serverType'
 import { DcAdapterSettings } from 'src/app/models/DcAdapterSettings'
 import { SASGroup } from 'src/app/models/sas/public-getgroups.model'
 import { SASjsApiServerInfo } from 'src/app/models/sasjs-api/SASjsApiServerInfo.model'
-import { HelperService } from 'src/app/services/helper.service'
 import { SasService } from 'src/app/services/sas.service'
 import { SasjsService } from 'src/app/services/sasjs.service'
 
@@ -51,6 +50,9 @@ export class SasjsConfiguratorComponent implements OnInit {
     this.getServerInfo()
   }
 
+  /**
+   * Fethes the sasjs server instance info
+   */
   getServerInfo() {
     this.sasjsService
       .getServerInfo()
@@ -59,6 +61,9 @@ export class SasjsConfiguratorComponent implements OnInit {
       })
   }
 
+  /**
+   * Fetches user groups from the `usernav/usergroupsbymember` service
+   */
   getUserGroups() {
     this.loading = true
 
@@ -99,6 +104,9 @@ export class SasjsConfiguratorComponent implements OnInit {
     )
   }
 
+  /**
+   * Creating database
+   */
   makeData() {
     // const _debug = "&_debug=131"; //debug on
     const _debug = ' ' //debug off

client/src/app/directives/drag-ndrop.directive.ts

@@ -14,7 +14,9 @@ export class DragNdropDirective {
   @Output() fileDropped = new EventEmitter<any>()
   @Output() fileDraggedOver = new EventEmitter<any>()
 
-  // Dragover listener
+  /**
+   * Dragover listener
+   */
   @HostListener('dragover', ['$event'])
   onDragOver(event: any) {
     event.preventDefault()
@@ -26,7 +28,9 @@ export class DragNdropDirective {
     }
   }
 
-  // Dragleave listener
+  /**
+   * Dragleave listener
+   */
   @HostListener('dragleave', ['$event'])
   public onDragLeave(event: any) {
     event.preventDefault()
@@ -34,7 +38,9 @@ export class DragNdropDirective {
     this.fileOver = false
   }
 
-  // Drop listener
+  /**
+   * Drop listener
+   */
   @HostListener('drop', ['$event'])
   public ondrop(event: any) {
     event.preventDefault()
@@ -48,6 +54,9 @@ export class DragNdropDirective {
     }
   }
 
+  /**
+   * Checks wether dragging element contain files
+   */
   private containsFiles(event: any) {
     if (event && event.dataTransfer && event.dataTransfer.types) {
       for (let i = 0; i < event.dataTransfer.types.length; i++) {

client/src/app/directives/file-drop.directive.ts

@@ -22,6 +22,9 @@ export class FileDropDirective {
     this.element = element
   }
 
+  /**
+   * Dragging element drop event
+   */
   @HostListener('drop', ['$event'])
   onDrop(event: DragEvent): void {
     this._preventAndStop(event)
@@ -39,6 +42,9 @@ export class FileDropDirective {
     this.fileDrop.emit(fileList)
   }
 
+  /**
+   * Dragging element drag over event
+   */
   @HostListener('dragover', ['$event'])
   onDragOver(event: DragEvent): void {
     this._preventAndStop(event)
@@ -59,6 +65,10 @@ export class FileDropDirective {
     this.fileOver.emit(false)
   }
 
+  /**
+   * Prevent propagation trough elements and stop default behavior
+   * For particular event
+   */
   protected _preventAndStop(event: MouseEvent): void {
     event.preventDefault()
     event.stopPropagation()

client/src/app/directives/file-select.directive.ts

@@ -21,6 +21,9 @@ export class FileSelectDirective {
     this.element = element
   }
 
+  /**
+   * Checks if files exist in the input after input change
+   */
   isEmptyAfterSelection(): boolean {
     return !!this.element.nativeElement.attributes.multiple
   }

client/src/app/editor/RowValidation.ts

@@ -1,7 +0,0 @@
-export interface RowValidation {
-  valid: boolean
-  invalidError: string
-  rowNumber?: number
-  colName?: string
-  value?: string
-}

client/src/app/editor/components/edit-record/edit-record.component.ts

@@ -59,6 +59,12 @@ export class EditRecordComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  /**
+   * Runs native HOT validator against cell value
+   * @param cellValidation column rules
+   * @param cellValue value in the cell that is beign validated
+   * @returns Promise boolean - wether valid or invalid
+   */
   async validateRecordCol(
     cellValidation: any,
     cellValue: any
@@ -74,6 +80,12 @@ export class EditRecordComponent implements OnInit {
     })
   }
 
+  /**
+   * Fired when date field in the record change
+   * Function will parse date and format to string
+   * @param date picker value
+   * @param colKey column name (key)
+   */
   recordDateChange(date: Date, colKey: string) {
     let cellValidation = this.currentRecordValidator?.getRule(colKey)
     let format = cellValidation ? cellValidation.dateFormat : ''
@@ -82,24 +94,38 @@ export class EditRecordComponent implements OnInit {
       this.currentRecord[colKey] = moment(date).format(format)
   }
 
-  isRecordModalInvalid(): boolean {
-    return this.currentRecordInvalidCols.length > 0
-  }
-
+  /**
+   * Close edit record modal and apply changes by emitting output event
+   */
   confirmRecordEdit() {
     if (this.currentRecordInvalidCols.length < 1) {
       this.onRecordChange.emit(this.currentRecord)
     }
   }
 
+  /**
+   * Close edit record modal without applying the changes
+   */
   closeRecordEdit() {
     this.onRecordEditClose.emit()
   }
 
+  /**
+   * Emitting output event when dropdown (autocomplete) input in any col change
+   * @param colName column name (key)
+   * @param col column index
+   */
   onRecordDropdownChange(colName: string, col: number) {
     this.onRecordDropdownChanged.emit({ colName, col })
   }
 
+  /**
+   * Emitting output event when input is focused (clicked on) so we can run a `dynamic cell validation`
+   * Since that bit must be run from the parent component (editor.component)
+   * Result is then applied in the `cellValidation` variable and automatically updated in this component.
+   * @param event input event
+   * @param colName column name (key)
+   */
   onRecordInputFocus(event: any, colName: number) {
     this.onRecordInputFocused.emit({ event, colName })
   }

client/src/app/editor/editor.component.html

@@ -280,7 +280,7 @@
                     licenceState.value.editor_rows_allowed === 1
                       ? 'row'
                       : 'rows'
-                  }}, contact support@datacontroller.io</span
+                  }}, contact support&#64;datacontroller.io</span
                 >
               </clr-tooltip-content>
             </clr-tooltip>
@@ -417,7 +417,7 @@
                     licenceState.value.editor_rows_allowed === 1
                       ? 'row'
                       : 'rows'
-                  }}, contact support@datacontroller.io</span
+                  }}, contact support&#64;datacontroller.io</span
                 >
               </clr-tooltip-content>
             </clr-tooltip>
@@ -467,7 +467,7 @@
                         : 'rows'
                     }}
                     will be submitted. To remove the restriction, contact
-                    support@datacontroller.io</span
+                    support&#64;datacontroller.io</span
                   >
                   <div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
                     <div class="form-group">
@@ -528,7 +528,7 @@
                 Due to current licence, only
                 {{ licenceState.value.submit_rows_limit }} rows in a file will
                 be submitted. To remove the restriction, contact
-                support@datacontroller.io
+                support&#64;datacontroller.io
               </p>
             </div>
             <div class="modal-footer">

client/src/app/editor/editor.component.ts

@@ -15,7 +15,15 @@ import { Subject, Subscription } from 'rxjs'
 import { SasStoreService } from '../services/sas-store.service'
 
 import * as XLSX from '@sheet/crypto'
+
+/**
+ * Used in combination with buffer
+ */
 const iconv = require('iconv-lite')
+/**
+ * In combination with `iconv` is used for encoding json data captured with sheet js from excel file into a file again
+ * Which will be send to backend
+ */
 const Buffer = require('buffer/').Buffer
 type AOA = any[][]
 
@@ -30,7 +38,7 @@ import { HotTableInterface } from '../models/HotTable.interface'
 import {
   $DataFormats,
   DSMeta,
-  EditorsGetdataServiceResponse
+  EditorsGetDataServiceResponse
 } from '../models/sas/editors-getdata.model'
 import { DataFormat } from '../models/sas/common/DateFormat'
 import SheetInfo from '../models/SheetInfo'
@@ -374,6 +382,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.setRestrictions()
   }
 
+  /**
+   * Prepare feature restrictions based on licence key
+   */
   private parseRestrictions() {
     this.restrictions.restrictAddRecord =
       this.licenceState.value.addRecord === false
@@ -383,6 +394,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
       this.licenceState.value.fileUpload === false
   }
 
+  /**
+   * Applying prepared restrictions
+   * @param overrideRestrictions can be used to apply and override specific restrictions
+   */
   private setRestrictions(overrideRestrictions?: EditorRestrictions) {
     if (overrideRestrictions) {
       this.restrictions = {
@@ -402,6 +417,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
     }
   }
 
+  /**
+   * Disabling add row button based on wether rows limit is present
+   */
   private checkRowLimit() {
     if (this.columnLevelSecurityFlag) return
 
@@ -416,12 +434,19 @@ export class EditorComponent implements OnInit, AfterViewInit {
     }
   }
 
+  /**
+   * Resetting filter variables
+   */
   public resetFilter() {
     if (this.queryFilterCompList.first) {
       this.queryFilterCompList.first.resetFilter()
     }
   }
 
+  /**
+   * Openning file upload modal
+   * If feature is locked, `feature locked` modal will be shown
+   */
   public onShowUploadModal() {
     if (this.restrictions.restrictFileUpload) {
       this.eventService.showDemoLimitModal('File Upload')
@@ -439,6 +464,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
     if (!this.uploadPreview) this.showUploadModal = true
   }
 
+  /**
+   * Called by FileDropDirective
+   * @param e true if file is dragged over the drop zone
+   */
   public fileOverBase(e: boolean): void {
     this.hasBaseDropZoneOver = e
   }
@@ -620,6 +649,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
     return returnObj
   }
 
+  /**
+   * When excel is password protected we will display the password promppt for user to type password in.
+   * @returns Password user input or undefined if discarded by user
+   */
   public promptExcelPassword(): Promise<string | undefined> {
     return new Promise((resolve, reject) => {
       this.filePasswordModal = true
@@ -645,6 +678,13 @@ export class EditorComponent implements OnInit, AfterViewInit {
     })
   }
 
+  /**
+   * Parses attached file, to be uploaded
+   * If attached file is CSV it will be send to backend straight away
+   * If attached file is EXCEL it will be displayed in the table, in preview mode
+   * @param event file drop event
+   * @param dropped whether it's dropped or added by browse button
+   */
   public getFileDesc(event: any, dropped: boolean = false) {
     this.excelUploadState = 'Loading'
     this.excelFileParsing = true
@@ -1010,6 +1050,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
     }
   }
 
+  /**
+   * Submits attached excel file that is in preview mode
+   */
   public submitExcel() {
     if (this.licenceState.value.submit_rows_limit !== Infinity) {
       this.submitLimitNotice = true
@@ -1019,6 +1062,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.getFile()
   }
 
+  /**
+   * This method will run validations and upload all of the pending files that are in the uploader queue
+   */
   public getFile() {
     if (this.checkInvalid()) {
       this.eventService.showAbortModal(null, 'Invalid values are present.')
@@ -1091,6 +1137,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
       )
   }
 
+  /**
+   * After excel file is attached and parsed, this function will display it's content in the HOT table in read only mode
+   */
   public getPendingExcelPreview() {
     this.queryTextSaved = this.queryText
     this.queryText = ''
@@ -1142,46 +1191,12 @@ export class EditorComponent implements OnInit, AfterViewInit {
       this.excelFileParsing = false
       this.excelUploadState = null
     })
-
-    /**
-     * This is half validation feature to speed up file upload
-     * Currently disabled but will leave it here in case it needs to be re-enabled
-     */
-    // this.excelUploadState = 'Validating-DQ'
-
-    // this.validateRowsOnPendingExcel(
-    //   async (rowValidation: RowValidation | undefined) => {
-    //     if (rowValidation) {
-    //       this.eventService.showAbortModal(
-    //         'Excel validation',
-    //         `Please fix the data and re-submit the file. Invalid data details: <br><br> Row: ${rowValidation.rowNumber} <br> Column: ${rowValidation.colName} <br> Reason: <strong>${rowValidation.invalidError}</strong> <br> Invalid value: ${rowValidation.value}`
-    //       )
-
-    //       this.excelFileParsing = false
-    //       this.excelUploadState = null
-    //     } else {
-    //       this.excelUploadState = 'Validating-HOT'
-
-    //       hot.updateSettings(
-    //         {
-    //           data: this.dataSource
-    //         },
-    //         false
-    //       )
-    //       hot.render()
-
-    //       hot.validateCells(() => {
-    //         this.showUploadModal = false
-    //         this.uploadPreview = true
-
-    //         this.excelFileParsing = false
-    //         this.excelUploadState = null
-    //       })
-    //     }
-    //   }
-    // )
   }
 
+  /**
+   * Drops the attached excel file
+   * @param discardData wheter to discard data parsed from the file or to keep it in the table after dropping a attached excel file
+   */
   public discardPendingExcel(discardData?: boolean) {
     this.hotInstance.updateSettings({
       maxRows: this.licenceState.value.editor_rows_allowed
@@ -1205,6 +1220,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
     }
   }
 
+  /**
+   * Drops attached excel file, keeps it's data in the DC table
+   * User can now edit the table and submit. Witout the file present.
+   */
   public previewTableEditConfirm() {
     this.discardPendingExcel()
     this.convertToCorrectTypes(this.dataSource)
@@ -2945,7 +2964,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
       await this.sasStoreService
         .callService(myParams, 'SASControlTable', 'editors/getdata', this.libds)
-        .then((res: EditorsGetdataServiceResponse) => {
+        .then((res: EditorsGetDataServiceResponse) => {
           this.initSetup(res)
         })
         .catch((err: any) => {
@@ -2957,7 +2976,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {}
 
-  initSetup(response: EditorsGetdataServiceResponse) {
+  initSetup(response: EditorsGetDataServiceResponse) {
     this.hotInstance = this.hotRegisterer.getInstance('hotInstance')
 
     if (this.getdataError) return

client/src/app/editor/models/EditRecordModal.ts

@@ -1,5 +1,10 @@
 import { DcValidation } from 'src/app/shared/dc-validator/models/dc-validation.model'
 
+/**
+ * Wrapper for DC Validation because we need `noLinkOption` property
+ * to be used as a flag to show/hide button that generates link for the
+ * edit record modal
+ */
 export interface EditRecordModal extends DcValidation {
   noLinkOption: boolean
   [key: string]: any

client/src/app/editor/models/cellValidation.ts

@@ -1,19 +0,0 @@
-export interface CellValidation {
-  data: string
-  length: number
-  type?: string
-  source: string[]
-  format?: number
-  validator?: any
-  valid?: boolean
-  renderer?: any
-  dateFormat?: string
-  readOnly?: boolean
-  desc?: string
-  correctFormat?: boolean
-  /**
-   * Key for accessing object fields, any type because it can be
-   * any of the types interface have
-   */
-  [key: string]: any
-}

client/src/app/editor/models/column.ts

@@ -1,36 +0,0 @@
-export enum ColumnType {
-  string = 'string',
-  number = 'number'
-}
-
-export interface ColumnInterface {
-  id: number | undefined
-  name: string | undefined
-  type: ColumnType | undefined
-  length: number | undefined
-}
-
-export class Column implements ColumnInterface {
-  public id: number | undefined
-  public name: string | undefined
-  public type: ColumnType | undefined
-  public length: number | undefined
-  public static fromPlainObject(obj: object) {
-    return Object.assign(new Column(), obj)
-  }
-
-  constructor(id?: number, name?: string, type?: ColumnType, length?: number) {
-    this.id = id
-    this.name = name
-    this.type = type
-    this.length = length
-  }
-
-  get hsType() {
-    return (
-      (this.type === ColumnType.string && 'text') ||
-      (this.type === ColumnType.number && 'numeric') ||
-      null
-    )
-  }
-}

client/src/app/editor/models/dynamicExtendedCellValidation.ts

@@ -1,3 +1,7 @@
+/**
+ * Model for the dynamic cell validation in the editor
+ * (sending whole row to the backend service and recieving data for the cell dropdown)
+ */
 export interface DynamicExtendedCellValidation {
   DISPLAY_INDEX: number
   DISPLAY_TYPE: string

client/src/app/editor/models/edit-record/edit-record-events.ts

@@ -1,8 +1,14 @@
+/**
+ * Edit record modal - input has been focused event
+ */
 export interface EditRecordInputFocusedEvent {
   event: any
   colName: number
 }
 
+/**
+ * Edit record modal - dropdown has been changed event
+ */
 export interface EditRecordDropdownChangeEvent {
   colName: string
   col: number

client/src/app/editor/models/editor-restrictions.model.ts

@@ -1,3 +1,6 @@
+/**
+ * Editor restrictions model (based on the licencing)
+ */
 export interface EditorRestrictions {
   restrictEditRecord?: boolean // Feature is locked but edit/add record buttons are visible so when user clicks he gets the `locked feature modal`
   restrictAddRecord?: boolean // Same as editRecord, but for addRecord

client/src/app/editor/table.ts

@@ -1,71 +0,0 @@
-import { Column, ColumnType } from './models/column'
-
-export enum TableType {
-  INPUT = 'In',
-  OUTPUT = 'Out'
-}
-
-export interface TableInterface {
-  id: number | undefined
-  name: string | undefined
-  data: Array<Object>
-  columns: Array<Column>
-  type: TableType | undefined
-}
-
-export class Table implements TableInterface {
-  public id: number | undefined
-  public name: string | undefined
-  public data: Array<any>
-  public columns: Array<Column> = []
-  public type: TableType | undefined
-
-  public static fromPlainObject(obj: any) {
-    obj.columns = obj.columns.map((column: object) => {
-      return Column.fromPlainObject(column)
-    })
-
-    return Object.assign(new Table(), obj)
-  }
-
-  constructor(
-    id?: number,
-    name?: string,
-    type?: TableType,
-    data?: Array<Object>,
-    columns?: Array<Column>
-  ) {
-    this.id = id
-    this.name = name
-    this.type = type
-
-    this.data = data || [{}]
-    this.columns = columns || []
-  }
-
-  public getNextColumnId(): number {
-    let highestIdColumn: any = this.columns.sort(
-      (cA: any, cB: any) => cA.id - cB.id
-    )[this.columns.length - 1]
-    return (highestIdColumn && highestIdColumn.id + 1) || 0
-  }
-
-  public addColumn(column: Column) {
-    this.columns.push(column)
-
-    this.data.forEach((row: any) => {
-      if (column.name) {
-        row[column.name] = column.type === ColumnType.string ? '' : null
-      }
-    })
-
-    return column
-  }
-
-  public removeColumn(colInd: any) {
-    this.data.forEach((row) => {
-      delete row[this.columns[colInd].name!]
-    })
-    this.columns.splice(colInd, 1)
-  }
-}

client/src/app/editor/utils/date.utils.ts

@@ -1,3 +1,6 @@
+/**
+ * Converting date object to the UTC time string
+ */
 export const dateToUtcTime = (date: Date) => {
   let timeStr = ('0' + date.getUTCHours()).slice(-2) + ':'
   timeStr = timeStr + ('0' + date.getUTCMinutes()).slice(-2) + ':'
@@ -5,6 +8,9 @@ export const dateToUtcTime = (date: Date) => {
   return timeStr
 }
 
+/**
+ * Converts date object to the time string
+ */
 export const dateToTime = (date: Date) => {
   let timeStr = ('0' + date.getHours()).slice(-2) + ':'
   timeStr = timeStr + ('0' + date.getMinutes()).slice(-2) + ':'
@@ -12,6 +18,9 @@ export const dateToTime = (date: Date) => {
   return timeStr
 }
 
+/**
+ * Converts date object to the YYYY-MM-DD
+ */
 export const dateFormat = (date: Date) => {
   return (
     date.getFullYear() +

client/src/app/editor/utils/grid.utils.ts

@@ -1,9 +1,17 @@
 import { Col } from 'src/app/shared/dc-validator/models/col.model'
 
+/**
+ * Converts excel date serial number to JS date
+ */
 export const excelDateToJSDate = (serial: number) => {
   return new Date(Math.round((serial - 25569) * 86400 * 1000))
 }
 
+/**
+ * Parsing table columns for the HOT in editor
+ * Converts array of objects into array of strings, every string is column name (key)
+ * @param data array of objects (columns data)
+ */
 export const parseTableColumns = (data: Col[]): string[] => {
   const columns: string[] = []
 
@@ -16,6 +24,12 @@ export const parseTableColumns = (data: Col[]): string[] => {
   return columns
 }
 
+/**
+ * Captures headers that are not found in the current table but is found in the uploaded file data
+ * @param data
+ * @param headers
+ * @returns string array of missing headers
+ */
 export const getMissingHeaders = (data: any, headers: any) => {
   const missingHeaders: string[] = []
   const remainingHeaders: string[] = []

client/src/app/editor/utils/renderers.utils.ts

@@ -1,3 +1,7 @@
+/**
+ * Custom renderer for HOT cell
+ * Used to show error icon
+ */
 export const errorRenderer = (
   instance: any,
   td: any,
@@ -14,6 +18,10 @@ export const errorRenderer = (
   return td
 }
 
+/**
+ * Custom renderer for HOT cell
+ * Used to revert cell back to original state (no spinner, no error)
+ */
 export const noSpinnerRenderer = (
   instance: any,
   td: any,
@@ -28,7 +36,11 @@ export const noSpinnerRenderer = (
   return td
 }
 
-// Spinner shown whilst waiting for SAS to respond
+/**
+ * Custom renderer for HOT cell
+ * Used to show loading spinner in the cell
+ * (Spinner shown whilst waiting for SAS to respond)
+ */
 export const spinnerRenderer = (
   instance: any,
   td: any,

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 { XLMapModule } from '../xlmap/xlmap.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeRouteComponent,
+    children: [
+      { path: '', pathMatch: 'full', redirectTo: 'tables' },
+      { path: 'tables', component: HomeComponent },
+      { path: 'files', loadChildren: () => XLMapModule }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule {}

client/src/app/home/home.component.html

@@ -100,7 +100,7 @@
               *clrIfOpen
             >
               <span *ngIf="tableLocked">
-                To unlock all tables, contact support@datacontroller.io
+                To unlock all tables, contact support&#64;datacontroller.io
               </span>
             </clr-tooltip-content>
           </clr-tooltip>

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

@@ -1,15 +1,18 @@
-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'
 
 @NgModule({
-  declarations: [HomeComponent],
+  declarations: [HomeComponent, HomeRouteComponent],
   imports: [
+    HomeRoutingModule,
     FormsModule,
     ClarityModule,
     AppSharedModule,

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { LicensingGuard } from '../routes/licensing.guard'
+import { LicensingComponent } from './licensing.component'
+
+const routes: Routes = [
+  {
+    path: ':action',
+    component: LicensingComponent,
+    canActivate: [LicensingGuard],
+    canDeactivate: [LicensingGuard]
+  }
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LicensingRoutingModule {}

client/src/app/licensing/licensing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+import { LicensingRoutingModule } from './licensing-routing.module'
+import { ClarityModule } from '@clr/angular'
+import { SharedModule } from '../shared/shared.module'
+import { LicensingComponent } from './licensing.component'
+import { FormsModule } from '@angular/forms'
+
+@NgModule({
+  declarations: [LicensingComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ClarityModule,
+    LicensingRoutingModule,
+    SharedModule
+  ]
+})
+export class LicensingModule {}

client/src/app/models/ErrorBody.ts

@@ -0,0 +1,5 @@
+export interface ErrorBody {
+  message: string
+  details: any
+  raw: any
+}

client/src/app/models/sas/editors-getdata.model.ts

@@ -4,12 +4,12 @@ import { DQData, SASParam } from '../TableData'
 import { BaseSASResponse } from './common/BaseSASResponse'
 import { DataFormat } from './common/DateFormat'
 
-export interface EditorsGetdataServiceResponse {
-  data: EditorsGetdataSASResponse
+export interface EditorsGetDataServiceResponse {
+  data: EditorsGetDataSASResponse
   libds: string
 }
 
-export interface EditorsGetdataSASResponse extends BaseSASResponse {
+export interface EditorsGetDataSASResponse extends BaseSASResponse {
   $sasdata: $DataFormats
   sasdata: Sasdata[]
   sasparams: SASParam[]

client/src/app/query/query.component.ts

@@ -137,6 +137,11 @@ export class QueryComponent
   public whereClause: string | undefined
   public logicOperators: Array<string> = ['AND', 'OR']
 
+  /**
+   * Temporary values array used in pickers
+   * because they need particular format to work
+   * before sending values to backend, values are parsed
+   */
   public queryDateTime: QueryDateTime[] = []
 
   public currentClauseIndex: number = -1
@@ -158,6 +163,11 @@ export class QueryComponent
     }
   }
 
+  /**
+   * Gets and sets temporary values selected with DATETIME or TIME picker
+   * Those values are used for picker to work with format it lieks
+   * Later before sending values to backend, values are parsed
+   */
   getQueryDateTime(clauseIndex: number, queryIndex: number): QueryDateTime {
     let existingQueryDateTime = this.queryDateTime.find(
       (x) => x.clauseIndex === clauseIndex && x.queryIndex === queryIndex
@@ -178,10 +188,16 @@ export class QueryComponent
     return existingQueryDateTime
   }
 
+  /**
+   * When toggling pickers feature we reset the temp picker values array
+   */
   usePickersChange() {
     this.queryDateTime = []
   }
 
+  /**
+   * Resets all variables used for filtering
+   */
   public resetFilter() {
     this.whereString = undefined
     this.whereClause = undefined
@@ -210,6 +226,10 @@ export class QueryComponent
     this.whereClauseFn(true)
   }
 
+  /**
+   * `Globals` are used to store filtering state (variables) as a caching feature
+   * until browser reloads
+   */
   public setToGlobals() {
     if (!this.caching) return
 
@@ -237,6 +257,10 @@ export class QueryComponent
     console.log('globals', globals)
   }
 
+  /**
+   * `Globals` are used to store filtering state (variables) as a caching feature
+   * until browser reloads
+   */
   public getFromGlobals() {
     if (!this.caching) return
 
@@ -269,6 +293,11 @@ export class QueryComponent
     }
   }
 
+  /**
+   * Sets filtering multiple caluses group logic (and / or)
+   *
+   * @param groupLogic to set
+   */
   public setGroupLogic(groupLogic: any) {
     this.groupLogic = groupLogic
     this.clauses.groupLogic = groupLogic

client/src/app/review/approve-details/approve-details.component.ts

@@ -1,13 +1,13 @@
 import { ActivatedRoute } from '@angular/router'
-import { SasStoreService } from '../services/sas-store.service'
+import { SasStoreService } from '../../services/sas-store.service'
 import { Component, AfterViewInit, OnDestroy } from '@angular/core'
 import { Subscription } from 'rxjs'
 import { Router } from '@angular/router'
-import { EventService } from '../services/event.service'
+import { EventService } from '../../services/event.service'
 import {
   AuditorsPostdataSASResponse,
   Param
-} from '../models/sas/auditors-postdata.model'
+} from '../../models/sas/auditors-postdata.model'
 
 interface ChangesObj {
   ind: any
@@ -89,7 +89,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
   }
 
   public goToApprovalsList() {
-    this.route.navigateByUrl('/approve')
+    this.route.navigateByUrl('/review/approve')
   }
 
   public getTable(tableId: any) {
@@ -136,7 +136,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
     await this.sasStoreService
       .rejecting(rejParams, 'BrowserParams', 'approvers/rejection')
       .then((res: any) => {
-        this.route.navigateByUrl('/history')
+        this.route.navigateByUrl('/review/history')
       })
       .catch((err: any) => {
         this.acceptLoading = false
@@ -156,7 +156,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
     await this.sasStoreService
       .approveTable(approveParams, 'SASControlTable', 'auditors/postdata')
       .then((res: any) => {
-        this.route.navigateByUrl('/history')
+        this.route.navigateByUrl('/review/history')
       })
       .catch((err: any) => {
         this.acceptLoading = false
@@ -164,7 +164,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
   }
 
   public goToSubmitList() {
-    this.route.navigateByUrl('/submitted')
+    this.route.navigateByUrl('/review/submitted')
   }
 
   public async callChangesInfo(tableId: any) {

client/src/app/review/approve/approve.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core'
-import { SasStoreService } from '../services/sas-store.service'
+import { SasStoreService } from '../../services/sas-store.service'
 import { Router } from '@angular/router'
-import { SasService } from '../services/sas.service'
-import { EventService } from '../services/event.service'
+import { SasService } from '../../services/sas.service'
+import { EventService } from '../../services/event.service'
 
 interface ApproveData {
   tableId: string
@@ -45,7 +45,7 @@ export class ApproveComponent implements OnInit {
     if (this.approveList !== undefined) {
       this.tableId = this.approveList[ind].tableId
       this.route.navigateByUrl(
-        'approve/approveDet/' + this.approveList[ind].tableId
+        'review/approveDet/' + this.approveList[ind].tableId
       )
     }
   }

client/src/app/review/history/history.component.html

@@ -72,7 +72,7 @@
       >
         To unlock more than
         {{ licenceState.value.history_rows_allowed }} records, contact
-        support@datacontroller.io
+        support@datacontroller.io
       </p>
     </div>
 

client/src/app/review/history/history.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core'
 
-import { SasStoreService } from '../services/sas-store.service'
 import { Router } from '@angular/router'
-import { SasService } from '../services/sas.service'
-import { EventService } from '../services/event.service'
 import { SASjsConfig } from '@sasjs/adapter'
-import { LicenceService } from '../services/licence.service'
+import {
+  LicenceService,
+  SasStoreService,
+  EventService,
+  SasService
+} from 'src/app/services'
 
 @Component({
   selector: 'app-history',

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

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { ApproveDetailsComponent } from './approve-details/approve-details.component'
+import { ApproveComponent } from './approve/approve.component'
+import { SubmitterComponent } from './submitter/submitter.component'
+import { HistoryComponent } from './history/history.component'
+
+const ROUTES: Routes = [
+  { path: 'approve', component: ApproveComponent },
+  { path: 'approveDet/:tableId', component: ApproveDetailsComponent },
+  { path: 'submitted', component: SubmitterComponent },
+  { path: 'submitted/:tableId', component: SubmitterComponent },
+  { path: 'history', component: HistoryComponent }
+]
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class ReviewRoutingModule {}

client/src/app/review/review.module.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { ClarityModule } from '@clr/angular'
+import { HotTableModule } from '@handsontable/angular'
+import { DirectivesModule } from '../directives/directives.module'
+import { SharedModule } from '../shared/shared.module'
+import { ApproveDetailsComponent } from './approve-details/approve-details.component'
+import { ApproveComponent } from './approve/approve.component'
+import { ReviewRoutingModule } from './review-routing.module'
+import { SubmitterComponent } from './submitter/submitter.component'
+import { HistoryComponent } from './history/history.component'
+
+@NgModule({
+  declarations: [
+    ApproveComponent,
+    ApproveDetailsComponent,
+    SubmitterComponent,
+    HistoryComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReviewRoutingModule,
+    ClarityModule,
+    HotTableModule.forRoot(),
+    DirectivesModule,
+    SharedModule
+  ]
+})
+export class ReviewModule {}

client/src/app/review/submitter/submitter.component.ts

@@ -1,9 +1,7 @@
 import { Component, AfterViewInit, OnInit } from '@angular/core'
 import { Subscription } from 'rxjs'
-import { SasStoreService } from '../services/sas-store.service'
 import { ActivatedRoute, Router } from '@angular/router'
-import { SasService } from '../services/sas.service'
-import { EventService } from '../services/event.service'
+import { SasStoreService, EventService, SasService } from '../../services'
 
 interface SubmitterData {
   tableId: string
@@ -46,7 +44,7 @@ export class SubmitterComponent implements OnInit, AfterViewInit {
   }
 
   public goToDetails(table_id: any) {
-    this.router.navigateByUrl('/submitted/' + table_id)
+    this.router.navigateByUrl('/review/submitted/' + table_id)
   }
 
   public getDetails(sub: any, index: any) {

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

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

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

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-
-@Component({
-  selector: 'app-edit-route',
-  templateUrl: './edit-route.component.html',
-  styleUrls: ['./edit-route.component.scss']
-})
-export class EditRouteComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

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

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-
-@Component({
-  selector: 'app-history-route',
-  templateUrl: './history-route.component.html',
-  styleUrls: ['./history-route.component.scss']
-})
-export class HistoryRouteComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

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/routes/review-route/review-route.component.ts

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

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

@@ -0,0 +1,17 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+
+@Component({
+  selector: 'app-xlmap-route',
+  templateUrl: './xlmap-route.component.html',
+  styleUrls: ['./xlmap-route.component.scss'],
+  host: {
+    class: 'content-container'
+  }
+})
+export class XLMapRouteComponent 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,10 +136,17 @@ export class AppService {
           globals.editor.libsAndTables = libsAndTables
         }
 
+        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
 
+        globals.dcLib = res.globvars[0].DCLIB
+
         await this.licenceService.activation(res)
       })
       .catch((err: any) => {

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

@@ -17,6 +17,17 @@ export class HelperService {
     console.log('Is IE or Edge?', this.isMicrosoft)
   }
 
+  /**
+   * Converts a JavaScript date object to a SAS Date or Datetime, given the logic below:
+   *
+   * A JS Date contains the number of _milliseconds_ since 01/01/1970
+   * A SAS Date contains the number of _days_ since 01/01/1960
+   * A SAS Datetime contains the number of _seconds_ since 01/01/1960
+   *
+   * @param jsDate JS Date to be converted. The type is instance of `Date`
+   * @param unit Unit in which to return the SAS Date / datetime, eg `sasdate | sasdatetime`
+   * @returns SAS Date value based on `unit` param
+   */
   public convertJsDateToSasDate(
     jsDate: string | Date,
     unit: string = 'days'
@@ -63,6 +74,17 @@ export class HelperService {
     return 0
   }
 
+  /**
+   * Converts a SAS Date or Datetime to a JavaScript date object, given the logic below:
+   *
+   * A JS Date contains the number of _milliseconds_ since 01/01/1970
+   * A SAS Date contains the number of _days_ since 01/01/1960
+   * A SAS Datetime contains the number of _seconds_ since 01/01/1960
+   *
+   * @param sasValue SAS Date or Datetime to be converted. The type could be `number` or `string.
+   * @param unit Unit from which to convert the SAS Date / Datetime, eg `sasdate | sasdatetime`
+   * @returns JavaScript Date object
+   */
   public convertSasDaysToJsDate(
     sasValue: number | string,
     unit: string = 'days'
@@ -87,6 +109,11 @@ export class HelperService {
     return new Date(msNegativeTenYears + sasValue * msInDay)
   }
 
+  /**
+   *
+   * @param array all elements in the clarity tree
+   * @param arrToFilter sub array in the tree to be filtered for example `tables`
+   */
   public treeOnFilter(array: any, arrToFilter: string) {
     let search = array['searchString'] ? array['searchString'] : ''
     let arrToFilterArray = arrToFilter.split('.')[0]

client/src/app/services/sas-store.service.ts

@@ -10,8 +10,8 @@ import { globals } from '../_globals'
 import { FilterClause, FilterGroup, FilterQuery } from '../models/FilterQuery'
 import {
   $DataFormats,
-  EditorsGetdataSASResponse,
-  EditorsGetdataServiceResponse
+  EditorsGetDataSASResponse,
+  EditorsGetDataServiceResponse
 } from '../models/sas/editors-getdata.model'
 import { LoggerService } from './logger.service'
 import { isSpecialMissing } from '@sasjs/utils/input/validators'
@@ -40,6 +40,16 @@ export class SasStoreService {
     private loggerService: LoggerService
   ) {}
 
+  /**
+   * Wrapper for making request to service
+   * Should be removed, as it's redundant now
+   * TODO: Refactor to call editors/getdata directly
+   * @param tableData
+   * @param tableName
+   * @param program
+   * @param libds
+   * @returns
+   */
   public async callService(
     tableData: Array<any>,
     tableName: string,
@@ -47,19 +57,28 @@ export class SasStoreService {
     libds: string
   ) {
     this.libds = libds
-    let tables: any = {}
+    const tables: any = {}
     tables[tableName] = [tableData]
-    let res: EditorsGetdataSASResponse = await this.sasService.request(
+    const res: EditorsGetDataSASResponse = await this.sasService.request(
       program,
       tables
     )
-    let response: EditorsGetdataServiceResponse = {
+    const response: EditorsGetDataServiceResponse = {
       data: res,
       libds: this.libds
     }
     return response
   }
 
+  /**
+   * Calling editors/stagedata - saving table data, sending request to backend
+   * @param tableParams params to send to backend
+   * @param tableData data to be updated
+   * @param tableName name of the table to be updated
+   * @param program service against which we send request
+   * @param $dataFormats column data formats recieved from backend, sending it back
+   * @returns adapter.request() response
+   */
   public async updateTable(
     tableParams: any,
     tableData: any,
@@ -86,6 +105,13 @@ export class SasStoreService {
     return res
   }
 
+  /**
+   * Sending request to 'approvers/getapprovals' to fetch approvals list
+   * @param tableData sending to backend table data
+   * @param tableName sending to backend table name
+   * @param program service to run request on
+   * @returns HTTP Response
+   */
   public async getApprovals(
     tableData: any,
     tableName: string,
@@ -96,6 +122,13 @@ export class SasStoreService {
     let res: any = await this.sasService.request(program, tables)
     return res
   }
+
+  /**
+   * Interceptor for loading of the submitted details
+   * @param detail submitter
+   * @param index submitter index
+   * @param data submit data
+   */
   public async sendDetails(detail: any, index: any, data: any) {
     let details = Object.assign({ sub: true }, detail)
     let subData = data[index]
@@ -105,11 +138,20 @@ export class SasStoreService {
     }
     this.submittDetail.next(allData)
   }
+
+  /**
+   *
+   * @returns All submits
+   */
   public async getSubmitts() {
     let res: any = await this.sasService.request('editors/getsubmits', null)
     return res
   }
 
+  /**
+   *
+   * @returns All libraries
+   */
   public async viewLibs() {
     return this.sasService.request('public/viewlibs', null)
   }
@@ -167,6 +209,14 @@ export class SasStoreService {
     return res
   }
 
+  public async getXLMapRules(id: string) {
+    const tables = {
+      getxlmaps_in: [{ XLMAP_ID: id }]
+    }
+    const res: any = await this.sasService.request('editors/getxlmaps', tables)
+    return res
+  }
+
   public async getDetails(tableData: any, tableName: string, program: string) {
     let tables: any = {}
     tables[tableName] = [tableData]

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

@@ -13,6 +13,7 @@ import { DcAdapterSettings } from '../models/DcAdapterSettings'
 import { AppStoreService } from './app-store.service'
 import { LoggerService } from './logger.service'
 import { RequestWrapperOptions } from '../models/RequestWrapperOptions'
+import { ErrorBody } from '../models/ErrorBody'
 
 @Injectable({
   providedIn: 'root'
@@ -39,6 +40,11 @@ export class SasService {
     private router: Router
   ) {}
 
+  /**
+   * Same as `setup` function in the sasjs.service, this is the constructor replacement.
+   * This function is being called by `app.service`.
+   * Because of timing and dependency issues
+   */
   public sasServiceInit() {
     this.dcAdapterSettings = this.appStoreService.getDcAdapterSettings()
 
@@ -80,6 +86,16 @@ export class SasService {
     }
   }
 
+  /**
+   * Runing a backend request against a service.
+   * Function also handles the displaying of success or error modals.
+   *
+   * @param url service to run reuqest against
+   * @param data to be sent to backend service
+   * @param config additional parameters to force eg. { debug: false }
+   * @param wrapperOptions used to suppress error or success abort modals after request is finished
+   * @returns
+   */
   public request(
     url: string,
     data: any,
@@ -197,6 +213,14 @@ export class SasService {
     })
   }
 
+  /**
+   * Uploads a file to the backend, using the adapter upload function.
+   *
+   * @param sasService Service to which the file will be sent
+   * @param files Files to be sent
+   * @param params Aditional parameters eg. { debug: false }
+   * @returns HTTP Response
+   */
   public uploadFile(sasService: string, files: UploadFile[], params: any) {
     return this.sasjsAdapter.uploadFile(sasService, files, params)
   }
@@ -487,9 +511,3 @@ export class SasService {
     }
   }
 }
-
-interface ErrorBody {
-  message: string
-  details: any
-  raw: any
-}

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

@@ -25,6 +25,12 @@ export class SasjsService {
     private appStoreService: AppStoreService
   ) {}
 
+  /**
+   * This function is replacing the constructor.
+   * The reason for this is timing issues, other services eg. sas.service, app-store.service
+   * must be initialized before this bit of code is executed.
+   * This function is being called by `sas.service`
+   */
   setup() {
     const adapterConfig = this.appStoreService.getDcAdapterSettings()
 
@@ -32,10 +38,18 @@ export class SasjsService {
     this.driveUrl = `${this.url}/drive`
   }
 
+  /**
+   *
+   * @returns Sasjs/server information
+   */
   getServerInfo(): Observable<SASjsApiServerInfo> {
     return this.http.get<SASjsApiServerInfo>(`${this.url}/info`)
   }
 
+  /**
+   * Gets file contents on a given path
+   * @param filePath path to the file
+   */
   getFileFromDrive(filePath: string) {
     return this.http.get(
       `${this.driveUrl}/file/?_filePath=${filePath}`,
@@ -43,6 +57,11 @@ export class SasjsService {
     )
   }
 
+  /**
+   * Gets folder contents on a given path
+   * @param folderPath path to the folder
+   * @returns
+   */
   getFolderContentsFromDrive(
     folderPath: string
   ): Observable<SASjsApiDriveFolderContents> {

client/src/app/shared/abort-modal/info-modal.component.ts

@@ -41,6 +41,14 @@ export class InfoModalComponent implements OnInit {
     this.data = newData
   }
 
+  /**
+   * Wheter or not to show the `Open configurator button`
+   * Button used for navigating to the `configuration` page
+   * Only for SAS9
+   * @param sasService backend service that caused this info modal to be shown
+   * Decision is made based on that service path
+   * @returns
+   */
   showConfiguratorButton(sasService: string | null) {
     const sasjsConfig = this.sasService.getSasjsConfig()
 
@@ -54,6 +62,9 @@ export class InfoModalComponent implements OnInit {
     this.onConfirmModalClick.emit()
   }
 
+  /**
+   * Only on SAS9, opening a backend configurator/deploy page
+   */
   openConfigurator() {
     this.eventService.startupDataLoaded()
     this.router.navigateByUrl('/deploy')

client/src/app/shared/contact-link/contact-link.component.html

@@ -2,5 +2,5 @@
   [ngClass]="classes"
   [class.unset]="classes !== ''"
   href="mailto:support@datacontroller.io?subject=Licence"
-  >support@datacontroller.io</a
+  >support&#64;datacontroller.io</a
 >

client/src/app/shared/dc-tree/dc-tree.component.html

@@ -106,7 +106,7 @@
             *clrIfOpen
           >
             <span *ngIf="tableLocked">
-              To unlock all tables, contact support@datacontroller.io
+              To unlock all tables, contact support&#64;datacontroller.io
             </span>
           </clr-tooltip-content>
 

client/src/app/shared/sidebar/sidebar.component.html

@@ -55,14 +55,14 @@
         <a
           *ngIf="isMainRoute('approve')"
           clrVerticalNavLink
-          routerLink="/approve/submitted"
+          routerLink="/review/approve/submitted"
           routerLinkActive="active"
           >Submitted</a
         >
         <a
           *ngIf="isMainRoute('approve')"
           clrVerticalNavLink
-          routerLink="/approve/toapprove"
+          routerLink="/review/approve/toapprove"
           routerLinkActive="active"
           >To Approve</a
         >
@@ -107,7 +107,29 @@
       </clr-tab-content>
     </clr-tab>
   </clr-tabs>
-  <p *ngIf="isMainRoute('home')" class="page-title">Edit</p>
+
+  <div
+    *ngIf="isMainRoute('home')"
+    class="d-flex justify-content-center sub-dropdown"
+  >
+    <clr-dropdown>
+      <button class="dropdown-toggle btn btn-link" clrDropdownTrigger>
+        {{ getSubPage() }}
+        <clr-icon shape="caret down"></clr-icon>
+      </button>
+      <clr-dropdown-menu *clrIfOpen>
+        <a
+          clrVerticalNavLink
+          routerLink="/home/tables"
+          routerLinkActive="active"
+          >Tables</a
+        >
+        <a clrVerticalNavLink routerLink="/home/files" routerLinkActive="active"
+          >Files</a
+        >
+      </clr-dropdown-menu>
+    </clr-dropdown>
+  </div>
 
   <div class="nav-divider"></div>
 

client/src/app/shared/viewboxes/viewboxes.component.html

@@ -13,7 +13,7 @@
       class="licence-notice"
       >To unlock more then {{ licenceState.value.viewbox_limit }}
       {{ licenceState.value.viewbox_limit === 1 ? 'viewbox' : 'viewboxes' }},
-      contact support@datacontroller.io</span
+      contact support&#64;datacontroller.io</span
     >
   </h3>
 

client/src/app/stage/stage.component.ts

@@ -7,6 +7,7 @@ import { EventService } from '../services/event.service'
 import { AppService } from '../services/app.service'
 import { HotTableInterface } from '../models/HotTable.interface'
 import { LicenceService } from '../services/licence.service'
+import { globals } from '../_globals'
 
 @Component({
   selector: 'app-stage',
@@ -47,7 +48,7 @@ export class StageComponent implements OnInit {
   }
 
   public approveTableScreen() {
-    this.route.navigateByUrl('/approve/approveDet/' + this.table_id)
+    this.route.navigateByUrl('/review/approveDet/' + this.table_id)
   }
 
   public viewerTableScreen() {
@@ -55,8 +56,16 @@ export class StageComponent implements OnInit {
   }
 
   public goBack() {
+    const xlmap = globals.xlmaps.find(
+      (xlmap) => xlmap.targetDS === this.tableDetails.BASE_TABLE
+    )
+    if (xlmap) {
+      const id = this.hotTable.data[0].XLMAP_ID
+      this.route.navigateByUrl('/home/files/' + id)
+    } else {
       this.route.navigateByUrl('/editor/' + this.tableDetails.BASE_TABLE)
     }
+  }
 
   public download(id: any) {
     let sasjsConfig = this.sasService.getSasjsConfig()

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { SystemComponent } from './system.component'
+
+const routes: Routes = [{ path: '', component: SystemComponent }]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SystemRoutingModule {}

client/src/app/system/system.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+import { SystemRoutingModule } from './system-routing.module'
+import { SystemComponent } from './system.component'
+import { ClarityModule } from '@clr/angular'
+
+@NgModule({
+  declarations: [SystemComponent],
+  imports: [CommonModule, SystemRoutingModule, ClarityModule]
+})
+export class SystemModule {}

client/src/app/viewer/viewer.component.html

@@ -105,7 +105,7 @@
               *clrIfOpen
             >
               <span *ngIf="tableLocked">
-                To unlock all tables, contact support@datacontroller.io
+                To unlock all tables, contact support&#64;datacontroller.io
               </span>
             </clr-tooltip-content>
           </clr-tooltip>
@@ -630,6 +630,9 @@
         [cells]="hotTable.cells"
         [maxRows]="hotTable.maxRows"
         [manualColumnResize]="true"
+        [rowHeaders]="hotTable.rowHeaders"
+        [rowHeaderWidth]="hotTable.rowHeaderWidth"
+        [rowHeights]="hotTable.rowHeights"
         [licenseKey]="hotTable.licenseKey"
       >
       </hot-table>

client/src/app/viewer/viewer.component.ts

@@ -108,6 +108,11 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     settings: {},
     afterGetColHeader: undefined,
     licenseKey: undefined,
+    rowHeaders: (index: number) => {
+      return ' '
+    },
+    rowHeaderWidth: 15,
+    rowHeights: 20,
     contextMenu: ['copy_with_column_headers', 'copy_column_headers_only'],
     copyPaste: {
       copyColumnHeaders: true,
@@ -201,16 +206,28 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     )
   }
 
+  /**
+   * Open viewboxes modal
+   */
   public newViewbox() {
     this.viewboxOpen = true
   }
 
+  /**
+   * Resetting filter variables
+   */
   public resetFilter() {
     if (this.queryFilterCompList.first) {
       this.queryFilterCompList.first.resetFilter()
     }
   }
 
+  /**
+   * Searching table against particular string, data is comming from backend.
+   * There is also a toggle that will search for a numeric values
+   *
+   * @param inputElement input from which search string is captured
+   */
   public async searchTable(inputElement: any) {
     this.searchLoading = true
 
@@ -249,6 +266,9 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     this.searchLoading = false
   }
 
+  /**
+   * Re sending request to backend and re-setting data in the HOT
+   */
   public reloadTableData() {
     this.viewData(this.urlFilterPk || 0)
   }
@@ -278,6 +298,9 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     )
   }
 
+  /**
+   * FIXME: Should be removed, not used
+   */
   public filterFn(input: string) {
     let libraries = this.libraries
     this.libraries = libraries.filter(
@@ -286,6 +309,9 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     )
   }
 
+  /**
+   * Downloads file from backend, against `getrawdata` service, link is created and open in new tab
+   */
   public downloadData() {
     let storage = this.sasjsConfig.serverUrl
     let metaData = this.sasjsConfig.appLoc
@@ -320,6 +346,9 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     this.openDownload = false
   }
 
+  /**
+   * Downloads file from backend, against `getddl` service, link is created and open in new tab
+   */
   public downloadDDL() {
     let libref = this.lib
     let ds = this.table
@@ -346,15 +375,27 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     this.openDownload = false
   }
 
+  /**
+   * When clicked on textarea in the Web Query Modal, this function will
+   * select all text inside.
+   * @param evt textarea which contains the web query text
+   */
   public onCliCommandFocus(evt: any): void {
     evt.preventDefault()
     evt.target.select()
   }
 
+  /**
+   * Navigate to the edit page of a viewing table
+   */
   public editTable() {
     this.router.navigateByUrl('/editor/' + this.libTab)
   }
 
+  /**
+   * Used to show/hide the edit table button
+   * @returns Wheter currently viewed table is edtiable
+   */
   public tableEditExists() {
     let editTables: any = {}
     editTables = globals.editor.libsAndTables
@@ -367,12 +408,18 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     return editTables[currentLibrary].includes(currentTable)
   }
 
+  /**
+   * Navigate to the lineage of a viewing table
+   */
   public goToLineage() {
     let routeUri = this.tableuri!.split('\\')[1]
     let lineageUrl = `/view/lineage/${routeUri}/REVERSE`
     this.router.navigateByUrl(lineageUrl)
   }
 
+  /**
+   * Displays web query modal
+   */
   public showWebQuery() {
     this.webQuery = true
     let filter_pk: number

client/src/app/viewer/viewer.module.ts

@@ -13,9 +13,22 @@ import { SharedModule } from '../shared/shared.module'
 import { ViewboxesModule } from '../shared/viewboxes/viewboxes.module'
 import { QueryModule } from '../query/query.module'
 import { DirectivesModule } from '../directives/directives.module'
+import { UserComponent } from '../user/user.component'
+import { RoleComponent } from '../role/role.component'
+import { GroupComponent } from '../group/group.component'
+import { LineageComponent } from '../lineage/lineage.component'
+import { MetadataComponent } from '../metadata/metadata.component'
 
 @NgModule({
-  declarations: [ViewerComponent, ViewRouteComponent],
+  declarations: [
+    ViewerComponent,
+    ViewRouteComponent,
+    UserComponent,
+    RoleComponent,
+    GroupComponent,
+    LineageComponent,
+    MetadataComponent
+  ],
   imports: [
     ViewboxesModule,
     CommonModule,

client/src/app/xlmap/tests/xl.utils.spec.ts

@@ -0,0 +1,159 @@
+import {
+  extractRowAndCol,
+  getCellAddress,
+  getFinishingCell,
+  isBlankRow
+} from '../utils/xl.utils'
+
+describe('isBlankRow', () => {
+  it('should return true for a blank row', () => {
+    const blankRow = { __rowNum__: 1 }
+    expect(isBlankRow(blankRow)).toBeTrue()
+  })
+
+  it('should return false for a non-blank row', () => {
+    const nonBlankRow = {
+      B: 3,
+      C: 'some value',
+      D: -203
+    }
+    expect(isBlankRow(nonBlankRow)).toBeFalse()
+  })
+})
+
+describe('extractRowAndCol', () => {
+  it('should extract row and column from "MATCH F R[2]C[0]: CASH BALANCE"', () => {
+    const input = 'MATCH F R[2]C[0]: CASH BALANCE'
+    const result = extractRowAndCol(input)
+    expect(result).toEqual({ row: 2, column: 0 })
+  })
+
+  it('should extract row and column from "RELATIVE R[10]C[6]"', () => {
+    const input = 'RELATIVE R[10]C[6]'
+    const result = extractRowAndCol(input)
+    expect(result).toEqual({ row: 10, column: 6 })
+  })
+
+  it('should return null for invalid input', () => {
+    const invalidInput = 'INVALID INPUT'
+    const result = extractRowAndCol(invalidInput)
+    expect(result).toBeNull()
+  })
+})
+
+describe('getCellAddress', () => {
+  const arrayOfObjects = [
+    { A: 'valueA1', B: 'valueB1' },
+    { A: 'valueA2', B: 'valueB2' }
+  ]
+
+  it('should convert "ABSOLUTE D8" to A1-style address', () => {
+    const input = 'ABSOLUTE D8'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('D8')
+  })
+
+  it('should convert "RELATIVE R[10]C[6]" to A1-style address', () => {
+    const input = 'RELATIVE R[10]C[6]'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('F10')
+  })
+
+  it('should convert "MATCH 1 R[0]C[0]:valueA1" to A1-style address', () => {
+    const input = 'MATCH 1 R[0]C[0]:valueA1'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('A1')
+  })
+
+  it('should convert "MATCH A R[0]C[0]:valueA1" to A1-style address', () => {
+    const input = 'MATCH A R[0]C[0]:valueA1'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('A1')
+  })
+
+  it('should convert "MATCH 1 R[1]C[0]:valueA1" to A1-style address', () => {
+    const input = 'MATCH 1 R[1]C[0]:valueA1'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('A2')
+  })
+
+  it('should convert "MATCH A R[0]C[1]:valueA1" to A1-style address', () => {
+    const input = 'MATCH A R[0]C[1]:valueA1'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('B1')
+  })
+
+  it('should convert "MATCH 1 R[1]C[1]:valueA1" to A1-style address', () => {
+    const input = 'MATCH 1 R[1]C[1]:valueA1'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('B2')
+  })
+
+  it('should convert "MATCH A R[1]C[1]:valueA1" to A1-style address', () => {
+    const input = 'MATCH A R[1]C[1]:valueA1'
+    const result = getCellAddress(input, arrayOfObjects)
+    expect(result).toBe('B2')
+  })
+})
+
+describe('getFinishingCell', () => {
+  const arrayOfObjects = [
+    { A: 'valueA1', B: 'valueB1' },
+    { A: 'valueA2', B: 'valueB2' },
+    { A: 'valueA3', B: 'valueB3' },
+    { B: 'valueB4' },
+    { A: 'valueA5' },
+    { A: 'valueA6', B: 'valueB6' },
+    {},
+    { A: 'valueA8' }
+  ]
+
+  it('should return the start cell if finish is an empty string', () => {
+    const start = 'A1'
+    const finish = ''
+    const result = getFinishingCell(start, finish, arrayOfObjects)
+    expect(result).toBe(start)
+  })
+
+  it('should convert "ABSOLUTE D8" to A1-style address', () => {
+    const start = 'A1'
+    const finish = 'ABSOLUTE D8'
+    const result = getFinishingCell(start, finish, arrayOfObjects)
+    expect(result).toBe('D8')
+  })
+
+  it('should convert "RELATIVE R[2]C[1]" to A1-style address', () => {
+    const start = 'A1'
+    const finish = 'RELATIVE R[2]C[1]'
+    const result = getFinishingCell(start, finish, arrayOfObjects)
+    expect(result).toBe('B3')
+  })
+
+  it('should convert "MATCH A R[0]C[1]:valueA1" to A1-style address', () => {
+    const start = 'A1'
+    const finish = 'MATCH A R[0]C[1]:valueA1'
+    const result = getFinishingCell(start, finish, arrayOfObjects)
+    expect(result).toBe('B1')
+  })
+
+  it('should convert "MATCH 1 R[4]C[0]:valueB1" to A1-style address', () => {
+    const start = 'A1'
+    const finish = 'MATCH 1 R[4]C[0]:valueB1'
+    const result = getFinishingCell(start, finish, arrayOfObjects)
+    expect(result).toBe('B5')
+  })
+
+  it('should convert "LASTDOWN" to A1-style address of the last non-blank cell in column A', () => {
+    const start = 'A1'
+    const finish = 'LASTDOWN'
+    const result = getFinishingCell(start, finish, arrayOfObjects)
+    expect(result).toBe('A3')
+  })
+
+  it('should convert "BLANKROW" to A1-style address of the last row with blank cells', () => {
+    const start = 'A1'
+    const finish = 'BLANKROW'
+    const result = getFinishingCell(start, finish, arrayOfObjects)
+    expect(result).toBe('B6')
+  })
+})

client/src/app/xlmap/utils/file.utils.ts

@@ -0,0 +1,31 @@
+export const blobToFile = (blob: Blob, fileName: string): File => {
+  const file = new File([blob], fileName, {
+    lastModified: new Date().getTime()
+  })
+  return file
+}
+
+/**
+ * Convert an array of bytes (Uint8Array) to a binary string.
+ * @param {Uint8Array} res - The array of bytes to convert.
+ * @returns {string} The binary string representation of the array of bytes.
+ */
+export const byteArrayToBinaryString = (res: Uint8Array): string => {
+  // Create a Uint8Array from the input array (if it's not already)
+  const bytes = new Uint8Array(res)
+
+  // Initialize an empty string to store the binary representation
+  let binary = ''
+
+  // Get the length of the byte array
+  const length = bytes.byteLength
+
+  // Iterate through each byte in the array
+  for (let i = 0; i < length; i++) {
+    // Convert each byte to its binary representation and append to the string
+    binary += String.fromCharCode(bytes[i])
+  }
+
+  // Return the binary string
+  return binary
+}

client/src/app/xlmap/utils/xl.utils.ts

@@ -0,0 +1,225 @@
+import * as XLSX from '@sheet/crypto'
+
+/**
+ * Checks if an excel row is blank or not
+ *
+ * @param row object is of shape {[key: string]: any}
+ */
+export const isBlankRow = (row: any) => {
+  for (const key in row) {
+    if (key !== '__rowNum__') {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * Extracts row and column number from xlmap rule.
+ *
+ * Input string should be in form of
+ * either "MATCH F R[2]C[0]: CASH BALANCE" or "RELATIVE R[10]C[6]"
+ */
+export const extractRowAndCol = (str: string) => {
+  // Regular expression to match and capture the values inside square brackets
+  const regex = /R\[(\d+)\]C\[(\d+)\]/
+
+  // Match the regular expression against the input string
+  const match = str.match(regex)
+
+  if (!match) {
+    return null
+  }
+
+  // Extract values from the match groups
+  const row = parseInt(match[1], 10)
+  const column = parseInt(match[2], 10)
+
+  return {
+    row,
+    column
+  }
+}
+
+/**
+ * Generate an A1-Style excel cell address from xlmap rule.
+ *
+ * Expect "ABSOLUTE D8" or "RELATIVE R[10]C[6]" or
+ * "MATCH C R[0]C[4]:Common Equity Tier 1 (CET1)" kinds of string as rule input
+ */
+export const getCellAddress = (rule: string, arrayOfObjects: any[]) => {
+  if (rule.startsWith('ABSOLUTE ')) {
+    rule = rule.replace('ABSOLUTE ', '')
+  }
+
+  if (rule.startsWith('RELATIVE ')) {
+    const rowAndCol = extractRowAndCol(rule)
+
+    if (rowAndCol) {
+      const { row, column } = rowAndCol
+
+      // Generate an A1-Style address string from a SheetJS cell address
+      // Spreadsheet applications typically display ordinal row numbers,
+      // where 1 is the first row, 2 is the second row, etc. The numbering starts at 1.
+      // SheetJS follows JavaScript counting conventions,
+      // where 0 is the first row, 1 is the second row, etc. The numbering starts at 0.
+      // Therefore, we have to subtract 1 from row and column to match SheetJS indexing convention
+      rule = XLSX.utils.encode_cell({ r: row - 1, c: column - 1 })
+    }
+  }
+
+  if (rule.startsWith('MATCH ')) {
+    let targetValue = ''
+
+    // using a regular expression to match "C[x]:" and extract the value after it
+    const match = rule.match(/C\[\d+\]:(.+)/)
+
+    // Check if there is a match
+    if (match) {
+      // Extract the value after "C[x]:"
+      targetValue = match[1]
+    }
+
+    // Split the string by spaces to get target row/column
+    const splittedArray = rule.split(' ')
+
+    // Extract the second word
+    const secondWord = splittedArray[1]
+
+    let targetColumn = ''
+    let targetRow = -1
+    let cellAddress = ''
+
+    // Check if the secondWord is a number
+    if (!isNaN(Number(secondWord))) {
+      targetRow = parseInt(secondWord)
+    } else {
+      targetColumn = secondWord
+    }
+
+    if (targetRow !== -1) {
+      // sheetJS index starts from 0,
+      // therefore, decremented 1 to make it correct row address for js array
+      const row = arrayOfObjects[targetRow - 1]
+      for (const col in row) {
+        if (col !== '__rowNum__' && row[col] === targetValue) {
+          cellAddress = col + targetRow
+          break
+        }
+      }
+    } else {
+      for (let i = 0; i < arrayOfObjects.length; i++) {
+        const row = arrayOfObjects[i]
+        if (row[targetColumn] === targetValue) {
+          // sheetJS index starts from 0,
+          // therefore, incremented 1 to make it correct row address
+          const rowIndex = i + 1
+          cellAddress = targetColumn + rowIndex
+          break
+        }
+      }
+    }
+
+    // Converts A1 cell address to 0-indexed form
+    const matchedCellAddress = XLSX.utils.decode_cell(cellAddress)
+
+    // extract number of rows and columns that we have to move
+    // from matched cell to reach target cell
+    const rowAndCol = extractRowAndCol(rule)
+
+    if (rowAndCol) {
+      const { row, column } = rowAndCol
+
+      // Converts 0-indexed cell address to A1 form
+      rule = XLSX.utils.encode_cell({
+        r: matchedCellAddress.r + row,
+        c: matchedCellAddress.c + column
+      })
+    }
+  }
+
+  return rule
+}
+
+/**
+ * Generate an A1-Style excel cell address for last cell
+ *
+ * @param start A1 style excel cell address
+ * @param finish XLMAP_FINISH attribute of xlmap rule
+ * @param arrayOfObjects an array of row objects
+ * @returns
+ */
+export const getFinishingCell = (
+  start: string,
+  finish: string,
+  arrayOfObjects: any[]
+) => {
+  // in this case an individual cell would be extracted
+  if (finish === '') {
+    return start
+  }
+
+  if (finish.startsWith('ABSOLUTE ')) {
+    finish = finish.replace('ABSOLUTE ', '')
+  }
+
+  if (finish.startsWith('RELATIVE ')) {
+    const rowAndCol = extractRowAndCol(finish)
+    if (rowAndCol) {
+      const { row, column } = rowAndCol
+
+      const { r, c } = XLSX.utils.decode_cell(start)
+
+      // finish is relative to starting point
+      // therefore, we need to add extracted row and columns
+      // in starting cell address to get actual finishing cell
+      finish = XLSX.utils.encode_cell({ r: r + row, c: c + column })
+    }
+  }
+
+  if (finish.startsWith('MATCH ')) {
+    finish = getCellAddress(finish, arrayOfObjects)
+  }
+
+  if (finish === 'LASTDOWN') {
+    const { r, c } = XLSX.utils.decode_cell(start)
+    const colName = XLSX.utils.encode_col(c)
+    let lastNonBlank = r
+    for (let i = r + 1; i < arrayOfObjects.length; i++) {
+      const row = arrayOfObjects[i]
+      if (!row[colName]) {
+        break
+      }
+      lastNonBlank = i
+    }
+    finish = colName + (lastNonBlank + 1) // excel numbering starts from 1. So incremented 1 to 0 based index
+  }
+
+  if (finish === 'BLANKROW') {
+    const { r } = XLSX.utils.decode_cell(start)
+    let lastNonBlankRow = r
+    for (let i = r + 1; i < arrayOfObjects.length; i++) {
+      const row = arrayOfObjects[i]
+      if (isBlankRow(row)) {
+        break
+      }
+      lastNonBlankRow = i
+    }
+    const row = arrayOfObjects[lastNonBlankRow]
+
+    // Get the keys of the object (excluding '__rowNum__')
+    const keys = Object.keys(row).filter((key) => key !== '__rowNum__')
+
+    // Finding last column in a row
+    // Find the key with the highest alphanumeric value (assumes keys are letters)
+    const lastColumn = keys.reduce(
+      (maxKey, currentKey) => (currentKey > maxKey ? currentKey : maxKey),
+      ''
+    )
+
+    // make finishing cell address in A1 style
+    finish = lastColumn + (lastNonBlankRow + 1) // excel numbering starts from 1. So incremented 1 to 0 based index
+  }
+
+  return finish
+}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { XLMapComponent } from '../xlmap/xlmap.component'
+import { XLMapRouteComponent } from '../routes/xlmap-route/xlmap-route.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: XLMapRouteComponent,
+    children: [
+      { path: '', component: XLMapComponent },
+      { path: ':id', component: XLMapComponent }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class XLMapRoutingModule {}

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

@@ -0,0 +1,252 @@
+<app-sidebar>
+  <div *ngIf="xlmapsLoading" class="my-10-mx-auto text-center">
+    <clr-spinner clrMedium></clr-spinner>
+  </div>
+
+  <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)="xlmapListOnFilter()"
+          autocomplete="off"
+        />
+        <clr-icon
+          *ngIf="searchXLMapTreeInput.value.length < 1"
+          shape="search"
+        ></clr-icon>
+        <clr-icon
+          *ngIf="searchXLMapTreeInput.value.length > 0"
+          (click)="searchString = ''; xlmapListOnFilter()"
+          shape="times"
+        ></clr-icon>
+      </div>
+    </clr-tree-node>
+
+    <ng-container *ngFor="let xlmap of xlmaps">
+      <clr-tree-node>
+        <button
+          (click)="xlmapOnClick(xlmap)"
+          class="clr-treenode-link"
+          [class.table-active]="isActiveXLMap(xlmap.id)"
+        >
+          <clr-icon shape="file"></clr-icon>
+          {{ xlmap.id }}
+        </button>
+      </clr-tree-node>
+    </ng-container>
+  </clr-tree>
+</app-sidebar>
+
+<div class="content-area">
+  <div *ngIf="!selectedXLMap" class="no-table-selected">
+    <clr-icon
+      shape="warning-standard"
+      size="60"
+      class="is-info icon-dc-fill"
+    ></clr-icon>
+    <h3 *ngIf="xlmaps.length > 0" class="text-center color-gray">
+      Please select a map
+    </h3>
+    <h3 *ngIf="xlmaps.length < 1" class="text-center color-gray">
+      No excel map is found
+    </h3>
+  </div>
+
+  <div class="loadingSpinner" *ngIf="isLoading">
+    <span class="spinner"> Loading... </span>
+    <div>
+      <h4>{{ isLoadingDesc }}</h4>
+    </div>
+  </div>
+
+  <div
+    appDragNdrop
+    (fileDraggedOver)="onShowUploadModal()"
+    class="card h-100 d-flex clr-flex-column"
+    *ngIf="!isLoading && selectedXLMap"
+  >
+    <clr-tabs>
+      <clr-tab>
+        <button clrTabLink (click)="selectedTab = TabsEnum.Rules">Rules</button>
+        <clr-tab-content *clrIfActive="selectedTab === TabsEnum.Rules">
+        </clr-tab-content>
+      </clr-tab>
+      <clr-tab>
+        <button clrTabLink (click)="selectedTab = TabsEnum.Data">Data</button>
+        <clr-tab-content *clrIfActive="selectedTab === TabsEnum.Data">
+        </clr-tab-content>
+      </clr-tab>
+    </clr-tabs>
+
+    <ng-container *ngTemplateOutlet="actionButtons"></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
+        hotId="hotInstance"
+        id="hot-table"
+        [multiColumnSorting]="true"
+        [viewportRowRenderingOffset]="50"
+        [data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
+        [colHeaders]="
+          selectedTab === TabsEnum.Rules ? xlmapRulesHeaders : xlUploadHeader
+        "
+        [columns]="
+          selectedTab === TabsEnum.Rules ? xlmapRulesColumns : xlUploadColumns
+        "
+        [filters]="true"
+        [height]="'100%'"
+        stretchH="all"
+        [modifyColWidth]="maxWidthChecker"
+        [cells]="getCellConfiguration"
+        [maxRows]="hotTableMaxRows"
+        [manualColumnResize]="true"
+        [rowHeaders]="rowHeaders"
+        [rowHeaderWidth]="15"
+        [rowHeights]="20"
+        [licenseKey]="hotTableLicenseKey"
+      >
+      </hot-table>
+    </div>
+  </div>
+
+  <clr-modal
+    appFileDrop
+    (fileOver)="fileOverBase($event)"
+    (fileDrop)="getFileDesc($event, true)"
+    [uploader]="uploader"
+    [clrModalSize]="'xl'"
+    [clrModalStaticBackdrop]="false"
+    [clrModalClosable]="true"
+    [(clrModalOpen)]="showUploadModal"
+    class="relative"
+  >
+    <h3 class="modal-title">Upload File</h3>
+    <div class="modal-body">
+      <div class="drop-area">
+        <span>Drop file anywhere to upload!</span>
+      </div>
+
+      <div class="clr-col-md-12">
+        <div class="clr-row card-block mt-15 d-flex justify-content-between">
+          <div class="clr-col-md-3 filterBtn">
+            <span class="filterBtn w-100">
+              <label
+                for="file-upload"
+                class="btn btn-sm btn-outline profile-buttons w-100"
+              >
+                Browse
+              </label>
+            </span>
+            <input
+              hidden
+              #fileUploadInput
+              id="file-upload"
+              type="file"
+              appFileSelect
+              [uploader]="uploader"
+              (change)="getFileDesc($event)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </clr-modal>
+
+  <clr-modal [(clrModalOpen)]="submitLimitNotice">
+    <h3 class="modal-title">Notice</h3>
+    <div class="modal-body">
+      <p class="m-0">
+        Due to current licence, only
+        {{ licenceState.value.submit_rows_limit }} rows in a file will be
+        submitted. To remove the restriction, contact
+        support&#64;datacontroller.io
+      </p>
+    </div>
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-sm btn-primary"
+        (click)="submitLimitNotice = false"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm btn-primary"
+        (click)="submit(); submitLimitNotice = false"
+      >
+        Submit
+      </button>
+    </div>
+  </clr-modal>
+</div>
+
+<ng-template #actionButtons>
+  <div class="clr-row m-0 clr-justify-content-center">
+    <div
+      *ngIf="status === StatusEnum.ReadyToUpload"
+      class="d-flex clr-justify-content-center clr-col-12 clr-col-lg-4"
+    >
+      <button
+        type="button"
+        class="btn btn-sm btn-success btn-block mr-0"
+        (click)="onShowUploadModal()"
+      >
+        <clr-icon shape="upload"></clr-icon>
+        <span>Upload</span>
+      </button>
+    </div>
+    <div
+      *ngIf="status === StatusEnum.ReadyToSubmit"
+      class="d-flex clr-justify-content-center clr-col-12 clr-col-lg-4"
+    >
+      <button
+        type="button"
+        class="btn btn-sm btn-success btn-block mr-0"
+        (click)="submitExcel()"
+      >
+        <clr-icon shape="upload"></clr-icon>
+        <span>Submit</span>
+      </button>
+    </div>
+    <div
+      *ngIf="status === StatusEnum.ReadyToSubmit"
+      class="d-flex clr-justify-content-center clr-col-12 clr-col-lg-4"
+    >
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-danger btn-block mr-0"
+        (click)="discardExtractedData()"
+      >
+        <clr-icon shape="times"></clr-icon>
+        <span>Discard</span>
+      </button>
+    </div>
+  </div>
+</ng-template>

client/src/app/xlmap/xlmap.component.scss

@@ -0,0 +1,77 @@
+.card {
+  margin-top: 0;
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+clr-tree-node button {
+  white-space: nowrap;
+}
+
+.no-table-selected {
+  position: relative;
+}
+
+.header-row {
+  .title-col {
+    display: flex;
+    align-items: center;
+  }
+  .options-col {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.sw {
+  margin: 1rem 0rem 0.5rem 1rem;
+}
+
+.viewerTitle {
+  text-align: center;
+}
+
+.cardFlex {
+  display: flex;
+  justify-content: center;
+}
+
+.content-area {
+  padding: 0.5rem !important;
+
+  display: flex;
+  flex-direction: column;
+}
+
+hot-table {
+  ::ng-deep {
+    .primaryKeyHeaderStyle {
+      background: #306b006e;
+    }
+  }
+}
+
+.drop-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: center;
+
+  margin: 1px;
+
+  border: 2px dashed #fff;
+
+  z-index: -1;
+
+  span {
+    font-size: 20px;
+    margin-top: 20px;
+    color: #fff;
+  }
+}

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

@@ -0,0 +1,477 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ElementRef,
+  HostBinding,
+  OnInit,
+  QueryList,
+  ViewChildren
+} from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { UploadFile } from '@sasjs/adapter'
+import * as XLSX from '@sheet/crypto'
+import { XLMapListItem, globals } from '../_globals'
+import { FileUploader } from '../models/FileUploader.class'
+import {
+  EventService,
+  LicenceService,
+  LoggerService,
+  SasService,
+  SasStoreService
+} from '../services'
+import { getCellAddress, getFinishingCell } from './utils/xl.utils'
+import { blobToFile, byteArrayToBinaryString } from './utils/file.utils'
+
+interface XLMapRule {
+  XLMAP_ID: string
+  XLMAP_SHEET: string
+  XLMAP_RANGE_ID: string
+  XLMAP_START: string
+  XLMAP_FINISH: string
+}
+
+interface XLUploadEntry {
+  LOAD_REF: string
+  XLMAP_ID: string
+  XLMAP_RANGE_ID: string
+  ROW_NO: number
+  COL_NO: number
+  VALUE_TXT: string
+}
+
+enum Status {
+  NoMapSelected,
+  FetchingRules,
+  ReadyToUpload,
+  ExtractingData,
+  ReadyToSubmit,
+  SubmittingExtractedData,
+  Submitting
+}
+
+enum Tabs {
+  Rules,
+  Data
+}
+
+@Component({
+  selector: 'app-xlmap',
+  templateUrl: './xlmap.component.html',
+  styleUrls: ['./xlmap.component.scss']
+})
+export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
+  @HostBinding('class.content-container') contentContainerClass = true
+  @ViewChildren('fileUploadInput')
+  fileUploadInputCompList: QueryList<ElementRef> = new QueryList()
+
+  StatusEnum = Status
+  TabsEnum = Tabs
+
+  public selectedTab = Tabs.Rules
+  public rulesSource = globals.dcLib + '.MPE_XLMAP_RULES'
+
+  public xlmaps: XLMapListItem[] = []
+  public selectedXLMap: XLMapListItem | undefined = undefined
+  public searchString = ''
+  public xlmapsLoading = true
+  public isLoading = false
+  public isLoadingDesc = ''
+  public status = Status.NoMapSelected
+
+  public xlmapRulesHeaders = [
+    'XLMAP_SHEET',
+    'XLMAP_RANGE_ID',
+    'XLMAP_START',
+    'XLMAP_FINISH'
+  ]
+  public xlmapRulesColumns = [
+    {
+      data: 'XLMAP_SHEET'
+    },
+    {
+      data: 'XLMAP_RANGE_ID'
+    },
+
+    {
+      data: 'XLMAP_START'
+    },
+    {
+      data: 'XLMAP_FINISH'
+    }
+  ]
+  public xlmapRules: XLMapRule[] = []
+
+  public xlUploadHeader = ['XLMAP_RANGE_ID', 'ROW_NO', 'COL_NO', 'VALUE_TXT']
+  public xlUploadColumns = [
+    {
+      data: 'XLMAP_RANGE_ID'
+    },
+    {
+      data: 'ROW_NO'
+    },
+    {
+      data: 'COL_NO'
+    },
+    {
+      data: 'VALUE_TXT'
+    }
+  ]
+  public xlData: XLUploadEntry[] = []
+
+  public showUploadModal = false
+  public hasBaseDropZoneOver = false
+  public filename = ''
+  public submitLimitNotice = false
+
+  public uploader: FileUploader = new FileUploader()
+
+  public licenceState = this.licenceService.licenceState
+
+  public hotTableLicenseKey: string | undefined = undefined
+  public hotTableMaxRows =
+    this.licenceState.value.viewer_rows_allowed || Infinity
+
+  constructor(
+    private eventService: EventService,
+    private licenceService: LicenceService,
+    private loggerService: LoggerService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private sasStoreService: SasStoreService,
+    private sasService: SasService
+  ) {}
+
+  public xlmapOnClick(xlmap: XLMapListItem) {
+    if (xlmap.id !== this.selectedXLMap?.id) {
+      this.selectedXLMap = xlmap
+      this.viewXLMapRules()
+      this.router.navigateByUrl('/home/files/' + xlmap.id)
+    }
+  }
+
+  public xlmapListOnFilter() {
+    if (this.searchString.length > 0) {
+      const array: XLMapListItem[] = globals.xlmaps
+      this.xlmaps = array.filter((item) =>
+        item.id.toLowerCase().includes(this.searchString.toLowerCase())
+      )
+    } else {
+      this.xlmaps = globals.xlmaps
+    }
+  }
+
+  public isActiveXLMap(id: string) {
+    return this.selectedXLMap?.id === id
+  }
+
+  public maxWidthChecker(width: any, col: any) {
+    if (width > 200) return 200
+    else return width
+  }
+
+  public getCellConfiguration() {
+    return { readOnly: true }
+  }
+
+  public rowHeaders() {
+    return ' '
+  }
+
+  public onShowUploadModal() {
+    this.showUploadModal = true
+  }
+
+  /**
+   * Called by FileDropDirective
+   * @param e true if file is dragged over the drop zone
+   */
+  public fileOverBase(e: boolean): void {
+    this.hasBaseDropZoneOver = e
+  }
+
+  public getFileDesc(event: any, dropped = false) {
+    const file = dropped ? event[0] : event.target.files[0]
+
+    if (!file) return
+
+    const filename = file.name
+    this.filename = filename
+
+    const fileType = filename.slice(
+      filename.lastIndexOf('.') + 1,
+      filename.lastIndexOf('.') + 4
+    )
+
+    if (fileType.toLowerCase() === 'xls') {
+      this.showUploadModal = false
+      this.isLoading = true
+      this.isLoadingDesc = 'Extracting Data'
+      this.status = Status.ExtractingData
+
+      const reader = new FileReader()
+      reader.onload = async (theFile: any) => {
+        /* read workbook */
+        const bstr = byteArrayToBinaryString(theFile.target.result)
+        let wb: XLSX.WorkBook | undefined = undefined
+
+        const xlsxOptions: XLSX.ParsingOptions = {
+          type: 'binary',
+          cellDates: false,
+          cellFormula: true,
+          cellStyles: true,
+          cellNF: false,
+          cellText: false
+        }
+
+        try {
+          wb = XLSX.read(bstr, {
+            ...xlsxOptions
+          })
+        } catch (err: any) {
+          this.eventService.showAbortModal(
+            null,
+            err,
+            undefined,
+            'Error reading file'
+          )
+        }
+
+        if (!wb) {
+          this.isLoading = false
+          this.isLoadingDesc = ''
+          this.status = Status.ReadyToUpload
+          this.uploader.queue.pop()
+          return
+        }
+
+        this.extractData(wb)
+        return
+      }
+
+      reader.readAsArrayBuffer(file)
+    } else {
+      this.isLoading = false
+      this.isLoadingDesc = ''
+      this.status = Status.ReadyToUpload
+      this.showUploadModal = true
+      this.uploader.queue.pop()
+
+      const abortMsg =
+        'Invalid file type "<b>' +
+        this.filename +
+        '</b>". Please upload excel file.'
+      this.eventService.showAbortModal(null, abortMsg)
+    }
+  }
+
+  public discardExtractedData() {
+    this.isLoading = false
+    this.isLoadingDesc = ''
+    this.status = Status.ReadyToUpload
+    this.xlData = []
+    this.filename = ''
+    this.uploader.queue = []
+    if (this.fileUploadInputCompList.first) {
+      this.fileUploadInputCompList.first.nativeElement.value = ''
+    }
+  }
+
+  /**
+   * Submits attached excel file that is in preview mode
+   */
+  public submitExcel() {
+    if (this.licenceState.value.submit_rows_limit !== Infinity) {
+      this.submitLimitNotice = true
+      return
+    }
+
+    this.submit()
+  }
+
+  public submit() {
+    if (!this.selectedXLMap || !this.xlData.length) return
+
+    this.status = Status.Submitting
+    this.isLoading = true
+    this.isLoadingDesc = 'Submitting extracted data'
+
+    const filesToUpload: UploadFile[] = []
+
+    for (const file of this.uploader.queue) {
+      filesToUpload.push({
+        file: file,
+        fileName: file.name
+      })
+    }
+
+    const csvContent =
+      Object.keys(this.xlData[0]).join(',') +
+      '\n' +
+      this.xlData
+        .slice(0, this.licenceState.value.submit_rows_limit)
+        .map((row: any) => Object.values(row).join(','))
+        .join('\n')
+
+    const blob = new Blob([csvContent], { type: 'application/csv' })
+    const file: File = blobToFile(blob, this.filename + '.csv')
+
+    filesToUpload.push({
+      file: file,
+      fileName: file.name
+    })
+
+    const uploadUrl = 'services/editors/loadfile'
+    this.sasService
+      .uploadFile(uploadUrl, filesToUpload, {
+        table: this.selectedXLMap.targetDS
+      })
+      .then((res: any) => {
+        if (res.sasjsAbort) {
+          const abortRes = res
+          const abortMsg = abortRes.sasjsAbort[0].MSG
+          const macMsg = abortRes.sasjsAbort[0].MAC
+
+          this.eventService.showAbortModal('', abortMsg, {
+            SYSWARNINGTEXT: abortRes.SYSWARNINGTEXT,
+            SYSERRORTEXT: abortRes.SYSERRORTEXT,
+            MAC: macMsg
+          })
+        } else if (res.sasparams) {
+          const params = res.sasparams[0]
+          const tableId = params.DSID
+          this.router.navigateByUrl('/stage/' + tableId)
+        }
+      })
+      .catch((err: any) => {
+        this.eventService.catchResponseError('file upload', err)
+      })
+      .finally(() => {
+        this.status = Status.ReadyToSubmit
+        this.isLoading = false
+        this.isLoadingDesc = ''
+      })
+  }
+
+  public extractData(wb: XLSX.WorkBook) {
+    const extractedData: XLUploadEntry[] = []
+
+    this.xlmapRules.forEach((rule) => {
+      let sheetName = rule.XLMAP_SHEET
+      // if sheet name is not an absolute name rather an index string like /1, /2, etc
+      // we extract the index and find absolute sheet name for specified index
+      if (sheetName.startsWith('/')) {
+        const temp = sheetName.split('/')[1]
+        const sheetIndex = parseInt(temp) - 1
+        sheetName = wb.SheetNames[sheetIndex]
+      }
+
+      const sheet = wb.Sheets[sheetName]
+
+      const arrayOfObjects = <any[]>XLSX.utils.sheet_to_json(sheet, {
+        raw: true,
+        header: 'A',
+        blankrows: true
+      })
+
+      const start = getCellAddress(rule.XLMAP_START, arrayOfObjects)
+      const finish = getFinishingCell(start, rule.XLMAP_FINISH, arrayOfObjects)
+
+      const range = `${start}:${finish}`
+
+      const rangedData = <any[]>XLSX.utils.sheet_to_json(sheet, {
+        raw: true,
+        range: range,
+        header: 'A',
+        blankrows: true
+      })
+
+      for (let i = 0; i < rangedData.length; i++) {
+        const row = rangedData[i]
+        // Get the keys of the object (excluding '__rowNum__')
+        const keys = Object.keys(row).filter((key) => key !== '__rowNum__')
+
+        for (let j = 0; j < keys.length; j++) {
+          const key = keys[j]
+          const val = row[key]
+
+          // in excel's R1C1 notation indexing starts from 1 but in JS it starts from 0
+          // therefore, we'll have to add 1 to rows and cols
+          extractedData.push({
+            LOAD_REF: '0',
+            XLMAP_ID: rule.XLMAP_ID,
+            XLMAP_RANGE_ID: rule.XLMAP_RANGE_ID,
+            ROW_NO: i + 1,
+            COL_NO: j + 1,
+            VALUE_TXT: val
+          })
+        }
+      }
+    })
+
+    this.status = Status.ReadyToSubmit
+    this.isLoading = false
+    this.isLoadingDesc = ''
+
+    this.xlData = extractedData
+    this.selectedTab = Tabs.Data
+  }
+
+  async viewXLMapRules() {
+    if (!this.selectedXLMap) return
+
+    this.isLoading = true
+    this.isLoadingDesc = 'Loading excel rules'
+    this.status = Status.FetchingRules
+
+    await this.sasStoreService
+      .getXLMapRules(this.selectedXLMap.id)
+      .then((res) => {
+        this.xlmapRules = res.xlmaprules
+        this.status = Status.ReadyToUpload
+      })
+      .catch((err) => {
+        this.loggerService.error(err)
+      })
+
+    this.isLoading = false
+    this.isLoadingDesc = ''
+  }
+
+  private load() {
+    this.xlmaps = globals.xlmaps
+    this.xlmapsLoading = false
+
+    const id = this.route.snapshot.params['id']
+
+    if (id) {
+      const xlmapListItem = this.xlmaps.find((item) => item.id === id)
+      if (xlmapListItem) {
+        this.selectedXLMap = xlmapListItem
+        this.viewXLMapRules()
+      }
+    }
+  }
+
+  ngOnInit() {
+    this.licenceService.hot_license_key.subscribe(
+      (hot_license_key: string | undefined) => {
+        this.hotTableLicenseKey = hot_license_key
+      }
+    )
+  }
+
+  ngAfterViewInit() {
+    return
+  }
+
+  ngAfterContentInit(): void {
+    if (globals.editor.startupSet) {
+      this.load()
+    } else {
+      this.eventService.onStartupDataLoaded.subscribe(() => {
+        this.load()
+      })
+    }
+  }
+}