Sunbird Portal Documentation
  1. Components
  2. DashboardSidebarComponent

File

src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts

Implements

OnInit

Metadata

selector app-dashboard-sidebar
styleUrls ./dashboard-sidebar.component.scss
templateUrl ./dashboard-sidebar.component.html

Index

Properties
Methods

Constructor

constructor(resourceService: ResourceService, router: Router, activatedRoute: ActivatedRoute, permissionService: PermissionService, courseConsumptionService: CourseConsumptionService)
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:19
Parameters :
Name Type Optional
resourceService ResourceService No
router Router No
activatedRoute ActivatedRoute No
permissionService PermissionService No
courseConsumptionService CourseConsumptionService No

Methods

ngOnInit
ngOnInit()
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:27
Returns : void
setTelemetryData
setTelemetryData()
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:31
Returns : void

Properties

courseBatchesEdata
Type : IInteractEventEdata
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:16
courseCertificatesEdata
Type : IInteractEventEdata
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:17
courseHierarchy
Type : literal type
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:19
courseStatsEdata
Type : IInteractEventEdata
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:15
Public permissionService
Type : PermissionService
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:22
Public resourceService
Type : ResourceService
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:21
Public router
Type : Router
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:21
telemetryInteractObject
Type : IInteractEventObject
Defined in src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.ts:18
 
import { CourseConsumptionService } from '@sunbird/learn';
import { PermissionService } from '@sunbird/core';
import { IInteractEventEdata, IInteractEventObject } from '@sunbird/telemetry';
import { Router, ActivatedRoute } from '@angular/router';
import { ResourceService } from '@sunbird/shared';
import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash-es';
@Component({
  selector: 'app-dashboard-sidebar',
  templateUrl: './dashboard-sidebar.component.html',
  styleUrls: ['./dashboard-sidebar.component.scss']
})
export class DashboardSidebarComponent implements OnInit {

  courseStatsEdata: IInteractEventEdata;
  courseBatchesEdata: IInteractEventEdata;
  courseCertificatesEdata: IInteractEventEdata;
  telemetryInteractObject: IInteractEventObject;
  courseHierarchy: {};

  constructor(public resourceService: ResourceService, public router: Router,
    private activatedRoute: ActivatedRoute, public permissionService: PermissionService,
    private courseConsumptionService: CourseConsumptionService) {
      this.courseHierarchy = this.courseConsumptionService.courseHierarchy;
    }

    ngOnInit() {
      this.setTelemetryData();
    }

    setTelemetryData() {
      this.courseStatsEdata = {
        id: 'course-dashboard',
        type: 'click',
        pageid: _.get(this.activatedRoute.snapshot, 'data.telemetry.pageid'),
      };
      this.courseBatchesEdata = {
        id: 'course-batches',
        type: 'click',
        pageid: _.get(this.activatedRoute.snapshot, 'data.telemetry.pageid'),
      };
      this.courseCertificatesEdata = {
        id: 'course-reissue-cert',
        type: 'click',
        pageid: _.get(this.activatedRoute.snapshot, 'data.telemetry.pageid'),
      };
      this.telemetryInteractObject = {
        id: _.get(this.activatedRoute.snapshot, 'params.courseId'),
        type: _.get(this.activatedRoute.snapshot, 'data.telemetry.object.type'),
        ver: _.get(this.activatedRoute.snapshot, 'data.telemetry.object.ver'),
      };
    }
}

<div class="ui container">
  <div class="ui stackable grid relative9 sbt-fluid-content-bg p-0 m-0">
    <div class="three wide column p-0">
      <div class="sidebar">
        <!-- <a [routerLink]="['course-stats']" routerLinkActive="active" appTelemetryInteract  [telemetryInteractObject]="telemetryInteractObject" [telemetryInteractEdata]="courseStatsEdata" >{{resourceService?.frmelmnts?.lbl?.dashBoardTitle}}</a> -->
        <a [routerLink]="['batches']" routerLinkActive="active" appTelemetryInteract
          [telemetryInteractObject]="telemetryInteractObject"
          [telemetryInteractEdata]="courseBatchesEdata">{{resourceService?.frmelmnts?.lbl?.batches}}</a>
        <a [routerLink]="['certificates']" [class.active]="router.url.includes('/dashboard/certificates')"
          appTelemetryInteract [telemetryInteractObject]="telemetryInteractObject"
          [telemetryInteractEdata]="courseCertificatesEdata">{{resourceService?.frmelmnts?.lbl?.certificates}}</a>
      </div>
    </div>
    <div class="nine wide column p-0">
      <div>
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

./dashboard-sidebar.component.scss 

@use "@project-sunbird/sb-styles/assets/mixins/mixins"as *;

:host{
  .sidebar a ,.dashboard-title{
    display: block;
    color: var(--gray-800) !important;
    padding: calculateRem(8px);
    text-decoration: none;
    font-size: calculateRem(16px);
    margin: calculateRem(16px) 0px;

    &:hover {
      color: var(--black);
      font-weight: bold;
    }
  }

  .sidebar a.active {
    border-left: calculateRem(4px) solid var(--primary-400);
    background: var(--sbt-body-bg);
    color: var(--primary-color) !important;
    font-weight: bold;

    [dir="rtl"] & {
      border-left: none;
      border-right: calculateRem(4px) solid var(--primary-400);
    }
  }

  @media screen and (max-width: 768px) {
    .sidebar {
      width: 100%;
      height: auto;
      padding-left: 0;

      [dir="rtl"] & {
        padding-right: 0px;
      }
    }

    .sidebar a,
    .dashboard-title {
      text-align: center;
      float: none;
    }

  }
}

::ng-deep {
  html[accessable-theme=accessible] .progress-content #dashoardFiltersHolder .current-batch-list .update-text {
    color: var(--gray-800) !important;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""