import { IImpressionEventInput, TelemetryService } from '@sunbird/telemetry';
import { CertRegService, UserService } from '@sunbird/core';
import { ResourceService, ToasterService, NavigationHelperService } from '@sunbird/shared';
import { Subject } from 'rxjs';
import { Component, OnInit, OnDestroy, Input, ViewChild, HostListener } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import * as _ from 'lodash-es';
import { IUserCertificate } from '../../interfaces';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-re-issue-certificate',
templateUrl: './re-issue-certificate.component.html',
styleUrls: ['./re-issue-certificate.component.scss']
})
export class ReIssueCertificateComponent implements OnInit, OnDestroy {
@ViewChild('searchBtn') button;
@Input() userName;
courseId: string;
userData: IUserCertificate;
channelName: string;
showModal = false;
userBatch: {};
telemetryImpression: IImpressionEventInput;
criteriaMet: boolean;
public unsubscribe$ = new Subject<void>();
constructor(
public resourceService: ResourceService,
private certService: CertRegService,
private activatedRoute: ActivatedRoute,
private toasterService: ToasterService,
private navigationhelperService: NavigationHelperService,
private router: Router,
private telemetryService: TelemetryService,
private userService: UserService,
) { }
@HostListener('window:popstate', ['$event'])
onPopState(event) {
if (this.showModal) {
this.showModal = false;
}
}
ngOnInit() {
this.channelName = _.upperCase(this.resourceService.instance);
this.activatedRoute.parent.params.pipe(takeUntil(this.unsubscribe$)).subscribe(params => {
this.courseId = _.get(params, 'courseId');
this.setImpressionEvent();
});
}
searchCertificates() {
let value = !_.isEmpty(this.userData) ? this.userData['courses'].batches = [] : [];
this.button.nativeElement.disabled = true;
this.button.nativeElement.classList.add('sb-btn-disabled');
this.button.nativeElement.classList.remove('sb-btn-outline-primary');
this.certService.getUserCertList(this.userName.trim(), this.courseId, this.userService.userid)
.pipe(takeUntil(this.unsubscribe$)).subscribe((data) => {
this.modifyCss();
if (!this.isErrorOccurred(_.get(data, 'result.response'))) {
this.userData = _.get(data, 'result.response');
this.criteriaMet = this.certService.checkCriteria(_.get(this.userData, 'courses.batches'));
}
}, (err) => {
this.modifyCss();
this.showErrorMsg(this.resourceService.messages.dashboard.emsg.m001);
value = !_.isEmpty(this.userData) ? this.userData['courses'].batches = [] : [];
});
}
isErrorOccurred(response) {
const errMsg = _.isEmpty(response) ? (this.resourceService.messages.emsg.m004).replace('{instance}', this.channelName) :
(_.isEmpty(_.get(response, 'courses.batches')) ? this.resourceService.messages.dashboard.emsg.m002 : '');
if (!_.isEmpty(errMsg)) {
this.showErrorMsg(errMsg);
return true;
}
return false;
}
modifyCss() {
this.button.nativeElement.disabled = false;
this.button.nativeElement.classList.remove('sb-btn-disabled');
this.button.nativeElement.classList.add('sb-btn-outline-primary');
}
showErrorMsg(msg) {
this.toasterService.error(msg);
}
reIssueCert (batch) {
const request = {
request: {
courseId: this.courseId,
batchId: _.get(batch, 'batchId'),
userIds: [_.get(this.userData, 'userId')],
createdBy: _.get(batch, 'createdBy')
}
};
this.certService.reIssueCertificate(request).pipe(takeUntil(this.unsubscribe$)).subscribe(data => {
this.toggleModal(false);
this.toasterService.success(this.resourceService.messages.dashboard.smsg.m001);
}, err => {
this.toggleModal(false);
this.toasterService.error(this.resourceService.messages.dashboard.emsg.m003);
});
}
toggleModal(visibility = false, batch?: {}) {
this.showModal = visibility;
this.userBatch = !_.isEmpty(batch) ? batch : this.userBatch;
}
// To set telemetry impression
setImpressionEvent() {
this.telemetryImpression = {
context: {
env: _.get(this.activatedRoute.snapshot, 'data.telemetry.env')
},
edata: {
type: _.get(this.activatedRoute.snapshot, 'data.telemetry.type'),
pageid: _.get(this.activatedRoute.snapshot, 'data.telemetry.pageid'),
uri: this.router.url,
duration: this.navigationhelperService.getPageLoadTime()
},
object: this.setObject()
};
}
addTelemetry (id, extra) {
const interactData = {
context: {
env: _.get(this.activatedRoute, 'snapshot.data.telemetry.env'),
cdata: []
},
edata: {
id: id,
type: 'click',
pageid: _.get(this.activatedRoute, 'snapshot.data.telemetry.pageid')
},
object: this.setObject()
};
if (extra) {
interactData.edata['extra'] = extra;
_.map(extra, ((value, key) => interactData.context.cdata.push({id: value, type: key})));
}
this.telemetryService.interact(interactData);
}
setObject() {
return {
id: this.courseId,
type: _.get(this.userData, 'courses.contentType') || _.get(this.activatedRoute.snapshot, 'data.telemetry.object.type'),
ver: _.get(this.userData, 'courses.pkgVersion') ? _.get(this.userData, 'courses.pkgVersion') ? `${_.get(this.userData, 'courses.pkgVersion')}` : '1.0' : '1.0',
};
}
toLowerCase(msg: string) {
if (msg) {
return msg[0].toUpperCase() + msg.substring(1).toLowerCase();
}
return '';
}
resetValues() {
this.userName = this.userName ? this.userName.trim() : this.userName;
const value = !_.isEmpty(this.userData) ? this.userData['courses'].batches = [] : [];
}
enableReIssueCert(batch) {
return ((!_.isEmpty(_.get(batch, 'certificates')) || !_.isEmpty(_.get(batch, 'issuedCertificates'))) || _.get(batch, 'status') === 2);
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
<div class="ui stackable grid re-issue-content" [appTelemetryImpression]="telemetryImpression">
<div class="twelve wide column">
<div class="px-16">
<div class="ui grid">
<div class="seven wide column">
<div class="reissue-title text-left font-weight-bold">{{resourceService?.frmelmnts?.lbl?.cert}} </div>
<div class="sb-field certificate-id-content">
<label class="d-inline-flex flex-ai-center flex-jc-space-between w-100 user-id-label" for="id">
<span>{{resourceService?.frmelmnts?.lbl?.enterInstanceId | interpolate:'{instance}': channelName}}
{{resourceService?.frmelmnts?.lbl?.or}} {{resourceService?.frmelmnts?.lbl?.enterUUID}}
</span></label>
<div class="d-flex">
<div class="user-id-input">
<label for="search-user-input-id" class="hide">{{resourceService?.frmelmnts?.lbl?.searchUser}}</label>
<input class="sb-form-control font-weight-bold" id="search-user-input-id" name="id" placeholder="{{resourceService?.frmelmnts?.lbl?.searchUser}}" type="id" [(ngModel)]="userName" (ngModelChange)="resetValues()">
<small class="message sb-color-error font-weight-bold mt-8"></small></div>
<button class="sb-btn sb-btn-normal ml-16" id="search-btn" type="button" tabindex="0" (click)="searchCertificates();addTelemetry('search-user-cert', {userId: userName, courseId: courseId})" [disabled]="!userName"
#searchBtn [ngClass]="{'sb-btn-disabled': !userName?.trim(), 'sb-btn-outline-primary': userName}">{{resourceService?.frmelmnts?.lbl?.search}}</button>
</div>
</div>
</div>
<div class="five wide column">
<div class="fsmall certificate-id-info">
<div> {{resourceService?.frmelmnts?.lbl?.whatInstanceId | interpolate:'{instance}': channelName}} </div>
<div class="py-8">{{resourceService?.frmelmnts?.reissue?.lbl?.instructions | interpolate:'{instance}': channelName}}</div>
<div class="pt-8">
<div>{{resourceService?.frmelmnts?.lbl?.step1}} {{resourceService?.frmelmnts?.lbl?.profileTab}}</div>
<div class="py-8">{{resourceService?.frmelmnts?.lbl?.step2}} {{resourceService?.frmelmnts?.reissue?.lbl?.displayUser | interpolate:'{instance}': channelName}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="twelve wide column mt-24" *ngIf="userData?.courses?.batches.length">
<div class="px-16 py-24">
<div class="d-flex re-issue-list-content">
<div class="px-16">
<div class="ui stackable grid mt-0 re-issue-list-content__labels">
<div class="two wide column">
<div class="re-issue-label">{{toLowerCase(resourceService?.frmelmnts?.lbl?.batch_name)}}</div>
</div>
<div class="two wide column">
<div class="re-issue-label">{{toLowerCase(resourceService?.frmelmnts?.lbl?.dashboardsortbyusername)}}</div>
</div>
<div class="two wide column">
<div class="re-issue-label">{{toLowerCase(resourceService?.frmelmnts?.lbl?.userDistrict)}}</div>
</div>
<div class="two wide column">
<div class="re-issue-label text-center">{{toLowerCase(resourceService?.frmelmnts?.lbl?.courseProgress)}}</div>
</div>
<div class="two wide column pl-0">
<div class="re-issue-label text-center">{{toLowerCase(resourceService?.frmelmnts?.lbl?.reissue?.criteriaMet)}}</div>
<div class="two wide column pl-0">
<div class="re-issue-label text-center"></div>
</div>
</div>
</div>
<div class="re-issue-list-content__data">
<div class="ui stackable grid mt-0" *ngFor="let batch of userData?.courses?.batches">
<div class="two wide column">
<div class="re-issue-status" suiPopup popupHeader="{{batch?.name}}" *ngIf="batch?.name?.length >= 50">{{batch?.name}} </div>
<div class="re-issue-status" *ngIf="batch?.name?.length < 50">{{batch?.name}} </div>
</div>
<div class="two wide column">
<div class="re-issue-status" suiPopup popupHeader="{{userData?.userName}}" *ngIf="userData?.userName?.length >= 50">{{userData?.userName}}</div>
<div class="re-issue-status" *ngIf="userData?.userName?.length < 50">{{userData?.userName}}</div>
</div>
<div class="two wide column">
<div class="re-issue-status" suiPopup popupHeader="{{userData?.district}}" *ngIf="userData?.district?.length >= 48">{{userData?.district}}"></div>
<div class="re-issue-status" *ngIf="userData?.district?.length < 48">{{userData?.district}}</div>
</div>
<div class="two wide column text-center">
<div class="re-issue-status" >{{batch?.completionPercentage || 0}}%</div>
</div>
<div class="two wide column text-center">
<div class="re-issue-status">{{ criteriaMet ? resourceService?.frmelmnts?.btn?.yes : resourceService?.frmelmnts?.btn?.no }}</div>
</div>
<div class="two wide column pl-0" *ngIf="batch?.certificates?.length || batch?.status === 2">
<div class="re-issue-status text-center cursor-pointer">
<a class="font-weight-bold sb-color-primary" tabindex="0" (click)="toggleModal(true, batch);addTelemetry('re-issue-cert', { userId: userData?.userId, courseId: userData?.courses?.courseId, batchId: userBatch?.batchId })" >{{resourceService?.frmelmnts?.lbl?.re_issue}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-dc w-100" *ngIf="userData?.courses?.batches?.length">
<div class="records-count-label pt-16 pl-16">{{resourceService?.frmelmnts?.lbl?.showingrecord | interpolate: '{count}': userData?.courses?.batches.length}} {{resourceService?.frmelmnts?.lbl?.totalrecords | interpolate: '{total}': userData?.courses?.batches.length}}</div>
</div>
</div>
<app-modal-wrapper *ngIf="showModal" [config]="{disableClose: true, size: 'small', panelClass: 'material-modal'}"
(dismiss)="toggleModal(false);addTelemetry('close-re-issue-popup', { userId: userData?.userId, courseId: userData?.courses?.courseId, batchId: userBatch?.batchId })"
#modal>
<ng-template sbModalContent>
<div class="sb-mat__modal">
<div mat-dialog-title class="mb-0">
<div class="title" tabindex="0">{{resourceService?.frmelmnts?.lbl?.cert}} ?</div>
</div>
<div class="sb-mat__modal__content">
<p> {{resourceService?.messages?.dashboard?.imsg?.m001 | interpolate:'{userName}': userData?.userName}}</p>
</div>
<mat-dialog-actions class="sb-mat__modal__actions">
<button class="sb-btn sb-btn-normal sb-btn-primary" tabindex="0"
(click)="reIssueCert(userBatch);addTelemetry('re-issue-cert-confirm', { userId: userData?.userId, courseId: userData?.courses?.courseId, batchId: userBatch?.batchId })">{{resourceService?.frmelmnts?.btn?.yes}}</button>
<button class="sb-btn sb-btn-normal sb-btn-outline-primary" tabindex="0"
(click)="toggleModal(false);addTelemetry('re-issue-cert-cancel', { userId: userData?.userId, courseId: userData?.courses?.courseId, batchId: userBatch?.batchId })">{{resourceService?.frmelmnts?.btn?.no}}</button>
</mat-dialog-actions>
</div>
</ng-template>
</app-modal-wrapper>