eduardo
/
datasurvey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add sidebar and update navbar

This commit is contained in:
Pablo Bonilla 2021-07-03 19:33:58 -06:00
parent 4e89e68989
commit 99f8157722
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
11 changed files with 506 additions and 493 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/webapp/app/app.module.ts
View File

@ -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 {

26
src/main/webapp/app/layouts/main/main.component.html
View File

@ -1,13 +1,21 @@
<jhi-page-ribbon></jhi-page-ribbon>
<div>
<router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
<div class="card jh-card">
<!-- Guest (not logged in) -->
<ng-template [ngIf]="!isAuthenticated()" [ngIfElse]="authenticated">
<div class="" style="overflow-x: hidden">
<router-outlet></router-outlet>
</div>
</ng-template>
<jhi-footer></jhi-footer>
<!-- Authenticated (logged in) -->
<ng-template #authenticated>
<div class="wrapper">
<div class="sidebar" data-color="brown" data-active-color="yellow">
<jhi-sidebar></jhi-sidebar>
</div>
<div class="main-panel" style="overflow-x: hidden">
<jhi-navbar></jhi-navbar>
<div class="p-5">
<router-outlet></router-outlet>
</div>
</div>
</div>
</ng-template>

4
src/main/webapp/app/layouts/main/main.component.scss Normal file
View File

@ -0,0 +1,4 @@
.sidebar:after,
.off-canvas-sidebar:after {
background: #0f172a;
}

9
src/main/webapp/app/layouts/main/main.component.ts
View File

@ -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();
}
}

27
src/main/webapp/app/layouts/navbar/active-menu.directive.ts
View File

@ -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');
}
}
}

404
src/main/webapp/app/layouts/navbar/navbar.component.html
View File

@ -1,352 +1,74 @@
<nav data-cy="navbar" class="navbar navbar-dark navbar-expand-md bg-dark">
<a class="navbar-brand logo" routerLink="/" (click)="collapseNavbar()">
<span class="logo-img"></span>
<span jhiTranslate="global.title" class="navbar-title">DataSurvey</span>
<span class="navbar-version">{{ version }}</span>
</a>
<a
class="navbar-toggler d-lg-none"
href="javascript:void(0);"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
(click)="toggleNavbar()"
<nav #navbar class="navbar navbar-expand-lg navbar-absolute">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-minimize">
<button
id="minimizeSidebar"
class="btn btn-icon btn-round test"
(click)="minimizeSidebar()"
style="background-color: transparent !important"
>
<fa-icon icon="bars"></fa-icon>
</a>
<div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="account !== null">
<ul class="navbar-nav ml-auto">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a class="nav-link" routerLink="/" (click)="collapseNavbar()">
<span>
<fa-icon icon="home"></fa-icon>
<span jhiTranslate="global.menu.home">Home</span>
</span>
</a>
</li>
<!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
<li
*ngSwitchCase="true"
ngbDropdown
class="nav-item dropdown pointer"
display="dynamic"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
<i class="nc-icon nc-minimal-right text-center visible-on-sidebar-mini" style="color: #64748b !important; font-weight: 900"></i>
<i class="nc-icon nc-minimal-left text-center visible-on-sidebar-regular" style="color: #64748b !important; font-weight: 900"></i>
</button>
</div>
<div class="navbar-toggle" (click)="sidebarToggle()">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="javascript:void(0)"></a>
</div>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation"
>
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
<span>
<fa-icon icon="th-list"></fa-icon>
<span jhiTranslate="global.menu.entities.main">Entities</span>
</span>
</a>
<ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
<li>
<a
class="dropdown-item"
routerLink="parametro-aplicacion"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.parametroAplicacion">Parametro Aplicacion</span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button> -->
<!-- <div class="collapse navbar-collapse justify-content-end" id="navigation">
<form>
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<div class="input-group-append">
<div class="input-group-text">
<i class="nc-icon nc-zoom-split"></i>
</div>
</div>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link btn-magnify" href="javascript:void(0)">
<i class="nc-icon nc-layout-11"></i>
<p>
<span class="d-lg-none d-md-block">Stats</span>
</p>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="usuario-extra"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.usuarioExtra">Usuario Extra</span>
<li class="nav-item btn-rotate dropdown">
<a class="nav-link dropdown-toggle" href="pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="nc-icon nc-bell-55"></i>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</li>
<li>
<a
class="dropdown-item"
routerLink="encuesta"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.encuesta">Encuesta</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="e-pregunta-abierta"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.ePreguntaAbierta">E Pregunta Abierta</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="e-pregunta-abierta-respuesta"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.ePreguntaAbiertaRespuesta">E Pregunta Abierta Respuesta</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="e-pregunta-cerrada"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.ePreguntaCerrada">E Pregunta Cerrada</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="e-pregunta-cerrada-opcion"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.ePreguntaCerradaOpcion">E Pregunta Cerrada Opcion</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="usuario-encuesta"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.usuarioEncuesta">Usuario Encuesta</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="categoria"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.categoria">Categoria</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="factura"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.factura">Factura</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="plantilla"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.plantilla">Plantilla</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="p-pregunta-abierta"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.pPreguntaAbierta">P Pregunta Abierta</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="p-pregunta-cerrada"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.pPreguntaCerrada">P Pregunta Cerrada</span>
</a>
</li>
<li>
<a
class="dropdown-item"
routerLink="p-pregunta-cerrada-opcion"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
(click)="collapseNavbar()"
>
<fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.entities.pPreguntaCerradaOpcion">P Pregunta Cerrada Opcion</span>
</a>
</li>
<!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
</ul>
</li>
<li
*jhiHasAnyAuthority="'ROLE_ADMIN'"
ngbDropdown
class="nav-item dropdown pointer"
display="dynamic"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="admin-menu" data-cy="adminMenu">
<span>
<fa-icon icon="users-cog"></fa-icon>
<span jhiTranslate="global.menu.admin.main">Administration</span>
</span>
</a>
<ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="admin-menu">
<li>
<a class="dropdown-item" routerLink="admin/user-management" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="users" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.admin.userManagement">User management</span>
</a>
</li>
<li>
<a class="dropdown-item" routerLink="admin/tracker" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="eye" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.admin.tracker">User tracker</span>
</a>
</li>
<li>
<a class="dropdown-item" routerLink="admin/metrics" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="tachometer-alt" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.admin.metrics">Metrics</span>
</a>
</li>
<li>
<a class="dropdown-item" routerLink="admin/health" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="heart" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.admin.health">Health</span>
</a>
</li>
<li>
<a class="dropdown-item" routerLink="admin/configuration" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="cogs" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.admin.configuration">Configuration</span>
</a>
</li>
<li>
<a class="dropdown-item" routerLink="admin/logs" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="tasks" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.admin.logs">Logs</span>
</a>
</li>
<li *ngIf="openAPIEnabled">
<a class="dropdown-item" routerLink="admin/docs" routerLinkActive="active" (click)="collapseNavbar()">
<fa-icon icon="book" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.admin.apidocs">API</span>
</a>
</li>
<!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
</ul>
</li>
<li ngbDropdown class="nav-item dropdown pointer" display="dynamic" *ngIf="languages && languages.length > 1">
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown">
<span>
<fa-icon icon="flag"></fa-icon>
<span jhiTranslate="global.menu.language">Language</span>
</span>
</a>
<ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="languagesnavBarDropdown">
<li *ngFor="let language of languages">
<a
class="dropdown-item"
[jhiActiveMenu]="language"
href="javascript:void(0);"
(click)="changeLanguage(language); collapseNavbar()"
>{{ language | findLanguageFromKey }}</a
>
</li>
</ul>
</li>
<li
ngbDropdown
class="nav-item dropdown pointer"
display="dynamic"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu" data-cy="accountMenu">
<span *ngIf="!account?.imageUrl">
<fa-icon icon="user"></fa-icon>
<span jhiTranslate="global.menu.account.main">Account</span>
</span>
<span *ngIf="account?.imageUrl">
<img [src]="account!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
</span>
</a>
<ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="account-menu">
<li *ngSwitchCase="true">
<a class="dropdown-item" routerLink="account/settings" routerLinkActive="active" (click)="collapseNavbar()" data-cy="settings">
<fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.settings">Settings</span>
</a>
</li>
<li *ngSwitchCase="true">
<a
class="dropdown-item"
routerLink="account/password"
routerLinkActive="active"
(click)="collapseNavbar()"
data-cy="passwordItem"
>
<fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.password">Password</span>
</a>
</li>
<li *ngSwitchCase="true">
<a class="dropdown-item" (click)="logout()" id="logout" data-cy="logout">
<fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.logout">Sign out</span>
</a>
</li>
<li *ngSwitchCase="false">
<a class="dropdown-item" (click)="login()" id="login" data-cy="login">
<fa-icon icon="sign-in-alt" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.login">Sign in</span>
</a>
</li>
<li *ngSwitchCase="false">
<a class="dropdown-item" routerLink="account/register" routerLinkActive="active" (click)="collapseNavbar()" data-cy="register">
<fa-icon icon="user-plus" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.register">Register</span>
<li class="nav-item">
<a class="nav-link btn-rotate" href="javascript:void(0)">
<i class="nc-icon nc-settings-gear-65"></i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</li>
</ul>
</div> -->
</div>
</nav>

43
src/main/webapp/app/layouts/navbar/navbar.component.scss
View File

@ -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;
}

182
src/main/webapp/app/layouts/navbar/navbar.component.ts
View File

@ -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 = <HTMLElement>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 = <HTMLElement>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());
}
}

116
src/main/webapp/app/layouts/sidebar/sidebar.component.html
View File

@ -1 +1,115 @@
<p>sidebar works!</p>
<div class="logo">
<a routerLink="/" class="simple-text">
<div class="logo-image-small">
<img src="../../../content/img_datasurvey/datasurvey-logo-text.svg" />
</div>
</a>
</div>
<div class="sidebar-wrapper">
<div class="user" routerLink="/account/settings">
<div class="photo mb-2">
<img src="../../../content/profile_icons/C2.png" />
</div>
<div class="info">
<a data-toggle="collapse" class="collapsed">
<span>
Pablo Bonilla
<!-- <b class="caret"></b> -->
</span>
</a>
<div class="clearfix"></div>
</div>
</div>
<!-- <div *ngIf="isNotMobileMenu()">
<form class="navbar-form navbar-left navbar-search-form" role="search">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input type="text" value="" class="form-control" placeholder="Search...">
</div>
</form>
<ul class="nav nav-mobile-menu">
<li>
<a href="#stats" class="dropdown-toggle btn-magnify" data-toggle="dropdown">
<i class="ti-panel"></i>
<p>Stats</p>
</a>
</li>
<li class="dropdown">
<a href="#notifications" class="dropdown-toggle btn-rotate" data-toggle="dropdown">
<i class="ti-bell"></i>
<span class="notification">5</span>
<p class="hidden-md hidden-lg">
Notifications
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li><a href="#not1">Notification 1</a></li>
<li><a href="#not2">Notification 2</a></li>
<li><a href="#not3">Notification 3</a></li>
<li><a href="#not4">Notification 4</a></li>
<li><a href="#another">Another notification</a></li>
</ul>
</li>
<li>
<a class="btn-rotate">
<i class="ti-settings"></i>
<p class="hidden-md hidden-lg">
Settings
</p>
</a>
</li>
</ul>
</div> -->
<!-- Admin Navigation -->
<ul class="nav" *ngIf="isAdmin() && isAuthenticated()">
<li routerLinkActive="active" *ngFor="let menuitem of menuAdmin">
<!--If is a single link-->
<a [routerLink]="[menuitem.path]" *ngIf="menuitem.type === 'link'">
<i class="{{ menuitem.icontype }}"></i>
<p>{{ menuitem.title }}</p>
</a>
</li>
<!-- Logout -->
<li class="position-absolute fixed-bottom w-100 mb-5">
<a (click)="logout()" class="p-3 w-100 m-0 text-center">
<!-- <i class="nc-icon nc-user-run"></i> -->
<p style="letter-spacing: 0.3rem">Cerrar Sesion</p>
</a>
</li>
<li class="position-absolute fixed-bottom w-100 mb-5" style="bottom: -4rem">
<a class="p-3 w-100 m-0 text-center">
<p style="letter-spacing: 0.1rem; font-size: 0.6rem; font-weight: 400">© 2021 DataSurvey</p>
</a>
</li>
</ul>
<!-- Copyright © DataSurvey por Quantum 2021 -->
<!-- User Navigation -->
<ul class="nav" *ngIf="!isAdmin() && isAuthenticated()">
<li routerLinkActive="active" *ngFor="let menuitem of menuUser">
<!--If is a single link-->
<a [routerLink]="[menuitem.path]" *ngIf="menuitem.type === 'link'">
<i class="{{ menuitem.icontype }}"></i>
<p>{{ menuitem.title }}</p>
</a>
</li>
<!-- Logout -->
<li class="position-absolute fixed-bottom w-100 mb-5">
<a (click)="logout()" class="p-3 w-100 m-0 text-center">
<!-- <i class="nc-icon nc-user-run"></i> -->
<p style="letter-spacing: 0.3rem">Cerrar Sesion</p>
</a>
</li>
<li class="position-absolute fixed-bottom w-100 mb-5" style="bottom: -4rem">
<a class="p-3 w-100 m-0 text-center">
<p style="letter-spacing: 0.1rem; font-size: 0.6rem; font-weight: 400">© 2021 DataSurvey</p>
</a>
</li>
</ul>
</div>

77
src/main/webapp/app/layouts/sidebar/sidebar.component.ts
View File

@ -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;
}
}

82
src/main/webapp/app/layouts/sidebar/sidebar.constants.ts Normal file
View File

@ -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',
},
];