From 2838d8d0f7b6635b1e399465bd11ce57dcd59ce7 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Tue, 9 Apr 2024 11:12:54 -0500 Subject: [PATCH 01/43] resolved merge --- .../df-service-details/df-paywall-modal.html | 6 +++--- .../df-password-reset/df-password-reset.component.html | 4 ++-- .../adf-user-management/services/df-password.service.ts | 8 +++----- .../df-dynamic-field/df-dynamic-field.component.html | 4 ++-- .../components/df-paywall/df-paywall.component.html | 2 +- .../df-script-editor/df-script-editor.component.ts | 8 +++++--- .../components/df-side-nav/df-side-nav.component.html | 2 +- .../df-verb-picker/df-verb-picker.component.ts | 9 +++++---- 8 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/app/adf-services/df-service-details/df-paywall-modal.html b/src/app/adf-services/df-service-details/df-paywall-modal.html index d5925f29..078dfadf 100644 --- a/src/app/adf-services/df-service-details/df-paywall-modal.html +++ b/src/app/adf-services/df-service-details/df-paywall-modal.html @@ -1,3 +1,4 @@ +

Unlock Service

@@ -12,8 +13,7 @@

{{ 'paywall.hostedTrial' | transloco }}

{{ 'paywall.ossVersion' | transloco }}

- {{ 'paywall.signup' | transloco - }}{{ 'paywall.trial' | transloco }} > | {{ 'email' | transloco }}: info@dreamfactory.com{{ 'email' | transloco }}: info@dreamfactory.com

diff --git a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html index ad49d609..3d34d358 100644 --- a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html +++ b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html @@ -13,8 +13,8 @@ (type === 'reset' ? 'resetPassword' : type === 'register' - ? 'registrationConfirmation' - : 'invitatonConfirmation') | transloco + ? 'registrationConfirmation' + : 'invitatonConfirmation') | transloco }} diff --git a/src/app/adf-user-management/services/df-password.service.ts b/src/app/adf-user-management/services/df-password.service.ts index 48e33754..355c8430 100644 --- a/src/app/adf-user-management/services/df-password.service.ts +++ b/src/app/adf-user-management/services/df-password.service.ts @@ -60,11 +60,9 @@ export class DfPasswordService { hasSecurityQuestion = false ) { return this.http - .post( - URLS.USER_PASSWORD, - data, - hasSecurityQuestion ? HTTP_OPTION_LOGIN_FALSE : HTTP_OPTION_RESET_TRUE - ) + .post< + SecurityQuestion | GenericSuccessResponse + >(URLS.USER_PASSWORD, data, hasSecurityQuestion ? HTTP_OPTION_LOGIN_FALSE : HTTP_OPTION_RESET_TRUE) .pipe( catchError(() => { return this.http.post( diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html index afde76ea..b1d53cd7 100644 --- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html +++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html @@ -21,8 +21,8 @@ schema.type === 'integer' ? 'number' : schema.type === 'password' - ? 'password' - : 'text' + ? 'password' + : 'text' " [attr.aria-label]="schema.label" /> {{ 'paywall.speakToHuman' | transloco }}

{{ 'phone' | transloco }}: +1 415-993-5877 | {{ 'email' | transloco }}: info@dreamfactory.com{{ 'email' | transloco }}: info@dreamfactory.com

diff --git a/src/app/shared/components/df-script-editor/df-script-editor.component.ts b/src/app/shared/components/df-script-editor/df-script-editor.component.ts index 624b14fc..a32fe1e3 100644 --- a/src/app/shared/components/df-script-editor/df-script-editor.component.ts +++ b/src/app/shared/components/df-script-editor/df-script-editor.component.ts @@ -109,9 +109,11 @@ export class DfScriptEditorComponent implements OnInit { } viewLatest() { - const filePath = `${this.storageServices.find( - service => service.id === this.storageServiceId.getRawValue() - )?.name}/${this.storagePath.getRawValue()}`; + const filePath = `${ + this.storageServices.find( + service => service.id === this.storageServiceId.getRawValue() + )?.name + }/${this.storagePath.getRawValue()}`; if (filePath.endsWith('.json')) { this.fileService .downloadJson(filePath) diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index 43fe0bb6..45f0ed49 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -162,4 +162,4 @@

- \ No newline at end of file + diff --git a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts index 9b75b3ff..1592ae1a 100644 --- a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts +++ b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts @@ -115,10 +115,11 @@ export class DfVerbPickerComponent implements ControlValueAccessor, DoCheck { this.type === 'number' ? (selected || []).reduce((acc: number, val: number) => acc | val, 0) : this.type === 'verb_multiple' - ? ((selected || []).map( - (v: any) => this.verbs.find(vr => vr.value === v)?.altValue ?? '' - ) as Array) - : this.verbs.find(vr => vr.value === selected)?.altValue ?? ''; + ? ((selected || []).map( + (v: any) => + this.verbs.find(vr => vr.value === v)?.altValue ?? '' + ) as Array) + : this.verbs.find(vr => vr.value === selected)?.altValue ?? ''; this.onChange(total); }); } From 9180b73f5bb6e40ed32d031f141c0b92c4344f2b Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Sun, 14 Apr 2024 19:06:24 -0500 Subject: [PATCH 02/43] added icons to sidenav --- .../df-service-details.component.ts | 7 ++-- .../df-side-nav/df-side-nav.component.html | 30 ++++++++++++-- .../df-side-nav/df-side-nav.component.scss | 29 +++++++++++++- .../df-side-nav/df-side-nav.component.ts | 40 ++++++++++++++++--- src/app/shared/types/nav.ts | 1 + src/app/shared/utilities/route.ts | 20 ++++++++++ src/assets/img/nav/admin-settings.svg | 8 ++++ src/assets/img/nav/api-connections.svg | 8 ++++ src/assets/img/nav/api-security.svg | 8 ++++ src/assets/img/nav/home.svg | 8 ++++ src/assets/img/nav/system-settings.svg | 8 ++++ 11 files changed, 151 insertions(+), 16 deletions(-) create mode 100644 src/assets/img/nav/admin-settings.svg create mode 100644 src/assets/img/nav/api-connections.svg create mode 100644 src/assets/img/nav/api-security.svg create mode 100644 src/assets/img/nav/home.svg create mode 100644 src/assets/img/nav/system-settings.svg diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts index b6e3b073..5dd15a3f 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.ts +++ b/src/app/adf-services/df-service-details/df-service-details.component.ts @@ -292,8 +292,8 @@ export class DfServiceDetailsComponent implements OnInit { this.router.navigate(['../'], { relativeTo: this.activatedRoute }); } - getBackgroundImage(typeLable: string) { - const image = this.images?.find(img => img.label == typeLable); + getBackgroundImage(typeLabel: string) { + const image = this.images?.find(img => img.label == typeLabel); if (!image) { return ''; } @@ -315,8 +315,7 @@ export class DfServiceDetailsComponent implements OnInit { openDialog() { const dialogRef = this.dialog.open(DfPaywallModal); - // eslint-disable-next-line @typescript-eslint/no-empty-function - dialogRef.afterClosed().subscribe(result => {}); + dialogRef.afterClosed().subscribe(); } } interface ImageObject { diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index 45f0ed49..1907fbad 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -11,6 +11,20 @@ +
+ + {{ 'search' | transloco }} + + +

-
@@ -150,7 +168,11 @@

[class.mat-elevation-z0]="true" [expanded]="isActive(item)"> - {{ navLabel(item.path) | transloco }} + + {{ + navLabel(item.path) | transloco + }} + , private breakpointService: DfBreakpointService, private userDataService: DfUserDataService, private authService: DfAuthService, @@ -78,7 +93,8 @@ export class DfSideNavComponent implements OnInit { private errorService: DfErrorService, private licenseCheckService: DfLicenseCheckService, private dialog: MatDialog, - private transloco: TranslocoService + private transloco: TranslocoService, + private searchService: DfSearchService ) {} ngOnInit(): void { @@ -116,8 +132,20 @@ export class DfSideNavComponent implements OnInit { this.nav = accessibleRoutes(transformRoutes(routes), accessByTabs); } else { this.nav = transformRoutes(routes); + console.log('this.nav', this.nav); } }); + this.search.valueChanges + .pipe( + debounceTime(2000), + distinctUntilChanged(), + switchMap(value => this.searchService.search(value)) + ) + .subscribe(() => { + this.dialog.open(DfSearchDialogComponent, { + position: { top: '60px' }, + }); + }); } logout() { @@ -142,10 +170,6 @@ export class DfSideNavComponent implements OnInit { this.router.navigate([nav.path]); } - handleSearchClick() { - this.dialog.open(DfSearchDialogComponent, { position: { top: '60px' } }); - } - handleLanguageChange(language: string) { this.transloco.setActiveLang(language); localStorage.setItem('language', language); @@ -158,4 +182,8 @@ export class DfSideNavComponent implements OnInit { get availableLanguages() { return this.transloco.getAvailableLangs() as string[]; } + + getTranslationKey(path: string) { + return `nav.${path.replaceAll('/', '.')}.nav`; + } } diff --git a/src/app/shared/types/nav.ts b/src/app/shared/types/nav.ts index 6599c37c..c3a125c0 100644 --- a/src/app/shared/types/nav.ts +++ b/src/app/shared/types/nav.ts @@ -3,6 +3,7 @@ import { ROUTES } from './routes'; export interface Nav { path: string; route: ROUTES; + icon?: string; subRoutes?: Nav[]; serviceGroups?: Array; } diff --git a/src/app/shared/utilities/route.ts b/src/app/shared/utilities/route.ts index bf15fbdb..a433cd44 100644 --- a/src/app/shared/utilities/route.ts +++ b/src/app/shared/utilities/route.ts @@ -13,6 +13,14 @@ const filteredFromNav = [ ROUTES.LICENSE_EXPIRED, ]; +const navIcons = [ + 'home', + 'admin-settings', + 'api-connections', + 'api-security', + 'system-settings', +]; + export function transformRoutes(routes: Routes, root = ''): Array

- -
@@ -338,9 +347,7 @@

{{ type.label }}

- + {{ 'services.options' | transloco }} diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index dccc2ce5..2addb97b 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -120,16 +120,7 @@ mat-icon { .action-bar { display: flex; justify-content: flex-end; - .save-btn { - background-color: mat.get-color-from-palette($df-purple-palette, 500); - color: white; - border-radius: 20px; - } - .cancel-btn { - color: mat.get-color-from-palette($df-purple-palette, 1001); - border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001); - border-radius: 20px; - } + } ::ng-deep .mat-expansion-panel-header > .mat-expansion-indicator::after { @@ -139,48 +130,3 @@ mat-icon { color: unset !important; } -.dark-theme { - ::ng-deep .mdc-notched-outline > * { - border-color: white !important; - } - .mat-accordion { - border: 1px solid white !important; - } - .advanced-option { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1002 - ) !important; - border: 1px soild white !important; - color: white !important; - } - input, - mat-label, - mat-select, - mat-option, - textarea, - span { - color: white; - } - ::ng-deep .mat-mdc-select-disabled { - color: #a3a1a1 !important; - } - ::ng-deep .mat-mdc-form-field-required-marker { - color: white !important; - } - .save-btn { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 200 - ) !important; - color: mat.get-color-from-palette($df-purple-palette, 700) !important; - } - .cancel-btn { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1002 - ) !important; - color: mat.get-color-from-palette($df-purple-palette, 200) !important; - border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; - } -} diff --git a/src/app/adf-users/df-manage-users/df-manage-users.component.html b/src/app/adf-users/df-manage-users/df-manage-users.component.html index 745e9fe6..31561647 100644 --- a/src/app/adf-users/df-manage-users/df-manage-users.component.html +++ b/src/app/adf-users/df-manage-users/df-manage-users.component.html @@ -7,7 +7,7 @@ (change)="uploadUserList($event)" style="display: none" /> - diff --git a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts index dd480bf7..76304fe6 100644 --- a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts +++ b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts @@ -19,6 +19,9 @@ import { MatExpansionModule } from '@angular/material/expansion'; import { faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons'; import { TranslocoPipe } from '@ngneat/transloco'; import { UntilDestroy } from '@ngneat/until-destroy'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; +import { AsyncPipe } from '@angular/common'; + @UntilDestroy({ checkProperties: true }) @Component({ selector: 'df-lookup-keys', @@ -38,6 +41,7 @@ import { UntilDestroy } from '@ngneat/until-destroy'; FontAwesomeModule, MatExpansionModule, TranslocoPipe, + AsyncPipe, ], }) export class DfLookupKeysComponent implements OnInit { @@ -49,8 +53,11 @@ export class DfLookupKeysComponent implements OnInit { faPlus = faPlus; @Input() showAccordion = true; - constructor(private rootFormGroup: FormGroupDirective) {} - + constructor( + private rootFormGroup: FormGroupDirective, + private themeService: DfThemeService + ) {} + isDarkMode = this.themeService.darkMode$; ngOnInit() { this.rootForm = this.rootFormGroup.control; this.rootFormGroup.ngSubmit.subscribe(() => { diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.html b/src/app/shared/components/df-manage-table/df-manage-table.component.html index aa370ce1..480fd08c 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.html +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.html @@ -2,7 +2,7 @@ + diff --git a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss index 214e3d73..d8a63dc0 100644 --- a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss +++ b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss @@ -28,25 +28,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .dark-theme { &.search-dialog { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1003 - ) !important; + background-color: mat.get-color-from-palette($df-purple-palette, 1003) !important; border: 1px solid white; } - ::ng-deep .mdc-notched-outline > * { - border-color: white !important; - } - input, - mat-label, - mat-select, - mat-option, - textarea, - span { - color: white; - } - button { - color: mat.get-color-from-palette($df-purple-palette, 200) !important; - border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; - } } diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index c748c638..589f3283 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -87,7 +87,7 @@

API Scripting

 - - diff --git a/src/app/shared/components/df-user-details/df-user-details-base.component.ts b/src/app/shared/components/df-user-details/df-user-details-base.component.ts index 665541b5..5d2442d2 100644 --- a/src/app/shared/components/df-user-details/df-user-details-base.component.ts +++ b/src/app/shared/components/df-user-details/df-user-details-base.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { FormArray, FormBuilder, @@ -21,6 +21,7 @@ import { faEnvelope } from '@fortawesome/free-solid-svg-icons'; import { UntilDestroy } from '@ngneat/until-destroy'; import { DfPaywallService } from '../../services/df-paywall.service'; import { of, switchMap } from 'rxjs'; +import { DfThemeService } from '../../services/df-theme.service'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -77,6 +78,8 @@ export abstract class DfUserDetailsBaseComponent implements OnInit { appRoles: this.fb.array([]), }); } + themeService = inject(DfThemeService); + isDarkMode = this.themeService.darkMode$; get cancelRoute() { let route = `/${ROUTES.ADMIN_SETTINGS}/`; diff --git a/src/app/shared/components/df-verb-picker/df-verb-picker.component.html b/src/app/shared/components/df-verb-picker/df-verb-picker.component.html index 5c94abaf..bae179a9 100644 --- a/src/app/shared/components/df-verb-picker/df-verb-picker.component.html +++ b/src/app/shared/components/df-verb-picker/df-verb-picker.component.html @@ -1,17 +1,19 @@ - - {{ schema.label }} - - - {{ verb.label }} - - - - +
+ + {{ schema.label }} + + + {{ verb.label }} + + + + +
diff --git a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts index 9b75b3ff..941b51c7 100644 --- a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts +++ b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts @@ -15,7 +15,8 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'; import { UntilDestroy } from '@ngneat/until-destroy'; - +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; +import { AsyncPipe } from '@angular/common'; type Verb = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -31,6 +32,7 @@ type Verb = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'; NgIf, MatTooltipModule, FontAwesomeModule, + AsyncPipe, ], }) export class DfVerbPickerComponent implements ControlValueAccessor, DoCheck { @@ -71,9 +73,13 @@ export class DfVerbPickerComponent implements ControlValueAccessor, DoCheck { onChange: (value: number | Verb | Array) => void; onTouched: () => void; - constructor(@Self() public controlDir: NgControl) { + constructor( + @Self() public controlDir: NgControl, + private themeService: DfThemeService + ) { controlDir.valueAccessor = this; } + isDarkMode = this.themeService.darkMode$; ngDoCheck(): void { if ( diff --git a/src/dark-style.scss b/src/dark-style.scss new file mode 100644 index 00000000..03c6169f --- /dev/null +++ b/src/dark-style.scss @@ -0,0 +1,248 @@ +/* You can add global styles to this file, and also import other style files */ +@use '@angular/material' as mat; +@use 'src/theme' as theme; + +$df-purple-palette: mat.define-palette(theme.$df-purple-palette); + +.dark-theme { + // Font + .breadcrumb-link > span { + color: mat.get-color-from-palette($df-purple-palette, 500) !important; + } + + // Divider + .mat-divider { + border-color: white !important; + } + .system-info-container + .system-info-instance + .system-info-packages + .package-header { + border-bottom-color: white !important; + } + .system-info-container .system-info-instance .system-info-packages { + border-left-color: white !important; + } + + // Step + .mat-stepper-horizontal { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px solid white !important; + } + .mat-step-icon { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 300 + ) !important; + } + .mat-step-icon-selected { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 700 + ) !important; + } + .mat-step-icon-state-edit { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 700 + ) !important; + } + .mat-stepper-horizontal-line { + border-top-color: white !important; + } + + .mat-step-label { + color: white !important; + } + + // Radio Button + .mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control + + .mdc-radio__background + .mdc-radio__outer-circle { + border-color: white !important; + } + // Checkbox + .mat-mdc-checkbox .mdc-checkbox__background, + .mdc-checkbox__ripple { + border-color: white !important; + } + + // Form Element + .mdc-notched-outline > * { + border-color: white !important; + } + + mat-label, + mat-select, + mat-option, + input, + textarea, + button, + span { + color: white !important; + } + .mat-mdc-form-field-required-marker { + color: white !important; + } + .mdc-form-field > label { + color: white !important; + } + .mat-mdc-select-disabled { + color: #a3a1a1 !important; + } + // Button + .save-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 700) !important; + } + .cancel-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 200) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; + } + .copy-btn { + color: white !important; + } + .refresh-btn { + color: #a3a1a1 !important; + } + .close-btn { + color: mat.get-color-from-palette($df-purple-palette, 200) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; + } + + // Card + .mat-mdc-card { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: white !important; + border: 1px solid white !important; + } + .mat-mdc-card-header { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: white !important; + } + .mat-mdc-card-subtitle { + color: #a3a1a1 !important; + } + + .mat-expansion-panel { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px soild white !important; + color: white !important; + } + .mat-expansion-panel-header { + color: white !important; + } + + .mat-accordion .mat-expansion-panel { + border: 1px solid white !important; + } + .mat-expansion-panel-header-title, + .mat-expansion-indicator::after { + color: white; + } + .mat-expansion-panel-header-description { + color: #a3a1a1; + } + + // Table + table, + .mat-mdc-table { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + .mat-mdc-header-row { + .mat-mdc-header-cell { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: white !important; + border-color: white !important; + } + } + .mat-mdc-row { + .mat-mdc-cell { + color: white !important; + border-color: white !important; + } + } + .action-btn { + color: mat.get-color-from-palette($df-purple-palette, 700) !important; + } + } + .no-data-row td { + color: white !important; + } + + .clickable { + &.mat-mdc-row:focus, + &.mat-mdc-row:focus-within { + .mat-mdc-cell:first-child { + border-left: 2px solid + mat.get-color-from-palette($df-purple-palette, 800) !important; + } + } + + &.mat-mdc-row:focus, + &.mat-mdc-row:focus-within, + &.mat-mdc-row:hover { + .mat-mdc-cell { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + } + } + } + + // Swagger + .swagger-ui .info .title, + .swagger-ui .renderedMarkdown p { + color: white !important; + } + + .swagger-ui .scheme-container { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px solid white !important; + color: white !important; + } + .swagger-ui .model-toggle::after { + background-color: white !important; + } + + // Editor + .editor { + color: unset !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px solid white; + } + +} diff --git a/src/styles.scss b/src/styles.scss index 8669e712..96e4195f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,7 @@ /* You can add global styles to this file, and also import other style files */ @use '@angular/material' as mat; @use 'src/theme' as theme; - +@import 'src/dark-style.scss'; $df-purple-palette: mat.define-palette(theme.$df-purple-palette); html, @@ -19,10 +19,6 @@ body { font-family: Roboto, 'Helvetica Neue', sans-serif; } -a { - color: mat.get-color-from-palette($df-purple-palette, 600); -} - .flex-col { display: flex; flex-direction: column; @@ -145,3 +141,85 @@ fa-icon.mat-mdc-tooltip-trigger { padding: 8px; height: 100%; } + +// light mode +a { + color: mat.get-color-from-palette($df-purple-palette, 600); +} + +// Step +.mat-step-icon-selected { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 400 + ) !important; +} +.mat-step-icon-state-edit { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 400 + ) !important; +} + +// Radio Button +.mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control + + .mdc-radio__background + .mdc-radio__outer-circle { + border-color: black !important; +} + +.mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control:enabled:checked + + .mdc-radio__background + .mdc-radio__outer-circle { + border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; +} + +.mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control:enabled + + .mdc-radio__background + .mdc-radio__inner-circle { + border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; +} + +// Checkbox +.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background, +.mdc-checkbox__ripple { + background-color: mat.get-color-from-palette($df-purple-palette, 600) !important; + border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; +} + +// Button +.save-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 400 + ) !important; + color: white !important; + border-radius: 20px !important; +} +.cancel-btn { + color: mat.get-color-from-palette($df-purple-palette, 1001) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; + border-radius: 20px !important; +} +.action-btn { + color: mat.get-color-from-palette($df-purple-palette, 500) !important; +} +// Select +.mat-mdc-select-arrow { + color: unset !important; +} +// Tab +.mat-mdc-tab .mdc-tab-indicator__content--underline { + border-color: mat.get-color-from-palette($df-purple-palette, 500) !important; +} + +// Swagger +.swagger-ui .opblock .opblock-section-header { + background: unset !important; +} From 7c755e7438b008b7caf6aeaa3cb8a4dfd204d128 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 6 May 2024 07:47:37 -0500 Subject: [PATCH 25/43] updated styling --- src/app/adf-files/df-files/df-files.component.scss | 1 - .../df-welcome-page/df-welcome-page.component.scss | 1 - .../df-service-details/df-service-details.component.scss | 2 -- .../df-manage-table/df-manage-table.component.scss | 2 +- .../df-search-dialog/df-search-dialog.component.scss | 5 ++++- src/dark-style.scss | 5 ++--- src/styles.scss | 7 +++++-- 7 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/app/adf-files/df-files/df-files.component.scss b/src/app/adf-files/df-files/df-files.component.scss index 8b137891..e69de29b 100644 --- a/src/app/adf-files/df-files/df-files.component.scss +++ b/src/app/adf-files/df-files/df-files.component.scss @@ -1 +0,0 @@ - diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss index 3fd05f12..9b29e51a 100644 --- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss +++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss @@ -82,7 +82,6 @@ mat-card.notice-card { } .dark-theme { - .notice-card { background-color: mat.get-color-from-palette( $df-purple-palette, diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index 2addb97b..fe19d8af 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -120,7 +120,6 @@ mat-icon { .action-bar { display: flex; justify-content: flex-end; - } ::ng-deep .mat-expansion-panel-header > .mat-expansion-indicator::after { @@ -129,4 +128,3 @@ mat-icon { ::ng-deep .mat-mdc-select-arrow { color: unset !important; } - diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.scss b/src/app/shared/components/df-manage-table/df-manage-table.component.scss index 703fd530..d2547f72 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.scss +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.scss @@ -20,7 +20,7 @@ $red-palette: mat.define-palette(mat.$red-palette); align-items: center; gap: 12px; padding-bottom: 12px; - + .search-input { height: 80% !important; max-width: 300px !important; diff --git a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss index d8a63dc0..c3ae148f 100644 --- a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss +++ b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss @@ -28,7 +28,10 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .dark-theme { &.search-dialog { - background-color: mat.get-color-from-palette($df-purple-palette, 1003) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; border: 1px solid white; } } diff --git a/src/dark-style.scss b/src/dark-style.scss index 03c6169f..1c57a7d9 100644 --- a/src/dark-style.scss +++ b/src/dark-style.scss @@ -9,7 +9,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .breadcrumb-link > span { color: mat.get-color-from-palette($df-purple-palette, 500) !important; } - + // Divider .mat-divider { border-color: white !important; @@ -164,7 +164,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .mat-expansion-panel-header-description { color: #a3a1a1; } - + // Table table, .mat-mdc-table { @@ -244,5 +244,4 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); ) !important; border: 1px solid white; } - } diff --git a/src/styles.scss b/src/styles.scss index 96e4195f..2cb1dc01 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -189,7 +189,10 @@ a { // Checkbox .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background, .mdc-checkbox__ripple { - background-color: mat.get-color-from-palette($df-purple-palette, 600) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; } @@ -210,7 +213,7 @@ a { .action-btn { color: mat.get-color-from-palette($df-purple-palette, 500) !important; } -// Select +// Select .mat-mdc-select-arrow { color: unset !important; } From 1f6693d866f6724cc03527c7365749440f03858e Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Wed, 8 May 2024 10:05:53 -0500 Subject: [PATCH 26/43] 215 - Add Refresh Schema Option --- .../df-cache/df-cache-table.component.ts | 2 +- .../df-manage-tables-table.component.ts | 9 +++++++-- .../df-manage-services-table.component.ts | 5 +++-- .../df-manage-table.component.html | 9 +++++++++ .../df-manage-table/df-manage-table.component.ts | 16 +++++++++++++++- .../df-side-nav/df-side-nav.component.html | 2 +- .../df-side-nav/df-side-nav.component.ts | 5 +++-- src/app/shared/services/df-base-crud.service.ts | 3 +++ src/app/shared/types/generic-http.ts | 1 + src/app/shared/types/service.ts | 1 + 10 files changed, 44 insertions(+), 9 deletions(-) diff --git a/src/app/adf-config/df-cache/df-cache-table.component.ts b/src/app/adf-config/df-cache/df-cache-table.component.ts index fe49d22d..84d1c415 100644 --- a/src/app/adf-config/df-cache/df-cache-table.component.ts +++ b/src/app/adf-config/df-cache/df-cache-table.component.ts @@ -27,7 +27,7 @@ import { Actions } from 'src/app/shared/types/table'; export class DfCacheTableComponent extends DfManageTableComponent { constructor( @Inject(CACHE_SERVICE_TOKEN) - private cacheService: DfBaseCrudService, + cacheService: DfBaseCrudService, router: Router, activatedRoute: ActivatedRoute, liveAnnouncer: LiveAnnouncer, diff --git a/src/app/adf-schema/df-manage-tables-table/df-manage-tables-table.component.ts b/src/app/adf-schema/df-manage-tables-table/df-manage-tables-table.component.ts index 08ba6e71..f109e6d4 100644 --- a/src/app/adf-schema/df-manage-tables-table/df-manage-tables-table.component.ts +++ b/src/app/adf-schema/df-manage-tables-table/df-manage-tables-table.component.ts @@ -66,12 +66,17 @@ export class DfManageTablesTableComponent extends DfManageTableComponent>({ limit, offset, filter, + refresh, }) .subscribe(data => { this.dataSource.data = this.mapDataToTable(data.resource); diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.html b/src/app/shared/components/df-manage-table/df-manage-table.component.html index a4880881..8264bcfd 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.html +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.html @@ -8,6 +8,15 @@ type="button"> +
faPlus = faPlus; faEllipsisV = faEllipsisV; faTriangleExclamation = faTriangleExclamation; + faRefresh = faRefresh; allowCreate = true; allowFilter = true; currentFilter = new FormControl(''); + schema = false; abstract columns: Array>; @@ -100,6 +103,7 @@ export abstract class DfManageTableComponent }, ], }; + cacheService: any; constructor( protected router: Router, @@ -112,6 +116,7 @@ export abstract class DfManageTableComponent ngOnInit(): void { if (!this.tableData) { this.activatedRoute.data.subscribe(({ data }) => { + this.schema = this.router.url.includes('schema'); if (data && data.resource) { this.dataSource.data = this.mapDataToTable(data.resource); } @@ -175,7 +180,12 @@ export abstract class DfManageTableComponent abstract mapDataToTable(data: Array): Array; - abstract refreshTable(limit?: number, offset?: number, filter?: string): void; + abstract refreshTable( + limit?: number, + offset?: number, + filter?: string, + refresh?: true + ): void; abstract filterQuery(value: string): string; @@ -243,4 +253,8 @@ export abstract class DfManageTableComponent !this.actions.default.disabled) ); } + + refreshSchema() { + this.refreshTable(undefined, undefined, undefined, true); + } } diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index 081dfbaf..26bd2210 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -117,7 +117,7 @@

- {{ breadcrumb.translationKey | transloco }} + {{ breadcrumb.translationKey | transloco }} {{ breadcrumb.label }} diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.ts b/src/app/shared/components/df-side-nav/df-side-nav.component.ts index cf039483..d4bea21f 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.ts +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.ts @@ -17,6 +17,7 @@ import { faMagnifyingGlass, faPlus, faUser, + faRefresh, } from '@fortawesome/free-solid-svg-icons'; import { routes } from 'src/app/routes'; import { @@ -38,7 +39,7 @@ import { UntilDestroy } from '@ngneat/until-destroy'; import { CommonModule } from '@angular/common'; import { DfSearchService } from '../../services/df-search.service'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; -import { HttpClient } from '@angular/common/http'; + @UntilDestroy({ checkProperties: true }) @Component({ selector: 'df-side-nav', @@ -83,6 +84,7 @@ export class DfSideNavComponent implements OnInit { recents$ = this.searchService.recents$; smallScreen$ = this.breakpointService.isSmallScreen; faPlus = faPlus; + faRefresh = faRefresh; constructor( // public dialogRef: MatDialogRef, @@ -132,7 +134,6 @@ export class DfSideNavComponent implements OnInit { this.nav = accessibleRoutes(transformRoutes(routes), accessByTabs); } else { this.nav = transformRoutes(routes); - console.log('this.nav', this.nav); } }); this.search.valueChanges diff --git a/src/app/shared/services/df-base-crud.service.ts b/src/app/shared/services/df-base-crud.service.ts index 4dfe2f62..7bd2c4de 100644 --- a/src/app/shared/services/df-base-crud.service.ts +++ b/src/app/shared/services/df-base-crud.service.ts @@ -183,6 +183,9 @@ export class DfBaseCrudService { if (options.includeCount !== undefined) { params.include_count = options.includeCount; } + if (options.refresh) { + params.refresh = options.refresh; + } if (options.additionalParams) { options.additionalParams.forEach(param => { diff --git a/src/app/shared/types/generic-http.ts b/src/app/shared/types/generic-http.ts index 917eea33..d8457131 100644 --- a/src/app/shared/types/generic-http.ts +++ b/src/app/shared/types/generic-http.ts @@ -41,6 +41,7 @@ export interface RequestOptions { additionalParams: KeyValuePair[]; additionalHeaders: KeyValuePair[]; includeCacheControl: boolean; + refresh: boolean; } export type GenericCreateResponse = GenericListResponse<{ id: number }>; diff --git a/src/app/shared/types/service.ts b/src/app/shared/types/service.ts index 55c5c452..868efa62 100644 --- a/src/app/shared/types/service.ts +++ b/src/app/shared/types/service.ts @@ -79,6 +79,7 @@ export interface Service { lastModifiedById: number | null; config: any; serviceDocByServiceId: number | null; + refresh: boolean; } export interface ServiceRow { From 442b36a199633604c322a8395102e5792e1939b4 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Thu, 9 May 2024 16:46:31 -0400 Subject: [PATCH 27/43] 217 - Fixed build error --- .../df-side-nav/df-side-nav.component.html | 17 ++++++++--------- .../df-side-nav/df-side-nav.component.ts | 7 ++++--- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index 49497566..db7b10ea 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -109,16 +109,15 @@

- - - - {{ breadcrumb.translationKey | transloco }} - - - {{ breadcrumb.label }} + + + {{ breadcrumb.translationKey | transloco }} + + + {{ breadcrumb.label }} + - - / + / diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.ts b/src/app/shared/components/df-side-nav/df-side-nav.component.ts index 01331cc5..ae20dad1 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.ts +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.ts @@ -19,6 +19,7 @@ import { faMagnifyingGlass, faUser, faRefresh, + faPlus, } from '@fortawesome/free-solid-svg-icons'; import { routes } from 'src/app/routes'; import { @@ -37,7 +38,7 @@ import { DfSearchDialogComponent } from '../df-search-dialog/df-search-dialog.co import { UntilDestroy } from '@ngneat/until-destroy'; import { CommonModule } from '@angular/common'; import { DfSearchService } from '../../services/df-search.service'; -import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { FormControl } from '@angular/forms'; import { DfThemeToggleComponent } from '../df-theme-toggle/df-theme-toggle.component'; @UntilDestroy({ checkProperties: true }) @@ -79,7 +80,6 @@ export class DfSideNavComponent implements OnInit { faLanguage = faLanguage; search = new FormControl(); results$ = this.searchService.results$; - recents$ = this.searchService.recents$; smallScreen$ = this.breakpointService.isSmallScreen; faPlus = faPlus; faRefresh = faRefresh; @@ -93,7 +93,8 @@ export class DfSideNavComponent implements OnInit { private licenseCheckService: DfLicenseCheckService, private dialog: MatDialog, private transloco: TranslocoService, - private themeService: DfThemeService + private themeService: DfThemeService, + private searchService: DfSearchService ) {} ngOnInit(): void { From 6c1994f8ab74b54810d24daa7c0633ea1b9ea2ef Mon Sep 17 00:00:00 2001 From: root Date: Thu, 9 May 2024 20:27:37 -0500 Subject: [PATCH 28/43] fix: fix api docs no option issue --- src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts index d0e23a5d..f9ebe5e8 100644 --- a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts +++ b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts @@ -42,11 +42,10 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit { ngOnInit(): void { this.activatedRoute.data.subscribe(({ data }) => { if (data) { - this.apiDocJson = mapCamelToSnake(data); + this.apiDocJson = { ...data, paths: mapCamelToSnake(data.paths) }; } }); } - ngAfterContentInit(): void { const apiDocumentation = this.apiDocJson; SwaggerUI({ From 79b8a937c9c58e967a6e4185d10cc588e5439113 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Thu, 9 May 2024 22:12:56 -0400 Subject: [PATCH 29/43] 219 - UI bug Fix and enhancements --- .../df-profile/df-profile.component.html | 12 ++++----- .../df-service-details.component.html | 2 +- .../df-service-details.component.scss | 25 +++++++++++++++++++ .../df-service-details.component.ts | 2 +- .../adf-user-management.scss | 2 +- .../df-forgot-password.component.html | 12 ++++----- .../df-password-reset.component.html | 10 ++++---- 7 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/app/adf-profile/df-profile/df-profile.component.html b/src/app/adf-profile/df-profile/df-profile.component.html index e3592829..227fd8b7 100644 --- a/src/app/adf-profile/df-profile/df-profile.component.html +++ b/src/app/adf-profile/df-profile/df-profile.component.html @@ -17,7 +17,7 @@ [formGroup]="profileForm" (ngSubmit)="updateProfile()"> - + {{ 'userManagement.controls.currentPassword.label' | transloco }} @@ -48,13 +48,13 @@ name="security-question-form" [formGroup]="securityQuestionForm" (ngSubmit)="updateSecurityQuestion()"> - + {{ 'userManagement.controls.securityQuestion.label' | transloco }} - + {{ 'userManagement.controls.securityAnswer.label' | transloco }} @@ -84,7 +84,7 @@ (alertClosed)="showAlert = false" >{{ alertMsg }} - + {{ 'userManagement.controls.oldPassword.label' | transloco }} @@ -96,7 +96,7 @@ }} - + {{ 'userManagement.controls.password.label' | transloco }} @@ -112,7 +112,7 @@ {{ 'userManagement.controls.password.errors.length' | transloco }} - + {{ 'userManagement.controls.confirmPassword.label' | transloco }} diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html index af9ee1b1..603203ff 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.html +++ b/src/app/adf-services/df-service-details/df-service-details.component.html @@ -68,7 +68,7 @@

class="card-icon" [src]="getBackgroundImage(type.name)" [alt]="type.label" /> -

+

{{ type.label }}

diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index fe19d8af..7ec876a1 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -84,11 +84,15 @@ label.radio-card { .card-content { width: 100%; + text-align: center; img { margin-bottom: 10px; width: 100%; height: 110px; } + h4 { + color: #000; + } } } @@ -128,3 +132,24 @@ mat-icon { ::ng-deep .mat-mdc-select-arrow { color: unset !important; } + +.dark-theme { + +label.radio-card { + + .card-content-wrapper { + background: #000; + border: 1px solid #fff; + } + + .check-icon { + border: solid 2px #2d2d2d; + } + + .card-content { + h4 { + color: #fff; + } + } +} +} \ No newline at end of file diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts index cd80c6c0..97f53ac2 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.ts +++ b/src/app/adf-services/df-service-details/df-service-details.component.ts @@ -39,7 +39,7 @@ import { Service } from 'src/app/shared/types/files'; import { AceEditorMode } from 'src/app/shared/types/scripts'; import { DfScriptEditorComponent } from 'src/app/shared/components/df-script-editor/df-script-editor.component'; import { DfSystemConfigDataService } from 'src/app/shared/services/df-system-config-data.service'; -import { forkJoin, map, switchMap } from 'rxjs'; +import { map, switchMap } from 'rxjs'; import { GOLD_SERVICES, SILVER_SERVICES, diff --git a/src/app/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss index 9700ccc1..34159ead 100644 --- a/src/app/adf-user-management/adf-user-management.scss +++ b/src/app/adf-user-management/adf-user-management.scss @@ -3,7 +3,7 @@ flex-direction: column; justify-content: center; height: 100%; - margin: 25% 0; + .user-management-card { padding: 16px 16px; margin: 0 auto; diff --git a/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html b/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html index 63ad0d6f..9f5d9aab 100644 --- a/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html +++ b/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html @@ -18,7 +18,7 @@ [formGroup]="forgetPasswordForm" (ngSubmit)="requestReset()" *ngIf="!hasSecurityQuestion"> - + {{ 'userManagement.controls.email.label' | transloco }} @@ -39,7 +39,7 @@ - + {{ 'userManagement.controls.username.altLabel' | transloco }} @@ -58,7 +58,7 @@ [formGroup]="securityQuestionForm" (ngSubmit)="resetPassword()" *ngIf="hasSecurityQuestion"> - + {{ 'userManagement.controls.securityQuestion.label' | transloco @@ -70,7 +70,7 @@ formControlName="securityQuestion" [readonly]="true" /> - + {{ 'userManagement.controls.securityAnswer.label' | transloco @@ -85,7 +85,7 @@ }} - + {{ 'userManagement.controls.password.label' | transloco }} @@ -104,7 +104,7 @@ - + {{ 'userManagement.controls.confirmPassword.label' | transloco }} diff --git a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html index ad49d609..d66cb0bb 100644 --- a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html +++ b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html @@ -24,7 +24,7 @@ name="reset-password-form" [formGroup]="passwordResetForm" (ngSubmit)="resetPassword()"> - + {{ 'userManagement.controls.email.label' | transloco }} @@ -45,7 +45,7 @@ - + {{ 'userManagement.controls.username.altLabel' | transloco }} @@ -56,7 +56,7 @@ - + {{ 'userManagement.controls.confirmationCode.label' | transloco @@ -71,7 +71,7 @@ }} - + {{ 'userManagement.controls.password.' + (type === 'reset' ? 'label' : 'altLabel') | transloco @@ -87,7 +87,7 @@ - + {{ 'userManagement.controls.confirmPassword.' + (type === 'reset' ? 'label' : 'altLabel') | transloco From 2f2b87cfc8f86d3c246496c9a5ad97c065c947a5 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Thu, 9 May 2024 22:14:03 -0400 Subject: [PATCH 30/43] additional style updates --- .../df-service-details.component.scss | 26 +++++++++---------- .../df-forgot-password.component.html | 4 ++- .../df-password-reset.component.html | 4 ++- .../df-dynamic-field.component.html | 1 - 4 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index 7ec876a1..6b1b750b 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -134,22 +134,20 @@ mat-icon { } .dark-theme { + label.radio-card { + .card-content-wrapper { + background: #000; + border: 1px solid #fff; + } -label.radio-card { - - .card-content-wrapper { - background: #000; - border: 1px solid #fff; - } - - .check-icon { - border: solid 2px #2d2d2d; - } + .check-icon { + border: solid 2px #2d2d2d; + } - .card-content { - h4 { - color: #fff; + .card-content { + h4 { + color: #fff; + } } } } -} \ No newline at end of file diff --git a/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html b/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html index 9f5d9aab..8ddbccc2 100644 --- a/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html +++ b/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html @@ -39,7 +39,9 @@ - + {{ 'userManagement.controls.username.altLabel' | transloco }} diff --git a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html index d66cb0bb..e06e7bf4 100644 --- a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html +++ b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html @@ -45,7 +45,9 @@ - + {{ 'userManagement.controls.username.altLabel' | transloco }} diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html index ab3104b6..66d3c07c 100644 --- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html +++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html @@ -85,4 +85,3 @@ - From 27332da8d3d57b879397633aca7a3a4d942950b7 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Fri, 10 May 2024 11:51:42 -0500 Subject: [PATCH 31/43] 223 - Save Dark Mode to users browser --- .../df-side-nav/df-side-nav.component.html | 1 - src/app/shared/services/df-theme.service.ts | 14 +++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index db7b10ea..0ac72dc8 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -117,7 +117,6 @@

{{ breadcrumb.label }} - / diff --git a/src/app/shared/services/df-theme.service.ts b/src/app/shared/services/df-theme.service.ts index e265d11c..eb288357 100644 --- a/src/app/shared/services/df-theme.service.ts +++ b/src/app/shared/services/df-theme.service.ts @@ -7,7 +7,19 @@ import { BehaviorSubject } from 'rxjs'; export class DfThemeService { darkMode$ = new BehaviorSubject(false); - setThemeMode(isDarkMode: boolean) { + constructor() { + this.loadInitialTheme(); + } + + setThemeMode(isDarkMode: boolean): void { this.darkMode$.next(isDarkMode); + localStorage.setItem('isDarkMode', JSON.stringify(isDarkMode)); + } + + loadInitialTheme(): void { + const storedTheme = localStorage.getItem('isDarkMode'); + if (storedTheme) { + this.darkMode$.next(JSON.parse(storedTheme)); + } } } From 7773228ffc3c91170bd0f98d69f186bab85d92d9 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Mon, 13 May 2024 12:28:05 -0500 Subject: [PATCH 32/43] #226 - Dark Mode Bug Fixes --- .../df-welcome-page.component.html | 4 +- .../df-side-nav/df-side-nav.component.html | 102 +++++----- .../df-side-nav/df-side-nav.component.scss | 176 +++++++++++++++--- .../df-theme-toggle.component.ts | 3 +- src/app/shared/utilities/route.ts | 2 - src/dark-style.scss | 13 +- 6 files changed, 214 insertions(+), 86 deletions(-) diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html index 29d84ae6..ab3fdd8f 100644 --- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html +++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html @@ -59,7 +59,7 @@

- + diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index 0ac72dc8..c8195d7c 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -5,13 +5,20 @@ [class.logged-in]="isLoggedIn$ | async"> - - +
+ + +
+
+ + +

- - - + +
+
- -
-
@@ -152,7 +147,12 @@

class="nav-item" [class.active]="isActive(item)" (click)="handleNavClick(item)"> - {{ navLabel(item.path) | transloco }} + + + + + {{ navLabel(item.path) | transloco }} + @@ -161,7 +161,11 @@

[class.mat-elevation-z0]="true" [expanded]="isActive(item)"> - {{ navLabel(item.path) | transloco }} + + + {{ navLabel(item.path) | transloco }} + .mat-expansion-indicator::after { -// color: unset !important; -// } +.breadcrumb-link { + color: white; +} .dark-theme { .tool-bar, @@ -200,15 +262,51 @@ $red-palette: mat.define-palette(mat.$red-palette); 1003 ) !important; } - .nav-item { - &.active { + + .parent-route { background-color: mat.get-color-from-palette( $df-purple-palette, - 600 + 1003 ) !important; } + + .nav-item { + ::ng-deep .mat-mdc-button-touch-target { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + } + } + &.active { + ::ng-deep .mat-mdc-button-touch-target { + background-color: #e3dfff; + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; + } + } + + .nav-item { + &.active { + ::ng-deep .mat-mdc-button-touch-target { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + } + ::ng-deep .mdc-button__label > span { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + } + } + + img { + filter: invert(1) !important; + + } } - .sidenav-content, .banner, .main { background-color: mat.get-color-from-palette( @@ -220,4 +318,22 @@ $red-palette: mat.define-palette(mat.$red-palette); color: mat.get-color-from-palette($df-purple-palette, 10) !important; } } + .sidenav-content { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + color: white; + .page-header { + color: mat.get-color-from-palette($df-purple-palette, 10) !important; + } + } + + + .content-wrapper { + padding: 2px; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; + background-color: mat.get-color-from-palette($df-purple-palette, 1002) !important; + border-radius: 6px !important; + } } diff --git a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts index 4a5e309f..23407c1e 100644 --- a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts +++ b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts @@ -6,12 +6,11 @@ import { BehaviorSubject } from 'rxjs'; @Component({ selector: 'df-theme-toggle', templateUrl: './df-theme-toggle.component.html', - // styleUrls: ['./df-theme-toggle.component.scss'], standalone: true, imports: [MatSlideToggleModule], }) export class DfThemeToggleComponent { - isDarkMode$: BehaviorSubject = new BehaviorSubject(true); + isDarkMode$: BehaviorSubject = new BehaviorSubject(false); themeService = inject(DfThemeService); toggle() { diff --git a/src/app/shared/utilities/route.ts b/src/app/shared/utilities/route.ts index a433cd44..489d2f19 100644 --- a/src/app/shared/utilities/route.ts +++ b/src/app/shared/utilities/route.ts @@ -56,8 +56,6 @@ const findIconForRoute = (routeName: any) => { } else { return ''; } - // Replace parts of route names to match them to icon filenames if needed - // return `assets/img/nav/${routeName?.path}.svg`; }; export function accessibleRoutes( diff --git a/src/dark-style.scss b/src/dark-style.scss index 1c57a7d9..f121c438 100644 --- a/src/dark-style.scss +++ b/src/dark-style.scss @@ -57,7 +57,18 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .mat-step-label { color: white !important; } - +.parent-route, .mat-expansion-panel-body { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + } + .nav-item .active>.mdc-button__label> .mat-mdc-button-touch-target{ + background-color: mat.get-color-from-palette( + $df-purple-palette, + 700 + ) !important; + } // Radio Button .mat-mdc-radio-button .mdc-radio From 8bde03f1669d0460618a84d4f8468c1d5cc65160 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Mon, 13 May 2024 12:29:20 -0500 Subject: [PATCH 33/43] more fixes --- .../df-side-nav/df-side-nav.component.scss | 45 ++++++++++--------- src/dark-style.scss | 5 ++- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss index d9879683..6318f803 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.scss @@ -184,7 +184,7 @@ $red-palette: mat.define-palette(mat.$red-palette); background: #f6f2fa; .content-wrapper { padding: 2px; - border: 1px solid #f6f2fa; + border: 1px solid #f6f2fa; background-color: #f6f2fa; border-radius: 6px !important; } @@ -263,29 +263,29 @@ $red-palette: mat.define-palette(mat.$red-palette); ) !important; } - .parent-route { + .parent-route { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + } + + .nav-item { + ::ng-deep .mat-mdc-button-touch-target { background-color: mat.get-color-from-palette( $df-purple-palette, 1003 ) !important; } - - .nav-item { - ::ng-deep .mat-mdc-button-touch-target { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1003 - ) !important; - } - } - &.active { - ::ng-deep .mat-mdc-button-touch-target { - background-color: #e3dfff; - border-top-right-radius: 50px; - border-bottom-right-radius: 50px; - } + } + &.active { + ::ng-deep .mat-mdc-button-touch-target { + background-color: #e3dfff; + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; } - + } + .nav-item { &.active { ::ng-deep .mat-mdc-button-touch-target { @@ -304,7 +304,6 @@ $red-palette: mat.define-palette(mat.$red-palette); img { filter: invert(1) !important; - } } .banner, @@ -329,11 +328,13 @@ $red-palette: mat.define-palette(mat.$red-palette); } } - .content-wrapper { padding: 2px; - border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; - background-color: mat.get-color-from-palette($df-purple-palette, 1002) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; border-radius: 6px !important; } } diff --git a/src/dark-style.scss b/src/dark-style.scss index f121c438..f361b0a5 100644 --- a/src/dark-style.scss +++ b/src/dark-style.scss @@ -57,13 +57,14 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .mat-step-label { color: white !important; } -.parent-route, .mat-expansion-panel-body { + .parent-route, + .mat-expansion-panel-body { background-color: mat.get-color-from-palette( $df-purple-palette, 1003 ) !important; } - .nav-item .active>.mdc-button__label> .mat-mdc-button-touch-target{ + .nav-item .active > .mdc-button__label > .mat-mdc-button-touch-target { background-color: mat.get-color-from-palette( $df-purple-palette, 700 From f9355367c855f64ab720c7a81670420e32aa39fc Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Tue, 14 May 2024 11:10:57 -0500 Subject: [PATCH 34/43] 213 - Pagination Order --- .../df-api-docs/df-api-docs-table.component.ts | 3 ++- src/app/adf-user-management/adf-user-management.scss | 10 ++++++++++ .../df-login/df-login.component.html | 4 +++- .../adf-user-management/df-login/df-login.component.ts | 8 +++++++- .../df-manage-table/df-manage-table.component.ts | 2 +- .../components/df-side-nav/df-side-nav.component.scss | 4 +++- 6 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts b/src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts index 9c034b9a..25f7a0a1 100644 --- a/src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts +++ b/src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts @@ -90,7 +90,8 @@ export class DfApiDocsTableComponent extends DfManageTableComponent { + const sortedData = data.sort((a, b) => a.id - b.id); + return sortedData.map(val => { const type = this.getServiceType(val.type); return { name: val.name, diff --git a/src/app/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss index 34159ead..1e2f36f8 100644 --- a/src/app/adf-user-management/adf-user-management.scss +++ b/src/app/adf-user-management/adf-user-management.scss @@ -38,3 +38,13 @@ } } } + + + .user-management-card-container{ + margin-top: 30%; + + &.dark-theme { + background-color: #1e1e1e; + color: #fff; + } + } diff --git a/src/app/adf-user-management/df-login/df-login.component.html b/src/app/adf-user-management/df-login/df-login.component.html index 3c134266..6c5c73cc 100644 --- a/src/app/adf-user-management/df-login/df-login.component.html +++ b/src/app/adf-user-management/df-login/df-login.component.html @@ -1,4 +1,6 @@ -
+
@Input() tableData?: Array; dataSource = new MatTableDataSource(); tableLength = 0; - pageSizes = [10, 50, 100]; + pageSizes = [2, 5, 100]; currentPageSize = this.defaultPageSize; faTrashCan = faTrashCan; faPenToSquare = faPenToSquare; diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss index 6318f803..b648f954 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.scss @@ -183,6 +183,7 @@ $red-palette: mat.define-palette(mat.$red-palette); padding: 8px 20px 24px; background: #f6f2fa; .content-wrapper { + height: 100%; padding: 2px; border: 1px solid #f6f2fa; background-color: #f6f2fa; @@ -248,7 +249,8 @@ $red-palette: mat.define-palette(mat.$red-palette); } .breadcrumb-link { - color: white; + color: inherit; + text-decoration: none; } .dark-theme { From 575597d2af0a71470ed237b254a6381a9ee7e289 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Tue, 14 May 2024 11:11:38 -0500 Subject: [PATCH 35/43] updated styling --- .../adf-user-management/adf-user-management.scss | 13 ++++++------- .../df-login/df-login.component.ts | 2 +- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/app/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss index 1e2f36f8..a72e3dab 100644 --- a/src/app/adf-user-management/adf-user-management.scss +++ b/src/app/adf-user-management/adf-user-management.scss @@ -39,12 +39,11 @@ } } +.user-management-card-container { + margin-top: 30%; - .user-management-card-container{ - margin-top: 30%; - - &.dark-theme { - background-color: #1e1e1e; - color: #fff; - } + &.dark-theme { + background-color: #1e1e1e; + color: #fff; } +} diff --git a/src/app/adf-user-management/df-login/df-login.component.ts b/src/app/adf-user-management/df-login/df-login.component.ts index 687a28cf..6b71263a 100644 --- a/src/app/adf-user-management/df-login/df-login.component.ts +++ b/src/app/adf-user-management/df-login/df-login.component.ts @@ -53,7 +53,7 @@ import { CommonModule } from '@angular/common'; RouterLink, FontAwesomeModule, TranslocoPipe, - CommonModule + CommonModule, ], }) export class DfLoginComponent implements OnInit { From 1739d26b469c7d77828d25d944fff3f01a44d31a Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Tue, 14 May 2024 11:13:40 -0500 Subject: [PATCH 36/43] cleanup --- .../components/df-manage-table/df-manage-table.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.ts b/src/app/shared/components/df-manage-table/df-manage-table.component.ts index 81f3de4e..ebc557d0 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.ts +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.ts @@ -65,7 +65,7 @@ export abstract class DfManageTableComponent @Input() tableData?: Array; dataSource = new MatTableDataSource(); tableLength = 0; - pageSizes = [2, 5, 100]; + pageSizes = [10, 50, 100]; currentPageSize = this.defaultPageSize; faTrashCan = faTrashCan; faPenToSquare = faPenToSquare; From fd88fcaaa319d1cfa42b83a2e49a8d62cd840b20 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Wed, 15 May 2024 10:25:11 -0500 Subject: [PATCH 37/43] #221 - Added Service Definition Capability --- .../df-service-details.component.html | 24 ++++++- .../df-service-details.component.ts | 64 ++++++++++++++----- 2 files changed, 71 insertions(+), 17 deletions(-) diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html index 603203ff..deefc7ce 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.html +++ b/src/app/adf-services/df-service-details/df-service-details.component.html @@ -349,9 +349,31 @@

{{ 'services.options' | transloco }} + >{{ 'services.options' | transloco }}s
+ + + Service Definition + + + + + + diff --git a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts index 23407c1e..40249dcd 100644 --- a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts +++ b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts @@ -2,15 +2,15 @@ import { Component, inject } from '@angular/core'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { DfThemeService } from '../../services/df-theme.service'; import { BehaviorSubject } from 'rxjs'; - +import { AsyncPipe } from '@angular/common'; @Component({ selector: 'df-theme-toggle', templateUrl: './df-theme-toggle.component.html', standalone: true, - imports: [MatSlideToggleModule], + imports: [MatSlideToggleModule, AsyncPipe], }) export class DfThemeToggleComponent { - isDarkMode$: BehaviorSubject = new BehaviorSubject(false); + isDarkMode$: BehaviorSubject = new BehaviorSubject(true); themeService = inject(DfThemeService); toggle() { From cf6210f16b8ecee1e447e3b4f1ec53894f603003 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Thu, 16 May 2024 13:01:53 -0500 Subject: [PATCH 39/43] Updated Service Definition and Search functionality --- .../df-service-details.component.html | 10 +++++++ .../df-service-details.component.ts | 9 ++++++ .../df-side-nav/df-side-nav.component.html | 7 ++++- .../df-side-nav/df-side-nav.component.ts | 28 ++++++++++++++++--- 4 files changed, 49 insertions(+), 5 deletions(-) diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html index deefc7ce..72800520 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.html +++ b/src/app/adf-services/df-service-details/df-service-details.component.html @@ -353,6 +353,16 @@

+ + JSON + YAML + Service Definition