From 99f8157722a19ad9e415db99a7ada2e33854ebc2 Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Sat, 3 Jul 2021 19:33:58 -0600 Subject: [PATCH] Add sidebar and update navbar --- src/main/webapp/app/app.module.ts | 11 +- .../app/layouts/main/main.component.html | 28 +- .../app/layouts/main/main.component.scss | 4 + .../webapp/app/layouts/main/main.component.ts | 9 + .../layouts/navbar/active-menu.directive.ts | 27 -- .../app/layouts/navbar/navbar.component.html | 420 +++--------------- .../app/layouts/navbar/navbar.component.scss | 43 +- .../app/layouts/navbar/navbar.component.ts | 182 +++++--- .../layouts/sidebar/sidebar.component.html | 116 ++++- .../app/layouts/sidebar/sidebar.component.ts | 77 +++- .../app/layouts/sidebar/sidebar.constants.ts | 82 ++++ 11 files changed, 506 insertions(+), 493 deletions(-) create mode 100644 src/main/webapp/app/layouts/main/main.component.scss delete mode 100644 src/main/webapp/app/layouts/navbar/active-menu.directive.ts create mode 100644 src/main/webapp/app/layouts/sidebar/sidebar.constants.ts diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts index 0809527..c297822 100644 --- a/src/main/webapp/app/app.module.ts +++ b/src/main/webapp/app/app.module.ts @@ -26,7 +26,6 @@ import { MainComponent } from './layouts/main/main.component'; import { NavbarComponent } from './layouts/navbar/navbar.component'; import { FooterComponent } from './layouts/footer/footer.component'; import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component'; -import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive'; import { ErrorComponent } from './layouts/error/error.component'; import { SidebarComponent } from './layouts/sidebar/sidebar.component'; @@ -60,15 +59,7 @@ import { SidebarComponent } from './layouts/sidebar/sidebar.component'; { provide: NgbDateAdapter, useClass: NgbDateDayjsAdapter }, httpInterceptorProviders, ], - declarations: [ - MainComponent, - NavbarComponent, - ErrorComponent, - PageRibbonComponent, - ActiveMenuDirective, - FooterComponent, - SidebarComponent, - ], + declarations: [MainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, FooterComponent, SidebarComponent], bootstrap: [MainComponent], }) export class AppModule { diff --git a/src/main/webapp/app/layouts/main/main.component.html b/src/main/webapp/app/layouts/main/main.component.html index 3ac9be9..cd18230 100644 --- a/src/main/webapp/app/layouts/main/main.component.html +++ b/src/main/webapp/app/layouts/main/main.component.html @@ -1,13 +1,21 @@ - - -
- -
- -
-
+ + +
+ - -
+ + +
+
+ +
+
+ +
+ +
+
+
+ diff --git a/src/main/webapp/app/layouts/main/main.component.scss b/src/main/webapp/app/layouts/main/main.component.scss new file mode 100644 index 0000000..98938a5 --- /dev/null +++ b/src/main/webapp/app/layouts/main/main.component.scss @@ -0,0 +1,4 @@ +.sidebar:after, +.off-canvas-sidebar:after { + background: #0f172a; +} diff --git a/src/main/webapp/app/layouts/main/main.component.ts b/src/main/webapp/app/layouts/main/main.component.ts index 714687f..bcae3de 100644 --- a/src/main/webapp/app/layouts/main/main.component.ts +++ b/src/main/webapp/app/layouts/main/main.component.ts @@ -9,6 +9,7 @@ import { AccountService } from 'app/core/auth/account.service'; @Component({ selector: 'jhi-main', templateUrl: './main.component.html', + styleUrls: ['./main.component.scss'], }) export class MainComponent implements OnInit { private renderer: Renderer2; @@ -55,4 +56,12 @@ export class MainComponent implements OnInit { } this.translateService.get(pageTitle).subscribe(title => this.titleService.setTitle(title)); } + + isAdmin(): boolean { + return this.accountService.hasAnyAuthority('ROLE_ADMIN'); + } + + isAuthenticated(): boolean { + return this.accountService.isAuthenticated(); + } } diff --git a/src/main/webapp/app/layouts/navbar/active-menu.directive.ts b/src/main/webapp/app/layouts/navbar/active-menu.directive.ts deleted file mode 100644 index 6150841..0000000 --- a/src/main/webapp/app/layouts/navbar/active-menu.directive.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Directive, OnInit, ElementRef, Renderer2, Input } from '@angular/core'; -import { TranslateService, LangChangeEvent } from '@ngx-translate/core'; - -@Directive({ - selector: '[jhiActiveMenu]', -}) -export class ActiveMenuDirective implements OnInit { - @Input() jhiActiveMenu?: string; - - constructor(private el: ElementRef, private renderer: Renderer2, private translateService: TranslateService) {} - - ngOnInit(): void { - this.translateService.onLangChange.subscribe((event: LangChangeEvent) => { - this.updateActiveFlag(event.lang); - }); - - this.updateActiveFlag(this.translateService.currentLang); - } - - updateActiveFlag(selectedLanguage: string): void { - if (this.jhiActiveMenu === selectedLanguage) { - this.renderer.addClass(this.el.nativeElement, 'active'); - } else { - this.renderer.removeClass(this.el.nativeElement, 'active'); - } - } -} diff --git a/src/main/webapp/app/layouts/navbar/navbar.component.html b/src/main/webapp/app/layouts/navbar/navbar.component.html index 48de3b3..2cf87c8 100644 --- a/src/main/webapp/app/layouts/navbar/navbar.component.html +++ b/src/main/webapp/app/layouts/navbar/navbar.component.html @@ -1,352 +1,74 @@ - diff --git a/src/main/webapp/app/layouts/navbar/navbar.component.scss b/src/main/webapp/app/layouts/navbar/navbar.component.scss index 1ff209b..912c1c4 100644 --- a/src/main/webapp/app/layouts/navbar/navbar.component.scss +++ b/src/main/webapp/app/layouts/navbar/navbar.component.scss @@ -1,42 +1,7 @@ -@import '~bootstrap/scss/functions'; -@import '~bootstrap/scss/variables'; - -/* ========================================================================== -Navbar -========================================================================== */ - -.navbar-version { - font-size: 0.65em; - color: $navbar-dark-color; +#minimizeSidebar:hover { + background-color: #e5e9ec !important; } -.profile-image { - height: 1.75em; - width: 1.75em; -} - -.navbar { - padding: 0.2rem 1rem; - - ul.navbar-nav { - .nav-item { - margin-left: 0.5em; - } - } - - a.nav-link { - font-weight: 400; - } -} - -/* ========================================================================== -Logo styles -========================================================================== */ -.logo-img { - height: 45px; - width: 45px; - display: inline-block; - vertical-align: middle; - background: url('../../../content/images/logo-jhipster.png') no-repeat center center; - background-size: contain; +.test:hover { + background-color: red !important; } diff --git a/src/main/webapp/app/layouts/navbar/navbar.component.ts b/src/main/webapp/app/layouts/navbar/navbar.component.ts index e3e6494..d0375d7 100644 --- a/src/main/webapp/app/layouts/navbar/navbar.component.ts +++ b/src/main/webapp/app/layouts/navbar/navbar.component.ts @@ -1,14 +1,14 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { TranslateService } from '@ngx-translate/core'; -import { SessionStorageService } from 'ngx-webstorage'; +import { Component, OnInit, Renderer2, ViewChild, ElementRef, Directive } from '@angular/core'; +// import { ROUTES } from '../.././sidebar/sidebar.component'; +import { Router, ActivatedRoute, NavigationEnd, NavigationStart } from '@angular/router'; +import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common'; +import { Subscription } from 'rxjs'; -import { VERSION } from 'app/app.constants'; -import { LANGUAGES } from 'app/config/language.constants'; -import { Account } from 'app/core/auth/account.model'; -import { AccountService } from 'app/core/auth/account.service'; -import { LoginService } from 'app/login/login.service'; -import { ProfileService } from 'app/layouts/profiles/profile.service'; +var misc: any = { + navbar_menu_visible: 0, + active_collapse: true, + disabled_collapse_init: 0, +}; @Component({ selector: 'jhi-navbar', @@ -16,54 +16,130 @@ import { ProfileService } from 'app/layouts/profiles/profile.service'; styleUrls: ['./navbar.component.scss'], }) export class NavbarComponent implements OnInit { - inProduction?: boolean; - isNavbarCollapsed = true; - languages = LANGUAGES; - openAPIEnabled?: boolean; - version = ''; - account: Account | null = null; + private listTitles: any[] = []; + location: Location; + private nativeElement: Node; + private toggleButton: any; + private sidebarVisible: boolean; + // private _router: Subscription; + public open: boolean = false; - constructor( - private loginService: LoginService, - private translateService: TranslateService, - private sessionStorageService: SessionStorageService, - private accountService: AccountService, - private profileService: ProfileService, - private router: Router - ) { - if (VERSION) { - this.version = VERSION.toLowerCase().startsWith('v') ? VERSION : 'v' + VERSION; + @ViewChild('jhi-navbar', { static: false }) button: any; + + constructor(location: Location, private renderer: Renderer2, private element: ElementRef, private router: Router) { + this.location = location; + this.nativeElement = element.nativeElement; + this.sidebarVisible = false; + } + + ngOnInit() { + // this.listTitles = ROUTES.filter(listTitle => listTitle); + + const navbar: HTMLElement = this.element.nativeElement; + const body = document.getElementsByTagName('body')[0]; + this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0]; + if (body.classList.contains('sidebar-mini')) { + misc.sidebar_mini_active = true; + } + // this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => { + // const $layer = document.getElementsByClassName('close-layer')[0]; + // if ($layer) { + // $layer.remove(); + // } + // }); + } + + minimizeSidebar() { + const body = document.getElementsByTagName('body')[0]; + + if (misc.sidebar_mini_active === true) { + body.classList.remove('sidebar-mini'); + misc.sidebar_mini_active = false; + } else { + setTimeout(function () { + body.classList.add('sidebar-mini'); + + misc.sidebar_mini_active = true; + }, 300); + } + + // we simulate the window Resize so the charts will get updated in realtime. + const simulateWindowResize = setInterval(function () { + window.dispatchEvent(new Event('resize')); + }, 180); + + // we stop the simulation of Window Resize after the animations are completed + setTimeout(function () { + clearInterval(simulateWindowResize); + }, 1000); + } + + isMobileMenu() { + if (window.outerWidth < 991) { + return false; + } + return true; + } + + sidebarOpen() { + var toggleButton = this.toggleButton; + var html = document.getElementsByTagName('html')[0]; + setTimeout(function () { + toggleButton.classList.add('toggled'); + }, 500); + const mainPanel = document.getElementsByClassName('main-panel')[0]; + if (window.innerWidth < 991) { + mainPanel.style.position = 'fixed'; + } + html.classList.add('nav-open'); + this.sidebarVisible = true; + } + sidebarClose() { + var html = document.getElementsByTagName('html')[0]; + this.toggleButton.classList.remove('toggled'); + this.sidebarVisible = false; + html.classList.remove('nav-open'); + const mainPanel = document.getElementsByClassName('main-panel')[0]; + + if (window.innerWidth < 991) { + setTimeout(function () { + mainPanel.style.position = ''; + }, 500); + } + } + sidebarToggle() { + // var toggleButton = this.toggleButton; + // var body = document.getElementsByTagName('body')[0]; + if (this.sidebarVisible == false) { + this.sidebarOpen(); + } else { + this.sidebarClose(); } } - ngOnInit(): void { - this.profileService.getProfileInfo().subscribe(profileInfo => { - this.inProduction = profileInfo.inProduction; - this.openAPIEnabled = profileInfo.openAPIEnabled; - }); - this.accountService.getAuthenticationState().subscribe(account => (this.account = account)); + getTitle() { + var titlee = this.location.prepareExternalUrl(this.location.path()); + if (titlee.charAt(0) === '#') { + titlee = titlee.slice(1); + } + for (var item = 0; item < this.listTitles.length; item++) { + var parent = this.listTitles[item]; + if (parent.path === titlee) { + return parent.title; + } else if (parent.children) { + var children_from_url = titlee.split('/')[2]; + for (var current = 0; current < parent.children.length; current++) { + if (parent.children[current].path === children_from_url) { + return parent.children[current].title; + } + } + } + } + return 'Dashboard'; } - changeLanguage(languageKey: string): void { - this.sessionStorageService.store('locale', languageKey); - this.translateService.use(languageKey); - } - - collapseNavbar(): void { - this.isNavbarCollapsed = true; - } - - login(): void { - this.router.navigate(['/login']); - } - - logout(): void { - this.collapseNavbar(); - this.loginService.logout(); - this.router.navigate(['']); - } - - toggleNavbar(): void { - this.isNavbarCollapsed = !this.isNavbarCollapsed; + getPath() { + // console.log(this.location); + return this.location.prepareExternalUrl(this.location.path()); } } diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.component.html b/src/main/webapp/app/layouts/sidebar/sidebar.component.html index 52a8ffc..98c662b 100644 --- a/src/main/webapp/app/layouts/sidebar/sidebar.component.html +++ b/src/main/webapp/app/layouts/sidebar/sidebar.component.html @@ -1 +1,115 @@ -

sidebar works!

+ + +
+
+
+ +
+
+ +
+
+
+ + + + + + + + + +
diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.component.ts b/src/main/webapp/app/layouts/sidebar/sidebar.component.ts index 078b9f4..9e92fc2 100644 --- a/src/main/webapp/app/layouts/sidebar/sidebar.component.ts +++ b/src/main/webapp/app/layouts/sidebar/sidebar.component.ts @@ -1,12 +1,81 @@ -import { Component, OnInit } from '@angular/core'; +import { userManagementRoute } from './../../admin/user-management/user-management.route'; +import { Component, OnInit, AfterViewInit, AfterViewChecked, AfterContentInit } from '@angular/core'; +import { RouteInfo, ADMIN_ROUTES, USER_ROUTES } from './sidebar.constants'; +import { VERSION } from 'app/app.constants'; +import { Account } from 'app/core/auth/account.model'; +import { AccountService } from 'app/core/auth/account.service'; +import { LoginService } from 'app/login/login.service'; +import { ProfileService } from 'app/layouts/profiles/profile.service'; +import { SessionStorageService } from 'ngx-webstorage'; +import { Router } from '@angular/router'; @Component({ selector: 'jhi-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'], }) -export class SidebarComponent implements OnInit { - constructor() {} +export class SidebarComponent { + public menuAdmin: RouteInfo[] = ADMIN_ROUTES; + public menuUser: RouteInfo[] = USER_ROUTES; - ngOnInit(): void {} + inProduction?: boolean; + isNavbarCollapsed = true; + openAPIEnabled?: boolean; + version = ''; + account: Account | null = null; + + constructor( + private loginService: LoginService, + private sessionStorageService: SessionStorageService, + private accountService: AccountService, + private profileService: ProfileService, + private router: Router + ) { + if (VERSION) { + this.version = VERSION.toLowerCase().startsWith('v') ? VERSION : 'v' + VERSION; + } + } + + isNotMobileMenu() { + if (window.outerWidth > 991) { + return false; + } + return true; + } + + ngOnInit(): void { + this.profileService.getProfileInfo().subscribe(profileInfo => { + this.inProduction = profileInfo.inProduction; + this.openAPIEnabled = profileInfo.openAPIEnabled; + }); + this.accountService.getAuthenticationState().subscribe(account => (this.account = account)); + } + + ngAfterViewInit() {} + + isAdmin(): boolean { + return this.accountService.hasAnyAuthority('ROLE_ADMIN'); + } + + isAuthenticated(): boolean { + return this.accountService.isAuthenticated(); + } + + collapseNavbar(): void { + this.isNavbarCollapsed = true; + } + + login(): void { + this.router.navigate(['/login']); + } + + logout(): void { + this.collapseNavbar(); + this.loginService.logout(); + this.router.navigate(['']); + } + + toggleNavbar(): void { + this.isNavbarCollapsed = !this.isNavbarCollapsed; + } } diff --git a/src/main/webapp/app/layouts/sidebar/sidebar.constants.ts b/src/main/webapp/app/layouts/sidebar/sidebar.constants.ts new file mode 100644 index 0000000..7f8807d --- /dev/null +++ b/src/main/webapp/app/layouts/sidebar/sidebar.constants.ts @@ -0,0 +1,82 @@ +export interface RouteInfo { + path: string; + title: string; + type: string; + collapse?: string; + icontype: string; + // icon: string; + children?: ChildrenItems[]; +} + +export interface ChildrenItems { + path: string; + title: string; + ab: string; + type?: string; +} + +export const ADMIN_ROUTES: RouteInfo[] = [ + { + path: '/dashboard', + title: 'Dashboard', + type: 'link', + icontype: 'nc-icon nc-chart-bar-32', + }, + { + path: '/encuesta', + title: 'Encuestas', + type: 'link', + icontype: 'nc-icon nc-paper', + }, + { + path: '/plantilla', + title: 'Plantillas', + type: 'link', + icontype: 'nc-icon nc-album-2', + }, + { + path: '/categoria', + title: 'Categorías', + type: 'link', + icontype: 'nc-icon nc-tag-content', + }, + { + path: '/usuario-extra', + title: 'Usuarios', + type: 'link', + icontype: 'nc-icon nc-single-02', + }, + { + path: '/parametro-aplicacion', + title: 'Configuración', + type: 'link', + icontype: 'nc-icon nc-settings-gear-65', + }, +]; + +export const USER_ROUTES: RouteInfo[] = [ + { + path: '/encuesta', + title: 'Encuestas', + type: 'link', + icontype: 'nc-icon nc-paper', + }, + { + path: '/tienda', + title: 'Tienda', + type: 'link', + icontype: 'nc-icon nc-cart-simple', + }, + { + path: '/plantilla', + title: 'Plantillas', + type: 'link', + icontype: 'nc-icon nc-album-2', + }, + { + path: '/colaboraciones', + title: 'Colaboraciones', + type: 'link', + icontype: 'nc-icon nc-world-2', + }, +];