Merge branch 'main' into handonstable-14
Some checks failed
Build / Build-and-ng-test (pull_request) Failing after 1m32s
Some checks failed
Build / Build-and-ng-test (pull_request) Failing after 1m32s
This commit is contained in:
commit
7853f7cb6a
|
|
@ -8,9 +8,9 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 20.14.0
|
||||
|
||||
- name: Install Google Chrome
|
||||
run: |
|
||||
|
|
@ -31,11 +31,9 @@ jobs:
|
|||
- name: Install dependencies
|
||||
run: |
|
||||
cd client
|
||||
npm ci
|
||||
# Decrypt and Install sheet
|
||||
echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
|
||||
npm i ./libraries/sheet-crypto.tgz
|
||||
# End
|
||||
npm ci
|
||||
|
||||
- name: Licence checker
|
||||
run: |
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 20.14.0
|
||||
|
||||
- name: Write .npmrc file
|
||||
run: |
|
||||
|
|
@ -36,11 +36,9 @@ jobs:
|
|||
- name: Install dependencies
|
||||
run: |
|
||||
cd client
|
||||
npm ci
|
||||
# Decrypt and Install sheet
|
||||
echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
|
||||
npm i ./libraries/sheet-crypto.tgz
|
||||
# End
|
||||
npm ci
|
||||
|
||||
- name: Check audit
|
||||
# Audit should fail and stop the CI if critical vulnerability found
|
||||
|
|
@ -68,9 +66,9 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 20.14.0
|
||||
|
||||
- name: Write .npmrc file
|
||||
run: |
|
||||
|
|
@ -94,11 +92,9 @@ jobs:
|
|||
- name: Install dependencies
|
||||
run: |
|
||||
cd client
|
||||
npm ci
|
||||
# Decrypt and Install sheet
|
||||
echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
|
||||
npm i ./libraries/sheet-crypto.tgz
|
||||
# End
|
||||
npm ci
|
||||
|
||||
# Install pm2 and prepare SASJS server
|
||||
- run: npm i -g pm2
|
||||
|
|
@ -160,9 +156,9 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 20.14.0
|
||||
|
||||
- name: Write .npmrc file
|
||||
run: |
|
||||
|
|
@ -188,11 +184,9 @@ jobs:
|
|||
description: We want to prevent creating empty release if frontend fails
|
||||
run: |
|
||||
cd client
|
||||
npm ci
|
||||
# Decrypt and Install sheet
|
||||
echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
|
||||
npm i ./libraries/sheet-crypto.tgz
|
||||
# End
|
||||
npm ci
|
||||
npm i webpack
|
||||
npm run build
|
||||
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -13,6 +13,7 @@ client/cypress/videos
|
|||
client/documentation
|
||||
client/**/sheet-crypto.tgz
|
||||
client/.nx
|
||||
client/libraries/sheet-crypto.tgz
|
||||
cypress.env.json
|
||||
sasjsbuild
|
||||
sasjsresults
|
||||
|
|
|
|||
17
CHANGELOG.md
17
CHANGELOG.md
|
|
@ -1,3 +1,20 @@
|
|||
# [6.9.0](https://git.datacontroller.io/dc/dc/compare/v6.8.5...v6.9.0) (2024-05-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* added colors.scss file, start of a refactor ([110ad9a](https://git.datacontroller.io/dc/dc/commit/110ad9a6e9ed39bd5591ae65c2d0005ba47ca758))
|
||||
* added stealFocus directive ([9a79f37](https://git.datacontroller.io/dc/dc/commit/9a79f37bf143a1e05df7407358e2687c678e3e68))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* added app settings service to handle theme persistance, fix: optimised dark mode contrast ([35844e0](https://git.datacontroller.io/dc/dc/commit/35844e0cf1a639553269f2ab0f8666a56ab5cc47))
|
||||
* **dark mode:** clarity optimizations ([afa7e38](https://git.datacontroller.io/dc/dc/commit/afa7e380aa3bdabd380c038522b9d73d9a8a3b91))
|
||||
* **dark mode:** lineage and metadata ([27907ed](https://git.datacontroller.io/dc/dc/commit/27907ed00fe81f4c752ffe99d2fb029d5c884f0a))
|
||||
* **dark mode:** refactoring clarity to enable dark mode, added toggle button ([5564aea](https://git.datacontroller.io/dc/dc/commit/5564aea9c25f8e81ff85afa8352325b9992e4043))
|
||||
* **dark mode:** removing custom css rules so clarity can handle dark/light modes. Handsontable css for dark mode ([2c0afd0](https://git.datacontroller.io/dc/dc/commit/2c0afd02684cdf3bda374731b0359665e00ed95d))
|
||||
|
||||
## [6.8.5](https://git.datacontroller.io/dc/dc/compare/v6.8.4...v6.8.5) (2024-05-23)
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
2162
client/package-lock.json
generated
2162
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -53,6 +53,7 @@
|
|||
"@sasjs/utils": "^3.4.0",
|
||||
"@sheet/crypto": "file:libraries/sheet-crypto.tgz",
|
||||
"@types/d3-graphviz": "^2.6.7",
|
||||
"@sheet/crypto": "file:libraries/sheet-crypto.tgz",
|
||||
"@types/text-encoding": "0.0.35",
|
||||
"base64-arraybuffer": "^0.2.0",
|
||||
"buffer": "^5.4.3",
|
||||
|
|
@ -79,6 +80,7 @@
|
|||
"text-encoding": "^0.7.0",
|
||||
"tslib": "^2.3.0",
|
||||
"vm": "^0.1.0",
|
||||
"webpack": "^5.91.0",
|
||||
"zone.js": "~0.14.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../colors.scss';
|
||||
|
||||
// Copyright (c) 2016 VMware, Inc. All Rights Reserved.
|
||||
// This software is released under MIT license.
|
||||
// The full license information can be found in LICENSE in the root directory of this project.
|
||||
|
|
@ -6,7 +8,7 @@ app-requests-modal {
|
|||
}
|
||||
|
||||
header.app-header {
|
||||
background: #314351 !important;
|
||||
background: $headerBackground !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +44,7 @@ header.app-header {
|
|||
align-items: center;
|
||||
padding: 30px;
|
||||
z-index: 110;
|
||||
background: #314351;
|
||||
background: $headerBackground;
|
||||
|
||||
.expired-notice {
|
||||
color: #e0e0e0;
|
||||
|
|
@ -106,15 +108,6 @@ header {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn.btn-success {
|
||||
border-color: #62a420;
|
||||
background-color: #16a57a!important;
|
||||
color: #fff;
|
||||
}
|
||||
.btn.btn-success:hover {
|
||||
background-color: #2add39;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toggle-switch input[type=checkbox]:checked+label:before {
|
||||
border-color: #61717D;
|
||||
|
|
@ -142,59 +135,44 @@ header {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navBarResp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
background: #495A67;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
|
||||
padding: 0 .5rem 0 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: .125rem 0 0 .125rem;
|
||||
color: #95c84b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-block, .card-footer {
|
||||
padding: 10px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
|
||||
padding: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
::ng-deep {
|
||||
.htInvalid {
|
||||
background: black!important;
|
||||
}
|
||||
background: black!important;
|
||||
}
|
||||
|
||||
@media screen and (max-width:480px) {
|
||||
h2 {
|
||||
font-size: .7rem!important;
|
||||
|
||||
h2 {
|
||||
font-size: .7rem!important;
|
||||
}
|
||||
h3 {
|
||||
font-size: .7rem;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: .7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0rem 1rem 0rem 1rem;
|
||||
}
|
||||
|
||||
.btn-primary .btn, .btn.btn-primary {
|
||||
border-color: #314351;
|
||||
background-color: #314351;
|
||||
color: #fff;
|
||||
body[cds-theme="light"] {
|
||||
.btn-primary .btn, .btn.btn-primary {
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
.btn-primary .btn, .btn.btn-primary {
|
||||
border-color: #5e7382;
|
||||
background-color: #5e7382;
|
||||
color: #fff;
|
||||
|
||||
clr-icon, cds-icon {
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
|
@ -215,36 +193,32 @@ header {
|
|||
font-weight: 500;
|
||||
height: 1.5rem;
|
||||
padding: 0 .5rem;
|
||||
border-color: #314351;
|
||||
background-color: transparent;
|
||||
color: #314351;
|
||||
}
|
||||
|
||||
.btn.btn-outline {
|
||||
border-color: #314351;
|
||||
background-color: transparent;
|
||||
color: #314351;
|
||||
}
|
||||
|
||||
.btn.btn-outline:hover {
|
||||
border-color: #314351;
|
||||
border-color: $headerBackground;
|
||||
background-color: #495A67;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn.btn-success-outline:hover {
|
||||
background-color: #5ea71f;
|
||||
color: #fff7f7;
|
||||
border-color: #9a9696;
|
||||
}
|
||||
// .btn.btn-success-outline {
|
||||
// border-color: #266900;
|
||||
// background-color: transparent;
|
||||
// color: #318700;
|
||||
// }
|
||||
// .wtSpreader {
|
||||
|
||||
// }
|
||||
body[cds-theme="dark"] {
|
||||
.btn.btn-icon.btn-dimmed {
|
||||
color: #7295ae;
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
.btn.btn-icon.btn-dimmed {
|
||||
color: $headerBackground;
|
||||
}
|
||||
|
||||
.btn.btn-outline {
|
||||
border-color: $headerBackground;
|
||||
background-color: transparent;
|
||||
color: $headerBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.htMobileEditorContainer .inputs textarea {
|
||||
font-size: 13pt;
|
||||
|
|
@ -277,65 +251,68 @@ header {
|
|||
width: 350px;
|
||||
}
|
||||
|
||||
.handsontable {
|
||||
background-color: #ffffff;
|
||||
// border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.handsontable th {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/* Left and right */
|
||||
.ht_clone_left th {
|
||||
border-right: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Column headers */
|
||||
.ht_clone_top th {
|
||||
border-top: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
body[cds-theme="light"] {
|
||||
.wtBorder {
|
||||
background-color: #495A67!important;
|
||||
}
|
||||
|
||||
.ht_master tr:nth-of-type(odd) > td {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.ht_clone_top_left_corner th {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
$darkBorderColor: #697c85;
|
||||
|
||||
.ht_master tr:nth-of-type(odd) > td {
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid rgb(197, 197, 197);
|
||||
border-bottom: 1px solid rgb(236, 235, 235);
|
||||
// padding: 1px 1px;
|
||||
}
|
||||
body[cds-theme="dark"] {
|
||||
.ht_master tr:nth-of-type(odd) > td {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.ht_master tr:nth-of-type(even) > td {
|
||||
background-color: white;
|
||||
border: 1px solid rgb(197, 197, 197);
|
||||
border-bottom: 1px solid rgb(236, 235, 235);
|
||||
// padding: 1px 1px;
|
||||
}
|
||||
.ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
|
||||
background-color: #2d4048;
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.wtBorder {
|
||||
background-color: #495A67!important;
|
||||
.handsontable td {
|
||||
// border-right: 1px solid #697c85;
|
||||
// border-bottom: 1px solid #697c85;
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontable tr:first-child th, .handsontable tr:first-child td {
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontable .handsontable.ht_clone_top .wtHider {
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontable .changeType {
|
||||
background-color: #3c5662;
|
||||
border-color: $darkBorderColor;
|
||||
}
|
||||
|
||||
.handsontableInput {
|
||||
background-color: #708b98;
|
||||
}
|
||||
}
|
||||
|
||||
.handsontable .handsontable.ht_clone_top .wtHider {
|
||||
padding: 0 0 0px 0!important;
|
||||
margin: 0px;
|
||||
border-bottom: 3px solid #d6d3d3;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
background: #F5F6FF;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 0.125rem 0 0 #d7d7d7;
|
||||
border-radius: .0rem;
|
||||
border: 1px solid transparent;
|
||||
// min-height: calc(100vh - 150px);
|
||||
body[cds-theme="light"] {
|
||||
.content-container {
|
||||
// background: red;
|
||||
background: #F5F6FF;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-compact, .datagrid-history{
|
||||
|
|
@ -343,8 +320,6 @@ header {
|
|||
border-collapse: separate;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .125rem;
|
||||
background-color: #fff;
|
||||
color: #565656;
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
max-width: 100%;
|
||||
|
|
@ -366,8 +341,8 @@ header {
|
|||
}
|
||||
.datagrid-footer {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 2px;
|
||||
right: 30px;
|
||||
top: 1px;
|
||||
}
|
||||
.datagrid .datagrid-head {
|
||||
background-color: #fff;
|
||||
|
|
@ -387,7 +362,6 @@ header {
|
|||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background: #f5f6ff;
|
||||
padding: .5rem 0;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
|
||||
|
|
@ -402,8 +376,6 @@ header {
|
|||
border-collapse: separate;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0px;
|
||||
background-color: #fff;
|
||||
color: #565656;
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
max-width: 100%;
|
||||
|
|
@ -414,7 +386,6 @@ header {
|
|||
font-size: .45833rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .03em;
|
||||
background-color: #fff;
|
||||
vertical-align: bottom;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -437,4 +408,34 @@ header {
|
|||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navBarResp {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
background: #495A67;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
|
||||
padding: 0 .5rem 0 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: .125rem 0 0 .125rem;
|
||||
color: #95c84b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-block, .card-footer {
|
||||
padding: 10px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
|
||||
padding: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -13,6 +13,15 @@ import { InfoModal } from './models/InfoModal'
|
|||
import { DcAdapterSettings } from './models/DcAdapterSettings'
|
||||
import { AppStoreService } from './services/app-store.service'
|
||||
import { LicenceService } from './services/licence.service'
|
||||
import '@cds/core/icon/register.js'
|
||||
import {
|
||||
ClarityIcons,
|
||||
exclamationTriangleIcon,
|
||||
moonIcon,
|
||||
sunIcon
|
||||
} from '@cds/core/icon'
|
||||
|
||||
ClarityIcons.addIcons(moonIcon, sunIcon, exclamationTriangleIcon)
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ import { UsernavRouteComponent } from './routes/usernav-route/usernav-route.comp
|
|||
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 { HomeModule } from './home/home.module'
|
||||
import { DirectivesModule } from './directives/directives.module'
|
||||
import { ViyaApiExplorerComponent } from './viya-api-explorer/viya-api-explorer.component'
|
||||
import { NgxJsonViewerModule } from 'ngx-json-viewer'
|
||||
import { AppSettingsService } from './services/app-settings.service'
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -50,7 +50,7 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'
|
|||
DirectivesModule,
|
||||
NgxJsonViewerModule
|
||||
],
|
||||
providers: [AppService, SasStoreService, LicensingGuard],
|
||||
providers: [AppService, SasStoreService, LicensingGuard, AppSettingsService],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,23 @@ import { NgVarDirective } from './ng-var.directive'
|
|||
import { DragNdropDirective } from './drag-ndrop.directive'
|
||||
import { FileDropDirective } from './file-drop.directive'
|
||||
import { FileSelectDirective } from './file-select.directive'
|
||||
import { StealFocusDirective } from './steal-focus.directive'
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NgVarDirective,
|
||||
DragNdropDirective,
|
||||
FileDropDirective,
|
||||
FileSelectDirective
|
||||
FileSelectDirective,
|
||||
StealFocusDirective
|
||||
],
|
||||
imports: [CommonModule],
|
||||
exports: [
|
||||
NgVarDirective,
|
||||
DragNdropDirective,
|
||||
FileDropDirective,
|
||||
FileSelectDirective
|
||||
FileSelectDirective,
|
||||
StealFocusDirective
|
||||
]
|
||||
})
|
||||
export class DirectivesModule {}
|
||||
|
|
|
|||
17
client/src/app/directives/steal-focus.directive.ts
Normal file
17
client/src/app/directives/steal-focus.directive.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Directive, HostListener } from '@angular/core'
|
||||
|
||||
@Directive({
|
||||
selector: '[appStealFocus]'
|
||||
})
|
||||
export class StealFocusDirective {
|
||||
constructor() {}
|
||||
|
||||
/**
|
||||
* For some reason newest version of Clarity v17.0.1 is stealing focus when
|
||||
* clicking on the input inside of the clr-tree-view
|
||||
* This is workaround
|
||||
*/
|
||||
@HostListener('click', ['$event']) onClick(event: any) {
|
||||
event.target.focus()
|
||||
}
|
||||
}
|
||||
|
|
@ -277,7 +277,7 @@
|
|||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline focusable"
|
||||
class="btn btn-outline focusable mr-5i"
|
||||
(click)="currentRecord!.noLinkOption = false; closeRecordEdit()"
|
||||
>
|
||||
Cancel
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@
|
|||
app-soft-select {
|
||||
display: block;
|
||||
width: 224px;
|
||||
background: #fff;
|
||||
border: 1px solid #999;
|
||||
color: #000;
|
||||
padding: calc(.25rem + 2px) .5rem;
|
||||
|
|
@ -49,7 +48,6 @@
|
|||
input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
|
||||
&:focus {
|
||||
background: none;
|
||||
|
|
@ -132,7 +130,6 @@
|
|||
|
||||
clr-input-container {
|
||||
width: 224px;
|
||||
background: #fff;
|
||||
border: 1px solid #999;
|
||||
color: #000;
|
||||
padding: calc(.25rem + 2px) .5rem;
|
||||
|
|
|
|||
|
|
@ -165,11 +165,14 @@
|
|||
class="card-header clr-row buttonBar headerBar clr-flex-md-row clr-justify-content-center clr-justify-content-lg-end"
|
||||
>
|
||||
<div *ngIf="tableTrue" class="clr-col-12 clr-col-lg-4 backBtn">
|
||||
<span class="btn btn-sm" [routerLink]="['/home']">
|
||||
<clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
|
||||
table selection
|
||||
<span class="btn btn-sm btn-icon btn-dimmed" [routerLink]="['/home']">
|
||||
<clr-icon shape="caret" dir="left" size="20"></clr-icon>
|
||||
Back to table selection
|
||||
</span>
|
||||
<span (click)="viewboxManager()" class="btn btn-sm viewbox-open">
|
||||
<span
|
||||
(click)="viewboxManager()"
|
||||
class="btn btn-sm btn-icon btn-dimmed viewbox-open"
|
||||
>
|
||||
<clr-icon shape="view-cards" size="20"></clr-icon>
|
||||
Viewboxes
|
||||
</span>
|
||||
|
|
@ -235,7 +238,7 @@
|
|||
<ng-container *ngIf="hotTable.readOnly && !uploadPreview">
|
||||
<button
|
||||
type="button"
|
||||
class="btnView btn btn-sm btn-icon btn-block"
|
||||
class="btnView btn btn-sm btn-icon btn-block btn-dimmed"
|
||||
(click)="openQb()"
|
||||
>
|
||||
<clr-icon shape="filter"></clr-icon>
|
||||
|
|
@ -362,8 +365,8 @@
|
|||
<ng-container *ngIf="!getdataError">
|
||||
<span class="spinner"> Loading... </span>
|
||||
|
||||
<div>
|
||||
<h3>Loading table</h3>
|
||||
<div class="mt-10">
|
||||
<p cds-text="section">Loading table</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
|
|
@ -372,8 +375,8 @@
|
|||
<clr-icon shape="error-standard" class="error-icon"></clr-icon>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<h3>Loading table error</h3>
|
||||
<div class="mt-10">
|
||||
<p cds-text="section">Loading table error</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -398,6 +401,7 @@
|
|||
hotId="hotInstance"
|
||||
id="hotTable"
|
||||
class="edit-hot"
|
||||
className="htDark"
|
||||
[class.hidden]="hotTable.hidden"
|
||||
[licenseKey]="hotTable.licenseKey"
|
||||
>
|
||||
|
|
@ -486,11 +490,15 @@
|
|||
support@datacontroller.io</span
|
||||
>
|
||||
<div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
|
||||
<div class="form-group">
|
||||
<label for="formFields_8">Message</label>
|
||||
<div class="text-area-full-width">
|
||||
<label for="formFields_8" class="mb-5 d-block"
|
||||
>Message</label
|
||||
>
|
||||
<textarea
|
||||
clrTextarea
|
||||
[(ngModel)]="message"
|
||||
[disabled]="!validationDone"
|
||||
tabindex="0"
|
||||
[value]="
|
||||
!validationDone
|
||||
? 'Please wait while we validate ' +
|
||||
|
|
@ -498,10 +506,9 @@
|
|||
' cells.'
|
||||
: ''
|
||||
"
|
||||
class="w-100"
|
||||
class="submit-reason"
|
||||
type="text"
|
||||
id="formFields_8"
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- TODO:approvers list -->
|
||||
|
|
@ -520,6 +527,7 @@
|
|||
[disabled]="!validationDone"
|
||||
type="submit"
|
||||
class="btn btn-sm btn-success-outline m-0"
|
||||
tabindex="0"
|
||||
(click)="saveTable(hotTable.data)"
|
||||
>
|
||||
Submit
|
||||
|
|
@ -528,6 +536,7 @@
|
|||
id="cancelSubmitBtn"
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline"
|
||||
tabindex="0"
|
||||
(click)="cancelSubmit(); submit = false; validationDone = 0"
|
||||
>
|
||||
Cancel
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@ hot-table {
|
|||
|
||||
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
|
||||
&.primaryKeyHeaderStyle {
|
||||
background: #306b00b0;
|
||||
background-color: #306b00b0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.primaryKeyHeaderStyle {
|
||||
background: #306b006e;
|
||||
background-color: #306b006e !important;
|
||||
}
|
||||
|
||||
th.readonlyCell {
|
||||
|
|
@ -41,6 +41,12 @@ hot-table {
|
|||
}
|
||||
}
|
||||
|
||||
.submit-reason {
|
||||
min-height: 120px;
|
||||
max-height: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.infoBar {
|
||||
margin-top:14px;
|
||||
background: #495967;
|
||||
|
|
@ -80,8 +86,7 @@ hot-table {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
background: #f5f6fe;
|
||||
background: var(--clr-vertical-nav-bg-color);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
|
|
|
|||
|
|
@ -2766,6 +2766,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
|
|||
})
|
||||
|
||||
hot.setCellMeta(row, column, 'renderer', spinnerRenderer)
|
||||
|
||||
this.currentEditRecordLoadings.push(column)
|
||||
hot.render()
|
||||
|
||||
|
|
@ -3257,6 +3258,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
|
|||
if (col === 0) {
|
||||
th.classList.add('firstColumnHeaderStyle')
|
||||
}
|
||||
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
},
|
||||
afterGetCellMeta: (
|
||||
row: number,
|
||||
|
|
|
|||
|
|
@ -11,9 +11,11 @@ export const errorRenderer = (
|
|||
value: any,
|
||||
cellProperties: any
|
||||
) => {
|
||||
addDarkClass(td)
|
||||
|
||||
td.innerHTML = `${
|
||||
value ? value.toString() : ''
|
||||
} <clr-icon shape="exclamation-circle" status="warning"></clr-icon>`
|
||||
} <cds-icon shape="exclamation-triangle" status="warning"></cds-icon>`
|
||||
|
||||
return td
|
||||
}
|
||||
|
|
@ -31,6 +33,8 @@ export const noSpinnerRenderer = (
|
|||
value: any,
|
||||
cellProperties: any
|
||||
) => {
|
||||
addDarkClass(td)
|
||||
|
||||
td.innerHTML = value ? value : ''
|
||||
|
||||
return td
|
||||
|
|
@ -50,9 +54,20 @@ export const spinnerRenderer = (
|
|||
value: any,
|
||||
cellProperties: any
|
||||
) => {
|
||||
addDarkClass(td)
|
||||
|
||||
td.innerHTML = `${
|
||||
value ? value.toString() : ''
|
||||
} <span class="spinner spinner-sm vertical-align-middle"></span>`
|
||||
|
||||
return td
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a htDark class to a TD element if not existing
|
||||
*/
|
||||
const addDarkClass = (td: any) => {
|
||||
if (!td.classList.contains('htDark')) {
|
||||
td.classList.add('htDark')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<clr-tree-node *ngIf="groups" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLibTreeInput
|
||||
placeholder="Filter by Groups"
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
<clr-tree-node
|
||||
(click)="groupOnClick(group)"
|
||||
*ngIf="!group['hidden']"
|
||||
[class.table-active]="group.GROUPURI === groupUri"
|
||||
[class.active]="group.GROUPURI === groupUri"
|
||||
>
|
||||
<p class="m-0 cursor-pointer list-padding">
|
||||
<clr-icon shape="users"></clr-icon>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,63 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.group-info {
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.group-data {
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #29404b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.group-info{
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.group-data {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-height{
|
||||
height: 100%;
|
||||
}
|
||||
.group-info-text{
|
||||
display: inline;
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
}
|
||||
.group-info{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.group-info td{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.group-data{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.group-data{
|
||||
min-height: auto;
|
||||
h3, h5{
|
||||
|
|
@ -28,15 +65,11 @@
|
|||
}
|
||||
|
||||
.member-table{
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
.member-table thead{
|
||||
background-color: #dadada;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
clrInput
|
||||
appStealFocus
|
||||
#searchLibTreeInput
|
||||
placeholder="Libraries"
|
||||
name="input"
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
<clr-tree-node *ngIf="library['tables']" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchTreeInput
|
||||
placeholder="Tables"
|
||||
|
|
@ -85,7 +87,7 @@
|
|||
(click)="!tableLocked ? onTableClick(libTable, library) : ''"
|
||||
class="clr-treenode-link"
|
||||
[class.dc-locked-control]="tableLocked"
|
||||
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
[class.active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
>
|
||||
<ng-container [ngSwitch]="libTable.includes('-FC')">
|
||||
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
|
||||
|
|
@ -126,12 +128,20 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 *ngIf="treeNodeLibraries?.length! > 0" class="text-center color-gray">
|
||||
<p
|
||||
*ngIf="treeNodeLibraries?.length! > 0"
|
||||
class="text-center color-gray mt-10"
|
||||
cds-text="section"
|
||||
>
|
||||
Please select a table
|
||||
</h3>
|
||||
<h3 *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray">
|
||||
</p>
|
||||
<p
|
||||
*ngIf="treeNodeLibraries?.length! < 1"
|
||||
class="text-center color-gray mt-10"
|
||||
cds-text="section"
|
||||
>
|
||||
No Editable Tables Configured
|
||||
</h3>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<clr-tree-node *ngIf="libraryList" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLibTreeInput
|
||||
placeholder="Libraries"
|
||||
|
|
@ -42,6 +43,7 @@
|
|||
<clr-tree-node *ngIf="library['tables']" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchTreeInput
|
||||
placeholder="Tables"
|
||||
|
|
@ -85,6 +87,7 @@
|
|||
<clr-tree-node *ngIf="libTable['columns']" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchTreeInput
|
||||
placeholder="Columns"
|
||||
|
|
@ -138,7 +141,9 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a column or table</h3>
|
||||
<p class="text-center color-gray mt-10" cds-text="section">
|
||||
Please select a column or table
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="column || table">
|
||||
|
|
@ -180,13 +185,13 @@
|
|||
<button
|
||||
(click)="limitDotDepth = true"
|
||||
type="button"
|
||||
class="btn btn-outline"
|
||||
class="btn btn-outline mr-5"
|
||||
>
|
||||
Limit depth
|
||||
</button>
|
||||
|
||||
<!-- <button class="btn btn-outline" (click)='showSvg()'> Open in New Tab </button> -->
|
||||
<div class="btn-group d-block">
|
||||
<div class="btn-group direction d-block">
|
||||
<div
|
||||
class="radio btn"
|
||||
(click)="
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
.toggle-switch input[type=checkbox]:checked+label:before {
|
||||
border-color: #314351;
|
||||
background-color: #314351!important;
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground !important;
|
||||
transition: .15s ease-in;
|
||||
transition-property: border-color,background-color;
|
||||
}
|
||||
|
|
@ -41,6 +43,10 @@ clr-tree-node button {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-group.direction {
|
||||
margin-left: var(--cds-global-space-6);
|
||||
}
|
||||
|
||||
.graph-render-spinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
<clr-tree-node *ngIf="metaDataList" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLibTreeInput
|
||||
placeholder="search SAS Types"
|
||||
|
|
@ -72,7 +73,9 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a type</h3>
|
||||
<p class="text-center color-gray mt-10" cds-text="section">
|
||||
Please select a type
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="loadingSpinner" *ngIf="loading">
|
||||
|
|
@ -123,12 +126,18 @@
|
|||
[class.object-header]="!entry.count"
|
||||
class="full-width"
|
||||
>
|
||||
<clr-icon
|
||||
*ngIf="!entry.count"
|
||||
shape="rack-server"
|
||||
></clr-icon>
|
||||
<clr-icon *ngIf="entry.count" shape="block"></clr-icon>
|
||||
{{ entry.display }}
|
||||
<div>
|
||||
<clr-icon
|
||||
*ngIf="!entry.count"
|
||||
shape="rack-server"
|
||||
></clr-icon>
|
||||
<clr-icon
|
||||
*ngIf="entry.count"
|
||||
shape="block"
|
||||
></clr-icon>
|
||||
{{ entry.display }}
|
||||
</div>
|
||||
|
||||
<p class="float-right object-uri" *ngIf="!entry.count">
|
||||
{{ entry.URI }}
|
||||
</p>
|
||||
|
|
@ -163,9 +172,15 @@
|
|||
[clrExpandable]="true"
|
||||
>
|
||||
<div [class.object-header]="!entry.count" class="full-width">
|
||||
<clr-icon *ngIf="!entry.count" shape="rack-server"></clr-icon>
|
||||
<clr-icon *ngIf="entry.count" shape="block"></clr-icon>
|
||||
{{ entry.display }}
|
||||
<div>
|
||||
<clr-icon
|
||||
*ngIf="!entry.count"
|
||||
shape="rack-server"
|
||||
></clr-icon>
|
||||
<clr-icon *ngIf="entry.count" shape="block"></clr-icon>
|
||||
{{ entry.display }}
|
||||
</div>
|
||||
|
||||
<p class="float-right object-uri" *ngIf="!entry.count">
|
||||
{{ entry.URI }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,27 @@
|
|||
::ng-deep body[cds-theme="dark"] {
|
||||
.object-header:hover {
|
||||
background-color: #405560;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.objects-col {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.object-header:hover {
|
||||
background-color: #d8e3e9;
|
||||
}
|
||||
}
|
||||
|
||||
.objects-col{
|
||||
height: 75vh;
|
||||
overflow: scroll;
|
||||
border: 1px solid #cccccc;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cols-head {
|
||||
background: #fafafa;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
|
@ -40,11 +53,13 @@
|
|||
margin-top: 5px;
|
||||
}
|
||||
.object-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
.object-header:hover{
|
||||
background-color: #d8e3e9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.datagrid-host{
|
||||
|
|
|
|||
9
client/src/app/models/AppSettings.ts
Normal file
9
client/src/app/models/AppSettings.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export interface AppSettings {
|
||||
persistSelectedTheme: boolean
|
||||
selectedTheme: AppThemes
|
||||
}
|
||||
|
||||
export enum AppThemes {
|
||||
light = 'light',
|
||||
dark = 'dark'
|
||||
}
|
||||
|
|
@ -1,3 +1,25 @@
|
|||
::ng-deep {
|
||||
body[cds-theme="dark"] {
|
||||
.clause-logic {
|
||||
background: #192a30;
|
||||
}
|
||||
|
||||
.clause-query {
|
||||
background: #263e48;
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
.clause-logic {
|
||||
background: #e9e9e9;
|
||||
}
|
||||
|
||||
.clause-query {
|
||||
background: #fbf8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -9,13 +31,12 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #e9e9e9;
|
||||
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.clause-query {
|
||||
padding: 30px 0px 20px 20px;
|
||||
background: #fbf8f8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
|
@ -220,8 +241,11 @@
|
|||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
background-color: #fbf8f8;
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.line-numbers {
|
||||
border-color: #989797 !important;
|
||||
}
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
|
|
|
|||
|
|
@ -284,19 +284,15 @@
|
|||
>
|
||||
<span class="label label-warning">
|
||||
Changed Rows
|
||||
<span class="badge badge-warning">{{
|
||||
lens.updated
|
||||
}}</span>
|
||||
<span class="badge">{{ lens.updated }}</span>
|
||||
</span>
|
||||
<span class="label label-success">
|
||||
Added Rows
|
||||
<span class="badge badge-success">{{ lens.new }}</span>
|
||||
<span class="badge">{{ lens.new }}</span>
|
||||
</span>
|
||||
<span class="label label-danger">
|
||||
Deleted Rows
|
||||
<span class="badge badge-danger">{{
|
||||
lens.deleted
|
||||
}}</span>
|
||||
<span class="badge">{{ lens.deleted }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -311,8 +307,8 @@
|
|||
class="h-24vh d-flex flex-column justify-content-center align-items-center"
|
||||
>
|
||||
<span class="spinner"> Loading... </span>
|
||||
<div *ngIf="!loadingTable">
|
||||
<h3>Loading table</h3>
|
||||
<div *ngIf="!loadingTable" class="mt-10">
|
||||
<p cds-text="section">Loading table</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -477,15 +473,15 @@
|
|||
>
|
||||
<span class="label label-warning">
|
||||
Changed Rows
|
||||
<span class="badge badge-warning">{{ lens.updated }}</span>
|
||||
<span class="badge">{{ lens.updated }}</span>
|
||||
</span>
|
||||
<span class="label label-success">
|
||||
Added Rows
|
||||
<span class="badge badge-success">{{ lens.new }}</span>
|
||||
<span class="badge">{{ lens.new }}</span>
|
||||
</span>
|
||||
<span class="label label-danger">
|
||||
Deleted Rows
|
||||
<span class="badge badge-danger">{{ lens.deleted }}</span>
|
||||
<span class="badge">{{ lens.deleted }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -519,8 +515,8 @@
|
|||
class="h-25vh d-flex flex-column justify-content-center align-items-center"
|
||||
>
|
||||
<span class="spinner"> Loading... </span>
|
||||
<div *ngIf="!loadingTable">
|
||||
<h3>Loading table</h3>
|
||||
<div *ngIf="!loadingTable" class="mt-10">
|
||||
<p cds-text="section">Loading table</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableCont">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.loader {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
|
|
@ -10,19 +12,48 @@
|
|||
}
|
||||
|
||||
.addedRow {
|
||||
background: rgb(146, 208, 154);
|
||||
border: 1px solid rgba(9, 77, 117, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.deletedRow {
|
||||
background: rgb(230, 179, 179);
|
||||
border: 1px solid rgba(70, 71, 70, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
table {
|
||||
.updatedRow {
|
||||
background: #93971e;
|
||||
}
|
||||
|
||||
.addedRow {
|
||||
background: rgb(86 153 95);
|
||||
}
|
||||
|
||||
.deletedRow {
|
||||
background: rgb(138 90 90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
table {
|
||||
.updatedRow {
|
||||
background: #fafda8;
|
||||
}
|
||||
|
||||
.addedRow {
|
||||
background: rgb(146, 208, 154);
|
||||
}
|
||||
|
||||
.deletedRow {
|
||||
background: rgb(230, 179, 179);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updatedRow {
|
||||
background: #fafda8;
|
||||
border: 1px solid rgba(9, 117, 9, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -45,7 +76,7 @@ background: rgba(252, 135, 120, 0.4);
|
|||
font-size: .54167rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
background: #314351;
|
||||
background: $headerBackground;
|
||||
border-radius: .125rem;
|
||||
color: #f0f1ec;;
|
||||
line-height: .75rem;
|
||||
|
|
@ -68,8 +99,8 @@ background: rgba(252, 135, 120, 0.4);
|
|||
top: auto;
|
||||
right: auto;
|
||||
content: "";
|
||||
border-left: .25rem solid #314351;
|
||||
border-top: .20833rem solid #314351;
|
||||
border-left: .25rem solid $headerBackground;
|
||||
border-top: .20833rem solid $headerBackground;
|
||||
border-right: .25rem solid transparent;
|
||||
border-bottom: .20833rem solid transparent;
|
||||
}
|
||||
|
|
@ -79,8 +110,8 @@ border: 0px solid;
|
|||
}
|
||||
|
||||
.toggle-switch input[type=checkbox]:checked+label:before {
|
||||
border-color: #314351;
|
||||
background-color: #314351!important;
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground !important;
|
||||
transition: .15s ease-in;
|
||||
transition-property: border-color,background-color;
|
||||
}
|
||||
|
|
@ -140,7 +171,7 @@ border: 0px solid;
|
|||
.tooll {
|
||||
position: absolute;
|
||||
background: #e6b3b3;
|
||||
color: #314351;
|
||||
color: $headerBackground;
|
||||
top: 0px;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -99,19 +99,11 @@
|
|||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="d-flex justify-content-start">
|
||||
<span>items per page</span>
|
||||
<select [(ngModel)]="itemsNum">
|
||||
<option [ngValue]="3">3</option>
|
||||
<option [ngValue]="5">5</option>
|
||||
<option [ngValue]="10">10</option>
|
||||
<option [ngValue]="15">15</option>
|
||||
</select>
|
||||
<clr-dg-pagination
|
||||
#pagination
|
||||
[clrDgPageSize]="itemsNum"
|
||||
class="center"
|
||||
>
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
|
||||
>Items per page</clr-dg-page-size
|
||||
>
|
||||
{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
|
||||
{{ pagination.totalItems }} approvals
|
||||
</clr-dg-pagination>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.column-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -13,11 +15,11 @@
|
|||
}
|
||||
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
|
||||
background: #314351!important;
|
||||
background: $headerBackground !important;
|
||||
}
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
|
||||
border-right: .25rem solid #314351;
|
||||
border-bottom: .20833rem solid #314351;
|
||||
border-right: .25rem solid $headerBackground;
|
||||
border-bottom: .20833rem solid $headerBackground;
|
||||
}
|
||||
|
||||
.noBorder {
|
||||
|
|
|
|||
|
|
@ -86,19 +86,11 @@
|
|||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="d-flex justify-content-start">
|
||||
<span>items per page</span>
|
||||
<select [(ngModel)]="itemsNum">
|
||||
<option [ngValue]="3">3</option>
|
||||
<option [ngValue]="5">5</option>
|
||||
<option [ngValue]="10">10</option>
|
||||
<option [ngValue]="15">15</option>
|
||||
</select>
|
||||
<clr-dg-pagination
|
||||
#pagination
|
||||
[clrDgPageSize]="itemsNum"
|
||||
class="center"
|
||||
>
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
|
||||
>Items per page</clr-dg-page-size
|
||||
>
|
||||
{{ pagination.firstItem + 1 }} -
|
||||
{{ pagination.lastItem + 1 }} of
|
||||
{{ pagination.totalItems }} submissions
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.noBorder {
|
||||
border-bottom: 1px solid transparent!important;
|
||||
}
|
||||
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
|
||||
background: #314351!important;
|
||||
background: $headerBackground !important;
|
||||
}
|
||||
.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
|
||||
border-right: .25rem solid #314351;
|
||||
border-bottom: .20833rem solid #314351;
|
||||
border-right: .25rem solid $headerBackground;
|
||||
border-bottom: .20833rem solid $headerBackground;
|
||||
}
|
||||
|
||||
.no-submitted-tables {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<clr-tree-node *ngIf="roles" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLibTreeInput
|
||||
placeholder="Filter by Roles"
|
||||
|
|
@ -26,7 +27,7 @@
|
|||
<clr-tree-node
|
||||
(click)="roleOnClick(role)"
|
||||
*ngIf="!role['hidden']"
|
||||
[class.table-active]="role.ROLEURI === roleUri"
|
||||
[class.active]="role.ROLEURI === roleUri"
|
||||
>
|
||||
<p class="m-0 cursor-pointer list-padding">
|
||||
<clr-icon shape="blocks-group"></clr-icon>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,61 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.role {
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.role-data {
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #29404b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.role-info{
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.role-data {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-height{
|
||||
height: 100%;
|
||||
}
|
||||
.role-info-text{
|
||||
display: inline;
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
}
|
||||
.role-info{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.role-info td{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.role-data{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.role-data{
|
||||
min-height: unset;
|
||||
|
|
@ -28,15 +64,10 @@
|
|||
}
|
||||
}
|
||||
.member-table{
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
.member-table thead{
|
||||
background-color: #dadada;
|
||||
}
|
||||
.member-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
56
client/src/app/services/app-settings.service.ts
Normal file
56
client/src/app/services/app-settings.service.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { BehaviorSubject } from 'rxjs'
|
||||
import { AppSettings, AppThemes } from '../models/AppSettings'
|
||||
|
||||
export class AppSettingsService {
|
||||
public defaultSettings: AppSettings = {
|
||||
persistSelectedTheme: true,
|
||||
selectedTheme: AppThemes.light
|
||||
}
|
||||
public settings = new BehaviorSubject<AppSettings>(this.defaultSettings)
|
||||
|
||||
constructor() {
|
||||
this.restoreAppSettings()
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore app settings from the local storage
|
||||
*/
|
||||
restoreAppSettings() {
|
||||
try {
|
||||
const serializedSettings = localStorage.getItem('app-settings')
|
||||
|
||||
if (serializedSettings) {
|
||||
const settings = JSON.parse(serializedSettings)
|
||||
|
||||
this.setAppSettings(settings)
|
||||
} else {
|
||||
console.info(
|
||||
'No app settings stored in the localStorage, we will set to default values.'
|
||||
)
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Error restoring settings from local storgae.', err)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save app settings to the local storage
|
||||
*/
|
||||
storeAppSettings() {
|
||||
localStorage.setItem('app-settings', JSON.stringify(this.settings.value))
|
||||
}
|
||||
|
||||
/**
|
||||
* Function used in the app to update global settings object
|
||||
*
|
||||
* @param appSettings contains properties that should be updated in settings
|
||||
*/
|
||||
setAppSettings(appSettings: Partial<AppSettings>) {
|
||||
this.settings.next({
|
||||
...this.settings.value,
|
||||
...appSettings
|
||||
})
|
||||
|
||||
this.storeAppSettings()
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,8 @@ import { BehaviorSubject } from 'rxjs'
|
|||
import { LoggerService } from './logger.service'
|
||||
import { EnvironmentInfo } from '../system/models/environment-info.model'
|
||||
import { LicenceService } from './licence.service'
|
||||
import { AppSettingsService } from './app-settings.service'
|
||||
import { AppThemes } from '../models/AppSettings'
|
||||
|
||||
@Injectable()
|
||||
export class AppService {
|
||||
|
|
@ -18,6 +20,7 @@ export class AppService {
|
|||
private eventService: EventService,
|
||||
private sasService: SasService,
|
||||
private loggerService: LoggerService,
|
||||
private appSettingsService: AppSettingsService,
|
||||
private router: Router
|
||||
) {
|
||||
this.subscribe()
|
||||
|
|
@ -29,6 +32,19 @@ export class AppService {
|
|||
}
|
||||
}
|
||||
})
|
||||
|
||||
const appSettings = this.appSettingsService.settings.value
|
||||
|
||||
if (!!appSettings.persistSelectedTheme) {
|
||||
if (appSettings.selectedTheme === AppThemes.light) {
|
||||
this.eventService.toggleDarkMode(false)
|
||||
} else if (appSettings.selectedTheme === AppThemes.dark) {
|
||||
this.eventService.toggleDarkMode(true)
|
||||
} else {
|
||||
// Fallback to light mode
|
||||
this.eventService.toggleDarkMode(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sasServiceInit() {
|
||||
|
|
@ -95,6 +111,7 @@ export class AppService {
|
|||
MEMSIZE: res.MEMSIZE,
|
||||
SYSPROCESSMODE: res.SYSPROCESSMODE,
|
||||
SYSHOSTNAME: res.SYSHOSTNAME,
|
||||
SYSUSERID: res.SYSUSERID,
|
||||
SYSHOSTINFOLONG: res.SYSHOSTINFOLONG,
|
||||
SYSENCODING: res.SYSENCODING,
|
||||
AUTOEXEC: res.AUTOEXEC,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { Injectable, Output, EventEmitter } from '@angular/core'
|
||||
import { InfoModal, AbortDetails } from '../models/InfoModal'
|
||||
import { AlertsService } from '../shared/alerts/alerts.service'
|
||||
import { BehaviorSubject } from 'rxjs'
|
||||
import { AppSettingsService } from './app-settings.service'
|
||||
import { AppThemes } from '../models/AppSettings'
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
|
@ -17,7 +20,23 @@ export class EventService {
|
|||
public viewLastUrl: string | null = null
|
||||
public sidebarCloseLimit = 1280
|
||||
|
||||
constructor(private alertsService: AlertsService) {}
|
||||
public darkMode: BehaviorSubject<boolean> = new BehaviorSubject(false)
|
||||
|
||||
constructor(private appSettingsService: AppSettingsService) {}
|
||||
|
||||
toggleDarkMode(value: boolean) {
|
||||
this.darkMode.next(value)
|
||||
|
||||
if (value) {
|
||||
document.body.setAttribute('cds-theme', 'dark')
|
||||
} else {
|
||||
document.body.setAttribute('cds-theme', 'light')
|
||||
}
|
||||
|
||||
this.appSettingsService.setAppSettings({
|
||||
selectedTheme: value ? AppThemes.dark : AppThemes.light
|
||||
})
|
||||
}
|
||||
|
||||
public showDemoLimitModal(featureName: string) {
|
||||
this.onDemoLimitModalShow.emit(featureName)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.input-val {
|
||||
border: 0px;
|
||||
background: #fbf8f8;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
|
||||
|
|
@ -13,6 +13,29 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
body[cds-theme="dark"] {
|
||||
.datalist {
|
||||
background: #21333b;
|
||||
border: 1px solid #575757;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.datalist option {
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
.datalist {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-wrapper {
|
||||
.overlay {
|
||||
position: fixed;
|
||||
|
|
@ -25,7 +48,6 @@ input {
|
|||
|
||||
.datalist {
|
||||
position: fixed;
|
||||
background: white;
|
||||
box-shadow: 0px 3px 10px -1px #0000002b;
|
||||
overflow: auto;
|
||||
z-index: 2000;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<clr-tree-node *ngIf="libraryList" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLibTreeInput
|
||||
placeholder="Libraries"
|
||||
|
|
@ -45,6 +46,7 @@
|
|||
<clr-tree-node *ngIf="library['tables']" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchTreeInput
|
||||
placeholder="Tables"
|
||||
|
|
@ -91,7 +93,7 @@
|
|||
"
|
||||
class="clr-treenode-link"
|
||||
[class.dc-locked-control]="tableLocked"
|
||||
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
[class.active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
>
|
||||
<ng-container [ngSwitch]="libTable.includes('-FC')">
|
||||
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
|
||||
|
|
@ -114,6 +116,7 @@
|
|||
<clr-tree-node *ngIf="libTable['columns']" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchTreeInput
|
||||
placeholder="Columns"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@import '../../../colors.scss';
|
||||
|
||||
.sideBarProps {
|
||||
background: #314351!important;
|
||||
background: $headerBackground !important;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@
|
|||
border-radius: 3px;
|
||||
|
||||
border: 1px solid #e2e2e2;
|
||||
background-color: #fbfbfb;
|
||||
|
||||
height: 48vh;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
$sidebarWidth: 272px;
|
||||
|
||||
.clr-vertical-nav .nav-link.active {
|
||||
background-color: transparent;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
clr-vertical-nav {
|
||||
width: $sidebarWidth;
|
||||
min-width: $sidebarWidth;
|
||||
|
|
@ -7,7 +12,6 @@ clr-vertical-nav {
|
|||
max-width: 375px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
|
||||
background-color: white !important;
|
||||
|
||||
.sun-dropdown {
|
||||
min-height: 36px
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.input-val {
|
||||
border: 0px;
|
||||
background: #fbf8f8;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,25 @@
|
|||
<div class="header-actions">
|
||||
<div class="d-flex clr-align-items-center">
|
||||
<cds-icon
|
||||
*ngIf="!darkMode.value"
|
||||
(click)="toggleDarkMode(true)"
|
||||
size="md"
|
||||
class="theme-toggle-icon cursor-pointer"
|
||||
shape="moon"
|
||||
inverse="false"
|
||||
solid="false"
|
||||
></cds-icon>
|
||||
<cds-icon
|
||||
*ngIf="!!darkMode.value"
|
||||
(click)="toggleDarkMode(false)"
|
||||
size="md"
|
||||
class="theme-toggle-icon cursor-pointer"
|
||||
shape="sun"
|
||||
inverse="false"
|
||||
solid="false"
|
||||
></cds-icon>
|
||||
</div>
|
||||
|
||||
<app-loading-indicator></app-loading-indicator>
|
||||
|
||||
<clr-dropdown class="app-nav-dropdown">
|
||||
|
|
|
|||
|
|
@ -65,9 +65,6 @@ $clr-light-gray: #eee;
|
|||
height: 45px;
|
||||
line-height: 40px;
|
||||
|
||||
span.dropdown-text{
|
||||
color: $clr-dark-gray;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export class HeaderActions implements OnInit, OnDestroy {
|
|||
public sasjsConfig: SASjsConfig = new SASjsConfig()
|
||||
public requestsCount: number = 0
|
||||
public commitVer: string = ''
|
||||
public darkMode = this.eventService.darkMode
|
||||
|
||||
constructor(
|
||||
private userService: UserService,
|
||||
|
|
@ -51,6 +52,10 @@ export class HeaderActions implements OnInit, OnDestroy {
|
|||
this.userSub.unsubscribe()
|
||||
}
|
||||
|
||||
toggleDarkMode(value: boolean) {
|
||||
this.eventService.toggleDarkMode(value)
|
||||
}
|
||||
|
||||
openRequestsModal() {
|
||||
this.eventService.openRequestsModal()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -389,6 +389,7 @@
|
|||
*ngIf="viewboxTableIndex > -1"
|
||||
[hotId]="'hotInstance_viewbox_' + viewbox.id"
|
||||
id="hotTable"
|
||||
className="htDark"
|
||||
[readOnly]="true"
|
||||
[modifyColWidth]="maxWidthCheker"
|
||||
[copyPaste]="viewboxTables[viewboxTableIndex].hotTable.copyPaste"
|
||||
|
|
|
|||
|
|
@ -38,6 +38,10 @@ dc-tree {
|
|||
.add-new {
|
||||
width: 50%;
|
||||
padding-right: 5px;
|
||||
|
||||
> p {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.viewbox-limit-notice {
|
||||
|
|
@ -45,6 +49,38 @@ dc-tree {
|
|||
color: #E74C3C
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.currently-open .open-viewbox:hover {
|
||||
background: #314b57;
|
||||
}
|
||||
|
||||
.cols-list {
|
||||
background: #314b57;
|
||||
color: #fff;
|
||||
border-color: #858585;
|
||||
}
|
||||
|
||||
.col-box {
|
||||
background: #314b57;
|
||||
border-color: #858585;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.currently-open .open-viewbox:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.cols-list {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.col-box {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.currently-open {
|
||||
width: 50%;
|
||||
|
||||
|
|
@ -55,10 +91,6 @@ dc-tree {
|
|||
&.selected {
|
||||
background: #3c85002e;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,7 +212,6 @@ dc-tree {
|
|||
.cols-list {
|
||||
border: solid 1px #ccc;
|
||||
min-height: 60px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
|
@ -199,7 +230,6 @@ dc-tree {
|
|||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
|
||||
&.search:focus {
|
||||
|
|
|
|||
|
|
@ -433,6 +433,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
viewboxTable!.hotTable.headerPks.indexOf(column) > -1
|
||||
|
||||
if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
}
|
||||
})
|
||||
hotInstance?.render()
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="clr-row" ng-if="loaded">
|
||||
<div class="card-block clr-col-md-6">
|
||||
<div class="card-block clr-col-md-6 no-borders">
|
||||
<div class="card-header py-5">
|
||||
<div class="card-title text-center">Basic Submitted Details</div>
|
||||
</div>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-md-6 card-block">
|
||||
<div class="clr-col-md-6 card-block no-borders">
|
||||
<div class="card-header py-5">
|
||||
<div class="card-title text-center">Actions</div>
|
||||
</div>
|
||||
|
|
@ -118,12 +118,14 @@
|
|||
<hot-table
|
||||
hotId="hotInstance"
|
||||
id="hotTable"
|
||||
className="htDark"
|
||||
[data]="hotTable.data"
|
||||
[colHeaders]="hotTable.colHeaders"
|
||||
[columns]="hotTable.columns"
|
||||
[maxRows]="hotTable.maxRows"
|
||||
[height]="hotTable.height"
|
||||
[licenseKey]="hotTable.licenseKey"
|
||||
[afterGetColHeader]="hotTable.afterGetColHeader"
|
||||
stretchH="all"
|
||||
[cells]="hotTable.cells"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -12,4 +12,10 @@
|
|||
cursor:pointer;
|
||||
margin-top:10px;
|
||||
color: #007cbb;
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.baseTableLink {
|
||||
color: #4ec0ff;
|
||||
}
|
||||
}
|
||||
|
|
@ -32,7 +32,11 @@ export class StageComponent implements OnInit {
|
|||
height: 500,
|
||||
settings: {},
|
||||
licenseKey: undefined,
|
||||
maxRows: this.licenceState.value.stage_rows_allowed || Infinity
|
||||
maxRows: this.licenceState.value.stage_rows_allowed || Infinity,
|
||||
afterGetColHeader: (column, th, headerLevel) => {
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
}
|
||||
}
|
||||
|
||||
constructor(
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ export interface EnvironmentInfo {
|
|||
MEMSIZE: string
|
||||
SYSPROCESSMODE: string
|
||||
SYSHOSTNAME: string
|
||||
SYSUSERID: string
|
||||
SYSHOSTINFOLONG: string
|
||||
SYSENCODING: string
|
||||
AUTOEXEC: string
|
||||
|
|
|
|||
|
|
@ -36,6 +36,10 @@
|
|||
SYSHOSTNAME:
|
||||
<span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
SYSUSERID:
|
||||
<span class="dark">{{ environmentInfo?.SYSUSERID }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
SYSHOSTINFOLONG:
|
||||
<span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span>
|
||||
|
|
@ -47,10 +51,6 @@
|
|||
<p cds-text="label" class="m-0">
|
||||
AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
DC ADMIN GROUP:
|
||||
<span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex clr-justify-content-lg-center">
|
||||
|
|
@ -73,6 +73,10 @@
|
|||
<p cds-text="label" class="m-0">
|
||||
HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span>
|
||||
</p>
|
||||
<p cds-text="label" class="m-0">
|
||||
DC Admin Group:
|
||||
<span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -190,6 +194,16 @@
|
|||
|
||||
<hr class="w-100 light" />
|
||||
|
||||
<!-- Keep the logic in case we in future have more then 2 themes (light, dark) -->
|
||||
<!-- -->
|
||||
<!-- <div class="user-action">
|
||||
Keep selected theme after reload
|
||||
|
||||
<clr-checkbox-wrapper>
|
||||
<input [(ngModel)]="settings.persistSelectedTheme" (change)="settingChange($event)" value="persistDarkMode" type="checkbox" clrToggle />
|
||||
</clr-checkbox-wrapper>
|
||||
</div> -->
|
||||
|
||||
<ng-container *ngIf="environmentInfo?.ISADMIN === 1">
|
||||
<div *ngIf="serverType === 'SAS9'" class="admin-action">
|
||||
Refresh Data Lineage
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.admin-action {
|
||||
.admin-action, .user-action {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -27,7 +27,8 @@
|
|||
}
|
||||
|
||||
.dark {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 993px) {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { LicenceService } from '../services/licence.service'
|
|||
import { SasService } from '../services/sas.service'
|
||||
import { AppInfo } from './models/app-info.model'
|
||||
import { EnvironmentInfo } from './models/environment-info.model'
|
||||
import { AppSettingsService } from '../services/app-settings.service'
|
||||
import { AppSettings } from '../models/AppSettings'
|
||||
|
||||
@Component({
|
||||
selector: 'app-system',
|
||||
|
|
@ -36,25 +38,36 @@ export class SystemComponent implements OnInit {
|
|||
Infinity = Infinity
|
||||
|
||||
licenceState = this.licenceService.licenceState
|
||||
settings: AppSettings
|
||||
|
||||
constructor(
|
||||
private appService: AppService,
|
||||
private sasService: SasService,
|
||||
private licenceService: LicenceService
|
||||
private licenceService: LicenceService,
|
||||
private appSettingsService: AppSettingsService
|
||||
) {
|
||||
this.serverType = this.sasService.getServerType()
|
||||
this.licenceInfo = this.licenceService.getLicenseKeyData()
|
||||
this.environmentInfo = this.appService.getEnvironmentInfo()
|
||||
this.settings = this.appSettingsService.settings.value
|
||||
|
||||
if (this.environmentInfo) {
|
||||
this.environmentInfo.AUTOEXEC = decodeURIComponent(
|
||||
this.environmentInfo.AUTOEXEC
|
||||
)
|
||||
}
|
||||
|
||||
this.appSettingsService.settings.subscribe((settings: AppSettings) => {
|
||||
this.settings = settings
|
||||
})
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
settingChange(event: Event) {
|
||||
this.appSettingsService.setAppSettings(this.settings)
|
||||
}
|
||||
|
||||
downloadConfiguration() {
|
||||
let sasjsConfig = this.sasService.getSasjsConfig()
|
||||
let storage = sasjsConfig.serverUrl
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common'
|
|||
import { SystemRoutingModule } from './system-routing.module'
|
||||
import { SystemComponent } from './system.component'
|
||||
import { ClarityModule } from '@clr/angular'
|
||||
import { FormsModule } from '@angular/forms'
|
||||
|
||||
@NgModule({
|
||||
declarations: [SystemComponent],
|
||||
imports: [CommonModule, SystemRoutingModule, ClarityModule]
|
||||
imports: [CommonModule, SystemRoutingModule, ClarityModule, FormsModule]
|
||||
})
|
||||
export class SystemModule {}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<clr-tree-node *ngIf="users" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLibTreeInput
|
||||
placeholder="Filter by Users"
|
||||
|
|
@ -26,7 +27,7 @@
|
|||
<clr-tree-node
|
||||
(click)="userOnClick(user)"
|
||||
*ngIf="!user['hidden']"
|
||||
[class.table-active]="userInfo?.URI === user.URI"
|
||||
[class.active]="userInfo?.URI === user.URI"
|
||||
>
|
||||
<p class="m-0 cursor-pointer list-padding">
|
||||
<clr-icon shape="user"></clr-icon>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,61 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
.sidebar-height{
|
||||
height: 100%;
|
||||
}
|
||||
.user-info-text{
|
||||
display: inline;
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="dark"] {
|
||||
.user-info {
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.user-data {
|
||||
background-color: $headerBackground;
|
||||
border-color: $headerBackground;
|
||||
}
|
||||
|
||||
.user-table tbody{
|
||||
tr:hover{
|
||||
background-color: #29404b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep body[cds-theme="light"] {
|
||||
.user-info {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.user-data {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #a7a7a7;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
|
||||
.user-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.user-info td{
|
||||
text-align: center;
|
||||
}
|
||||
.user-data{
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #a7a7a7;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 5px #dad7d7;
|
||||
}
|
||||
.user-data{
|
||||
min-height: auto;
|
||||
|
|
@ -28,7 +65,6 @@
|
|||
}
|
||||
|
||||
.user-table{
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
.user-table thead{
|
||||
|
|
@ -36,7 +72,6 @@
|
|||
}
|
||||
.user-table tbody{
|
||||
tr:hover{
|
||||
background-color: #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<clr-tree-node *ngIf="libraries" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLibTreeInput
|
||||
[(ngModel)]="librariesSearch"
|
||||
|
|
@ -50,6 +51,7 @@
|
|||
<clr-tree-node *ngIf="library['tables']" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchTreeInput
|
||||
[id]="'search_' + library.LIBRARYREF"
|
||||
|
|
@ -91,7 +93,7 @@
|
|||
(click)="!tableLocked ? onTableClick(libTable, library) : ''"
|
||||
class="clr-treenode-link"
|
||||
[class.dc-locked-control]="tableLocked"
|
||||
[class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
[class.active]="libTabActive(library.LIBRARYREF, libTable)"
|
||||
>
|
||||
<ng-container [ngSwitch]="libTable.includes('-FC')">
|
||||
<clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
|
||||
|
|
@ -195,7 +197,7 @@
|
|||
<div class="modal-body web-query">
|
||||
<div class="row">
|
||||
<div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card no-borders">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<span>Copy the below into your preferred client tool:</span>
|
||||
|
||||
|
|
@ -225,15 +227,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block word-break-all">
|
||||
<div class="card-block web-query-wrapper word-break-all">
|
||||
<textarea
|
||||
class="web-query-text w-100"
|
||||
clrTextarea
|
||||
class="web-query-text"
|
||||
rows="4"
|
||||
cols="50"
|
||||
#cliCommandInput
|
||||
(focus)="onCliCommandFocus($event)"
|
||||
type="text"
|
||||
value="{{ webQueryText }}"
|
||||
[value]="webQueryText"
|
||||
readonly
|
||||
>
|
||||
</textarea>
|
||||
|
|
@ -315,12 +318,15 @@
|
|||
|
||||
<div class="loadingSpinner" *ngIf="loadingTableView">
|
||||
<span class="spinner"> Loading... </span>
|
||||
<div>
|
||||
<h4>Loading table viewer</h4>
|
||||
<div class="mt-10">
|
||||
<p cds-text="section">Loading Table Viewer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card h-100 d-flex clr-flex-column" *ngIf="!loadingTableView">
|
||||
<div
|
||||
class="card no-borders h-100 d-flex clr-flex-column"
|
||||
*ngIf="!loadingTableView"
|
||||
>
|
||||
<div
|
||||
*ngIf="table"
|
||||
class="header-row clr-row justify-content-between clr-justify-content-center w-100 m-0"
|
||||
|
|
@ -361,8 +367,9 @@
|
|||
</section>
|
||||
|
||||
<div class="title-col clr-col-auto clr-flex-column clr-flex-sm-row">
|
||||
<h3
|
||||
class="viewerTitle clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
|
||||
<p
|
||||
cds-text="section"
|
||||
class="clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
|
||||
>
|
||||
<clr-tooltip class="d-flex clr-align-items-center">
|
||||
<clr-icon
|
||||
|
|
@ -407,7 +414,7 @@
|
|||
shape="refresh"
|
||||
></clr-icon>
|
||||
</ng-container>
|
||||
</h3>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="options-col clr-col-md">
|
||||
|
|
@ -478,7 +485,9 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a library</h3>
|
||||
<h3 class="text-center color-gray mt-10" cds-text="section">
|
||||
Please select a library
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!noData && !noDataReqErr && !table && lib">
|
||||
|
|
@ -489,10 +498,10 @@
|
|||
class="form-block table-search-wrapper sw clr-col-md"
|
||||
></section>
|
||||
|
||||
<div class="title-col clr-col-auto">
|
||||
<h3 class="viewerTitle mt-17">
|
||||
<div class="title-col clr-col-auto mt-15 mb-15">
|
||||
<p cds-text="section">
|
||||
{{ lib }}
|
||||
</h3>
|
||||
</p>
|
||||
<clr-icon
|
||||
(click)="reloadLibInfo()"
|
||||
class="refresh-table"
|
||||
|
|
@ -516,7 +525,9 @@
|
|||
size="40"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 class="text-center color-gray">Please select a table</h3>
|
||||
<p class="text-center color-gray mt-10" cds-text="section">
|
||||
Please select a table
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div *ngIf="libinfo !== null" class="libinfo m-0 clr-row">
|
||||
|
|
@ -606,6 +617,7 @@
|
|||
<hot-table
|
||||
hotId="hotInstance"
|
||||
id="hotTable"
|
||||
className="htDark"
|
||||
[multiColumnSorting]="true"
|
||||
[viewportRowRenderingOffset]="50"
|
||||
[data]="hotTable.data"
|
||||
|
|
@ -621,6 +633,7 @@
|
|||
[cells]="hotTable.cells"
|
||||
[maxRows]="hotTable.maxRows"
|
||||
[manualColumnResize]="true"
|
||||
[afterGetColHeader]="hotTable.afterGetColHeader"
|
||||
[rowHeaders]="hotTable.rowHeaders"
|
||||
[rowHeaderWidth]="hotTable.rowHeaderWidth"
|
||||
[rowHeights]="hotTable.rowHeights"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../colors.scss';
|
||||
|
||||
.card {
|
||||
margin-top: 0;
|
||||
|
||||
|
|
@ -11,8 +13,8 @@ clr-tree-node button {
|
|||
}
|
||||
|
||||
.toggle-switch input[type=checkbox]:checked+label:before {
|
||||
border-color: #314351;
|
||||
background-color: #314351!important;
|
||||
border-color: $headerBackground;
|
||||
background-color: $headerBackground !important;
|
||||
transition: .15s ease-in;
|
||||
transition-property: border-color,background-color;
|
||||
}
|
||||
|
|
@ -54,12 +56,6 @@ clr-tree-node button {
|
|||
}
|
||||
}
|
||||
|
||||
.viewerTitle {
|
||||
text-align:center;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: 180px;
|
||||
margin-top: -18px;
|
||||
|
|
@ -126,8 +122,14 @@ clr-tree-node button {
|
|||
|
||||
hot-table {
|
||||
::ng-deep {
|
||||
.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
|
||||
&.primaryKeyHeaderStyle {
|
||||
background-color: #306b00b0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.primaryKeyHeaderStyle {
|
||||
background: #306b006e;
|
||||
background-color: #306b006e !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -145,6 +147,45 @@ hot-table {
|
|||
.web-query-text {
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.web-query-wrapper {
|
||||
::ng-deep {
|
||||
.clr-control-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
clr-textarea-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.clr-textarea-wrapper {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-wrapper {
|
||||
margin-left: 0;
|
||||
|
||||
form {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
clr-input-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.clr-control-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -112,11 +112,14 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
|
|||
height: '100%',
|
||||
maxRows: this.licenceState.value.viewer_rows_allowed || Infinity,
|
||||
settings: {},
|
||||
afterGetColHeader: undefined,
|
||||
licenseKey: undefined,
|
||||
rowHeaders: (index: number) => {
|
||||
return ' '
|
||||
},
|
||||
afterGetColHeader: (col: number, th: any, headerLevel: number) => {
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
},
|
||||
rowHeaderWidth: 15,
|
||||
rowHeights: 20,
|
||||
contextMenu: ['copy_with_column_headers', 'copy_column_headers_only'],
|
||||
|
|
@ -1071,6 +1074,9 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
|
|||
const isPKCol = column && this.headerPks.indexOf(column) > -1
|
||||
|
||||
if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
|
||||
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<clr-tree-node *ngIf="endpointLinks.length > 0" class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchLinksTreeInput
|
||||
placeholder="Search links"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<clr-tree-node class="search-node">
|
||||
<div class="tree-search-wrapper">
|
||||
<input
|
||||
appStealFocus
|
||||
clrInput
|
||||
#searchXLMapTreeInput
|
||||
placeholder="Filter by Id"
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
<button
|
||||
(click)="xlmapOnClick(xlmap)"
|
||||
class="clr-treenode-link"
|
||||
[class.table-active]="isActiveXLMap(xlmap.id)"
|
||||
[class.active]="isActiveXLMap(xlmap.id)"
|
||||
>
|
||||
<clr-icon shape="file"></clr-icon>
|
||||
{{ xlmap.id }}
|
||||
|
|
@ -49,12 +50,20 @@
|
|||
size="60"
|
||||
class="is-info icon-dc-fill"
|
||||
></clr-icon>
|
||||
<h3 *ngIf="xlmaps.length > 0" class="text-center color-gray">
|
||||
<p
|
||||
*ngIf="xlmaps.length > 0"
|
||||
class="text-center color-gray mt-10"
|
||||
cds-text="section"
|
||||
>
|
||||
Please select a map
|
||||
</h3>
|
||||
<h3 *ngIf="xlmaps.length < 1" class="text-center color-gray">
|
||||
</p>
|
||||
<p
|
||||
*ngIf="xlmaps.length < 1"
|
||||
class="text-center color-gray mt-10"
|
||||
cds-text="section"
|
||||
>
|
||||
No excel map is found
|
||||
</h3>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="loadingSpinner" *ngIf="isLoading">
|
||||
|
|
@ -118,6 +127,7 @@
|
|||
<hot-table
|
||||
hotId="hotInstance"
|
||||
id="hot-table"
|
||||
className="htDark"
|
||||
[multiColumnSorting]="true"
|
||||
[viewportRowRenderingOffset]="50"
|
||||
[data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
|
||||
|
|
@ -130,6 +140,7 @@
|
|||
[filters]="true"
|
||||
[height]="'100%'"
|
||||
stretchH="all"
|
||||
[afterGetColHeader]="afterGetColHeader"
|
||||
[modifyColWidth]="maxWidthChecker"
|
||||
[cells]="getCellConfiguration"
|
||||
[maxRows]="hotTableMaxRows"
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
|
|||
data: 'VALUE_TXT'
|
||||
}
|
||||
]
|
||||
|
||||
public xlData: XLUploadEntry[] = []
|
||||
|
||||
public showUploadModal = false
|
||||
|
|
@ -142,6 +143,11 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
|
|||
private sasService: SasService
|
||||
) {}
|
||||
|
||||
public afterGetColHeader(column: number, th: any) {
|
||||
// Dark mode
|
||||
th.classList.add('darkTH')
|
||||
}
|
||||
|
||||
public xlmapOnClick(xlmap: XLMapListItem) {
|
||||
if (xlmap.id !== this.selectedXLMap?.id) {
|
||||
this.selectedXLMap = xlmap
|
||||
|
|
|
|||
4
client/src/colors.scss
Normal file
4
client/src/colors.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
$headerBackground: #314351;
|
||||
|
||||
$trackColor: #3b5268;
|
||||
$thumbColor: #273849;
|
||||
|
|
@ -7,11 +7,37 @@
|
|||
@import '@cds/core/styles/theme.dark.min.css';
|
||||
@import '@clr/ui/clr-ui.min.css';
|
||||
|
||||
@import './colors.scss';
|
||||
|
||||
@font-face {
|
||||
font-family: text-security-disc;
|
||||
src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
|
||||
}
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $trackColor $thumbColor;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 11px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
// Track
|
||||
background: $trackColor;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
// Thumb
|
||||
background-color: $thumbColor;
|
||||
border-radius: 6px;
|
||||
// Track
|
||||
border: 3px solid $trackColor;
|
||||
}
|
||||
|
||||
clr-icon.is-highlight {
|
||||
fill: #4ec0ff;
|
||||
}
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-weight: 400 !important;
|
||||
|
|
@ -26,9 +52,27 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
body[cds-theme="dark"] {
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid rgb(255, 255, 255)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[cds-theme="light"] {
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid rgb(0, 0, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,7 +146,7 @@ button {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #314351;
|
||||
background: $headerBackground;
|
||||
flex-direction: column;
|
||||
z-index: 2000;
|
||||
position: fixed;
|
||||
|
|
@ -228,10 +272,6 @@ button {
|
|||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.mt-17 {
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -308,6 +348,10 @@ button {
|
|||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.mb-15 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -348,16 +392,18 @@ button {
|
|||
background: transparent !important;
|
||||
}
|
||||
|
||||
.color-gray {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
body[cds-theme="light"] {
|
||||
.color-gray {
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.color-dark-gray {
|
||||
color: #495967;
|
||||
}
|
||||
.color-dark-gray {
|
||||
color: #495967;
|
||||
}
|
||||
|
||||
.color-darker-gray {
|
||||
color: #314351;
|
||||
.color-darker-gray {
|
||||
color: $headerBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.color-white {
|
||||
|
|
@ -550,6 +596,25 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
.text-area-full-width {
|
||||
.clr-control-container {
|
||||
width: 100%;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
clr-textarea-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.clr-textarea-wrapper {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.progresStatic {
|
||||
margin-top: -6px !important;
|
||||
position: absolute !important;
|
||||
|
|
@ -621,10 +686,6 @@ button {
|
|||
margin-left: 0.2rem !important;
|
||||
}
|
||||
|
||||
.table-active {
|
||||
background: #d8e3e9 !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.table-active:focus {
|
||||
background: #d8e3e9;
|
||||
|
|
@ -723,6 +784,30 @@ clr-icon.is-info {
|
|||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
.htDark {
|
||||
background: #888;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.handsontable .htDark {
|
||||
background: #3c5662;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.handsontable .darkTH {
|
||||
&:not(.primaryKeyHeaderStyle) {
|
||||
background: #487d96;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
&.ht__highlight {
|
||||
background: #3b6b81;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.handsontable .htAutocompleteArrow {
|
||||
color: #828282;
|
||||
}
|
||||
|
|
@ -752,6 +837,29 @@ clr-icon.is-info {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.no-borders {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
&.no-borders {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
.card-header, .card-block, .card-footer {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-inner-borders {
|
||||
.card-header, .card-block, .card-footer {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.d-sm-none {
|
||||
display: none !important;
|
||||
|
|
@ -895,7 +1003,7 @@ clr-icon.is-info {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
background: white;
|
||||
background: var(--clr-vertical-nav-bg-color);
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -967,8 +1075,7 @@ clr-tree-node {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
background: white;
|
||||
margin-bottom: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -1070,6 +1177,13 @@ hr.light {
|
|||
background: url('./images/caret.svg') !important;
|
||||
}
|
||||
|
||||
body[cds-theme="dark"] {
|
||||
.table-search-wrapper {
|
||||
// background: #2d4048;
|
||||
background: #21333b;
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-wrapper {
|
||||
background-color: #fff;
|
||||
|
||||
|
|
@ -1086,7 +1200,10 @@ hr.light {
|
|||
|
||||
clr-icon {
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
}
|
||||
|
||||
[name="search-input"] {
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "dcfrontend",
|
||||
"version": "6.8.5",
|
||||
"version": "6.9.0",
|
||||
"description": "Data Controller",
|
||||
"devDependencies": {
|
||||
"@saithodev/semantic-release-gitea": "^2.1.0",
|
||||
|
|
@ -9,7 +9,8 @@
|
|||
"@semantic-release/npm": "11.0.0",
|
||||
"@semantic-release/git": "^10.0.1",
|
||||
"@semantic-release/release-notes-generator": "^11.0.4",
|
||||
"commit-and-tag-version": "^11.2.2"
|
||||
"commit-and-tag-version": "^11.2.2",
|
||||
"prettier": "3.2.5"
|
||||
},
|
||||
"scripts": {
|
||||
"install": "cd client && npm i && cd ../sas && npm i",
|
||||
|
|
|
|||
|
|
@ -78,6 +78,23 @@ _webout=`{"SYSDATE" : "26SEP22"
|
|||
"DC_RESTRICT_EDITRECORD": "NO"
|
||||
}
|
||||
]
|
||||
,"xlmaps": [
|
||||
[
|
||||
"BASEL-CR2",
|
||||
"",
|
||||
"DC866788.MPE_XLMAP_DATA"
|
||||
],
|
||||
[
|
||||
"BASEL-KM1",
|
||||
"Basel 3 Key Metrics report",
|
||||
"DC866788.MPE_XLMAP_DATA"
|
||||
],
|
||||
[
|
||||
"SAMPLE",
|
||||
"",
|
||||
"DC866788.MPE_XLMAP_DATA"
|
||||
]
|
||||
]
|
||||
,"_DEBUG" : ""
|
||||
,"_METAUSER": "sasdemo@SAS"
|
||||
,"_METAPERSON": "sasdemo"
|
||||
|
|
|
|||
14
sas/package-lock.json
generated
14
sas/package-lock.json
generated
|
|
@ -7,7 +7,7 @@
|
|||
"name": "dc-sas",
|
||||
"dependencies": {
|
||||
"@sasjs/cli": "^4.11.1",
|
||||
"@sasjs/core": "^4.52.1"
|
||||
"@sasjs/core": "^4.52.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@coolaj86/urequest": {
|
||||
|
|
@ -116,9 +116,9 @@
|
|||
"integrity": "sha512-Grwydm5GxBsYk238PZw41XPjXVVQ9vWcvfZ06L2P0bQbvK0sGn7l69JA7H5MGr3QcaLpiD4Kg70cAh7PgE+JOw=="
|
||||
},
|
||||
"node_modules/@sasjs/core": {
|
||||
"version": "4.52.1",
|
||||
"resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.1.tgz",
|
||||
"integrity": "sha512-XPNuKD1T5XLGMKg4Ll3KggOTjhHgnjdbefpwajpfro/8/9bJK7lyNehzUCcmbhJnijJbbChE7drIOF+uSaVxVg=="
|
||||
"version": "4.52.4",
|
||||
"resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.4.tgz",
|
||||
"integrity": "sha512-8lf5ixlA312EgA2DorwbpNXXPfLPzUHO67exIV7SjKiU23Tn1au5GD6hT0Ysr2kophOs10Mp1TCXJjhEq7Qk4A=="
|
||||
},
|
||||
"node_modules/@sasjs/lint": {
|
||||
"version": "2.3.1",
|
||||
|
|
@ -1834,9 +1834,9 @@
|
|||
}
|
||||
},
|
||||
"@sasjs/core": {
|
||||
"version": "4.52.1",
|
||||
"resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.1.tgz",
|
||||
"integrity": "sha512-XPNuKD1T5XLGMKg4Ll3KggOTjhHgnjdbefpwajpfro/8/9bJK7lyNehzUCcmbhJnijJbbChE7drIOF+uSaVxVg=="
|
||||
"version": "4.52.4",
|
||||
"resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.4.tgz",
|
||||
"integrity": "sha512-8lf5ixlA312EgA2DorwbpNXXPfLPzUHO67exIV7SjKiU23Tn1au5GD6hT0Ysr2kophOs10Mp1TCXJjhEq7Qk4A=="
|
||||
},
|
||||
"@sasjs/lint": {
|
||||
"version": "2.3.1",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,6 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@sasjs/cli": "^4.11.1",
|
||||
"@sasjs/core": "^4.52.1"
|
||||
"@sasjs/core": "^4.52.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@
|
|||
"macroVars": {}
|
||||
},
|
||||
"streamConfig": {
|
||||
"streamWeb": true,
|
||||
"streamWeb": false,
|
||||
"streamWebFolder": "web",
|
||||
"webSourcePath": "../client/dist",
|
||||
"streamServiceName": "DataController2",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user