From 9180b73f5bb6e40ed32d031f141c0b92c4344f2b Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Sun, 14 Apr 2024 19:06:24 -0500 Subject: [PATCH 1/8] 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