Skip to content

Commit

Permalink
Sub-menu navigation primefaces#318
Browse files Browse the repository at this point in the history
  • Loading branch information
@atretyak1985
atretyak1985 committed Nov 22, 2019
1 parent c174fd5 commit 7c0ee00
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 56 deletions.
5 changes: 4 additions & 1 deletion src/assets/less/bootstrap/navbar.less
View file
Expand Up @@ -195,6 +195,7 @@
position: relative;
float: right;
margin-right: @navbar-padding-horizontal;
margin-left: @navbar-padding-horizontal;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
Expand Down Expand Up @@ -323,7 +324,9 @@


// Dropdown menus

.dropdown:hover .dropdown-menu {
display: block;
}
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/assets/less/side-filter.less
View file
Expand Up @@ -40,7 +40,7 @@
border-right: 1px solid #5e5f60;
border-bottom: 1px solid #5e5f60;
border-top: 1px solid #5e5f60;
z-index: 1031;
z-index: 1029;
padding: 10px;
text-transform: uppercase;
font-weight: 600;
Expand Down
64 changes: 37 additions & 27 deletions src/organization/orgnavigator.component.html
View file
Expand Up @@ -3,7 +3,7 @@
<div class="row" (mouseleave)="showBreadcrumbs()">
<div class="col-xs-12">
<div class="navbar-header">
<a class="navbar-brand" [routerLink]='[getRoutePath("/compliance_report")]' (mouseenter)="mouseEnterLogoStream.emit($event)" (mouseleave)="mouseExitLogoStream.emit($event)">
<a class="navbar-brand" [routerLink]='[getRoutePath(CONFIGURATIONS_PATH)]' (mouseenter)="mouseEnterLogoStream.emit($event)" (mouseleave)="mouseExitLogoStream.emit($event)">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.3 44.58">
<title>Nanitor</title>
<path class="cls-1" d="M56.88,13a9.79,9.79,0,0,1,1.75-.17,10.6,10.6,0,0,1,1.84.17l8.23,12.72V13a13.24,13.24,0,0,1,2-.17,9.31,9.31,0,0,1,1.78.17V33a10,10,0,0,1-1.72.17A10.8,10.8,0,0,1,69,33L60.7,20.32V33a11.09,11.09,0,0,1-1.92.17A10.59,10.59,0,0,1,56.88,33V13Z"/>
Expand Down Expand Up @@ -36,49 +36,59 @@
</ul>
<nav *ngIf="!expiredLicense && mainNavbarEnabled" id="mobile-nav" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left main-nav">
<li [class.active]="isRouteActive('/compliance_report')"><a href="" [routerLink]='[getRoutePath("/compliance_report")]'>Configurations</a><span class="runner"></span></li>
<ng-container *ngIf="!isSmallScreen()">
<li class="dropdown" [class.active]="isRouteActive(CONFIGURATIONS_PATH) || isRouteActive(TRENDS_PATH) || isRouteActive(CHANGES_PATH)">
<a #dropDownToggle class="dropdown-toggle" data-toggle="dropdown" href="" [routerLink]='[getRoutePath(dropDownToggleHeaderPath)]'>
{{ dropDownToggleHeaderName }}
<span class="caret"></span>
</a>
<span class="runner"></span>
<ul class="dropdown-menu" style="margin-top: -20px;">
<li *ngIf="dropDownToggleHeaderName !== CONFIGURATIONS_NAME"><a href="" [routerLink]='[getRoutePath(CONFIGURATIONS_PATH)]' (click)="setDropDownNameAndPath()">{{ CONFIGURATIONS_NAME }}</a></li>
<li *ngIf="dropDownToggleHeaderName !== TRENDS_NAME"><a href="" [routerLink]='[getRoutePath(TRENDS_PATH)]' (click)="setDropDownNameAndPath()">{{ TRENDS_NAME }}</a></li>
<li *ngIf="dropDownToggleHeaderName !== CHANGES_NAME"><a href="" [routerLink]='[getRoutePath(CHANGES_PATH)]' (click)="setDropDownNameAndPath()">{{ CHANGES_NAME }}</a></li>
</ul>
</li>
</ng-container>
<ng-container *ngIf="isSmallScreen()">
<li [class.active]="isRouteActive('/compliance_report')"><a href="" [routerLink]='[getRoutePath("/compliance_report")]'>Configurations</a><span class="runner"></span></li>
<li [class.active]="isRouteActive('/dashboard')"><a href="" [routerLink]='[getRoutePath("/dashboard")]'>Trends</a><span class="runner"></span></li>
<li [class.active]="isRouteActive('/change')"><a [routerLink]='[getRoutePath("/change")]'>Changes</a><span class="runner"></span></li>
</ng-container>
<li *ngIf="vulnerabilityEnabled" [class.active]="isRouteActive('/vulnerability')"><a href="" [routerLink]='[getRoutePath("/vulnerability")]'>Vulnerabilities</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1130) || isSmallScreen()" [class.active]="isRouteActive('/defences')"><a href="" [routerLink]='[getRoutePath("/defences")]'>Defences</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1210) || isSmallScreen()" [class.active]="isRouteActive('/loggedinusers')"><a [routerLink]='[getRoutePath("/loggedinusers")]'>Users</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1290) || isSmallScreen()" [class.active]="isRouteActive('/device')"><a href="" [routerLink]='[getRoutePath("/device")]'>Devices</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1420) || isSmallScreen()" [class.active]="isRouteActive('/intelligence')"><a [routerLink]='[getRoutePath("/intelligence")]'>Intelligence</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1530) || isSmallScreen()" [class.active]="isRouteActive('/incident')"><a href="" [routerLink]='[getRoutePath("/incident")]'>Incidents</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1600) || isSmallScreen()" [class.active]="isRouteActive('/dashboard')"><a href="" [routerLink]='[getRoutePath("/dashboard")]'>Trends</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1700) || isSmallScreen()" [class.active]="isRouteActive('/change')"><a [routerLink]='[getRoutePath("/change")]'>Changes</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1780) || isSmallScreen()" [class.active]="isRouteActive('/grouppolicy')"><a [routerLink]='[getRoutePath("/grouppolicy")]'>GPOs</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1840) || isSmallScreen()" [class.active]="isRouteActive('/software')"><a [routerLink]='[getRoutePath("/software")]'>Software</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1920) || isSmallScreen()" [class.active]="isRouteActive('/compliance_framework')"><a [routerLink]='[getRoutePath("/compliance_framework")]'>Compliance</a><span class="runner"></span></li>
<li *ngIf="!isScreenWidthMore(1920) && !isSmallScreen()" [class.active]="isDropdownRouteActive(['/change', '/grouppolicy', '/collector', '/software', '/compliance_framework'])"><span class="runner"></span>
<li *ngIf="isScreenWidthMore(1200) || isSmallScreen()" [class.active]="isRouteActive('/defences')"><a href="" [routerLink]='[getRoutePath("/defences")]'>Defences</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1310) || isSmallScreen()" [class.active]="isRouteActive('/loggedinusers')"><a [routerLink]='[getRoutePath("/loggedinusers")]'>Users</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1390) || isSmallScreen()" [class.active]="isRouteActive('/device')"><a href="" [routerLink]='[getRoutePath("/device")]'>Devices</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1570) || isSmallScreen()" [class.active]="isRouteActive('/intelligence')"><a [routerLink]='[getRoutePath("/intelligence")]'>Intelligence</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1610) || isSmallScreen()" [class.active]="isRouteActive('/incident')"><a href="" [routerLink]='[getRoutePath("/incident")]'>Incidents</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1690) || isSmallScreen()" [class.active]="isRouteActive('/grouppolicy')"><a [routerLink]='[getRoutePath("/grouppolicy")]'>GPOs</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1800) || isSmallScreen()" [class.active]="isRouteActive('/software')"><a [routerLink]='[getRoutePath("/software")]'>Software</a><span class="runner"></span></li>
<li *ngIf="isScreenWidthMore(1890) || isSmallScreen()" [class.active]="isRouteActive('/compliance_framework')"><a [routerLink]='[getRoutePath("/compliance_framework")]'>Compliance</a><span class="runner"></span></li>
<li *ngIf="!isScreenWidthMore(1890) && !isSmallScreen()" [class.active]="isDropdownRouteActive()"><span class="runner"></span>
<a data-toggle="dropdown" class="ellipsis">...</a>
<ul class="dropdown-menu">
<li *ngIf="!isScreenWidthMore(1130)" [class.active]="isRouteActive('/defences')">
<li *ngIf="!isScreenWidthMore(1200)" [class.active]="isRouteActive('/defences')">
<a [routerLink]='[getRoutePath("/defences")]'>Defences</a>
</li>
<li *ngIf="!isScreenWidthMore(1210)" [class.active]="isRouteActive('/loggedinusers')">
<li *ngIf="!isScreenWidthMore(1310)" [class.active]="isRouteActive('/loggedinusers')">
<a [routerLink]='[getRoutePath("/loggedinusers")]'>Users</a>
</li>
<li *ngIf="!isScreenWidthMore(1290)" [class.active]="isRouteActive('/device')">
<li *ngIf="!isScreenWidthMore(1390)" [class.active]="isRouteActive('/device')">
<a [routerLink]='[getRoutePath("/device")]'>Devices</a>
</li>
<li *ngIf="!isScreenWidthMore(1420)" [class.active]="isRouteActive('/intelligence')">
<li *ngIf="!isScreenWidthMore(1570)" [class.active]="isRouteActive('/intelligence')">
<a [routerLink]='[getRoutePath("/intelligence")]'>Intelligence</a>
</li>
<li *ngIf="!isScreenWidthMore(1530)" [class.active]="isRouteActive('/incident')">
<li *ngIf="!isScreenWidthMore(1610)" [class.active]="isRouteActive('/incident')">
<a [routerLink]='[getRoutePath("/incident")]'>Incidents</a>
</li>
<li *ngIf="!isScreenWidthMore(1600)" [class.active]="isRouteActive('/dashboard')">
<a [routerLink]='[getRoutePath("/dashboard")]'>Trends</a>
</li>
<li *ngIf="!isScreenWidthMore(1700)" [class.active]="isRouteActive('/change')">
<a [routerLink]='[getRoutePath("/change")]'>Changes</a>
</li>
<li *ngIf="!isScreenWidthMore(1780)" [class.active]="isRouteActive('/grouppolicy')">
<li *ngIf="!isScreenWidthMore(1690)" [class.active]="isRouteActive('/grouppolicy')">
<a [routerLink]='[getRoutePath("/grouppolicy")]'>GPOs</a>
</li>
<li *ngIf="!isScreenWidthMore(1840)" [class.active]="isRouteActive('/software')">
<li *ngIf="!isScreenWidthMore(1800)" [class.active]="isRouteActive('/software')">
<a [routerLink]='[getRoutePath("/software")]'>Software</a>
</li>
<li *ngIf="!isScreenWidthMore(1920)" [class.active]="isRouteActive('/compliance_framework')">
<li *ngIf="!isScreenWidthMore(1890)" [class.active]="isRouteActive('/compliance_framework')">
<a [routerLink]='[getRoutePath("/compliance_framework")]'>Compliance</a>
</li>
</ul>
Expand Down
91 changes: 64 additions & 27 deletions src/organization/orgnavigator.component.ts
View file
Expand Up @@ -10,6 +10,7 @@ import { Subscription, Observable } from 'rxjs';
import { CustomReuseStrategyService } from '../custom-reuse-strategy.service';
import { takeUntil, delay } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import { Organization, User } from 'account/profile_info';


@Component({
Expand All @@ -19,28 +20,47 @@ import 'rxjs/add/operator/map';

export class OrgNavigatorComponent {
@Input() mainNavbarEnabled: boolean;

@ViewChild(ChangePasswordDialogComponent, { static: true }) changePasswordDialog: ProfileUpdateDialogComponent;
@ViewChild(ProfileUpdateDialogComponent, { static: true }) profileUpdateDialog: ProfileUpdateDialogComponent;
@ViewChild(CreateOrganizationDialogComponent, { static: true }) createOrganizationDialog: CreateOrganizationDialogComponent;
@ViewChild(MenuRunnerComponent, { static: true }) menuRunner: MenuRunnerComponent;

private validLicense = false;
private vulnerabilityEnabled = false;
public expiredLicense = false;
public displayLicenseTooltip = false;
private licenseTooltip = '';
private breadcrumbsEnabled = false;
private routeReusedSubsctiption: Subscription;
private mainNavCollapsed: boolean = false;

public mouseEnterLogoStream: EventEmitter<any> = new EventEmitter();
public mouseExitLogoStream: EventEmitter<any> = new EventEmitter();

constructor(private accountService: AccountService, private router: Router, private location: Location, private customReuseStrategyService: CustomReuseStrategyService) {
}
public TRENDS_NAME: string = 'Trends';
public TRENDS_PATH: string = '/dashboard';
public CHANGES_NAME: string = 'Changes';
public CHANGES_PATH: string = '/change';
public CONFIGURATIONS_NAME: string = 'Configurations';
public CONFIGURATIONS_PATH: string = '/compliance_report';
public dropDownToggleHeaderName: string;
public dropDownToggleHeaderPath: string;
public dropdownRouteActiveItem: Array<{ path: string; width: number }> = [
{ path: '/defences', width: 1200 },
{ path: '/loggedinusers', width: 1310 },
{ path: '/device', width: 1390 },
{ path: '/intelligence', width: 1570 },
{ path: '/incident', width: 1610 },
{ path: '/grouppolicy', width: 1690 },
{ path: '/software', width: 1800 },
{ path: '/compliance_framework', width: 1890 }
];

constructor(
private accountService: AccountService,
private router: Router,
private location: Location,
private customReuseStrategyService: CustomReuseStrategyService
) { }

ngOnInit() {
this.setDropDownNameAndPath();
if (this.mainNavbarEnabled == undefined) {
this.mainNavbarEnabled = true;
}
Expand Down Expand Up @@ -82,41 +102,40 @@ export class OrgNavigatorComponent {
this.router.navigateByUrl('/account/signin');
}

showOrganizationMenu() {
showOrganizationMenu(): boolean {
return this.accountService.showOrganizationMenu();
}

getUserInfo() {
getUserInfo(): User {
return this.accountService.getUserInfo();
}

getMenuOrganizations() {
getMenuOrganizations(): Organization[] {
return this.accountService.getMenuOrganizations();
}

getUserOrganizations() {
getUserOrganizations(): Organization[] {
return this.accountService.getUserOrganizations();
}

getCurrentOrganization() {
getCurrentOrganization(): Organization {
return this.accountService.getCurrentOrganization();
}

getCurrentOrganizationId() {
getCurrentOrganizationId(): number {
return this.accountService.getOrganizationId();
}

showAdminMenu() {
showAdminMenu(): boolean {
return this.accountService.showAdminMenu();
}

isCurrentOrgAdmin() {
isCurrentOrgAdmin(): boolean {
return this.accountService.isCurrentOrgAdmin();
}

switchOrganization(event, newOrganizationId: number) {
event.preventDefault();

let url = `/container/${newOrganizationId}`;
this.router.navigateByUrl(url);
}
Expand All @@ -138,23 +157,27 @@ export class OrgNavigatorComponent {
}
}

getRoutePath(subPath) {
getRoutePath(subPath): string {
return this.accountService.navigateOrganization(subPath);
}

isRouteActive(subPath) {
isRouteActive(subPath): boolean {
let startUrl = this.accountService.navigateOrganization(subPath);
let currentUrl = this.location.path().split('?')[0];
return currentUrl === startUrl;
}

isDropdownRouteActive(subPaths) {
for (var path of subPaths) {
if (this.isRouteActive(path)) {
return true;
isDropdownRouteActive(): boolean {
let value: boolean = false;
let width = window.innerWidth;
for (let item of this.dropdownRouteActiveItem) {
if (this.isRouteActive(item.path) && width <= item.width) {
if (!value) {
value = true;
}
}
}
return false;
return value;
}

showProfile(e) {
Expand All @@ -175,21 +198,19 @@ export class OrgNavigatorComponent {
jQuery('#create-organization-dialog').modal('show');
}

getFullname() {
getFullname(): string {
let userInfo = this.getUserInfo();
if (!userInfo) {
return '';
}

return userInfo.fullname;
}

getCurrentOrganizationName() {
getCurrentOrganizationName(): string {
let organization = this.getCurrentOrganization();
if (!organization) {
return '';
}

return organization.organization_name;
}

Expand All @@ -200,4 +221,20 @@ export class OrgNavigatorComponent {
isSmallScreen(): boolean {
return window.innerWidth < 768;
}

setDropDownNameAndPath() {
const currentUrl = this.location.path().split('?')[0];
if (this.accountService.navigateOrganization(this.TRENDS_PATH) === currentUrl) {
this.dropDownToggleHeaderName = this.TRENDS_NAME;
this.dropDownToggleHeaderPath = this.TRENDS_PATH;
}
else if (this.accountService.navigateOrganization(this.CHANGES_PATH) === currentUrl) {
this.dropDownToggleHeaderName = this.CHANGES_NAME;
this.dropDownToggleHeaderPath = this.CHANGES_PATH;
}
else {
this.dropDownToggleHeaderName = this.CONFIGURATIONS_NAME;
this.dropDownToggleHeaderPath = this.CONFIGURATIONS_PATH;
}
}
}

0 comments on commit 7c0ee00

Please sign in to comment.