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/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss index 07253a51..9700ccc1 100644 --- a/src/app/adf-user-management/adf-user-management.scss +++ b/src/app/adf-user-management/adf-user-management.scss @@ -3,11 +3,16 @@ flex-direction: column; justify-content: center; height: 100%; + margin: 25% 0; .user-management-card { padding: 16px 16px; margin: 0 auto; min-width: 300px; max-width: 445px; + box-shadow: var(--mdc-elevated-card-container-elevation); + --mdc-elevated-card-container-shape: 4px; + --mdc-outlined-card-container-shape: 4px; + --mdc-outlined-card-outline-width: 1px; mat-card-header { padding-bottom: 16px; } diff --git a/src/app/adf-user-management/df-login/df-login.component.scss b/src/app/adf-user-management/df-login/df-login.component.scss index dec15026..065f48d7 100644 --- a/src/app/adf-user-management/df-login/df-login.component.scss +++ b/src/app/adf-user-management/df-login/df-login.component.scss @@ -2,6 +2,7 @@ display: block; margin-left: auto; margin-right: auto; + margin-top: 16px; } .left-panel img { 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..081dfbaf 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 @@ -4,13 +4,19 @@ [class.logged-in]="isLoggedIn$ | async"> - - +
+ + +
+
+ + +
- - + +
+
- -
-
@@ -142,7 +144,12 @@

class="nav-item" [class.active]="isActive(item)" (click)="handleNavClick(item)"> - {{ navLabel(item.path) | transloco }} + + + + + {{ navLabel(item.path) | transloco }} + @@ -150,7 +157,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