sunbirded-mobile-app documentation
  1. Components
  2. QuestionMapModalComponent

File

src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts

Implements

OnInit

Metadata

selector app-question-map-modal
styleUrls ./question-map-modal.component.scss
templateUrl ./question-map-modal.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(translate: TranslateService, toast: ToastService, modalCtrl: ModalController, utils: UtilsService)
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:17
Parameters :
Name Type Optional
translate TranslateService No
toast ToastService No
modalCtrl ModalController No
utils UtilsService No

Inputs

data
Type : any
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:13

Methods

checkForQuestionDisplay
checkForQuestionDisplay(qst)
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:41
Parameters :
Name Optional
qst No
Returns : boolean
close
close()
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:55
Returns : void
goToQuestion
goToQuestion(index)
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:51
Parameters :
Name Optional
index No
Returns : void
isQuestionComplete
isQuestionComplete(question)
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:31
Parameters :
Name Optional
question No
Returns : any
ngOnInit
ngOnInit()
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:24
Returns : void
openToast
openToast()
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:45
Returns : void

Properties

currentViewIndex
Type : any
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:16
evidenceMethod
Type : string
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:14
questions
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:17
sectionName
Type : string
Defined in src/app/manage-learn/questionnaire/question-map-modal/question-map-modal.component.ts:15
 
import { Component, Input, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { ToastService, UtilsService } from '../../core';

@Component({
  selector: 'app-question-map-modal',
  templateUrl: './question-map-modal.component.html',
  styleUrls: ['./question-map-modal.component.scss'],
})
export class QuestionMapModalComponent implements OnInit {

  @Input() data: any;
  evidenceMethod: string;
  sectionName: string;
  currentViewIndex: any;
  questions;

  constructor(
    private translate: TranslateService, private toast: ToastService, private modalCtrl: ModalController,
    private utils: UtilsService) {
  }

  ngOnInit() {
    this.questions = this.data['questions'];
    this.evidenceMethod = this.data['evidenceMethod'];
    this.sectionName = this.data['sectionName'];
    this.currentViewIndex = this.data['currentViewIndex'];
  }

  isQuestionComplete(question) {
    if (question.responseType.toLowerCase() === 'matrix') {
      return this.utils.isMatrixQuestionComplete(question);
    } else if (question.responseType.toLowerCase() === 'pagequestions') {
      return this.utils.isPageQuestionComplete(question);
    } else {
      return this.utils.isQuestionComplete(question);
    }
  }

  checkForQuestionDisplay(qst): boolean {
    return this.utils.checkForDependentVisibility(qst, this.questions)
  }

  openToast(): void {
    this.translate.get('FRMELEMNTS_MSG_QUESTIONNAIRE_MSG').subscribe(translations => {
      this.toast.openToast(translations);
    })
  }

  goToQuestion(index) {
    this.modalCtrl.dismiss(index);
  }

  close() {
    this.modalCtrl.dismiss();
  }
}

<ion-content class="ion-padding">
  <div>
    <h4>{{evidenceMethod}} - {{sectionName}}</h4>
  </div>
  <div class="_inline_flex-box _flex-wrap ion-margin-top" *ngIf="questions?.length">
    <ng-container *ngFor="let question of questions; let i = index">
      <div class="container _flex-box _justify-content-center" (click)="goToQuestion(i)"
        *ngIf="checkForQuestionDisplay(question)">
        <span class="wrapper _flex-box _justify-content-center" [ngClass]="{'currentView': i === currentViewIndex}">
          <span class="block pending black-color _flex-box _justify-content-center"
            [ngClass]="{'color-green': isQuestionComplete(question)}">{{i+1}}</span>
        </span>
      </div>

      <div class="container _flex-box _justify-content-center" (click)="openToast()"
        *ngIf="!checkForQuestionDisplay(question)">
        <span class="wrapper _flex-box _justify-content-center" [ngClass]="{'currentView': i === currentViewIndex}">
          <span class="block pending black-color _flex-box _justify-content-center"
            [ngClass]="{'color-green': isQuestionComplete(question)}">{{i+1}}</span>
        </span>
      </div>
    </ng-container>
  </div>
</ion-content>

<ion-footer>
  <div class="sb-popover-footer">
    <ion-button expand="full" class="sb-popover-action-btn popover-color custom-btn-txt-transform-none" (click)='close()'
      >{{ 'CANCEL' | translate}}</ion-button>
  </div>
</ion-footer>

./question-map-modal.component.scss 

@import "src/assets/styles/_variables.scss";

.container {
    width: 20%;
    position: relative;

    .wrapper {
        border: 3px solid transparent;
        width: 3.13rem;
        height: 3.13rem;
        margin: 0.625rem auto;
        border-radius: 3.13rem;

        .block {
            width: 2.75rem;
            height: 2.75rem;
            padding: 0.625rem;
            border-radius: 3.13rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000000;
        }
    }
}

._inline_flex-box{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.color-green {
    color: white !important;
    background: green !important;
}

.black-color {
    color: black;
    background: #e0e0ee;
}

.currentView {
    border-color: #{$blue}  !important;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""