Methods
|
Public
getPictureUrl
|
getPictureUrl()
|
|
|
|
|
|
Public
logout
|
logout(evt: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| evt |
any
|
No
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
onDebugModeChange
|
onDebugModeChange(dropdownItem?: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| dropdownItem |
any
|
Yes
|
|
|
Public
onDebugRowClick
|
onDebugRowClick(evt: Event, dropdownToggle: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| evt |
Event
|
No
|
| dropdownToggle |
any
|
No
|
|
|
openRequestsModal
|
openRequestsModal()
|
|
|
|
|
|
toggleDarkMode
|
toggleDarkMode(value: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
boolean
|
No
|
|
|
Public
appLogs
|
Type : Array<any>
|
Default value : []
|
|
|
|
Public
commitVer
|
Type : string
|
Default value : ''
|
|
|
|
Public
darkMode
|
Type : unknown
|
Default value : this.eventService.darkMode
|
|
|
|
Public
debugLogs
|
Type : Array<any>
|
Default value : []
|
|
|
|
Public
failedReqs
|
Type : Array<any>
|
Default value : []
|
|
|
|
Public
isViya
|
Type : boolean
|
Default value : false
|
|
|
|
Private
reqSub
|
Type : Subscription
|
Default value : new Subscription()
|
|
|
|
Public
requestsCount
|
Type : number
|
Default value : 0
|
|
|
|
Public
sasErrors
|
Type : Array<any>
|
Default value : []
|
|
|
|
Public
sasjsConfig
|
Type : SASjsConfig
|
Default value : new SASjsConfig()
|
|
|
|
Public
userName
|
Type : string
|
Default value : 'Not logged in'
|
|
|
|
Private
userSub
|
Type : Subscription
|
Default value : new Subscription()
|
|
|
Accessors
|
isDeployPage
|
getisDeployPage()
|
|
|
import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
import { Subscription } from 'rxjs'
import { UserService } from '../user.service'
import { VERSION } from '../../../environments/version'
import { SasService } from '../../services/sas.service'
import { SASjsConfig } from '@sasjs/adapter'
import { EventService } from '../../services/event.service'
import { Router } from '@angular/router'
import { globals } from 'src/app/_globals'
@Component({
selector: 'app-header-actions',
templateUrl: './header-actions.component.html',
styleUrls: ['./header-actions.component.scss'],
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class HeaderActions implements OnInit, OnDestroy {
public userName: string = 'Not logged in'
private reqSub: Subscription = new Subscription()
private userSub: Subscription = new Subscription()
public appLogs: Array<any> = []
public debugLogs: Array<any> = []
public failedReqs: Array<any> = []
public sasErrors: Array<any> = []
public isViya: boolean = false
public sasjsConfig: SASjsConfig = new SASjsConfig()
public requestsCount: number = 0
public commitVer: string = ''
public darkMode = this.eventService.darkMode
constructor(
private userService: UserService,
private sasService: SasService,
private eventService: EventService,
public router: Router
) {}
ngOnInit(): void {
this.userSub = this.userService.userChange.subscribe((user) => {
this.userName = user.username
})
this.sasjsConfig = this.sasService.getSasjsConfig()
if (this.sasjsConfig.serverType === 'SASVIYA') {
this.isViya = true
}
this.commitVer = (VERSION.tag || '').replace('v', '') + '.' + VERSION.hash
}
ngOnDestroy(): void {
this.reqSub.unsubscribe()
this.userSub.unsubscribe()
}
toggleDarkMode(value: boolean) {
this.eventService.toggleDarkMode(value)
}
openRequestsModal() {
this.eventService.openRequestsModal()
}
onDebugModeChange(dropdownItem?: any): void {
if (this.sasjsConfig) {
this.sasService.setDebugState(this.sasjsConfig.debug)
}
}
public onDebugRowClick(evt: Event, dropdownToggle: any): void {
evt.stopPropagation()
if (globals.userDropdownConfig.closeOnDebugClick) {
setTimeout(() => {
dropdownToggle.click()
}, 300)
}
}
public logout(evt: any): void {
evt.preventDefault()
try {
this.sasService.logout()
} catch (err) {
// TODO: handle error - show something to user
console.error(err)
}
}
public getPictureUrl() {
return `${this.sasjsConfig.serverUrl}/identities/users/${this.userName}/avatar/content`
}
get isDeployPage() {
return this.router.url.includes('deploy')
}
}
<div class="header-actions">
<div class="d-flex clr-align-items-center">
@if (!darkMode.value) {
<cds-icon
(click)="toggleDarkMode(true)"
size="md"
class="theme-toggle-icon cursor-pointer"
shape="moon"
inverse="false"
solid="false"
></cds-icon>
}
@if (!!darkMode.value) {
<cds-icon
(click)="toggleDarkMode(false)"
size="md"
class="theme-toggle-icon cursor-pointer"
shape="sun"
inverse="false"
solid="false"
></cds-icon>
}
</div>
<app-loading-indicator></app-loading-indicator>
<clr-dropdown class="app-nav-dropdown">
<button class="nav-text color-white user-nav-toggle" clrDropdownToggle>
<span>{{ userName }}</span>
@if (userName !== 'Not logged in' && isViya) {
<span
><img
class="avatar-img"
src="{{ getPictureUrl() }}"
alt="profile picture"
/></span>
}
@if (!sasjsConfig.debug) {
<span
class="badge badge-danger"
[class.hidden]="failedReqs.length === 0"
>{{ failedReqs.length }}</span
>
}
@if (sasjsConfig.debug) {
<span
class="badge badge-info"
[class.hidden]="debugLogs.length === 0"
>{{ debugLogs.length }}</span
>
}
@if (!isViya) {
<clr-icon aria-hidden="true" shape="caret down"></clr-icon>
}
</button>
<clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
<div #dropdownItemDebug class="debug-switch-item" clrDropdownItem>
<clr-toggle-container
class="toggle-switch"
(click)="onDebugRowClick($event, dropdownItemDebug)"
>
<clr-toggle-wrapper>
<input
id="debug-toggle1"
type="checkbox"
[(ngModel)]="sasjsConfig.debug"
(ngModelChange)="onDebugModeChange()"
clrToggle
/>
<label>Debug Mode</label>
</clr-toggle-wrapper>
</clr-toggle-container>
</div>
<a (click)="openRequestsModal()" clrDropdownItem>
<span>SAS Requests</span>
</a>
@if (!isDeployPage) {
<a
target="_blank"
href="https://docs.datacontroller.io"
clrDropdownItem
>
<span class="dropdown-text">Documentation</span>
</a>
}
<div class="separator"></div>
<a href="..." routerLink="/system" clrDropdownItem>
<span>System</span>
</a>
<a href="..." (click)="logout($event)" clrDropdownItem>
<span>Log Out</span>
<clr-icon
aria-hidden="true"
class="clr-logout"
shape="logout"
></clr-icon>
</a>
<div class="copyRight">
<span>v{{ commitVer }}</span>
</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>
Legend
Html element with directive