File

src/app/profile/framework-selection/framework-selection.page.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(router: Router, frameworkCommonFormConfigBuilder: FrameworkCommonFormConfigBuilder, appHeaderService: AppHeaderService, commonUtilService: CommonUtilService, frameworkSelectionDelegateService: FrameworkSelectionDelegateService, telemetryGeneratorService: TelemetryGeneratorService)
Parameters :
Name Type Optional
router Router No
frameworkCommonFormConfigBuilder FrameworkCommonFormConfigBuilder No
appHeaderService AppHeaderService No
commonUtilService CommonUtilService No
frameworkSelectionDelegateService FrameworkSelectionDelegateService No
telemetryGeneratorService TelemetryGeneratorService No

Methods

convertDataSrcToClosure
convertDataSrcToClosure(ele)
Parameters :
Name Optional
ele No
Returns : void
getClosure
getClosure(type: string, enableOtherOption?: boolean)
Parameters :
Name Type Optional
type string No
enableOtherOption boolean Yes
getNavParams
getNavParams()
Returns : void
initializeFormConfig
initializeFormConfig()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
statusChanged
statusChanged(event)
Parameters :
Name Optional
event No
Returns : void
submitForm
submitForm()
Returns : void
valueChanged
valueChanged(event)
Parameters :
Name Optional
event No
Returns : void

Properties

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);
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""