File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
certificateDescription
|
Type : any
|
|
|
Outputs
|
close
|
Type : EventEmitter
|
|
|
Methods
|
logInteractTelemetry
|
logInteractTelemetry()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
import { Component, OnDestroy, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { ResourceService } from '@sunbird/shared';
import { GeneraliseLabelService } from '@sunbird/core';
import { TelemetryService, IInteractEventInput } from '@sunbird/telemetry';
import * as _ from 'lodash-es';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-course-completion',
templateUrl: './course-completion.component.html',
styleUrls: ['./course-completion.component.scss']
})
export class CourseCompletionComponent implements OnDestroy {
@ViewChild('modal') modal;
@Input() certificateDescription;
@Output() close = new EventEmitter<void>();
constructor(
public resourceService: ResourceService,
private telemetryService: TelemetryService,
private activatedRoute: ActivatedRoute,
public generaliseLabelService: GeneraliseLabelService
) { }
closeModal() {
/* istanbul ignore else */
if (_.get(this.modal, 'deny')) {
this.modal.deny();
this.logInteractTelemetry();
this.close.emit();
}
}
logInteractTelemetry() {
const interactData: IInteractEventInput = {
context: {
cdata: [{ id: 'course-completion', type: 'Feature' }],
env: this.activatedRoute.snapshot.data.telemetry.env,
},
edata: {
id: 'close-course-completion-modal',
type: 'click',
pageid: this.activatedRoute.snapshot.data.telemetry.pageid
}
};
this.telemetryService.interact(interactData);
}
ngOnDestroy() {
this.closeModal();
}
}
<app-modal-wrapper [config]="{disableClose: true, size: 'small', panelClass: 'material-modal'}" #modal>
<ng-template sbModalContent>
<div class="sb-mat__modal sb-mat__modal--small sb-mat__modal--course-complete">
<div class="sb-mat__modal__content p-0">
<button aria-label="close dialog" mat-dialog-close class="close-btn"></button>
<div class="course-complete sb-bg-white p-32">
<div class="course-complete-content">
<div class="mr-24"><img src="./assets/images/badge-complete.svg" width="79px" height="69px" alt=""></div>
<div class="course-complete-data font-weight-bold">
<div class="title mb-8">{{resourceService?.frmelmnts?.lbl?.congratulations}}!</div>
<p>{{generaliseLabelService?.frmelmnts?.lbl?.courseSuccessMessage}}</p>
</div>
</div>
<div class="course-complete-para mt-32 sb-color-warning"
*ngIf="certificateDescription && !certificateDescription?.isCertificate">
<img src="assets/images/alert.svg" width="22px" height="22px" alt="Cpu load warning" class="mr-8">
<span>{{generaliseLabelService?.frmelmnts?.lbl?.courseWithoutCertificateNote }}</span>
</div>
<div class="course-complete-para mt-32" *ngIf="certificateDescription && certificateDescription?.description">
<p class="fsmall mb-0 pt-16 pb-8">{{certificateDescription?.description}}</p>
</div>
<div class="course-complete-para mt-32 sb-color-primary" *ngIf="certificateDescription && certificateDescription?.isCertificate">
<p class="fsmall mb-0">{{generaliseLabelService?.frmelmnts?.lbl?.courseSuccessNotificationMessage}}</p>
</div>
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.course-complete-content {
display: flex;
align-items: center;
.course-complete-data {
color: var(--green);
font-size: calculateRem(14px);
.title {
font-size: calculateRem(24px);
}
}
}
.course-complete-para {
color: var(--gray);
font-size: calculateRem(12px);
}
::ng-deep {
.sb-modal .ui.modal > .close {
color: var(--black);
}
}
Legend
Html element with directive