Add sidebar and update navbar
This commit is contained in:
Pablo Bonilla
parent
4e89e68989
commit
99f8157722
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.sidebar:after,
|
||||
.off-canvas-sidebar:after {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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()"
|
||||
>
|
||||
<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 }"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
</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>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<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 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 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>
|
||||
</div> -->
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue