import { Component, OnInit, Output, EventEmitter, Input, OnDestroy } from '@angular/core';
import { ResourceService, ToasterService, ConfigService } from '@sunbird/shared';
import { PlayerService, LearnerService, UserService, CoursesService, GeneraliseLabelService } from '@sunbird/core';
import * as _ from 'lodash-es';
import { ActivatedRoute, Router } from '@angular/router';
import { takeUntil, mergeMap, tap, delay } from 'rxjs/operators';
import { Subject } from 'rxjs';
import dayjs from 'dayjs';
@Component({
selector: 'app-batch-info',
templateUrl: './batch-info.component.html',
styleUrls: ['./batch-info.component.scss']
})
export class BatchInfoComponent implements OnInit, OnDestroy {
@Input() enrolledBatchInfo: any;
@Output() modelClose = new EventEmitter;
@Output() routeChanged = new EventEmitter();
public userDetails = {};
public hasOngoingBatches = false;
public enrolledBatches: Array<any> = [];
public openForEnrollBatches: Array<any> = [];
public disableEnrollBtn = false;
public unsubscribe = new Subject<void>();
public enrollInteractEdata;
public resumeInteractEdata;
constructor(public resourceService: ResourceService, public playerService: PlayerService, public configService: ConfigService,
public learnerService: LearnerService, public userService: UserService, public toasterService: ToasterService,
public coursesService: CoursesService, public router: Router, public generaliseLabelService: GeneraliseLabelService,
public activatedRoute: ActivatedRoute) {
this.resumeInteractEdata = {
id: 'resume',
type: 'click',
pageid: 'batch-info'
};
this.enrollInteractEdata = {
id: 'enroll',
type: 'click',
pageid: 'batch-info'
};
}
ngOnInit() {
if (this.enrolledBatchInfo.onGoingBatchCount) {
this.hasOngoingBatches = true;
this.enrolledBatches = _.concat(this.enrolledBatchInfo.inviteOnlyBatch.ongoing, this.enrolledBatchInfo.openBatch.ongoing);
} else {
this.enrolledBatches = _.concat(this.enrolledBatchInfo.inviteOnlyBatch.expired, this.enrolledBatchInfo.openBatch.expired);
this.getAllOpenBatchForCourse().pipe(takeUntil(this.unsubscribe))
.subscribe(data => {
this.openForEnrollBatches = _.get(data, 'result.response.content') || [];
this.fetchUserDetails(_.map(this.openForEnrollBatches, batch => batch.createdBy));
});
}
this.fetchUserDetails(_.map(this.enrolledBatches, batch => batch.batch.createdBy));
}
private getAllOpenBatchForCourse() {
const option = {
url: this.configService.urlConFig.URLS.BATCH.GET_BATCHS,
data: {
request: {
filters: {
status: [ '1' ],
enrollmentType: 'open',
courseId: this.enrolledBatchInfo.courseId
},
offset: 0,
sort_by: { createdDate: 'desc' }
}
}
};
return this.learnerService.post(option);
}
public handleResumeEvent(event) {
this.routeChanged.emit(false);
event.mimeType = 'application/vnd.ekstep.content-collection'; // to route to course page
event.contentType = 'Course'; // route to course page
event.primaryCategory = 'Course';
this.playerService.playContent(event);
}
public handleEnrollmentEndDate(batchDetails) {
const enrollmentEndDate = dayjs(_.get(batchDetails, 'enrollmentEndDate')).format('YYYY-MM-DD');
const systemDate = dayjs();
const disableEnrollBtn = enrollmentEndDate ? dayjs(enrollmentEndDate).isBefore(systemDate) : false;
return disableEnrollBtn;
}
public handleStartDate(batchDetails) {
const batchStartDate = dayjs(_.get(batchDetails, 'startDate')).format('YYYY-MM-DD');
const systemDate = dayjs();
const isJoinNotEnabled = batchStartDate ? dayjs(batchStartDate).isAfter(systemDate) : false;
return isJoinNotEnabled;
}
public handleEnrollEvent(event) {
this.disableEnrollBtn = true;
const options = {
url: this.configService.urlConFig.URLS.COURSE.ENROLL_USER_COURSE,
data: {
request: {
courseId: event.courseId,
userId: this.userService.userid,
batchId: event.identifier
}
}
};
this.learnerService.post(options).pipe(
tap(data => {
this.toasterService.success(this.resourceService.messages.smsg.m0036);
}),
delay(2000), // wait for data to sync
mergeMap(data => this.coursesService.getEnrolledCourses()), // fetch enrolled course
).subscribe(data => {
const textbook = _.get(this.activatedRoute, 'snapshot.queryParams.textbook');
const queryParams = textbook ? { textbook } : {};
this.router.navigate(['/learn/course', event.courseId, 'batch', event.identifier], { queryParams }).then(res => {
this.routeChanged.emit(true);
});
}, (err) => {
this.disableEnrollBtn = false;
this.toasterService.error(this.resourceService.messages.emsg.m0001);
});
}
private fetchUserDetails(userIds = []) {
if (!userIds.length) {
return;
}
const option = {
url: this.configService.urlConFig.URLS.ADMIN.USER_SEARCH,
data: {
request: {
filters: { identifier: _.compact(_.uniq(userIds)) }
}
}
};
this.learnerService.post(option).pipe(takeUntil(this.unsubscribe))
.subscribe(({result}) => _.forEach(_.get(result, 'response.content'), user => this.userDetails[user.identifier] = user));
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
}
<app-modal-wrapper (dismiss)="modelClose.emit()" [config]="{disableClose: false}">
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible normal">
<button aria-label="close dialog" mat-dialog-close class="mat-close-btn">
<span>×</span>
</button>
<!--Header-->
<div class="sb-modal-header">
{{resourceService.frmelmnts?.lbl?.sltBtch}}
</div>
<!--/Header-->
<!--Content-->
<div class="sb-modal-content">
<div *ngIf="!hasOngoingBatches" class="h4-title font-weight-bold mb-15">
{{resourceService.frmelmnts?.lbl?.exprdbtch}}</div>
<div *ngFor="let batchDetails of enrolledBatches" class="batch-row mb-15">
<div class="batch-name font-weight-bold d-block mb-15">{{batchDetails.batch.name}}</div>
<div class="d-flex">
<div class="column px-10"><i class="calendar outline icon"></i></div>
<div class="column">
<div class="date batch-date">
<span class="d-block mb-5">
<b class="font-weight-bold">
{{resourceService.frmelmnts?.lbl?.startdate}} :
</b>
{{batchDetails.batch.startDate | dateFormat}}
</span>
<span class="d-block mb-5"><b class="font-weight-bold">{{resourceService.frmelmnts?.lbl?.enddate}}
: </b>
{{batchDetails.batch.endDate | dateFormat}}</span>
<span
*ngIf="userDetails[batchDetails.batch.createdBy] && userDetails[batchDetails.batch.createdBy].firstName"
class="d-block">{{resourceService.frmelmnts?.lbl?.courseCreatedBy}}: {{
userDetails[batchDetails.batch.createdBy].firstName}}</span>
</div>
</div>
<div class="column ml-auto">
<button appTelemetryInteract [telemetryInteractEdata]="resumeInteractEdata"
[telemetryInteractObject]="{id: batchDetails.identifier, type:'CourseBatch', ver:'1.0'}"
[telemetryInteractCdata]="[{ type: 'course', id: batchDetails.courseId}]" tabindex="0"
(click)="handleResumeEvent(batchDetails)"
class="sb-btn sb-btn-normal sb-btn-outline-primary">{{resourceService.frmelmnts?.btn?.resume}}</button>
</div>
</div>
</div>
<div *ngIf="!hasOngoingBatches && openForEnrollBatches.length" class="ui divider"></div>
<div *ngIf="!hasOngoingBatches && openForEnrollBatches.length" class="h4-title font-weight-bold mb-15">
{{resourceService.frmelmnts?.lbl?.opndbtch}}
</div>
<div *ngIf="!hasOngoingBatches && openForEnrollBatches.length">
<div *ngFor="let batchDetails of openForEnrollBatches" class="batch-row mb-15">
<div class="batch-name font-weight-bold d-block mb-15">{{batchDetails.name}}</div>
<div class="d-flex">
<div class="column px-10"><i class="calendar outline icon"></i></div>
<div class="column">
<div class="date batch-date">
<span class="d-block mb-5"><b
class="font-weight-bold">{{resourceService.frmelmnts?.lbl?.startdate}} :
</b>
{{batchDetails.startDate | dateFormat}}</span>
<span class="d-block mb-5"><b class="font-weight-bold">{{resourceService.frmelmnts?.lbl?.enddate}}
:
</b>
{{batchDetails.endDate | dateFormat}}</span>
<span *ngIf="userDetails[batchDetails.createdBy] && userDetails[batchDetails.createdBy].firstName"
class="d-block">{{resourceService.frmelmnts?.lbl?.courseCreatedBy}}:
{{ userDetails[batchDetails.createdBy].firstName}}</span>
</div>
</div>
<div class="column ml-auto">
<button appTelemetryInteract [telemetryInteractEdata]="enrollInteractEdata"
[telemetryInteractObject]="{id: batchDetails.identifier, type:'CourseBatch', ver:'1.0', rollup:{l1: batchDetails.courseId,l2: batchDetails.identifier}}"
[telemetryInteractCdata]="[{ type: 'course', id: batchDetails.courseId}]"
[disabled]="(handleEnrollmentEndDate(batchDetails) || handleStartDate(batchDetails) || disableEnrollBtn)"
[ngClass]="{'sb-btn-disabled': (handleEnrollmentEndDate(batchDetails) || handleStartDate(batchDetails) || disableEnrollBtn)}"
tabindex="0" (click)="handleEnrollEvent(batchDetails)"
class="sb-btn sb-btn-normal sb-btn-outline-primary">{{resourceService?.frmelmnts?.btn?.enroll}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>