Sunbird Portal Documentation
  1. Components
  2. ContentTypeComponent

File

src/app/modules/core/components/content-type/content-type.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-content-type
styleUrls ./content-type.component.scss
templateUrl ./content-type.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(formService: FormService, resourceService: ResourceService, router: Router, userService: UserService, telemetryService: TelemetryService, activatedRoute: ActivatedRoute, layoutService: LayoutService, utilService: UtilService, navigationhelperService: NavigationHelperService)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:26
Parameters :
Name Type Optional
formService FormService No
resourceService ResourceService No
router Router No
userService UserService No
telemetryService TelemetryService No
activatedRoute ActivatedRoute No
layoutService LayoutService No
utilService UtilService No
navigationhelperService NavigationHelperService No

Inputs

layoutConfiguration
Type : any
Defined in src/app/modules/core/components/content-type/content-type.component.ts:18
showBackButton
Type : boolean
Default value : false
Defined in src/app/modules/core/components/content-type/content-type.component.ts:19

Outputs

closeSideMenu
Type : EventEmitter
Defined in src/app/modules/core/components/content-type/content-type.component.ts:17

Methods

generateTelemetry
generateTelemetry(contentType)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:63
Parameters :
Name Optional
contentType No
Returns : void
getContentTypes
getContentTypes()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:184
Returns : void
getIcon
getIcon(contentType)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:180
Parameters :
Name Optional
contentType No
Returns : any
getTitle
getTitle(contentType)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:176
Parameters :
Name Optional
contentType No
Returns : any
isLayoutAvailable
isLayoutAvailable()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:197
Returns : any
makeFormChange
makeFormChange()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:161
Returns : void
ngOnDestroy
ngOnDestroy()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:58
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:40
Returns : void
processFormData
processFormData(formData)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:170
Parameters :
Name Optional
formData No
Returns : void
setContentTypeOnUrlChange
setContentTypeOnUrlChange()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:50
Returns : void
setSelectedContentType
setSelectedContentType(url, queryParams, pathParams)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:112
Parameters :
Name Optional
url No
queryParams No
pathParams No
Returns : void
showContentType
showContentType(data)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:78
Parameters :
Name Optional
data No
Returns : any
updateForm
updateForm()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:138
Returns : void
updateSelectedContentType
updateSelectedContentType(contentType)
Defined in src/app/modules/core/components/content-type/content-type.component.ts:129
Parameters :
Name Optional
contentType No
Returns : void

Properties

Public activatedRoute
Type : ActivatedRoute
Defined in src/app/modules/core/components/content-type/content-type.component.ts:33
contentTypes
Defined in src/app/modules/core/components/content-type/content-type.component.ts:20
Public formService
Type : FormService
Defined in src/app/modules/core/components/content-type/content-type.component.ts:28
isDesktopApp
Default value : false
Defined in src/app/modules/core/components/content-type/content-type.component.ts:22
Public layoutService
Type : LayoutService
Defined in src/app/modules/core/components/content-type/content-type.component.ts:34
Public navigationhelperService
Type : NavigationHelperService
Defined in src/app/modules/core/components/content-type/content-type.component.ts:36
Public resourceService
Type : ResourceService
Defined in src/app/modules/core/components/content-type/content-type.component.ts:29
returnTo
Type : string
Defined in src/app/modules/core/components/content-type/content-type.component.ts:26
Public router
Type : Router
Defined in src/app/modules/core/components/content-type/content-type.component.ts:30
selectedContentType
Defined in src/app/modules/core/components/content-type/content-type.component.ts:21
subscription
Type : any
Defined in src/app/modules/core/components/content-type/content-type.component.ts:24
Public unsubscribe$
Default value : new Subject<void>()
Defined in src/app/modules/core/components/content-type/content-type.component.ts:23
Public userService
Type : UserService
Defined in src/app/modules/core/components/content-type/content-type.component.ts:31
userType
Type : any
Defined in src/app/modules/core/components/content-type/content-type.component.ts:25
 
import { Component, Input, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
import { FormService, UserService } from '@sunbird/core';
import * as _ from 'lodash-es';
import { LayoutService, ResourceService, UtilService, IUserData, NavigationHelperService} from '@sunbird/shared';
import { Router, ActivatedRoute } from '@angular/router';
import { combineLatest, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { TelemetryService } from '@sunbird/telemetry';


@Component({
  selector: 'app-content-type',
  templateUrl: './content-type.component.html',
  styleUrls: ['./content-type.component.scss'],
})
export class ContentTypeComponent implements OnInit, OnDestroy {
  @Output() closeSideMenu = new EventEmitter<any>();
  @Input() layoutConfiguration;
  @Input() showBackButton = false;
  contentTypes;
  selectedContentType;
  isDesktopApp = false;
  public unsubscribe$ = new Subject<void>();
  subscription: any;
  userType: any;
  returnTo: string;
  constructor(
    public formService: FormService,
    public resourceService: ResourceService,
    public router: Router,
    public userService: UserService,
    private telemetryService: TelemetryService,
    public activatedRoute: ActivatedRoute,
    public layoutService: LayoutService,
    private utilService: UtilService,
    public navigationhelperService: NavigationHelperService,
  ) {}


  ngOnInit() {
    this.getContentTypes();
    this.isDesktopApp = this.utilService.isDesktopApp;
    this.layoutService.updateSelectedContentType
      .subscribe((data) => {
        this.updateSelectedContentType(data);
      });
  }


  setContentTypeOnUrlChange() {
    combineLatest(this.activatedRoute.queryParams, this.activatedRoute.params)
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((result) => {
        this.setSelectedContentType(this.router.url, result[0], result[1]);
      });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  generateTelemetry(contentType) {
    const interactData = {
      context: {
        env: _.get(this.activatedRoute, 'snapshot.data.telemetry.env') || 'content-type',
        cdata: []
      },
      edata: {
        id: contentType,
        type: 'click',
        pageid: this.router.url || 'content-type'
      }
    };
    this.telemetryService.interact(interactData);
  }

  showContentType(data) {
    this.generateTelemetry(data.contentType);
    let userPreference;
    let params;
    try {
      if (this.userService.loggedIn) {
        userPreference = { framework: this.userService.defaultFrameworkFilters };
        params = _.cloneDeep(_.get(userPreference, 'framework'));
      } else {
        const guestUserDetails = localStorage.getItem('guestUserDetails');
        if (guestUserDetails) {
          userPreference = JSON.parse(guestUserDetails);
          params = _.cloneDeep(_.get(userPreference, 'framework'));
        }
      }
    } catch (error) {
      return null;
    }

    // All and myDownloads Tab should not carry any filters from other tabs / user can apply fresh filters
    if (data.contentType === 'mydownloads' || data.contentType === 'all') {
      params = _.omit(params, ['board', 'medium', 'gradeLevel', 'subject', 'se_boards', 'se_mediums', 'se_gradeLevels', 'se_subjects']);
    }

    if (this.userService.loggedIn) {
      this.router.navigate([data.loggedInUserRoute.route],
        { queryParams: { ...params, selectedTab: data.loggedInUserRoute.queryParam } });
    } else {
      !data.isLoginMandatory ?
        this.router.navigate([data.anonumousUserRoute.route],
          { queryParams: { ...params, selectedTab: data.anonumousUserRoute.queryParam } }) : window.location.href = data.loggedInUserRoute.route;
    }
  }

  setSelectedContentType(url, queryParams, pathParams) {
    if (url.indexOf('play') >= 0) {
      this.selectedContentType = queryParams.contentType ? queryParams.contentType.toLowerCase() : null;
    } else if (url.indexOf('explore-course') >= 0 || url.indexOf('learn') >= 0) {
      this.selectedContentType = queryParams.selectedTab ? queryParams.selectedTab : 'course';
    } else if (url.indexOf('explore-groups') >= 0) {
      this.selectedContentType = null;
    } else if (url.indexOf('resources') >= 0 || url.indexOf('explore') >= 0) {
      this.selectedContentType = queryParams.selectedTab ? queryParams.selectedTab : 'textbook';
    } else if (url.indexOf('mydownloads') >= 0) {
      this.selectedContentType = queryParams.selectedTab ? queryParams.selectedTab : 'mydownloads';
    } else if (url.indexOf('observation') >= 0) {
      this.selectedContentType = queryParams.selectedTab ? queryParams.selectedTab : 'observation';
    } else {
      this.selectedContentType = queryParams.selectedTab ? queryParams.selectedTab : null;
    }
  }
  updateSelectedContentType(contentType) {
    const ct = this.contentTypes.find((cty: any) => cty.contentType === contentType.toLowerCase());
    if (ct) {
      this.selectedContentType = ct.contentType;
    } else {
      this.selectedContentType = 'all';
    }
  }

  updateForm() {
    if (!this.userType) {
      if (this.userService.loggedIn) {
        this.userService.userData$.pipe(takeUntil(this.unsubscribe$)).subscribe((profileData: IUserData) => {
          if (_.get(profileData, 'userProfile.profileUserType.type')) {
          this.userType = profileData.userProfile['profileUserType']['type'];
          }
          this.makeFormChange();
        });
      } else {
        const user = localStorage.getItem('userType');
        if (user) {
          this.userType = user;
          this.makeFormChange();
        }else{
          this.utilService.currentRole.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
          this.userType = res;
          this.makeFormChange();
          });
        }
      }
    }
  }
  makeFormChange() {
    const index = this.contentTypes.findIndex(cty => cty.contentType === 'observation');
    if (this.userType != 'administrator') {
      this.contentTypes[index].isEnabled = false;
    } else {
      this.contentTypes[index].isEnabled = true;
    }
  }

  processFormData(formData) {
    this.contentTypes = _.sortBy(formData, 'index');
    const defaultTab = _.find(this.contentTypes, ['default', true]);
    this.selectedContentType = this.activatedRoute.snapshot.queryParams.selectedTab || _.get(defaultTab, 'contentType') || 'textbook';
  }

  getTitle(contentType) {
    return _.get(this.resourceService, _.get(contentType, 'title')) || _.get(contentType, 'title');
  }

  getIcon(contentType) {
    return _.get(contentType, 'theme.className');
  }

  getContentTypes() {
    const formServiceInputParams = {
      formType: 'contentcategory',
      formAction: 'menubar',
      contentType: 'global'
    };
    this.formService.getFormConfig(formServiceInputParams).subscribe((data: any) => {
      this.processFormData(data);
      this.updateForm();
      this.setContentTypeOnUrlChange();
    });
  }

  isLayoutAvailable() {
    return this.layoutService.isLayoutAvailable(this.layoutConfiguration);
  }
}

<ng-container *ngIf="!isLayoutAvailable()">
  <div class="item py-8 pr-8 computer only">
    <ng-container *ngFor="let contentType of contentTypes">
      <a aria-current="page" [attr.aria-selected]="selectedContentType === contentType.contentType ? true : false" *ngIf="contentType.isEnabled && contentType?.isOnlineOnly" tabindex="0" (click)="showContentType(contentType)" appOnlineOnly
         [ngClass]="{'active': selectedContentType === contentType.contentType}"
         class="item {{'item--' + getIcon(contentType)}}">
        {{getTitle(contentType)}}
      </a>
      <a aria-current="page" [attr.aria-selected]="selectedContentType === contentType.contentType ? true : false" *ngIf="contentType.isEnabled && !contentType?.isOnlineOnly && isDesktopApp" tabindex="0" (click)="showContentType(contentType)"
         [ngClass]="{'active': selectedContentType === contentType.contentType}"
         class="item {{'item--' + getIcon(contentType)}}">
        {{getTitle(contentType)}}
      </a>
    </ng-container>
  </div>
  <div class="item mobile only">
    <ng-container *ngFor="let contentType of contentTypes">
      <div class="profile__actions">
        <ul class="profile__actions__list pl-0">
          <li aria-current="page" [attr.aria-selected]="selectedContentType === contentType.contentType ? true : false" *ngIf="contentType.isEnabled && contentType?.isOnlineOnly" tabindex="0" (click)="showContentType(contentType);closeSideMenu.emit()" appOnlineOnly
              [ngClass]="{'active': selectedContentType === contentType.contentType}"
              class="list-item {{'item--' + getIcon(contentType)}}">
            {{getTitle(contentType)}}
          </li>
          <li aria-current="page" [attr.aria-selected]="selectedContentType === contentType.contentType ? true : false" *ngIf="contentType.isEnabled && !contentType?.isOnlineOnly && isDesktopApp" tabindex="0" (click)="showContentType(contentType);closeSideMenu.emit()"
              [ngClass]="{'active': selectedContentType === contentType.contentType}"
              class="list-item {{'item--' + getIcon(contentType)}}">
            {{getTitle(contentType)}}
          </li>
        </ul>
      </div>
    </ng-container>
  </div>

</ng-container>

<ng-container *ngIf="isLayoutAvailable() && !showBackButton">
  <div class="sb-linkmenu m-0 d-flex flex-ai-center" role="navigation" aria-label="Main menu">
    <ng-container *ngFor="let contentType of contentTypes">
      <a aria-current="page" [attr.aria-selected]="selectedContentType === contentType.contentType ? true : false" *ngIf="contentType.isEnabled && contentType?.isOnlineOnly" tabindex="0" (click)="showContentType(contentType)" (keyup.enter)="showContentType(contentType)" appOnlineOnly
         [ngClass]="{'active': selectedContentType === contentType.contentType}"
         class="item {{'item--' + getIcon(contentType)}}">
        <span [ngClass]="'sb-icon sb-icon--sm mr-8 sb-icon__'+ getIcon(contentType)"></span>
        {{getTitle(contentType)}}
      </a>
      <a aria-current="page" [attr.aria-selected]="selectedContentType === contentType.contentType ? true : false" *ngIf="contentType.isEnabled && !contentType?.isOnlineOnly && isDesktopApp" tabindex="0" (keyup.enter)="showContentType(contentType)" (click)="showContentType(contentType)"
        [ngClass]="{'active': selectedContentType === contentType.contentType}"
        class="item {{'item--' + getIcon(contentType)}}">
        <span [ngClass]="'sb-icon sb-icon--sm mr-8 sb-icon__'+ getIcon(contentType)"></span>
        {{getTitle(contentType)}}
      </a>
    </ng-container>
  </div>

</ng-container>

./content-type.component.scss 

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "../main-header/main-header.component.scss" as *;

:host ::ng-deep {
  .sb-linkmenu {
    .item {
      html[dir="rtl"] & {
      margin-left: calculateRem(12px);
      margin-right: inherit;
      }
    }
}
}
.item a.item.active, .item a.item:hover {
  outline: none;
  color: var(--sb-linkmenu-active-text) !important;
}
.item a.item.active {
  font-weight: bold;
}
/* new styles */

.sb-linkmenu {
  // overflow: auto;
  // padding: 0 0 calculateRem(8px) 0;
  .item {
    background: var(--sb-linkmenu-bg);
    padding: calculateRem(8px) calculateRem(16px);
    border-radius: calculateRem(6px);
    box-shadow: var(--sbt-box-shadow-6px);
    font-size: calculateRem(12px);
    font-weight: bold;
    margin-right: calculateRem(12px);
    height: calculateRem(48px);
    transition: all ease .3s;
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    color: var(--sb-linkmenu-text);
    @include respond-above(md){
      flex: 0 0 10%;
    }
    &.active,
    &:hover {
      color: var(--sb-linkmenu-text-hover);
      text-decoration: none;
      background-color: var(--primary-color);
      .sb-icon {
        background-color: var(--sb-linkmenu-text-hover);
      }
    }
/*
    &--textbooks {
      color: var(--sbt-textbooks-text);
      &:hover,
      &.item.active,
      .sb-icon__textbooks {
        background-color: var(--sbt-textbooks-bg);
      }
    }
    &--courses {
      color: var(--sbt-courses-text);
      &:hover,
      &.item.active,
      .sb-icon__courses {
        background-color: var(--sbt-courses-bg);
      }
    }
    &--tests {
      color: var(--sbt-tests-text);
      &:hover,
      &.item.active,
      .sb-icon__tests {
        background-color: var(--sbt-tests-bg);
      }
    }
    &--quizzes {
      color: var(--sbt-quizzes-text);
      &:hover,
      &.item.active,
      .sb-icon__quizzes {
        background-color: var(--sbt-quizzes-bg);
      }
    }
    &--stories {
      color: var(--sbt-stories-text);
      &:hover,
      &.item.active,
      .sb-icon__stories {
        background-color: var(--sbt-stories-bg);
      }
    }
    &--poems {
      color: var(--sbt-poems-text);
      &:hover,
      &.item.active,
      .sb-icon__poems {
        background-color: var(--sbt-poems-bg);
      }
    }
    &--tv {
      color: var(--sbt-tv-text);
      &:hover,
      &.item.active,
      .sb-icon__tv {
        background-color: var(--sbt-tv-bg);
      }
    }
    &--all {
      color: var(--sbt-all-text);
      &:hover,
      &.item.active,
      .sb-icon__all {
        background-color: var(--sbt-all-bg);
      }
    }
    */
  }
}

.sb-icon {
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
  display: inline-block;
  cursor: pointer;
  background: var(--primary-color);
  &--xxs {
    width: var(--icon-svg-xxs);
    height: var(--icon-svg-xxs);
  }

  &--xs {
    width: var(--icon-svg-xs);
    height: var(--icon-svg-xs);
  }

  &--sm {
    width: var(--icon-svg-sm);
    height: var(--icon-svg-sm);
  }

  &--md {
    width: var(--icon-svg-md);
    height: var(--icon-svg-md);
  }

  &--lg {
    width: var(--icon-svg-lg);
    height: var(--icon-svg-lg);
  }

  &--xl {
    width: var(--icon-svg-xl);
    height: var(--icon-svg-xl);
  }

  &__textbooks {
    -webkit-mask-image: url(/assets/images/mask-image/textbooks.svg);
    mask-image: url(/assets/images/mask-image/textbooks.svg);
  }

  &__courses {
    -webkit-mask-image: url(/assets/images/mask-image/courses.svg);
    mask-image: url(/assets/images/mask-image/courses.svg);
  }

  &__quizzes {
    -webkit-mask-image: url(/assets/images/mask-image/quizzes.svg);
    mask-image: url(/assets/images/mask-image/quizzes.svg);
  }

  &__tests {
    -webkit-mask-image: url(/assets/images/mask-image/observation.svg);
    mask-image: url(/assets/images/mask-image/observation.svg);
  }

  &__stories {
    -webkit-mask-image: url(/assets/images/mask-image/stories.svg);
    mask-image: url(/assets/images/mask-image/stories.svg);
  }

  &__poems {
    -webkit-mask-image: url(/assets/images/mask-image/poems.svg);
    mask-image: url(/assets/images/mask-image/poems.svg);
  }

  &__tv {
    -webkit-mask-image: url(/assets/images/mask-image/tv.svg);
    mask-image: url(/assets/images/mask-image/tv.svg);
  }

  &__podcasts {
    -webkit-mask-image: url(/assets/images/mask-image/podcasts.svg);
    mask-image: url(/assets/images/mask-image/podcasts.svg);
  }

  &__all {
    -webkit-mask-image: url(/assets/images/mask-image/all.svg);
    mask-image: url(/assets/images/mask-image/all.svg);
  }
  &__myDownloads   {
    -webkit-mask-image: url(/assets/images/mask-image/download.svg);
    mask-image: url(/assets/images/mask-image/download.svg);
  }
  &__home   {
    -webkit-mask-image: url(/assets/images/mask-image/home.svg);
    mask-image: url(/assets/images/mask-image/home.svg);
  }
  &__explore {
    -webkit-mask-image: url(/assets/images/mask-image/explore.svg);
    mask-image: url(/assets/images/mask-image/explore.svg);
  }
  &__questionSet {
    -webkit-mask-image: url(/assets/images/mask-image/question_set.svg);
    mask-image: url(/assets/images/mask-image/question_set.svg);
  }
}
html[layout=joy] .help-page .help-page__header {
  border-radius: 1.5rem 1.5rem 0 0 !important;
  width: 100%;
  background: var(--sbt-page-header-bg) !important;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""