import { EXPLORE_GROUPS, MY_GROUPS } from '../../../public/module/group/components/routerLinks';
import { ConfigService, ResourceService, IUserData, IUserProfile, LayoutService, UtilService } from '@sunbird/shared';
import { Component, OnInit, Input } from '@angular/core';
import { UserService, PermissionService } from '../../services';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { IInteractEventEdata, TelemetryService} from '@sunbird/telemetry';
import { CacheService } from '../../../shared/services/cache-service/cache.service';
import { first, filter, tap } from 'rxjs/operators';
import * as _ from 'lodash-es';
import { merge } from 'rxjs';
/**
* Main menu component
*/
@Component({
selector: 'app-main-menu',
templateUrl: './main-menu.component.html',
styleUrls: ['./main-menu.component.scss']
})
export class MainMenuComponent implements OnInit {
/**
* Workspace access roles
*/
workSpaceRole: Array<string>;
/**
* reference of resourceService service.
*/
public resourceService: ResourceService;
/**
* reference of UserService service.
*/
public userService: UserService;
/**
* reference of permissionService service.
*/
public permissionService: PermissionService;
/**
* reference of config service.
*/
public config: ConfigService;
/**
* user profile details.
*/
userProfile: IUserProfile;
/**
* reference of Router.
*/
private router: Router;
@Input()
public layoutConfiguration: any;
homeMenuIntractEdata: IInteractEventEdata;
learnMenuIntractEdata: IInteractEventEdata;
libraryMenuIntractEdata: IInteractEventEdata;
myLibraryMenuInteractEdata: IInteractEventEdata;
browseEdata: IInteractEventEdata;
helpCenterEdata: IInteractEventEdata;
workspaceMenuIntractEdata: IInteractEventEdata;
helpMenuIntractEdata: IInteractEventEdata;
contributeMenuEdata: IInteractEventEdata;
groupsMenuIntractEdata: IInteractEventEdata;
helpLinkVisibility: string;
/**
* shows/hides contribute tab
*/
signInIntractEdata: IInteractEventEdata;
hrefPath = '/resources';
routerLinks = {explore: `/${EXPLORE_GROUPS}`, groups: `/${MY_GROUPS}`};
isDesktopApp = false;
@Input() showBackButton;
/*
* constructor
*/
constructor(resourceService: ResourceService, userService: UserService, router: Router, public activatedRoute: ActivatedRoute,
permissionService: PermissionService, config: ConfigService, private cacheService: CacheService, private utilService: UtilService,
public layoutService: LayoutService, public telemetryService: TelemetryService) {
this.resourceService = resourceService;
this.userService = userService;
this.permissionService = permissionService;
this.router = router;
this.config = config;
this.workSpaceRole = this.config.rolesConfig.headerDropdownRoles.workSpaceRole;
this.updateHrefPath(this.router.url);
router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
this.updateHrefPath(event.url);
});
}
updateHrefPath(url) {
if (url.indexOf('explore-course') >= 0) {
this.hrefPath = url.replace('explore-course', 'learn');
} else if (url.indexOf('explore') >= 0) {
this.hrefPath = url.replace('explore', 'resources');
} else if (url.indexOf('play') >= 0) {
this.hrefPath = '/resources' + url;
} else {
this.hrefPath = '/resources';
}
}
ngOnInit() {
this.isDesktopApp = this.utilService.isDesktopApp;
try {
this.helpLinkVisibility = document.getElementById('helpLinkVisibility')?(<HTMLInputElement>document.getElementById('helpLinkVisibility')).value:'false';
} catch (error) {
this.helpLinkVisibility = 'false';
}
this.setInteractData();
merge(this.userService.userData$.pipe(
tap((user: IUserData) => {
if (user && !user.err) {
this.userProfile = _.get(user, 'userProfile');
}
}),
first()
)).subscribe();
}
setInteractData() {
this.homeMenuIntractEdata = {
id: 'home-tab',
type: 'click',
pageid: 'home'
};
this.libraryMenuIntractEdata = {
id: 'library-tab',
type: 'click',
pageid: 'library'
};
this.myLibraryMenuInteractEdata = {
id: 'myLibrary-tab',
type: 'click',
pageid: 'library'
};
this.browseEdata = {
id: 'browse-tab',
type: 'click',
pageid: 'browse'
};
this.helpCenterEdata = {
id: 'help-center-tab',
type: 'click',
pageid: 'help-center'
};
this.learnMenuIntractEdata = {
id: 'learn-tab',
type: 'click',
pageid: 'learn'
};
this.groupsMenuIntractEdata = {
id: 'groups-tab',
type: 'click',
pageid: _.get(this.activatedRoute, 'snapshot.data.telemetry.pageid') || 'groups'
};
this.workspaceMenuIntractEdata = {
id: 'workspace-menu-button',
type: 'click',
pageid: 'workspace'
};
this.helpMenuIntractEdata = {
id: 'help-menu-tab',
type: 'click',
pageid: 'help'
};
this.contributeMenuEdata = {
id: 'contribute-tab',
type: 'click',
pageid: 'contribute'
};
this.signInIntractEdata = {
id: ' signin-tab',
type: 'click',
pageid: this.router.url
};
}
getLogoutInteractEdata() {
return {
id: 'logout',
type: 'click',
pageid: this.router.url.split('/')[1]
};
}
logout() {
window.location.replace('/logoff');
this.cacheService.removeAll();
}
navigateToWorkspace() {
const authroles = this.permissionService.getWorkspaceAuthRoles();
if (authroles) {
return authroles.url;
}
}
getFeatureId(featureId, taskId) {
return [{id: featureId, type: 'Feature'}, {id: taskId, type: 'Task'}];
}
navigateToGroups() {
return !this.userService.loggedIn ? EXPLORE_GROUPS : MY_GROUPS ;
}
isLayoutAvailable() {
return this.layoutService.isLayoutAvailable(this.layoutConfiguration);
}
switchLayout() {
this.layoutService.initiateSwitchLayout();
this.generateInteractTelemetry();
}
generateInteractTelemetry() {
const interactData = {
context: {
env: _.get(this.activatedRoute, 'snapshot.data.telemetry.env') || 'main-header',
cdata: []
},
edata: {
id: 'switch-theme',
type: 'click',
pageid: this.router.url,
subtype: this.layoutConfiguration ? 'joy' : 'classic'
}
};
this.telemetryService.interact(interactData);
}
}
<ng-container *ngIf="!isLayoutAvailable()">
<!--Computer-->
<div class="ui text menu m-0 d-flex flex-jc-center flex-ai-center computer only">
<ng-container>
<app-content-type [layoutConfiguration]="layoutConfiguration" [showBackButton]="showBackButton"></app-content-type>
</ng-container>
<!--Logged in user-->
<ng-container *ngIf="userService.loggedIn">
<a class="item py-8 pl-0 pr-24" [class.active]="router.isActive('/workspace',false)" appTelemetryInteract
[telemetryInteractEdata]="workspaceMenuIntractEdata" *ngIf='!isDesktopApp && permissionService?.permissionAvailable'
appPermission [permission]='workSpaceRole' [routerLink]="[navigateToWorkspace()]" tabindex="0">
{{resourceService?.frmelmnts?.tab?.workspace}}
</a>
<a class="item py-8 pl-0 pr-24" appTelemetryInteract [telemetryInteractEdata]="helpMenuIntractEdata"
*ngIf='!isDesktopApp && permissionService.permissionAvailable && helpLinkVisibility.toLowerCase() === "true"' appPermission
[permission]='workSpaceRole' href="/help/creator/content-lifecycle/index.html" target="_blank">
{{resourceService?.frmelmnts?.tab?.help}}
</a>
</ng-container>
<!--/Logged in user-->
<!--Not Logged in user-->
<ng-container *ngIf="!userService.loggedIn">
<button class="ui blue button" *ngIf="router.isActive('', true) && exploreButtonVisibility==='true'"
tabindex="0" [routerLink]="'/explore'">
{{resourceService.frmelmnts?.lbl?.explore}} {{resourceService.instance}}
</button>
</ng-container>
<!--/Not Logged in user-->
</div>
<!--Computer-->
<!--Mobile-->
<div class="mobile only">
<div class="ui sidebar right vertical menu">
<div class="mobile only">
<app-content-type [layoutConfiguration]="layoutConfiguration" [showBackButton]="showBackButton"></app-content-type>
</div>
<!--Logged in user-->
<ng-container *ngIf="userService.loggedIn">
<div class="item font-weight-bold" *ngIf='userProfile'>
<i class="close link icon" (click)="showSideBar()" tabindex="0"
title="{{resourceService?.frmelmnts?.btn?.close}}"></i>
<div class="ellipsis">
{{userProfile?.firstName}} {{userProfile?.lastName}}
</div>
</div>
<div class="ui divider mt-0"></div>
<a class="item py-8 pl-0 pr-24" [class.active]="router.isActive(routerLinks?.groups, false)"
*ngIf="!router.isActive('', true) && !isDesktopApp" (click)="showSideBar()" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="groupsMenuIntractEdata"
[routerLink]="[navigateToGroups()]"> {{resourceService?.frmelmnts?.tab?.mygroups}} <span class="group__type mx-8">New</span> </a>
<a class="item" [class.active]="router.isActive('/search/profile',false) || router.isActive('/profile', false)"
(click)="showSideBar()" tabindex="0" routerLink="/profile">
{{resourceService.frmelmnts?.lnk?.profile}}
</a>
<a class="item logout-btn" appOnlineOnly appTelemetryInteract [telemetryInteractEdata]="getLogoutInteractEdata()"
(click)="logout()" tabindex="0">
{{resourceService.frmelmnts?.lnk?.logout}}
</a>
</ng-container>
<!--/Logged in user-->
<!--Not Logged in user-->
<ng-container *ngIf="!userService.loggedIn">
<div class="item active">
<i class="close link icon" (click)="showSideBar()" tabindex="0"
title="{{resourceService?.frmelmnts?.btn?.close}}"></i>
<a href="/resources">
{{resourceService.frmelmnts?.btn?.signin}}
</a>
</div>
<div class="ui divider mt-0"></div>
<a class="item" (click)="showSideBar()" *ngIf="router.isActive('', true)" routerLink="/explore" tabindex="0">
{{resourceService.frmelmnts?.lbl?.explore}} {{resourceService.instance}}
</a>
<a class="item"
[class.active]="router.isActive('/search/explore',false) || router.isActive('explore',false)"
[routerLink]="['/explore']" (click)="showSideBar()" tabindex="0"
*ngIf="!router.isActive('', true)">
{{resourceService?.frmelmnts?.tab?.resources}}
</a>
<a class="item"
[class.active]="router.isActive('/search/explore-course',false) || router.isActive('/explore-course',false)"
[routerLink]="['/explore-course']" (click)="showSideBar()" tabindex="0"
*ngIf="!router.isActive('', true)">
{{resourceService?.frmelmnts?.tab?.courses}}
</a>
<a class="item d-flex flex-ai-center" [class.active]="router.isActive(routerLinks?.explore,false)"
*ngIf="!router.isActive('', true) && !isDesktopApp" (click)="showSideBar()" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="groupsMenuIntractEdata"
[routerLink]="[navigateToGroups()]"> {{resourceService?.frmelmnts?.tab?.mygroups}} <span class="group__type mx-8">New</span> </a>
<a class="item" (click)="showSideBar(false);switchLayout()" tabindex="0">
<span *ngIf="layoutConfiguration">{{resourceService?.frmelmnts?.lbl?.switchToOldLayout}}</span>
<span *ngIf="!layoutConfiguration">{{resourceService?.frmelmnts?.lbl?.switchToJoyLayout}}</span>
</a>
</ng-container>
<!--/Not Logged in user-->
</div>
</div>
<!--/Mobile-->
</ng-container>
<ng-container *ngIf="isLayoutAvailable()">
<app-content-type [layoutConfiguration]="layoutConfiguration" [showBackButton]="showBackButton"></app-content-type>
<!--Mobile-->
<div class="mobile only">
<div class="ui sidebar right vertical menu">
<!--Logged in user-->
<ng-container *ngIf="userService.loggedIn">
<div class="item font-weight-bold" *ngIf='userProfile'>
<i class="close link icon" (click)="showSideBar()" tabindex="0"
title="{{resourceService?.frmelmnts?.btn?.close}}"></i>
<div class="ellipsis">
{{userProfile?.firstName}} {{userProfile?.lastName}}
</div>
</div>
<div class="ui divider mt-0"></div>
<a class="item" [class.active]="router.isActive('/search/Library',false) || router.isActive('/resources',false)"
(click)="showSideBar()" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="libraryMenuIntractEdata"
routerLink="/resources">
{{resourceService?.frmelmnts?.tab?.resources}}
</a>
<a class="item" [class.active]="router.isActive('/search/Courses',false) || router.isActive('/learn',false)"
(click)="showSideBar()" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="learnMenuIntractEdata"
routerLink="/learn">
{{resourceService?.frmelmnts?.tab?.courses}}
</a>
<a class="item py-8 pl-0 pr-24" [class.active]="router.isActive(routerLinks?.groups,false)" appTelemetryInteract
[telemetryInteractEdata]="groupsMenuIntractEdata" [routerLink]="[navigateToGroups()]" *ngIf="!isDesktopApp">
{{resourceService?.frmelmnts?.tab?.mygroups}} <span class="group__type mx-8">New</span>
</a>
<a class="item" [class.active]="router.isActive('/search/profile',false) || router.isActive('/profile',false)"
(click)="showSideBar()" tabindex="0" routerLink="/profile">
{{resourceService.frmelmnts?.lnk?.profile}}
</a>
<a class="item logout-btn" appOnlineOnly appTelemetryInteract [telemetryInteractEdata]="getLogoutInteractEdata()"
(click)="logout()" tabindex="0">
{{resourceService.frmelmnts?.lnk?.logout}}
</a>
</ng-container>
<!--/Logged in user-->
<!--Not Logged in user-->
<ng-container *ngIf="!userService.loggedIn">
<div class="item active">
<i class="close link icon" (click)="showSideBar()" tabindex="0"
title="{{resourceService?.frmelmnts?.btn?.close}}"></i>
<a href="/resources">
{{resourceService.frmelmnts?.btn?.signin}}
</a>
</div>
<div class="ui divider mt-0"></div>
<a class="item" (click)="showSideBar()" tabindex="0" *ngIf="router.isActive('', true)" routerLink="/explore">
{{resourceService.frmelmnts?.lbl?.explore}} {{resourceService.instance}}
</a>
<a class="item"
[class.active]="router.isActive('/search/explore',false) || router.isActive('explore',false)"
[routerLink]="['/explore']" (click)="showSideBar()" tabindex="0"
*ngIf="!router.isActive('', true)">
{{resourceService?.frmelmnts?.tab?.resources}}
</a>
<a class="item"
[class.active]="router.isActive('/search/explore-course',false) || router.isActive('/explore-course',false)"
[routerLink]="['/explore-course']" (click)="showSideBar()" tabindex="0"
*ngIf="!router.isActive('', true)">
{{resourceService?.frmelmnts?.tab?.courses}}
</a>
<a class="item d-flex flex-ai-center" [class.active]="router.isActive(routerLinks?.explore,false)"
*ngIf="!router.isActive('', true) && !isDesktopApp" (click)="showSideBar()" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="groupsMenuIntractEdata"
[routerLink]="[navigateToGroups()]"> {{resourceService?.frmelmnts?.tab?.mygroups}} <span class="group__type mx-8">New</span> </a>
</ng-container>
<!--/Not Logged in user-->
</div>
</div>
<!--/Mobile-->
</ng-container>