src/app/profile/framework-selection/framework-selection.page.ts
OnInit
OnDestroy
selector | app-framework-selection |
styleUrls | ./framework-selection.page.scss |
templateUrl | ./framework-selection.page.html |
Properties |
Methods |
constructor(router: Router, frameworkCommonFormConfigBuilder: FrameworkCommonFormConfigBuilder, appHeaderService: AppHeaderService, commonUtilService: CommonUtilService, frameworkSelectionDelegateService: FrameworkSelectionDelegateService, telemetryGeneratorService: TelemetryGeneratorService)
|
|||||||||||||||||||||
Parameters :
|
convertDataSrcToClosure | ||||
convertDataSrcToClosure(ele)
|
||||
Parameters :
Returns :
void
|
getClosure |
getClosure(type: string, enableOtherOption?: boolean)
|
Returns :
FieldConfigOptionsBuilder<any>
|
getNavParams |
getNavParams()
|
Returns :
void
|
initializeFormConfig |
initializeFormConfig()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
statusChanged | ||||
statusChanged(event)
|
||||
Parameters :
Returns :
void
|
submitForm |
submitForm()
|
Returns :
void
|
valueChanged | ||||
valueChanged(event)
|
||||
Parameters :
Returns :
void
|
any |
Public commonUtilService |
Type : CommonUtilService
|
corRelation |
Type : Array<CorrelationData>
|
Default value : []
|
formConfig |
Private formConfigInput |
isFrameworkFormValid |
Default value : false
|
selectedFrameworkData |
Type : any
|
submitDetails |
Type : literal type
|
subTitle |
Type : string
|
title |
Type : string
|
import { Component, OnInit, OnDestroy, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { FrameworkCommonFormConfigBuilder } from '@app/services/common-form-config-builders/framework-common-form-config-builder';
import {
AppHeaderService,
CommonUtilService,
CorReleationDataType,
PageId,
TelemetryGeneratorService,
ImpressionType, Environment
} from '@app/services';
import { CorrelationData } from '@project-sunbird/sunbird-sdk';
import { FieldConfigOptionsBuilder } from '@app/app/components/common-forms/field-config';
@Injectable({ providedIn: 'root' })
export class FrameworkSelectionDelegateService {
delegate?: FrameworkSelectionActionsDelegate;
}
export interface FrameworkSelectionActionsDelegate {
onFrameworkSelectionSubmit(formInput?: any,
formOutput?: any, router?: Router,
commonUtilService?: CommonUtilService, telemetryGeneratorService?: TelemetryGeneratorService, corRelation?: Array<CorrelationData>);
}
@Component({
selector: 'app-framework-selection',
templateUrl: './framework-selection.page.html',
styleUrls: ['./framework-selection.page.scss'],
})
export class FrameworkSelectionPage implements OnInit, OnDestroy {
private formConfigInput;
title: string;
subTitle: string;
formConfig; any;
submitDetails: { label?: string, navigateTo?: string };
isFrameworkFormValid = false;
selectedFrameworkData: any;
corRelation: Array<CorrelationData> = [];
constructor(
private router: Router,
private frameworkCommonFormConfigBuilder: FrameworkCommonFormConfigBuilder,
private appHeaderService: AppHeaderService,
public commonUtilService: CommonUtilService,
private frameworkSelectionDelegateService: FrameworkSelectionDelegateService,
private telemetryGeneratorService: TelemetryGeneratorService,
) {
this.getNavParams();
}
getNavParams() {
const paramData = this.router.getCurrentNavigation().extras && this.router.getCurrentNavigation().extras.state;
if (paramData) {
this.title = paramData.title;
this.subTitle = paramData.subTitle;
this.formConfig = paramData.formConfig;
this.corRelation = paramData.corRelation;
this.formConfigInput = paramData.formConfig && Array.isArray(paramData.formConfig) ?
JSON.parse(JSON.stringify(paramData.formConfig)) : [];
this.submitDetails = paramData.submitDetails;
}
this.corRelation.push({ id: PageId.FRAMEWORK_SELECTION, type: CorReleationDataType.FROM_PAGE });
}
ngOnInit(): void {
this.initializeFormConfig();
this.appHeaderService.showHeaderWithBackButton();
this.telemetryGeneratorService.generateImpressionTelemetry(
ImpressionType.VIEW,
'',
PageId.FRAMEWORK_SELECTION,
Environment.USER,
undefined,
undefined,
undefined,
undefined,
this.corRelation);
}
ngOnDestroy(): void {
this.frameworkSelectionDelegateService.delegate = undefined;
}
initializeFormConfig() {
if (this.formConfig) {
this.formConfig.forEach(ele => {
if (ele.templateOptions.dataSrc) {
this.convertDataSrcToClosure(ele);
}
});
}
}
valueChanged(event) {
this.selectedFrameworkData = event;
}
statusChanged(event) {
this.isFrameworkFormValid = event.isValid;
}
submitForm() {
if (this.frameworkSelectionDelegateService.delegate) {
this.frameworkSelectionDelegateService.delegate.onFrameworkSelectionSubmit(
this.formConfigInput, this.selectedFrameworkData, this.router, this.commonUtilService,
this.telemetryGeneratorService, this.corRelation
);
}
}
convertDataSrcToClosure(ele) {
const dataSrc = ele.templateOptions.dataSrc;
switch (dataSrc.marker) {
case 'ACTIVE_CHANNEL.SUGGESTED_FRAMEWORK_LIST.MAPPED_TO_FRAMEWORKCATEGORIES':
ele.templateOptions.options = this.getClosure('board');
break;
case 'FRAMEWORK_CATEGORY_TERMS':
ele.templateOptions.options = this.getClosure(dataSrc.params.categoryCode, !!(ele.children && ele.children.other));
break;
}
}
getClosure(type: string, enableOtherOption?: boolean): FieldConfigOptionsBuilder<any> {
switch (type) {
case 'board':
return this.frameworkCommonFormConfigBuilder.getBoardConfigOptionsBuilder();
case 'medium':
return this.frameworkCommonFormConfigBuilder.getMediumConfigOptionsBuilder();
case 'grade':
return this.frameworkCommonFormConfigBuilder.getGradeConfigOptionsBuilder();
case 'subject':
return this.frameworkCommonFormConfigBuilder.getSubjectConfigOptionsBuilder(null, enableOtherOption);
}
}
}
<ion-content scroll-y="false">
<!-- Title -->
<div *ngIf="title" class="framework-header">
<h4>{{title}}</h4>
<p class="mb-0">{{subTitle}}</p>
</div>
<!-- SB-Forms -->
<div *ngIf="formConfig" class="framework-form-bg">
<sb-form
[platform]="'mobile'"
[config]='formConfig'
(valueChanges)="valueChanged($event)"
(statusChanges)="statusChanged($event)">
</sb-form>
</div>
</ion-content>
<!-- Submit -->
<ion-footer>
<ion-button expand="block" class="M16 MB30" [disabled]="!isFrameworkFormValid" (click)="submitForm()" >
{{submitDetails?.label || 'Submit'}}
</ion-button>
</ion-footer>
./framework-selection.page.scss
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";
.framework-header {
background-color: $blue;
color: map-get($colors, white);
padding: 16px;
h4 {
padding:0;
font-weight: 700;
max-width: 64rem;
margin: 0 auto;
}
}
.framework-form-bg{
padding: 16px;
}
ion-footer{
z-index: -10;
}
ion-button{
--background: #{$blue} !important;
height: 2.5rem !important;
text-transform: capitalize !important;
}
.ios .framework-form-bg ::ng-deep li > div {
outline-style: none;
}
.ios .framework-form-bg ::ng-deep .sb-modal {
margin-bottom: calc(env(safe-area-inset-bottom) + 20px);
}