src/app/components/enrollment-details/enrollment-details.component.ts
OnInit
| selector | app-enrollment-details |
| styleUrls | ./enrollment-details.component.scss |
| templateUrl | ./enrollment-details.component.html |
Properties |
Methods |
constructor(preference: SharedPreferences, appGlobalService: AppGlobalService, navCtrl: NavController, navParams: NavParams, events: Events, zone: NgZone, popOverCtrl: PopoverController, telemetryGeneratorService: TelemetryGeneratorService, commonUtilService: CommonUtilService, navService: NavigationService, localCourseService: LocalCourseService, categoryKeyTranslator: CategoryKeyTranslator)
|
|||||||||||||||||||||||||||||||||||||||
|
Parameters :
|
| close | ||||||
close(data?: any)
|
||||||
|
Parameters :
Returns :
any
|
| Async enrollIntoBatch | ||||||
enrollIntoBatch(batch: any)
|
||||||
|
Parameters :
Returns :
any
|
| navigateToDetailPage |
navigateToDetailPage(content: any, layoutName?: string)
|
|
Returns :
void
|
| Async ngOnInit |
ngOnInit()
|
|
Returns :
any
|
| resumeCourse | ||||||
resumeCourse(content: any)
|
||||||
|
Parameters :
Returns :
void
|
| saveContentContext | ||||||
saveContentContext(content: any)
|
||||||
|
Parameters :
Returns :
void
|
| content |
Type : any
|
| courseId |
Type : any
|
| env |
Type : any
|
| index |
Type : any
|
| isGuestUser |
Type : boolean
|
| layoutInProgress |
Type : string
|
| layoutName |
Type : any
|
| Public navCtrl |
Type : NavController
|
| Public navParams |
Type : NavParams
|
| ongoingBatches |
Type : any
|
| pageName |
Type : any
|
| retiredBatched |
Type : any
|
| sectionName |
Type : any
|
| todayDate |
Type : string
|
| upcommingBatches |
Type : any
|
| userId |
Type : any
|
import { Component, NgZone, Inject, OnInit } from '@angular/core';
import {
NavController, PopoverController, NavParams
} from '@ionic/angular';
import { Events } from '@app/util/events';
import {
SharedPreferences, TelemetryObject, InteractType,
} from 'sunbird-sdk';
import {
PreferenceKey, EventTopics
} from '@app/app/app.constant';
import { CommonUtilService } from '@app/services/common-util.service';
import { TelemetryGeneratorService } from '@app/services/telemetry-generator.service';
import {
InteractSubtype, Environment, PageId
} from '@app/services/telemetry-constants';
import {
LocalCourseService, AppGlobalService
} from '@app/services';
import { EnrollCourse } from '@app/app/enrolled-course-details-page/course.interface';
import { CsPrimaryCategory } from '@project-sunbird/client-services/services/content';
import { ContentUtil } from '@app/util/content-util';
import { CategoryKeyTranslator } from '@app/pipes/category-key-translator/category-key-translator-pipe';
import { NavigationService } from '@app/services/navigation-handler.service';
@Component({
selector: 'app-enrollment-details',
templateUrl: './enrollment-details.component.html',
styleUrls: ['./enrollment-details.component.scss'],
})
export class EnrollmentDetailsComponent implements OnInit {
ongoingBatches: any;
upcommingBatches: any;
retiredBatched: any;
userId: any;
isGuestUser: boolean;
layoutInProgress: string;
sectionName: any;
index: any;
layoutName: any;
pageName: any;
env: any;
courseId: any;
content: any;
todayDate: string;
constructor(
@Inject('SHARED_PREFERENCES') private preference: SharedPreferences,
private appGlobalService: AppGlobalService,
public navCtrl: NavController,
public navParams: NavParams,
private events: Events,
private zone: NgZone,
private popOverCtrl: PopoverController,
private telemetryGeneratorService: TelemetryGeneratorService,
private commonUtilService: CommonUtilService,
private navService: NavigationService,
private localCourseService: LocalCourseService,
private categoryKeyTranslator: CategoryKeyTranslator
) {
this.ongoingBatches = this.navParams.get('ongoingBatches');
this.upcommingBatches = this.navParams.get('upcommingBatches');
this.retiredBatched = this.navParams.get('retiredBatched');
this.todayDate = window.dayjs().format('YYYY-MM-DD');
this.content = this.navParams.get('content');
this.courseId = this.content.identifier;
}
async ngOnInit() {
this.userId = await this.appGlobalService.getActiveProfileUid();
this.isGuestUser = !this.appGlobalService.isUserLoggedIn();
}
close(data?: any) {
return this.popOverCtrl.dismiss(data);
}
resumeCourse(content: any) {
this.saveContentContext(content);
this.close().then(() => {
this.navService.navigateToDetailPage(content.content, { content, skipCheckRetiredOpenBatch: true });
});
}
saveContentContext(content: any) {
const contentContextMap = new Map();
// store content context in the below map
contentContextMap['userId'] = content.userId;
contentContextMap['courseId'] = content.courseId;
contentContextMap['batchId'] = content.batchId;
if (content.batch) {
contentContextMap['batchStatus'] = content.batch.status;
}
// store the contentContextMap in shared preference and access it from SDK
this.preference.putString(PreferenceKey.CONTENT_CONTEXT, JSON.stringify(contentContextMap)).toPromise();
}
async enrollIntoBatch(batch: any) {
const enrollCourseRequest = this.localCourseService.prepareEnrollCourseRequest(this.userId, batch, this.courseId);
this.telemetryGeneratorService.generateInteractTelemetry(InteractType.TOUCH,
InteractSubtype.ENROLL_CLICKED,
Environment.HOME,
PageId.CONTENT_DETAIL, undefined,
this.localCourseService.prepareRequestValue(enrollCourseRequest));
const loader = await this.commonUtilService.getLoader();
await loader.present();
const enrollCourse: EnrollCourse = {
userId: this.userId,
batch,
pageId: PageId.COURSE_BATCHES,
courseId: this.courseId
};
this.localCourseService.enrollIntoBatch(enrollCourse, undefined, this.content).toPromise()
.then((data: any) => {
this.zone.run(() => {
this.commonUtilService.showToast(this.categoryKeyTranslator.transform('FRMELEMNTS_MSG_COURSE_ENROLLED', this.content));
this.events.publish(EventTopics.ENROL_COURSE_SUCCESS, {
batchId: batch.id,
courseId: batch.courseId
});
loader.dismiss();
this.popOverCtrl.dismiss({ isEnrolled: true, batchId: batch.id, courseId: batch.courseId });
this.navigateToDetailPage(this.content);
});
}, (error) => {
loader.dismiss();
});
}
navigateToDetailPage(content: any, layoutName?: string): void {
const identifier = content.contentId || content.identifier;
let telemetryObject;
if (layoutName === this.layoutInProgress) {
telemetryObject = new TelemetryObject(identifier, CsPrimaryCategory.COURSE, '');
} else {
telemetryObject = ContentUtil.getTelemetryObject(content);
}
const values = new Map();
values['sectionName'] = this.sectionName;
values['positionClicked'] = this.index;
this.telemetryGeneratorService.generateInteractTelemetry(InteractType.TOUCH,
InteractSubtype.CONTENT_CLICKED,
this.env,
PageId.COURSE_BATCHES,
telemetryObject,
values
);
this.navService.navigateToDetailPage(content, { content });
}
}
<ion-header class=" subtitle head">
<ion-toolbar>
<ion-title>{{ 'VIEW_ALL_BATCHES' | translate }}</ion-title>
<ion-buttons slot="primary">
<ion-button (click)="close()">
<ion-icon role="button" aria-label="close" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list no-lines>
<ion-item-group>
<ion-item-divider *ngIf="retiredBatched" class="subtitle mytitle">{{ 'VIEW_RETIRED_BATCHES' | translate }}</ion-item-divider>
<ion-item *ngFor="let batches of retiredBatched; let i=index">
<div item-start class="width-80">
<h5 class="subtitle title">{{ batches.batch.name }}</h5>
<p>{{batches.batch.startDate | date: 'dd/MM/yyyy' }} -
{{ batches.batch.endDate | date: 'dd/MM/yyyy' }}</p>
<p *ngIf="batch?.creatorDetails?.firstName">{{ 'BATCH_CREATED_BY' | translate }}
{{ batch.creatorDetails.firstName }}</p>
</div>
<ion-button fill="clear" item-end class="subtitle buttontext" (click)="resumeCourse(batches)">
{{ 'RESUME' | translate }}</ion-button>
</ion-item>
<ion-item-divider *ngIf="ongoingBatches && ongoingBatches.length" class="subtitle mytitle">
{{ 'VIEW_OPEN_BATCHES' | translate }}</ion-item-divider>
<div class="p-16 card-section-danger"></div>
<ion-item *ngFor="let batch of ongoingBatches; let i=index">
<div item-start class="width-80">
<h5 class="subtitle title">{{ batch.name }}</h5>
<p>{{batch.startDate | date: 'dd/MM/yyyy' }} - {{ batch.endDate | date: 'dd/MM/yyyy' }}</p>
<p *ngIf="batch?.creatorDetails?.firstName">
<span>{{ '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>
</ion-item>
<ion-item-divider *ngIf="upcommingBatches && upcommingBatches.length" class="subtitle mytitle">
{{ 'VIEW_UPCOMING_BATCHES' | translate }}</ion-item-divider>
<ion-item *ngFor="let batch of upcommingBatches; let i=index">
<div item-start class="width-80">
<h5 class="subtitle title">{{ batch.name }}</h5>
<p>{{batch.startDate | date: 'dd/MM/yyyy' }} - {{ batch.endDate | date: 'dd/MM/yyyy' }}</p>
<p *ngIf="batch?.creatorDetails?.firstName">
<span>{{ '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>
</ion-item>
</ion-item-group>
</ion-list>
</ion-content>
./enrollment-details.component.scss
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/fonts.scss";
@import "src/assets/styles/_variables.scss";
:host {
.subtitle {
text-transform: capitalize;
font-weight: 700 !important;
&.buttontext{
color: map-get($colors, primary);
}
&.mytitle{
color: map-get($colors, primary_black);
font-size: 1.2rem;
}
&.head{
font-size: 1.2rem;
color: map-get($colors, primary_black);
background-color:map-get($colors, light_gray) !important;
}
&.title{
color: map-get($colors, primary_black);
font-size: 1rem;
}
}
.sb-btn-outline-info {
font-weight: bold;
font-size: 0.75rem;
}
.background-gray{
background: map-get($colors, gray_white);
@include margin(-16px, -26px, 0, -26px);
@include padding(null, null, null, 25px !important);
}
.batch-font{
@extend .NotoSans-bold;
padding: 15px 0 12px 7px;
font-size: 1rem;
}
.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;
}
}
.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%;
}
}
.batch-name {
margin-top: 0px;
font-size: 0.75rem;
@extend .NotoSans-semi-bold;
}
.text-gray-color {
color: gray;
display: inline-block;
@extend .NotoSans;
}
.enroll-msg-ended {
color: $orange;
font-size: 0.9rem;
}
.enroll-msg-style {
font-size: 0.9rem;
}
.card-icon{
width: 20%;
}
.width-80 {
width: 80%;
}
.enroll-style {
background-color: rgb(165, 165, 165) !important;
border-radius: 5px !important;
font-weight: bold;
font-size: 0.75rem;
color: map-get($colors, white) !important;
border-color: map-get($colors, white) !important;
}
}