File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(translate: TranslateService, toast: ToastService, modalCtrl: ModalController, utils: UtilsService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| translate |
TranslateService
|
No
|
| toast |
ToastService
|
No
|
| modalCtrl |
ModalController
|
No
|
| utils |
UtilsService
|
No
|
|
Methods
|
checkForQuestionDisplay
|
checkForQuestionDisplay(qst)
|
|
|
|
|
|
goToQuestion
|
goToQuestion(index)
|
|
|
|
|
|
isQuestionComplete
|
isQuestionComplete(question)
|
|
|
Parameters :
| Name |
Optional |
| question |
No
|
|
|
currentViewIndex
|
Type : any
|
|
|
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>
@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 with directive