File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
courseHierarchy
|
Type : any
|
|
|
Methods
|
checkContentCreditAvailability
|
checkContentCreditAvailability()
|
|
|
|
|
|
ngOnChanges
|
ngOnChanges()
|
|
|
|
|
|
isOpen
|
Default value : false
|
|
|
|
showContentCreditsModal
|
Default value : false
|
|
|
|
showCredits
|
Default value : false
|
|
|
import { Component, Input, OnInit } from '@angular/core';
import { ResourceService } from '@sunbird/shared';
import * as _ from 'lodash-es';
@Component({
selector: 'app-course-info',
templateUrl: './course-info.component.html',
styleUrls: ['./course-info.component.scss']
})
export class CourseInfoComponent implements OnInit {
@Input() courseHierarchy;
showContentCreditsModal = false;
showCredits = false;
instance: string;
isOpen = false;
constructor(public resourceService: ResourceService) { }
ngOnInit() {
this.instance = _.upperCase(this.resourceService.instance || 'SUNBIRD');
}
ngOnChanges() {
this.checkContentCreditAvailability();
}
checkContentCreditAvailability() {
/* istanbul ignore else */
const { copyright, creators, attributions, originData, contentType } = this.courseHierarchy;
if (copyright || creators || attributions || (!_.isEmpty(originData) && contentType === 'Course')) {
this.showCredits = true;
}
}
}
<mat-accordion class="sb-mat-accordion mb-16">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title tabindex="0" title class="sb-mat-accordion__title d-flex flex-ai-center flex-jc-space-between"
[attr.aria-expanded]="isOpen"
attr.aria-label="{{resourceService?.frmelmnts?.lbl?.creditsLicenceInfo}} accordion"
aria-controls="creditsLicenceInfo">
<span>{{resourceService?.frmelmnts?.lbl?.creditsLicenceInfo}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div content class="sb-mat-accordion__content" role="region" id="creditsLicenceInfo"
aria-labelledby="creditsLicenceInfo">
<div class="pb-24" *ngIf="courseHierarchy?.author">
<div class="content-metadeta__title fsmall font-weight-bold mb-8 sb-color-gray-800">
{{resourceService?.frmelmnts?.lbl?.author}}</div>
<div class="content-metadeta__text fnormal sb-color-gray-400">{{courseHierarchy?.author}}</div>
</div>
<div class="pb-24" *ngIf="courseHierarchy?.creator">
<div class="content-metadeta__title fsmall font-weight-bold mb-8 sb-color-gray-800">
{{resourceService?.frmelmnts?.lbl?.courseCreatedBy}}</div>
<div class="content-metadeta__text fnormal sb-color-gray-400">{{courseHierarchy?.creator}}</div>
</div>
<div class="pb-24">
<div class="content-metadeta__title fsmall font-weight-bold mb-8 sb-color-gray-800">
{{resourceService.frmelmnts.lbl?.publishedOnInstanceName | interpolate:'{instance}': instance}}</div>
<div class="content-metadeta__text fnormal sb-color-gray-400">{{courseHierarchy?.organisation?.join(', ')}}
</div>
<div *ngIf="courseHierarchy?.orgDetails?.email" class="content-metadeta__text fnormal sb-color-gray-400"><a
href="mailto:{{courseHierarchy?.orgDetails?.email}}?subject={{courseHierarchy?.name}}">
{{courseHierarchy?.orgDetails?.email}}
</a></div>
</div>
<div class="pb-24" *ngIf="courseHierarchy?.createdOn">
<div class="content-metadeta__title fsmall font-weight-bold mb-8 sb-color-gray-800">
{{resourceService?.frmelmnts?.lbl?.coursecreatedon}}</div>
<div class="content-metadeta__text fnormal sb-color-gray-400">{{courseHierarchy?.createdOn | dateFormat}}</div>
</div>
<div class="pb-24" *ngIf="courseHierarchy?.lastUpdatedOn">
<div class="content-metadeta__title fsmall font-weight-bold mb-8 sb-color-gray-800">
{{resourceService?.frmelmnts?.lbl?.updatedon}}</div>
<div class="content-metadeta__text fnormal sb-color-gray-400">{{courseHierarchy?.lastUpdatedOn | dateFormat}}
</div>
</div>
<div class="pb-24" *ngIf="showCredits">
<div class="content-metadeta__text fnormal sb-color-primary">
<a (click)="showContentCreditsModal = true" title="{{resourceService?.frmelmnts?.lbl?.courseCredits}}"
class="cursor-pointer">
{{resourceService?.frmelmnts?.lbl?.courseCredits}}
</a>
</div>
</div>
<div class="">
<div class="content-metadeta__title font-weight-bold fsmall mb-8 sb-color-gray-800">
{{resourceService?.frmelmnts?.lbl?.licenseTerms}}</div>
<div class="content-metadeta__text fnormal sb-color-gray-400">{{courseHierarchy?.license}}</div>
<span class="licenseTag">
{{resourceService?.frmelmnts?.lbl?.forDetails}} - <a [href]="courseHierarchy?.licenseDetails?.url"
target="_blank">{{courseHierarchy?.licenseDetails?.url}}</a>
</span>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
<app-content-credits [contentData]="courseHierarchy" *ngIf="showContentCreditsModal"
(close)="showContentCreditsModal = false"></app-content-credits>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
::ng-deep {
.ui.accordion .active.title .chevron.down.icon {
margin-top:calculateRem(6px);
}
.ui.accordion .title .chevron.down.icon {
margin-top:calculateRem(-6px);
}
}
Legend
Html element with directive