src/app/course-batches/course-batches.page.ts
OnInit
ConsentPopoverActionsDelegate
| selector | app-course-batches |
| styleUrls | ./course-batches.page.scss |
| templateUrl | ./course-batches.page.html |
Properties |
|
Methods |
|
constructor(preferences: SharedPreferences, appGlobalService: AppGlobalService, popoverCtrl: PopoverController, zone: NgZone, commonUtilService: CommonUtilService, events: Events, telemetryGeneratorService: TelemetryGeneratorService, headerService: AppHeaderService, location: Location, router: Router, platform: Platform, localCourseService: LocalCourseService, categoryKeyTranslator: CategoryKeyTranslator)
|
||||||||||||||||||||||||||||||||||||||||||
|
Parameters :
|
| Async enrollIntoBatch | ||||||
enrollIntoBatch(batch: Batch)
|
||||||
|
Parameters :
Returns :
unknown
|
| goBack |
goBack()
|
|
Returns :
void
|
| Private handleBackButton |
handleBackButton()
|
|
Returns :
void
|
| ionViewWillEnter |
ionViewWillEnter()
|
|
Returns :
void
|
| ionViewWillLeave |
ionViewWillLeave()
|
|
Returns :
void
|
| Private Async joinTraining | ||||
joinTraining(batchDetails)
|
||||
|
Parameters :
Returns :
any
|
| Async ngOnInit |
ngOnInit()
|
|
Returns :
any
|
| onConsentPopoverDismiss |
onConsentPopoverDismiss()
|
|
Returns :
void
|
| onConsentPopoverShow |
onConsentPopoverShow()
|
|
Returns :
void
|
| Private backButtonFunc |
Type : Subscription
|
| Private corRelationList |
Type : Array<CorrelationData>
|
| Public course |
Type : any
|
| headerConfig |
Type : object
|
Default value : {
showHeader: false,
showBurgerMenu: false,
actionButtons: []
}
|
| Private isGuestUser |
Default value : false
|
| Optional loader |
Type : HTMLIonLoadingElement
|
| Private objRollup |
Type : Rollup
|
| Public ongoingBatches |
Type : Array<Batch>
|
Default value : []
|
| Private telemetryObject |
Type : TelemetryObject
|
| Public todayDate |
Type : any
|
| Public upcommingBatches |
Type : Array<Batch>
|
Default value : []
|
| Private userId |
Type : string
|
import { Location } from '@angular/common';
import { Component, Inject, NgZone, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {PreferenceKey, RouterLinks} from '@app/app/app.constant';
import { CategoryKeyTranslator } from '@app/pipes/category-key-translator/category-key-translator-pipe';
import { AppGlobalService } from '@app/services';
import { ConsentPopoverActionsDelegate, LocalCourseService } from '@app/services/local-course.service';
import {
Platform, PopoverController
} from '@ionic/angular';
import { Events } from '@app/util/events';
import { Subscription } from 'rxjs';
import {
Batch,
CorrelationData, Rollup, SharedPreferences,
TelemetryObject
} from 'sunbird-sdk';
import { EventTopics } from '../../app/app.constant';
import { AppHeaderService } from '../../services/app-header.service';
import { CommonUtilService } from '../../services/common-util.service';
import {
Environment, ImpressionType, InteractSubtype, InteractType,
PageId
} from '../../services/telemetry-constants';
import { SbPopoverComponent } from '../components/popups';
import { EnrollCourse } from '../enrolled-course-details-page/course.interface';
import { TelemetryGeneratorService } from './../../services/telemetry-generator.service';
@Component({
selector: 'app-course-batches',
templateUrl: './course-batches.page.html',
styleUrls: ['./course-batches.page.scss'],
})
export class CourseBatchesPage implements OnInit, ConsentPopoverActionsDelegate {
public upcommingBatches: Array<Batch> = [];
public ongoingBatches: Array<Batch> = [];
public todayDate: any;
headerConfig = {
showHeader: false,
showBurgerMenu: false,
actionButtons: []
};
public course: any;
private userId: string;
private isGuestUser = false;
private backButtonFunc: Subscription;
private objRollup: Rollup;
private corRelationList: Array<CorrelationData>;
private telemetryObject: TelemetryObject;
loader?: HTMLIonLoadingElement;
constructor(
@Inject('SHARED_PREFERENCES') private preferences: SharedPreferences,
private appGlobalService: AppGlobalService,
private popoverCtrl: PopoverController,
private zone: NgZone,
private commonUtilService: CommonUtilService,
private events: Events,
private telemetryGeneratorService: TelemetryGeneratorService,
private headerService: AppHeaderService,
private location: Location,
private router: Router,
private platform: Platform,
private localCourseService: LocalCourseService,
private categoryKeyTranslator: CategoryKeyTranslator
) {
const extrasState = this.router.getCurrentNavigation().extras.state;
if (extrasState) {
this.ongoingBatches = extrasState.ongoingBatches;
this.upcommingBatches = extrasState.upcommingBatches;
this.course = extrasState.course;
this.objRollup = extrasState.objRollup;
this.corRelationList = extrasState.corRelationList;
this.telemetryObject = extrasState.telemetryObject;
} else {
this.ongoingBatches = [];
this.upcommingBatches = [];
}
}
async ngOnInit() {
this.todayDate = window.dayjs().format('YYYY-MM-DD');
this.userId = await this.appGlobalService.getActiveProfileUid();
this.isGuestUser = !this.appGlobalService.isUserLoggedIn();
}
ionViewWillEnter() {
this.headerConfig = this.headerService.getDefaultPageConfig();
this.headerConfig.actionButtons = [];
this.headerConfig.showHeader = false;
this.headerConfig.showBurgerMenu = false;
this.headerService.updatePageConfig(this.headerConfig);
this.handleBackButton();
}
ionViewWillLeave() {
if (this.backButtonFunc) {
this.backButtonFunc.unsubscribe();
}
}
private handleBackButton() {
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(10, () => {
this.location.back();
this.backButtonFunc.unsubscribe();
});
}
goBack() {
this.location.back();
}
async enrollIntoBatch(batch: Batch) {
if (!this.localCourseService.isEnrollable([batch], this.course)) {
return false;
}
const enrollCourseRequest = this.localCourseService.prepareEnrollCourseRequest(this.userId, batch);
this.telemetryGeneratorService.generateInteractTelemetry(InteractType.TOUCH,
InteractSubtype.ENROLL_CLICKED,
Environment.HOME,
PageId.COURSE_BATCHES, this.telemetryObject,
this.localCourseService.prepareRequestValue(enrollCourseRequest),
this.objRollup,
this.corRelationList
);
if (this.isGuestUser) {
this.joinTraining(batch);
} else {
this.loader = await this.commonUtilService.getLoader();
await this.loader.present();
const enrollCourse: EnrollCourse = {
userId: this.userId,
batch,
pageId: PageId.COURSE_BATCHES,
courseId: this.course.identifier,
telemetryObject: this.telemetryObject,
objRollup: this.objRollup,
corRelationList: this.corRelationList,
channel: this.course.channel,
userConsent: this.course.userConsent
};
this.localCourseService.enrollIntoBatch(enrollCourse, this, this.course).toPromise()
.then((data: boolean) => {
this.zone.run(async () => {
this.commonUtilService.showToast(this.categoryKeyTranslator.transform('FRMELEMNTS_MSG_COURSE_ENROLLED', this.course));
this.events.publish(EventTopics.ENROL_COURSE_SUCCESS, {
batchId: batch.id,
courseId: batch.courseId
});
this.location.back();
});
}, async (error) => {
await this.loader.dismiss();
});
}
}
private async joinTraining(batchDetails) {
this.telemetryGeneratorService.generateImpressionTelemetry(ImpressionType.VIEW,
'', PageId.SIGNIN_POPUP,
Environment.HOME,
this.telemetryObject.id,
this.telemetryObject.type,
this.telemetryObject.version,
this.objRollup,
this.corRelationList);
const confirm = await this.popoverCtrl.create({
component: SbPopoverComponent,
componentProps: {
sbPopoverMainTitle: this.commonUtilService.translateMessage('YOU_MUST_JOIN_TO_ACCESS_TRAINING_DETAIL'),
metaInfo: this.commonUtilService.translateMessage('TRAININGS_ONLY_REGISTERED_USERS'),
sbPopoverHeading: this.commonUtilService.translateMessage('OVERLAY_SIGN_IN'),
isNotShowCloseIcon: true,
actionsButtons: [
{
btntext: this.commonUtilService.translateMessage('OVERLAY_SIGN_IN'),
btnClass: 'popover-color label-uppercase label-bold-font'
},
]
},
cssClass: 'sb-popover info',
});
await confirm.present();
const { data } = await confirm.onDidDismiss();
if (data && data.canDelete) {
this.preferences.putString(PreferenceKey.BATCH_DETAIL_KEY, JSON.stringify(batchDetails)).toPromise();
this.preferences.putString(PreferenceKey.COURSE_DATA_KEY, JSON.stringify(this.course)).toPromise();
this.preferences.putString(PreferenceKey.CDATA_KEY, JSON.stringify(this.corRelationList)).toPromise();
this.telemetryGeneratorService.generateInteractTelemetry(InteractType.TOUCH,
InteractSubtype.LOGIN_CLICKED,
Environment.HOME,
PageId.SIGNIN_POPUP,
this.telemetryObject,
undefined,
this.objRollup,
this.corRelationList);
this.router.navigate([RouterLinks.SIGN_IN], {state: {navigateToCourse: true}});
}
}
onConsentPopoverShow() {
if (this.loader) {
this.loader.dismiss();
this.loader = undefined;
}
}
onConsentPopoverDismiss() {}
}
<ion-header class="sb-header">
<ion-toolbar class="sb-header-toolbar">
<ion-buttons class="font-size-20 padding-left-6" (click)="goBack()" slot="start">
<ion-icon role="button" slot="start" name="arrow-back" aria-label="back" class="batches-header-text"></ion-icon>
</ion-buttons>
<ion-title class="batches-header-text font-size-20">
<strong>{{'FRMELEMNTS_LBL_BATCHES_FOR_THIS_COURSE' | categoryKeyTranslate : course}}</strong>
</ion-title>
</ion-toolbar>
</ion-header>
<!-- Page body -->
<ion-content class="ion-padding" overflow-scroll="true">
<div *ngIf="ongoingBatches && ongoingBatches.length">
<div class="background-gray">
<div class="width-100 batch-font ion-text-capitalize">
{{ 'VIEW_ONGOING_BATCHES' | translate }}
</div>
</div>
<div class="batch-list ion-padding-top">
<div *ngIf="ongoingBatches && ongoingBatches.length">
<div class="flex-card-container" *ngFor="let batch of ongoingBatches">
<div class="card-text">
<div class="batch-name">{{ batch.name }}</div>
<span class="text-gray-color">
{{batch.startDate | date: 'dd/MM/yyyy' }} - {{ batch.endDate | date: 'dd/MM/yyyy' }}
</span>
<p *ngIf="batch?.creatorDetails?.firstName">
<span class="text-gray-color">{{ 'BATCH_CREATED_BY' | translate }}</span>
<span class="text-gray-color">{{ batch.creatorDetails.firstName }}</span>
<span class="text-gray-color"
*ngIf="batch?.creatorDetails?.lastName">{{batch?.creatorDetails?.lastName}}</span>
</p>
<p *ngIf="batch?.enrollmentEndDate">
<span *ngIf="(todayDate > batch?.enrollmentEndDate); else lastDateForEnrollment"
class="enroll-msg-ended">{{ 'BATCH_ENROLLMENT_ENDED' | translate}}</span>
<ng-template #lastDateForEnrollment>
<span class="enroll-msg-style">{{'ENROLLMENT_LAST_DATE' | translate}}
{{batch.enrollmentEndDate | date: 'dd/MM/yyyy'}}</span>
</ng-template>
</p>
</div>
<div class="card-icon">
<button class="sb-btn sb-btn-sm sb-btn-outline-info view-all-p8 ion-float-end"
(click)="enrollIntoBatch(batch);"
[disabled]="(batch.enrollmentEndDate && (todayDate > batch.enrollmentEndDate))">
{{ 'ENROLL' | translate }}</button>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="upcommingBatches && upcommingBatches.length">
<div class="background-gray">
<div class="width-100 batch-font ion-text-capitalize">
{{ 'VIEW_UPCOMING_BATCHES' | translate }}
</div>
</div>
<div class="batch-list ion-padding-top">
<div *ngIf="upcommingBatches && upcommingBatches.length">
<div class="flex-card-container" *ngFor="let batch of upcommingBatches">
<div class="card-text">
<div class="batch-name">{{ batch.name }}</div>
<span class="text-gray-color">
{{batch.startDate | date: 'dd/MM/yyyy' }} - {{ batch.endDate | date: 'dd/MM/yyyy' }}
</span>
<p *ngIf="batch?.creatorDetails?.firstName">
<span class="text-gray-color">{{ 'BATCH_CREATED_BY' | translate }}</span>
<span class="text-gray-color">{{ batch.creatorDetails.firstName }}</span>
<span class="text-gray-color"
*ngIf="batch?.creatorDetails?.lastName">{{batch.creatorDetails.lastName}}</span>
</p>
<p *ngIf="batch?.enrollmentEndDate">
<span *ngIf="(todayDate > batch?.enrollmentEndDate); else lastDateForEnrollment"
class="enroll-msg-ended">{{ 'BATCH_ENROLLMENT_ENDED' | translate}}</span>
<ng-template #lastDateForEnrollment>
<span class="enroll-msg-style">{{'ENROLLMENT_LAST_DATE' | translate}}
{{batch.enrollmentEndDate | date: 'dd/MM/yyyy' }}</span>
</ng-template>
</p>
</div>
<div class="card-icon">
<button class="sb-btn sb-btn-sm sb-btn-outline-info view-all-p8 ion-float-end"
(click)="enrollIntoBatch(batch)"
[disabled]="(batch.enrollmentEndDate && (todayDate > batch.enrollmentEndDate))"
[ngClass]="{'enroll-style' : (batch.enrollmentEndDate && (todayDate > batch.enrollmentEndDate))}">
{{ 'ENROLL' | translate }}
</button>
</div>
</div>
</div>
</div>
</div>
</ion-content>
./course-batches.page.scss
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/fonts.scss";
@import "src/assets/styles/_variables.scss";
:host {
.my-overlay {
position: fixed;
width: 100%;
height: 100%;
//background: rgba(0,0,0,0.7);
background: rgba(255, 255, 255, 0.8);
z-index: 20;
top: 0;
@include ltr() {
left: 0;
}
@include rtl() {
right: 0;
}
margin-top: 56px;
}
.batch-filter-icon {
float: right;
@include padding(null, 25px, null, null);
}
.batch-filter-holder{
margin-top: -10px;
}
.batches-header-text{
color: map-get($colors, facebook);
}
.padding-left-6{
padding-left: 6px;
}
.enroll-msg-style {
font-size: 0.9rem;
}
.font-size-20{
font-size: 1.125rem !important;
}
.background-gray{
background: map-get($colors, gray_white);
@include margin(-16px, -26px, 0, -26px);
@include padding(null, null, null, 25px !important);
}
.batch-empty-msg-wrapper {
padding-top: 100px;
.msg-holder {
padding-top: 30px;
.empty-batch-icon{
width: 3.125rem;
@include margin(null, null, null, 118px);
}
.text-holder{
font-size: 1.125rem;
font-weight: 300 !important;
}
}
}
.guest-user-info {
padding-top: 135px;
}
.batch-name {
margin-top: 0px;
font-size: 0.75rem;
@extend .NotoSans-semi-bold;
}
.selected-filter {
width: 88%;
padding-top: 8px;
@extend .font-weight-600;
}
.padding-top-30 {
padding-top: 30px;
}
.batch-list {
@include margin(null, null, null, -10px);
.enroll-btn{
@include padding(null, 0, null, null !important);
text-transform: none;
font-size: 1.5rem;
float: right;
}
}
.padding-top-8 {
padding-top: 8px;
}
.padding-top-9 {
padding-top: 9px;
}
.back-button-md {
@include margin(null, null, null, -1px !important);
}
.text-gray-color {
color: gray;
display: inline-block;
@extend .NotoSans;
}
.header-md::after {
background-image: none;
}
.batch-font{
@extend .NotoSans-bold;
padding: 15px 0 12px 7px;
font-size: 1rem;
}
button:disabled {
opacity: 0.7 !important;
}
ion-label {
white-space: unset
}
.flex-card-container {
display: flex;
flex-wrap: nowrap;
align-items:center;
justify-content:center;
padding: 12px;
margin-bottom: 12px;
.card-text {
width: 80%;
p {
margin-top: 0px;
margin-bottom: 2px;
}
}
.card-icon{
width: 20%;
}
}
.sb-btn-outline-info {
font-weight: bold;
font-size: 0.75rem;
}
.enroll-msg-ended {
color: $orange;
font-size: 0.9rem;
}
}
button:disabled{
opacity: 0.5 !important;
}