Outputs
|
scrolledToBottom
|
Type : EventEmitter<any>
|
|
|
HostListeners
|
document:mousemove
|
Arguments : '$event'
|
document:mousemove(e: any)
|
|
|
|
document:mouseup
|
Arguments : '$event'
|
document:mouseup(e: any)
|
|
|
Methods
|
Public
getSubPage
|
getSubPage()
|
|
|
|
|
|
Public
isMainRoute
|
isMainRoute(route: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| route |
string
|
No
|
|
|
isOverflown
|
isOverflown(element: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| element |
any
|
No
|
|
|
Public
navigateToViewer
|
navigateToViewer()
|
|
|
|
|
|
onMouseMove
|
onMouseMove(e: any)
|
Decorators :
@HostListener('document:mousemove', ['$event'])
|
|
|
Parameters :
| Name |
Type |
Optional |
| e |
any
|
No
|
|
|
onMouseUp
|
onMouseUp(e: any)
|
Decorators :
@HostListener('document:mouseup', ['$event'])
|
|
|
Parameters :
| Name |
Type |
Optional |
| e |
any
|
No
|
|
|
Public
onTreeScroll
|
onTreeScroll(event: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
any
|
No
|
|
|
Public
resizeEnd
|
resizeEnd()
|
|
|
|
|
|
Public
resizeStart
|
resizeStart()
|
|
|
|
|
|
Public
resizing
|
Type : boolean
|
Default value : false
|
|
|
|
Public
sasjsConfig
|
Type : SASjsConfig
|
Default value : new SASjsConfig()
|
|
|
|
Public
serverType
|
Type : string
|
|
|
|
Public
sidebarMaxWidth
|
Type : number | null
|
Default value : null
|
|
|
|
sidebarNav
|
Type : ElementRef
|
Decorators :
@ViewChild('sidebarNav')
|
|
|
|
Public
sidebarOpen
|
Type : boolean
|
Default value : true
|
|
|
|
Public
sidebarWidth
|
Type : number | null
|
Default value : null
|
|
|
import {
Component,
OnInit,
HostListener,
ViewChild,
ElementRef,
EventEmitter,
Output,
ViewEncapsulation
} from '@angular/core'
import { Router } from '@angular/router'
import { EventService } from '../../services/event.service'
import { SasService } from '../../services/sas.service'
import { SASjsConfig } from '@sasjs/adapter'
import { globals } from '../../_globals'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class SidebarComponent implements OnInit {
@ViewChild('sidebarNav') sidebarNav!: ElementRef
@Output() scrolledToBottom: EventEmitter<any> = new EventEmitter<any>()
public sidebarOpen: boolean = true
public sidebarWidth: number | null = null
public sidebarMaxWidth: number | null = null
public resizing: boolean = false
public sasjsConfig: SASjsConfig = new SASjsConfig()
public serverType: string
constructor(
private _router: Router,
private eventService: EventService,
private _sasService: SasService
) {
this.sasjsConfig = this._sasService.getSasjsConfig()
this.serverType = this._sasService.getServerType()
}
ngOnInit() {
this.eventService.onSidebarToggle.subscribe((res: any) => {
if (res) {
this.sidebarOpen = res['open']
} else {
this.sidebarOpen = !this.sidebarOpen
}
this.eventService.dispatchEvent('resize')
})
}
public onTreeScroll(event: any) {
let element = event.target
if (element.scrollTop >= element.scrollHeight - element.offsetHeight - 10) {
this.scrolledToBottom.emit()
}
}
public isMainRoute(route: string): boolean {
return this._router.url.includes(route)
}
public getSubPage() {
// `Router.url` carries the query string, so take the path segment only -
// otherwise any route with a parameter renders it as part of the label
// (a VA report embed always adds one, e.g. `?embed=va`).
let url = this._router.url.split('?')[0].split('/')
return url[2]
}
public navigateToViewer() {
globals.viewer.currentSelection = ''
this._router.navigateByUrl('/view/data')
}
public resizeStart() {
this.resizing = true
document.body.classList.add('select-none')
}
public resizeEnd() {
this.resizing = false
document.body.classList.remove('select-none')
}
@HostListener('document:mousemove', ['$event'])
onMouseMove(e: any) {
if (this.resizing) {
this.sidebarWidth = e.clientX
let sidebarNavigationEl = document.getElementsByClassName('nav-tree')[0]
if (this.sidebarWidth) {
if (this.isOverflown(sidebarNavigationEl)) {
this.sidebarMaxWidth =
this.sidebarWidth >= 375
? this.sidebarWidth + 10
: this.sidebarMaxWidth
}
}
}
}
@HostListener('document:mouseup', ['$event'])
onMouseUp(e: any) {
if (this.resizing) {
this.resizeEnd()
}
}
isOverflown(element: any) {
return element.scrollWidth > element.clientWidth
}
}
<clr-vertical-nav
#sidebarNav
id="sidebarNav"
[class.closed]="!sidebarOpen"
[style.width.px]="sidebarWidth"
[style.max-width.px]="sidebarMaxWidth"
[class.resizing]="resizing"
>
@if (isMainRoute('view')) {
<div class="d-flex justify-content-center sub-dropdown">
<clr-dropdown>
<button class="dropdown-toggle btn btn-primary" clrDropdownTrigger>
{{ getSubPage() }}
<clr-icon aria-hidden="true" shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen>
@if (isMainRoute('view')) {
<a
clrVerticalNavLink
(click)="navigateToViewer()"
routerLinkActive="active"
>Data</a
>
}
@if (isMainRoute('view') && serverType === 'SASVIYA') {
<a
clrVerticalNavLink
routerLink="/view/viya-api-explorer"
routerLinkActive="active"
>API Explorer</a
>
}
@if (isMainRoute('view') && serverType === 'SAS9') {
<a
clrVerticalNavLink
routerLink="/view/lineage"
routerLinkActive="active"
>Lineage</a
>
}
@if (isMainRoute('view') && serverType === 'SAS9') {
<a
clrVerticalNavLink
routerLink="/view/metadata"
routerLinkActive="active"
>Metadata</a
>
}
@if (isMainRoute('view')) {
<a
clrVerticalNavLink
routerLink="/view/usernav"
routerLinkActive="active"
>
Users</a
>
}
@if (isMainRoute('approve')) {
<a
clrVerticalNavLink
routerLink="/review/approve/submitted"
routerLinkActive="active"
>Submitted</a
>
}
@if (isMainRoute('approve')) {
<a
clrVerticalNavLink
routerLink="/review/approve/toapprove"
routerLinkActive="active"
>To Approve</a
>
}
</clr-dropdown-menu>
</clr-dropdown>
</div>
}
@if (isMainRoute('view/usernav')) {
<clr-tabs class="p-10">
<clr-tab>
<button
[routerLink]="['/view/usernav/users']"
class="user-nav-btn"
clrTabLink
>
<p class="zero-margin">
<clr-icon aria-hidden="true" shape="user"></clr-icon> Users
</p>
</button>
<clr-tab-content> </clr-tab-content>
</clr-tab>
<clr-tab>
<button
[routerLink]="['/view/usernav/groups']"
class="user-nav-btn"
clrTabLink
>
<p class="zero-margin">
<clr-icon aria-hidden="true" shape="users"></clr-icon> Groups
</p>
</button>
<clr-tab-content *clrIfActive="isMainRoute('/view/usernav/groups')">
</clr-tab-content>
</clr-tab>
@if (serverType === 'SAS9') {
<clr-tab>
<button
[routerLink]="['/view/usernav/roles']"
class="user-nav-btn"
clrTabLink
>
<p class="zero-margin">
<clr-icon aria-hidden="true" shape="blocks-group"></clr-icon>
Roles
</p>
</button>
<clr-tab-content *clrIfActive="isMainRoute('/view/usernav/roles')">
</clr-tab-content>
</clr-tab>
}
</clr-tabs>
}
@if (isMainRoute('home')) {
<div class="d-flex justify-content-center sub-dropdown">
<clr-dropdown>
<button class="dropdown-toggle btn btn-primary" clrDropdownTrigger>
{{ getSubPage() }}
<clr-icon aria-hidden="true" shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen>
<a
clrVerticalNavLink
routerLink="/home/tables"
routerLinkActive="active"
>Tables</a
>
<a
clrVerticalNavLink
routerLink="/home/excel-maps"
routerLinkActive="active"
>Excel Maps</a
>
<a
clrVerticalNavLink
routerLink="/home/multi-load"
routerLinkActive="active"
>Multi Load</a
>
</clr-dropdown-menu>
</clr-dropdown>
</div>
}
<div class="nav-divider"></div>
<div (scroll)="onTreeScroll($event)" class="nav-tree">
<ng-content></ng-content>
</div>
<span
class="resize-handle"
[class.resizing]="resizing"
(mousedown)="resizeStart()"
></span>
</clr-vertical-nav>
Legend
Html element with directive