File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Constructor
constructor(utils: UtilsService, modalCtrl: ModalController)
|
|
|
Parameters :
| Name |
Type |
Optional |
| utils |
UtilsService
|
No
|
| modalCtrl |
ModalController
|
No
|
|
|
enableQuestionReadOut
|
Type : boolean
|
|
|
|
imageLocalCopyId
|
Type : string
|
|
|
Outputs
|
nextCallBack
|
Type : EventEmitter
|
|
|
|
previousCallBack
|
Type : EventEmitter
|
|
|
Methods
|
checkForCompletion
|
checkForCompletion()
|
|
|
|
|
|
checkForValidation
|
checkForValidation()
|
|
|
|
|
|
next
|
next(status?: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| status |
any
|
Yes
|
|
|
Async
openHint
|
openHint(hint)
|
|
|
|
|
|
updateData
|
updateData(event)
|
|
|
|
|
|
color
|
Type : string
|
Default value : 'light'
|
|
|
import { Component, Input, EventEmitter, Output, OnInit } from '@angular/core';
import { UtilsService } from '@app/app/manage-learn/core';
import { ModalController } from '@ionic/angular';
import { HintComponent } from '../hint/hint.component';
@Component({
selector: 'app-radio-type-input',
templateUrl: './radio-type-input.component.html',
styleUrls: ['./radio-type-input.component.scss'],
})
export class RadioTypeInputComponent implements OnInit {
@Input() inputIndex ;
@Input() data:any;
@Input() isLast: boolean;
@Input() isFirst: boolean;
@Output() nextCallBack = new EventEmitter();
@Output() previousCallBack = new EventEmitter()
@Input() evidenceId: string;
@Input() hideButton: boolean;
@Input() schoolId: string;
@Input() imageLocalCopyId: string;
@Input() generalQuestion: boolean;
@Input() submissionId: any;
@Input() enableQuestionReadOut: boolean;
color: string = 'light';
isComplete: boolean;
constructor(
private utils: UtilsService,
private modalCtrl:ModalController
// private hintService: HintProvider
) {
}
ngOnInit() {
this.data.startTime = this.data.startTime ? this.data.startTime : Date.now();
if(!this.data.validation.required) {
this.data.isCompleted = true;
}
}
updateData(event){
this.data.fileName = [...this.data.fileName]
}
next(status?:any) {
this.data.isCompleted = this.utils.isQuestionComplete(this.data);
this.nextCallBack.emit(status);
}
back() {
this.data.isCompleted = this.utils.isQuestionComplete(this.data);
this.previousCallBack.emit();
}
checkForValidation(): void {
this.data.isCompleted = this.utils.isQuestionComplete(this.data);
this.data.endTime = this.data.isCompleted ? Date.now() : "";
}
async openHint(hint){
let hintModal = await this.modalCtrl.create({
component: HintComponent,
componentProps: {
hint,
},
});
hintModal.present();
}
checkForCompletion() {
}
}
<ion-card class="_cardBg ion-padding">
<ion-col class="_flex-box _justify-content-center _flex-direction-column">
<h4 [ngClass]="{ _validQuestion: data?.value }" class="flexbox">
<app-question-heading [inputIndex]="inputIndex" [data]="data" [enableQuestionReadOut]="enableQuestionReadOut">
</app-question-heading>
</h4>
</ion-col>
<div class="_tip _flex-box">{{ data?.tip }}</div>
<ion-list class="ion-margin-top ion-text-wrap">
<ion-radio-group [(ngModel)]="data.value" (ngModelChange)="checkForValidation()">
<ion-item *ngFor="let option of data?.options" class="ds-item">
<ion-icon name="bulb" class="help" (click)="openHint(option?.hint)" *ngIf="option?.hint"></ion-icon>
<ion-label class="_flex-box label ion-text-wrap ds-m0">
<div style="flex: 1" [ngStyle]="{ 'margin-left': option?.hint ? '35px' : '0px' }" class="ds-m0">
{{ option?.label }}
</div>
</ion-label>
<ion-radio
value="{{ option?.value }}"
[disabled]="data.isEditable != undefined && !data.isEditable"
class="ds-m0"
></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<app-remarks *ngIf="data?.showRemarks" [data]="data"></app-remarks>
<app-image-upload
[submissionId]="submissionId"
[data]="data"
[generalQuestion]="generalQuestion"
[imageLocalCopyId]="imageLocalCopyId"
[evidenceId]="evidenceId"
[schoolId]="schoolId"
></app-image-upload>
</ion-card>
.help {
font-size: 1.875rem;
z-index: 557;
margin-right: 15px;
position: absolute;
color: grey;
}
.label {
justify-content: flex-start;
font-size: 0.875rem;
}
Legend
Html element with directive