dc/dc
dc
/
dc
2
1
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases 27 Wiki Activity

fix(updates): angular, clarity, resolved legacy-peer-deps

This commit is contained in:
Mihajlo Medjedovic 2024-04-11 13:23:24 +02:00
parent f7f59a4b0a
commit c60dd65a16
25 changed files with 5470 additions and 20606 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/angular.json
View File

@ -45,6 +45,7 @@
"numbro",
"@clr/icons",
"@sasjs/adapter",
"@sasjs/utils/types/serverType",
"@sasjs/utils/input/validators",
"@sasjs/utils/utils/bytesToSize",
"base64-arraybuffer",
@ -67,7 +68,6 @@
"src/styles.scss"
],
"scripts": [
"node_modules/@clr/icons/clr-icons.min.js",
"node_modules/marked/marked.min.js"
]
},
@ -116,10 +116,10 @@
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "datacontroller:build:production"
"buildTarget": "datacontroller:build:production"
},
"development": {
"browserTarget": "datacontroller:build:development"
"buildTarget": "datacontroller:build:development"
}
},
"defaultConfiguration": "development"
@ -127,7 +127,7 @@
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "datacontroller:build"
"buildTarget": "datacontroller:build"
}
},
"test": {

25321
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

61
client/package.json
View File

@ -35,19 +35,19 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^16.1.2",
"@angular/cdk": "^15.2.0",
"@angular/common": "^16.1.2",
"@angular/compiler": "^16.1.2",
"@angular/core": "^16.1.2",
"@angular/forms": "^16.1.2",
"@angular/platform-browser": "^16.1.2",
"@angular/platform-browser-dynamic": "^16.1.2",
"@angular/router": "^16.1.2",
"@cds/core": "^6.4.2",
"@clr/angular": "^13.17.0",
"@angular/animations": "^17.3.3",
"@angular/cdk": "^17.3.3",
"@angular/common": "^17.3.3",
"@angular/compiler": "^17.3.3",
"@angular/core": "^17.3.3",
"@angular/forms": "^17.3.3",
"@angular/platform-browser": "^17.3.3",
"@angular/platform-browser-dynamic": "^17.3.3",
"@angular/router": "^17.3.3",
"@cds/core": "^6.10.0",
"@clr/angular": "^17.0.1",
"@clr/icons": "^13.0.2",
"@clr/ui": "^13.17.0",
"@clr/ui": "^17.0.1",
"@handsontable/angular": "^13.1.0",
"@sasjs/adapter": "4.10.2",
"@sasjs/utils": "^3.4.0",
@ -77,24 +77,25 @@
"stream-http": "3.2.0",
"text-encoding": "^0.7.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
"vm": "^0.1.0",
"zone.js": "~0.14.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.1.0",
"@angular-eslint/builder": "16.0.3",
"@angular-eslint/eslint-plugin": "16.0.3",
"@angular-eslint/eslint-plugin-template": "16.0.3",
"@angular-eslint/schematics": "16.0.3",
"@angular-eslint/template-parser": "16.0.3",
"@angular/cli": "^16.1.0",
"@angular/compiler-cli": "^16.1.2",
"@angular-devkit/build-angular": "^17.3.3",
"@angular-eslint/builder": "17.3.0",
"@angular-eslint/eslint-plugin": "17.3.0",
"@angular-eslint/eslint-plugin-template": "17.3.0",
"@angular-eslint/schematics": "17.3.0",
"@angular-eslint/template-parser": "17.3.0",
"@angular/cli": "^17.3.3",
"@angular/compiler-cli": "^17.3.3",
"@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.2.1",
"@types/es6-shim": "^0.31.39",
"@types/jasmine": "~3.6.0",
"@types/jasmine": "~5.1.4",
"@types/lodash-es": "^4.17.3",
"@types/marked": "^4.3.0",
"@types/node": "12.20.50",
@ -108,12 +109,12 @@
"es6-shim": "^0.35.5",
"eslint": "^8.33.0",
"git-describe": "^4.0.4",
"jasmine-core": "~3.6.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"jasmine-core": "~5.1.2",
"karma": "~6.4.3",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"license-checker": "25.0.1",
"lodash-es": "^4.17.21",
"mochawesome": "^7.1.3",
@ -122,9 +123,7 @@
"rimraf": "3.0.2",
"ts-loader": "^9.2.8",
"ts-node": "^3.3.0",
"typedoc": "^0.24.8",
"typedoc-plugin-external-module-name": "^4.0.6",
"typescript": "~4.9.4",
"typescript": "~5.4.4",
"wait-on": "^6.0.1",
"watch": "^1.0.2"
}

17
client/src/app/app.component.html
View File

@ -12,7 +12,7 @@
<div class="alert-items">
<div class="alert-item static">
<div class="alert-icon-wrapper">
<clr-icon class="mt-2" shape="warning-standard"></clr-icon>
<cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
</div>
<div class="alert-text">
Data Controller (FREE Tier) - to upgrade contact
@ -30,7 +30,7 @@
<div class="alert-items">
<div class="alert-item static">
<div class="alert-icon-wrapper">
<clr-icon class="mt-2" shape="warning-standard"></clr-icon>
<cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
</div>
<div class="alert-text">
Data Controller (FREE Tier) - Problem with licence
@ -55,7 +55,7 @@
<div class="alert-items">
<div class="alert-item static">
<div class="alert-icon-wrapper">
<clr-icon class="mt-2" shape="warning-standard"></clr-icon>
<cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
</div>
<div class="alert-text">
@ -85,7 +85,7 @@
<div class="alert-items">
<div class="alert-item static">
<div class="alert-icon-wrapper">
<clr-icon class="mt-2" shape="warning-standard"></clr-icon>
<cds-icon class="alert-icon" shape="warning-standard"></cds-icon>
</div>
<div class="alert-text">
@ -204,14 +204,7 @@
</div>
</ng-container>
<div class="header-actions">
<div class="nav-text">
<app-loading-indicator></app-loading-indicator>
</div>
<div class="dropdown">
<app-user-nav-dropdown></app-user-nav-dropdown>
</div>
</div>
<app-header-actions></app-header-actions>
</header>
<nav
*ngIf="

27
client/src/app/app.component.scss
View File

@ -91,33 +91,12 @@ header {
}
}
.nav
.nav-link {
color: #fafafa;
opacity: .9;
line-height: 1.45rem;
}
.nav .nav-link:hover {
box-shadow: inset 0 -3px 0 transparent;
transition: box-shadow .2s ease-in;
}
.nav
.nav-link:hover {
.nav-link:hover {
color: #fafafa;
opacity: 1;
}
.nav .nav-link.active {
background: #61717D;
opacity: 1;
box-shadow: inset 0 -3px transparent;
// padding: 0 1rem 0 1rem;
}
.nav .nav-item {
margin-right: 1rem;
.nav-link.active {
background: #61717D;
}
}

1
client/src/app/app.module.ts
View File

@ -46,7 +46,6 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'
SharedModule,
ClarityModule,
AppSharedModule,
HomeModule,
PipesModule,
DirectivesModule,
NgxJsonViewerModule

5
client/src/app/app.routing.ts
View File

@ -45,7 +45,10 @@ export const ROUTES: Routes = [
path: 'licensing',
loadChildren: () => LicensingModule
},
{ path: 'home', loadChildren: () => HomeModule },
{
path: 'home',
loadChildren: () => HomeModule
},
{
/**
* Load editor module with subroutes

2
client/src/app/editor/editor.module.ts
View File

@ -12,7 +12,6 @@ import { EditRecordComponent } from './components/edit-record/edit-record.compon
import { UploadStaterComponent } from './components/upload-stater/upload-stater.component'
import { EditorRoutingModule } from './editor-routing.module'
import { EditorComponent } from './editor.component'
import { HomeModule } from '../home/home.module'
import { DcTreeModule } from '../shared/dc-tree/dc-tree.module'
import { DragDropModule } from '@angular/cdk/drag-drop'
import { ViewboxesModule } from '../shared/viewboxes/viewboxes.module'
@ -33,7 +32,6 @@ registerAllModules()
AppSharedModule,
DirectivesModule,
SharedModule,
HomeModule,
PipesModule,
DcTreeModule,
DragDropModule,

20
client/src/app/home/home.component.html
View File

@ -94,15 +94,17 @@
{{ libTable.replace('-FC', '') }}
</button>
<clr-tooltip-content
clrPosition="bottom-right"
clrSize="lg"
*clrIfOpen
>
<span *ngIf="tableLocked">
To unlock all tables, contact support&#64;datacontroller.io
</span>
</clr-tooltip-content>
<ng-container *ngIf="tableLocked">
<clr-tooltip-content
clrPosition="bottom-right"
clrSize="lg"
*clrIfOpen
>
<span>
To unlock all tables, contact support&#64;datacontroller.io
</span>
</clr-tooltip-content>
</ng-container>
</clr-tooltip>
</clr-tree-node>
</clr-tree-node>

270
client/src/app/licensing/licensing.component.html
View File

@ -2,147 +2,151 @@
<div class="card-header">Licencing</div>
<div [ngSwitch]="action" class="card-block">
<ng-container *ngSwitchCase="'key'">
<p class="key-error" *ngIf="!keyError">
Licence key is invalid. We can't provide you more details at the moment
<div class="card-text">
<ng-container *ngSwitchCase="'key'">
<p class="key-error" *ngIf="!keyError">
Licence key is invalid. We can't provide you more details at the moment
</p>
<p
class="key-error"
*ngIf="keyError"
[innerHTML]="licenseErrors[keyError]"
></p>
<p *ngIf="errorDetails"><strong>Details:</strong> {{ errorDetails }}</p>
</ng-container>
<ng-container *ngSwitchCase="'limit'">
<p class="key-error">
The registered number of users reached the limit specified for your
licence. Please contact
<contact-link classes="color-green" />
or your reseller to arrange additional licences for this product.
</p>
</ng-container>
<ng-container *ngSwitchCase="'update'">
<p class="key-error">
Update the license key by uploading the licence file or by pasting a
license key and activation key in the inputs below.
</p>
</ng-container>
<p>
<strong>SYSSITE:</strong>
<span
*ngFor="let id of syssite.value; let i = index"
[class.misskey]="missmatchedKey && missmatchedKey === id"
>
{{ id }}{{ i === syssite.value?.length! - 1 ? '' : ',' }}
</span>
<a
class="tooltip tooltip-md tooltip-top-right"
(click)="copySyssite(copyIcon, copyTooltip, syssite.value || [])"
>
<clr-icon
#copyIcon
class="cursor-pointer"
shape="copy"
size="15"
></clr-icon>
<span #copyTooltip class="tooltip-content">Copy to clipboard</span>
</a>
</p>
<p
class="key-error"
*ngIf="keyError"
[innerHTML]="licenseErrors[keyError]"
></p>
<p *ngIf="errorDetails"><strong>Details:</strong> {{ errorDetails }}</p>
</ng-container>
<ng-container *ngSwitchCase="'limit'">
<p class="key-error">
The registered number of users reached the limit specified for your
licence. Please contact
<contact-link classes="color-green" />
or your reseller to arrange additional licences for this product.
<p *ngIf="licenseKeyData && userCountLimitation" class="m-0">
<strong>Allowed users:</strong>
{{ licenseKeyData.users_allowed }}
</p>
</ng-container>
<ng-container *ngSwitchCase="'update'">
<p class="key-error">
Update the license key by uploading the licence file or by pasting a
license key and activation key in the inputs below.
</p>
</ng-container>
<p>
<strong>SYSSITE:</strong>
<span
*ngFor="let id of syssite.value; let i = index"
[class.misskey]="missmatchedKey && missmatchedKey === id"
>
{{ id }}{{ i === syssite.value?.length! - 1 ? '' : ',' }}
</span>
<a
class="tooltip tooltip-md tooltip-top-right"
(click)="copySyssite(copyIcon, copyTooltip, syssite.value || [])"
>
<clr-icon
#copyIcon
class="cursor-pointer"
shape="copy"
size="15"
></clr-icon>
<span #copyTooltip class="tooltip-content">Copy to clipboard</span>
</a>
</p>
<p *ngIf="licenseKeyData && userCountLimitation" class="m-0">
<strong>Allowed users:</strong>
{{ licenseKeyData.users_allowed }}
</p>
<clr-tabs>
<clr-tab>
<button clrTabLink>Upload licence</button>
<clr-tab-content>
<input
#licenceFile
(change)="onFileCapture($event)"
type="file"
hidden
/>
<div
(click)="licenceFile.click()"
appFileDrop
(fileDrop)="onFileCapture($event, true)"
class="drop-area"
>
<clr-spinner
class="spinner-sm"
*ngIf="licenceFileLoading"
></clr-spinner>
<ng-container *ngIf="!licenceFileLoading">
<div *ngIf="licencefile.filename === ''">
Drop / Browse licence file
</div>
<div *ngIf="licencefile.filename !== ''">
Selected file: <strong>{{ licencefile.filename }}</strong>
</div>
<div *ngIf="licenceFileError">
<strong>{{ licenceFileError }}</strong>
</div>
</ng-container>
</div>
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink>Paste licence</button>
<clr-tab-content>
<form class="clr-form license-key-form">
<p>Licence key:</p>
<div class="clr-control-container">
<textarea
[(ngModel)]="licenceKeyValue"
(mouseleave)="trimKeys()"
name="license-key-area"
placeholder="Paste licence key here"
class="clr-textarea"
></textarea>
<clr-tabs>
<clr-tab>
<button clrTabLink>Upload licence</button>
<clr-tab-content>
<input
#licenceFile
(change)="onFileCapture($event)"
type="file"
hidden
/>
<div
(click)="licenceFile.click()"
appFileDrop
(fileDrop)="onFileCapture($event, true)"
class="drop-area"
>
<clr-spinner
class="spinner-sm"
*ngIf="licenceFileLoading"
></clr-spinner>
<ng-container *ngIf="!licenceFileLoading">
<div *ngIf="licencefile.filename === ''">
Drop / Browse licence file
</div>
<div *ngIf="licencefile.filename !== ''">
Selected file: <strong>{{ licencefile.filename }}</strong>
</div>
<div *ngIf="licenceFileError">
<strong>{{ licenceFileError }}</strong>
</div>
</ng-container>
</div>
</form>
</clr-tab-content>
</clr-tab>
<form class="clr-form activation-key-form">
<p>Activation key:</p>
<div class="clr-control-container">
<textarea
[(ngModel)]="activationKeyValue"
(mouseleave)="trimKeys()"
name="activation-key-area"
placeholder="Paste activation key here"
class="clr-textarea"
></textarea>
</div>
</form>
</clr-tab-content>
</clr-tab>
</clr-tabs>
<clr-tab>
<button clrTabLink>Paste licence</button>
<clr-tab-content>
<form class="clr-form license-key-form">
<p>Licence key:</p>
<div class="clr-control-container">
<textarea
[(ngModel)]="licenceKeyValue"
(mouseleave)="trimKeys()"
name="license-key-area"
placeholder="Paste licence key here"
class="clr-textarea"
></textarea>
</div>
</form>
<button
(click)="applyKeys()"
class="btn btn-primary apply-keys"
[clrLoading]="applyingKeys"
[disabled]="disableApplyButton"
>
Apply licence keys
</button>
<form class="clr-form activation-key-form">
<p>Activation key:</p>
<div class="clr-control-container">
<textarea
[(ngModel)]="activationKeyValue"
(mouseleave)="trimKeys()"
name="activation-key-area"
placeholder="Paste activation key here"
class="clr-textarea"
></textarea>
</div>
</form>
</clr-tab-content>
</clr-tab>
</clr-tabs>
</div>
<button
*ngIf="isAppFreeTier.value"
routerLink="/"
class="btn btn-sm btn-link"
>
Continue with free tier
</button>
<div class="card-footer d-flex clr-align-items-center">
<button
(click)="applyKeys()"
class="btn btn-primary apply-keys"
[clrLoading]="applyingKeys"
[disabled]="disableApplyButton"
>
Apply licence keys
</button>
<button
*ngIf="isAppFreeTier.value"
routerLink="/"
class="btn btn-sm btn-link"
>
Continue with free tier
</button>
</div>
</div>
</div>

1
client/src/app/licensing/licensing.component.scss
View File

@ -33,7 +33,6 @@
.apply-keys {
height: 40px;
width: 200px;
}
.drop-area {

18
client/src/app/review/approve-details/approve-details.component.html
View File

@ -140,7 +140,7 @@
<div class="clr-row">
<div class="clr-col-md-4 approvalBack">
<span
class="btn btn-sm btn-outline m-0"
class="btn btn-outline m-0"
(click)="goToApprovalsList()"
>
<clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
@ -209,13 +209,13 @@
<div class="d-flex justify-content-center mt-0">
<div class="clr-row clr-gap-5 clr-gap-sm-0">
<button
class="btn btn-sm btn-outline text-center mt-5"
class="btn btn-sm btn-outline text-center mt-5 mr-5i"
(click)="goToBase(jsParams?.TABLE_NM)"
>
View base table
</button>
<button
class="btn btn-sm btn-success-outline text-center mt-5"
class="btn btn-sm btn-success-outline text-center mt-5 mr-5i"
(click)="getTable(tableId)"
>
View staged data
@ -236,7 +236,7 @@
id="acceptBtn"
[clrLoading]="acceptLoading"
type="submit"
class="btn btn-sm btn-success"
class="btn btn-sm btn-success mr-5i"
(click)="approveTable()"
[disabled]="
!loadingTable || params?.ISAPPROVER === 'NO' || noChanges
@ -246,7 +246,7 @@
</button>
<button
id="rejectBtn"
class="btn btn-sm btn btn-danger mr-0"
class="btn btn-sm btn btn-danger mr-5i"
(click)="rejectOpen = true"
[disabled]="
!loadingTable || params?.ISAPPROVER === 'NO' || noChanges
@ -394,8 +394,8 @@
<div class="card-header">
<div class="clr-row">
<div class="clr-col-md-4 approvalBack">
<span class="btn btn-sm btn-outline" (click)="goToSubmitList()">
<clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
<span class="btn btn-outline" (click)="goToSubmitList()">
<cds-icon shape="angle" direction="left" size="20"></cds-icon>Back to
submitted list
</span>
</div>
@ -443,13 +443,13 @@
<div class="d-flex justify-content-center mt-0">
<div class="clr-row clr-gap-5 clr-gap-sm-0">
<button
class="btn btn-sm btn-outline text-center mt-5"
class="btn btn-sm btn-outline text-center mt-5 mr-5i"
(click)="goToBase(subObj.base)"
>
View base table
</button>
<button
class="btn btn-sm btn-success-outline text-center mt-5"
class="btn btn-sm btn-success-outline text-center mt-5 mr-5i"
(click)="getTable(subObj.tableId)"
>
View staged data

2
client/src/app/shared/loading-indicator/loading-indicator.component.scss
View File

@ -11,6 +11,8 @@ $clr-green: #60b515;
height: $clr-header-height;
display: flex;
align-items: center;
height: 100%;
margin-right: 10px;
.spinner {
vertical-align: middle;

2
client/src/app/shared/requests-modal/requests-modal.component.html
View File

@ -16,8 +16,6 @@
*ngFor="let programLog of sasjsRequests; let i = index"
[id]="'request_' + i"
[clrStackViewLevel]="1"
[clrStackViewSetsize]="3"
[clrStackViewPosinset]="3"
>
<clr-stack-label>
{{ programLog.serviceLink }}

6
client/src/app/shared/shared.module.ts
View File

@ -8,7 +8,7 @@ import { LoadingIndicatorComponent } from './loading-indicator/loading-indicator
import { LoginComponent } from './login/login.component'
import { UserService } from './user.service'
import { AlertsService } from './alerts/alerts.service'
import { UserNavDropdownComponent } from './user-nav-dropdown/user-nav-dropdown.component'
import { HeaderActions } from './user-nav-dropdown/header-actions.component'
import { AlertsComponent } from './alerts/alerts.component'
import { TermsComponent } from './terms/terms.component'
import { DirectivesModule } from '../directives/directives.module'
@ -26,7 +26,7 @@ import { ContactLinkComponent } from './contact-link/contact-link.component'
declarations: [
LoadingIndicatorComponent,
LoginComponent,
UserNavDropdownComponent,
HeaderActions,
AlertsComponent,
TermsComponent,
DatasetInfoComponent,
@ -35,7 +35,7 @@ import { ContactLinkComponent } from './contact-link/contact-link.component'
exports: [
LoadingIndicatorComponent,
LoginComponent,
UserNavDropdownComponent,
HeaderActions,
AlertsComponent,
TermsComponent,
DatasetInfoComponent,

65
client/src/app/shared/user-nav-dropdown/header-actions.component.html Normal file
View File

@ -0,0 +1,65 @@
<div class="header-actions">
<app-loading-indicator></app-loading-indicator>
<clr-dropdown class="app-nav-dropdown">
<button class="nav-text color-white" clrDropdownToggle>
<span>{{ userName }}</span>
<span *ngIf="userName !== 'Not logged in' && isViya"
><img class="avatar-img" src="{{ getPictureUrl() }}" alt=""
/></span>
<span
class="badge badge-danger"
*ngIf="!sasjsConfig.debug"
[class.hidden]="failedReqs.length === 0"
>{{ failedReqs.length }}</span
>
<span
class="badge badge-info"
*ngIf="sasjsConfig.debug"
[class.hidden]="debugLogs.length === 0"
>{{ debugLogs.length }}</span
>
<clr-icon *ngIf="!isViya" shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
<div #dropdownItemDebug class="debug-switch-item" clrDropdownItem>
<clr-toggle-container
class="toggle-switch"
(click)="onDebugRowClick($event, dropdownItemDebug)"
>
<clr-toggle-wrapper>
<input
id="debug-toggle1"
type="checkbox"
[(ngModel)]="sasjsConfig.debug"
(ngModelChange)="onDebugModeChange()"
clrToggle
/>
<label>Debug Mode</label>
</clr-toggle-wrapper>
</clr-toggle-container>
</div>
<a (click)="openRequestsModal()" clrDropdownItem>
<span>SAS Requests</span>
</a>
<ng-container *ngIf="!isDeployPage">
<a target="_blank" href="https://docs.datacontroller.io" clrDropdownItem>
<span class="dropdown-text">Documentation</span>
</a>
</ng-container>
<div class="separator"></div>
<a href="..." routerLink="/system" clrDropdownItem>
<span>System</span>
</a>
<a href="..." (click)="logout($event)" clrDropdownItem>
<span>Log Out</span>
<clr-icon class="clr-logout" shape="logout"></clr-icon>
</a>
<div class="copyRight">
<span>v{{ commitVer }}</span>
</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>

13
client/src/app/shared/user-nav-dropdown/user-nav-dropdown.component.scss → client/src/app/shared/user-nav-dropdown/header-actions.component.scss
View File

@ -1,17 +1,12 @@
// it must be a better way to read clarity variables...
//@import '../../../../node_modules/@clr/ui/src/utils/helpers.clarity';
//@import '../../../../node_modules/@clr/ui/src/color/utils/colors.clarity';
//@import '../../../../node_modules/@clr/ui/src/color/utils/contrast-cache.clarity';
//@import '../../../../node_modules/@clr/ui/src/color/utils/helpers.clarity';
//@import '../../../../node_modules/@clr/ui/src/utils/variables.clarity';
$clr-header-height: 3rem;
$clr-near-white: #fafafa;
$clr-dark-gray: #565656;
$clr-light-gray: #eee;
:host {
display: contents;
}
.copyRight {
margin-top: 10px;

8
client/src/app/shared/user-nav-dropdown/user-nav-dropdown.component.ts → client/src/app/shared/user-nav-dropdown/header-actions.component.ts
View File

@ -8,11 +8,11 @@ import { EventService } from '../../services/event.service'
import { Router } from '@angular/router'
@Component({
selector: 'app-user-nav-dropdown',
templateUrl: './user-nav-dropdown.component.html',
styleUrls: ['./user-nav-dropdown.component.scss']
selector: 'app-header-actions',
templateUrl: './header-actions.component.html',
styleUrls: ['./header-actions.component.scss'],
})
export class UserNavDropdownComponent implements OnInit, OnDestroy {
export class HeaderActions implements OnInit, OnDestroy {
public userName: string = 'Not logged in'
private reqSub: Subscription = new Subscription()
private userSub: Subscription = new Subscription()

121
client/src/app/shared/user-nav-dropdown/user-nav-dropdown.component.html
View File

@ -1,121 +0,0 @@
<clr-dropdown class="app-nav-dropdown d-md-block">
<button class="nav-text color-white" clrDropdownToggle>
<span>{{ userName }}</span>
<span *ngIf="userName !== 'Not logged in' && isViya"
><img class="avatar-img" src="{{ getPictureUrl() }}" alt=""
/></span>
<span
class="badge badge-danger"
*ngIf="!sasjsConfig.debug"
[class.hidden]="failedReqs.length === 0"
>{{ failedReqs.length }}</span
>
<span
class="badge badge-info"
*ngIf="sasjsConfig.debug"
[class.hidden]="debugLogs.length === 0"
>{{ debugLogs.length }}</span
>
<clr-icon *ngIf="!isViya" shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
<div #dropdownItemDebug class="debug-switch-item" clrDropdownItem>
<clr-toggle-container
class="toggle-switch"
(click)="onDebugRowClick($event, dropdownItemDebug)"
>
<clr-toggle-wrapper>
<input
id="debug-toggle1"
type="checkbox"
[(ngModel)]="sasjsConfig.debug"
(ngModelChange)="onDebugModeChange()"
clrToggle
/>
<label>Debug Mode</label>
</clr-toggle-wrapper>
</clr-toggle-container>
</div>
<a (click)="openRequestsModal()" clrDropdownItem>
<span>SAS Requests</span>
</a>
<ng-container *ngIf="!isDeployPage">
<a target="_blank" href="https://docs.datacontroller.io" clrDropdownItem>
<span class="dropdown-text">Documentation</span>
</a>
</ng-container>
<div class="separator"></div>
<a href="..." routerLink="/system" clrDropdownItem>
<span>System</span>
</a>
<a href="..." (click)="logout($event)" clrDropdownItem>
<span>Log Out</span>
<clr-icon class="clr-logout" shape="logout"></clr-icon>
</a>
<div class="copyRight">
<span>v{{ commitVer }}</span>
</div>
</clr-dropdown-menu>
</clr-dropdown>
<div class="content-container h-auto">
<nav class="sidenav d-block d-md-none" [clr-nav-level]="2">
<section class="sidenav-content">
<a href="..." class="nav-link active">
{{ userName }}
</a>
<div>
<form>
<div class="toggle-switch">
<input
id="debug-toggle2"
type="checkbox"
[(ngModel)]="sasjsConfig.debug"
(ngModelChange)="onDebugModeChange()"
[ngModelOptions]="{ standalone: true }"
/>
<label
for="debug-toggle2"
class="debug-toggle-label color-dark-gray"
>Debug Mode</label
>
</div>
</form>
</div>
<!-- <a href="..." class="nav-link d-block" [routerLink]="['/application-logs']">
<span>Application Logs</span>
<span class="badge" *ngIf="appLogs.length > 0">{{appLogs.length}}</span>
</a>
<a *ngIf="debugMode" class="nav-link d-block" href="..." [routerLink]="['/debug-logs']">
<span>Debug Logs</span>
<span class="badge badge-info" *ngIf="debugLogs.length > 0">{{debugLogs.length}}</span>
</a>
<a *ngIf="!debugMode" class="nav-link d-block" href="..." [routerLink]="['/failed-requests']">
<span>Failed Requests</span>
<span class="badge badge-danger" *ngIf="failedReqs.length > 0">{{failedReqs.length}}</span>
</a>
<a href="..." class="nav-link d-block" [routerLink]="['/errors']">
<span>Errors</span>
<span class="badge badge-warning" *ngIf="sasErrors.length > 0">{{sasErrors.length}}</span>
</a> -->
<a
class="nav-link d-block"
target="_blank"
href="https://docs.datacontroller.io"
>
<span>Documentation</span>
</a>
<div class="separator"></div>
<a routerLink="/system" class="nav-link d-block">
<span>System</span>
<clr-icon shape="logout"></clr-icon>
</a>
<a href="..." class="nav-link d-block" (click)="logout($event)">
<span>Log Out</span>
<clr-icon shape="logout"></clr-icon>
</a>
</section>
</nav>
</div>

8
client/src/app/stage/stage.component.html
View File

@ -58,14 +58,14 @@
<div class="mt-20">
<div class="row">
<button
class="btn btn-sm btn-outline text-center mt-20"
class="btn btn-sm btn-outline text-center mr-5i"
(click)="viewerTableScreen()"
>
View base table
</button>
<button
id="approval-btn"
class="btn btn-sm btn-success-outline text-center mt-20"
class="btn btn-sm btn-success-outline text-center mr-5i"
[disabled]="
tableDetails?.REVIEW_STATUS_ID === 'APPROVED' ||
tableDetails?.REVIEW_STATUS_ID === 'REJECTED'
@ -75,13 +75,13 @@
Approve
</button>
<button
class="btn btn-sm btn-info-outline text-center mt-20"
class="btn btn-sm btn-info-outline text-center mr-5i"
(click)="goBack()"
>
Edit base table
</button>
<button
class="btn btn-sm btn-success text-center mt-20 min-w-0"
class="btn btn-sm btn-success text-center mr-5i min-w-0"
(click)="download(tableDetails?.TABLE_ID)"
>
<clr-icon shape="download"></clr-icon>

52
client/src/app/system/system.component.html
View File

@ -9,43 +9,43 @@
class="sys-info d-flex clr-justify-content-center clr-flex-column clr-flex-lg-row"
>
<div>
<h6 class="m-0">Environment Details <span class="dark"></span></h6>
<p class="m-0">
<h6 cds-text="subsection" class="mb-10">Environment Details <span class="dark"></span></h6>
<p cds-text="label" class="m-0">
SYSSITE: <span class="dark">{{ environmentInfo?.SYSSITE }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
SYSSCPL: <span class="dark">{{ environmentInfo?.SYSSCPL }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
SYSTCPIPHOSTNAME:
<span class="dark">{{ environmentInfo?.SYSTCPIPHOSTNAME }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
SYSVLONG: <span class="dark">{{ environmentInfo?.SYSVLONG }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
MEMSIZE: <span class="dark">{{ environmentInfo?.MEMSIZE }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
SYSPROCESSMODE:
<span class="dark">{{ environmentInfo?.SYSPROCESSMODE }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
SYSHOSTNAME:
<span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
SYSHOSTINFOLONG:
<span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
SYSENCODING:
<span class="dark">{{ environmentInfo?.SYSENCODING }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
DC ADMIN GROUP:
<span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
</p>
@ -53,42 +53,42 @@
<div class="d-flex clr-justify-content-lg-center">
<div>
<h6 class="m-0">
<h6 cds-text="subsection" class="mb-10">
Data Controller Details <span class="dark"></span>
</h6>
<p class="m-0">
<p cds-text="label" class="m-0">
Application version:
<span class="dark">{{ appInfo.appVersion }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Build timestamp:
<span class="dark">{{ appInfo.buildTimestamp }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Adapter version:
<span class="dark">{{ appInfo.adapterVersion }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span>
</p>
</div>
</div>
<div>
<h6 class="m-0">Licence details <span class="dark"></span></h6>
<p class="m-0">
<h6 cds-text="subsection" class="mb-10">Licence details <span class="dark"></span></h6>
<p cds-text="label" class="m-0">
Valid until:
<span class="dark">{{ licenceInfo?.valid_until }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Users allowed:
<span class="dark">{{ licenceInfo?.users_allowed }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Site IDs:
<span class="dark">{{ licenceInfo?.site_id_multiple }}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Free Tier:
<span class="dark">{{ licenceInfo?.demo ? 'YES' : 'NO' }}</span>
</p>
@ -157,25 +157,25 @@
licenceState.value.lineage_daily_limit
}}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Viewboxes:
<span class="dark">{{
licenceState.value.viewbox ? 'YES' : 'NO'
}}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
File Upload:
<span class="dark">{{
licenceState.value.fileUpload ? 'YES' : 'NO'
}}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Edit record:
<span class="dark">{{
licenceState.value.editRecord ? 'YES' : 'NO'
}}</span>
</p>
<p class="m-0">
<p cds-text="label" class="m-0">
Add record:
<span class="dark">{{
licenceState.value.addRecord ? 'YES' : 'NO'

21
client/src/app/viewer/viewer.component.html
View File

@ -99,15 +99,18 @@
</ng-container>
{{ libTable.replace('-FC', '') }}
</button>
<clr-tooltip-content
clrPosition="bottom-right"
clrSize="lg"
*clrIfOpen
>
<span *ngIf="tableLocked">
To unlock all tables, contact support&#64;datacontroller.io
</span>
</clr-tooltip-content>
<ng-container *ngIf="tableLocked">
<clr-tooltip-content
clrPosition="bottom-right"
clrSize="lg"
*clrIfOpen
>
<span>
To unlock all tables, contact support&#64;datacontroller.io
</span>
</clr-tooltip-content>
</ng-container>
</clr-tooltip>
</clr-tree-node>
</clr-tree-node>

4
client/src/app/xlmap/xlmap.component.html
View File

@ -94,13 +94,13 @@
}}</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">
<a cds-text="labelLink" 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">
<a cds-text="labelLink" class="ml-10" [routerLink]="'/view/data/' + selectedXLMap.targetDS">
{{ selectedXLMap.targetDS }}
</a>
</h5>

2
client/src/index.html
View File

@ -57,7 +57,7 @@
>
</sasjs>
<body class="m-0">
<body cds-theme="light" class="m-0">
<my-app></my-app>
</body>
</html>

21
client/src/styles.scss
View File

@ -1,9 +1,12 @@
/* You can add global styles to this file, and also import other style files */
@import '~handsontable/dist/handsontable.full.css';
@import '~@clr/ui/clr-ui.min.css';
@import '~@clr/icons/clr-icons.min.css';
@import '@cds/core/global.min.css';
@import '@cds/core/styles/theme.dark.min.css';
@import '@clr/ui/clr-ui.min.css';
@font-face {
font-family: text-security-disc;
src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
@ -29,6 +32,14 @@ button {
}
}
[cds-text=label] {
color: var(--cds-global-typography-color-200);
}
[cds-text=labelLink] {
line-height: 1.8 !important;
}
// Custom loading spinner
.slider {
position: absolute;
@ -261,6 +272,10 @@ button {
margin-right: 5px;
}
.mr-5i {
margin-right: 5px !important;
}
.mr-10 {
margin-right: 10px;
}
@ -660,6 +675,10 @@ clr-icon.is-info {
-webkit-box-direction: normal;
}
.btn .clr-loading-btn-content {
justify-content: center;
}
.btn.btn-danger,
.btn.btn-warning {
border-color: #ef4f2e;