File
Methods
|
checkForEvidenceCompletion
|
checkForEvidenceCompletion()
|
|
|
|
|
|
Async
checkForNetworkTypeAlert
|
checkForNetworkTypeAlert()
|
|
|
|
|
|
goToImageListing
|
goToImageListing()
|
|
|
|
|
|
ionViewDidEnter
|
ionViewDidEnter()
|
|
|
|
|
|
allAnsweredForEvidence
|
Type : boolean
|
|
|
|
loaded
|
Type : boolean
|
Default value : false
|
|
|
|
networkAvailable
|
Type : any
|
|
|
import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { RouterLinks } from '@app/app/app.constant';
import { CommonUtilService } from '@app/services';
import { Network } from '@ionic-native/network/ngx';
import { AlertController } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { LocalStorageService, UtilsService } from '../../core';
@Component({
selector: 'app-submission-preview-page',
templateUrl: './submission-preview-page.component.html',
styleUrls: ['./submission-preview-page.component.scss'],
})
export class SubmissionPreviewPageComponent {
submissionId;
entityName;
selectedEvidenceIndex;
selectedEvidenceName;
currentEvidence;
entityDetails;
evidenceSections;
allAnsweredForEvidence: boolean;
networkAvailable: any;
loaded: boolean = false;
goBackNum: any;
constructor(
// private events: Events,
private commonUtils: CommonUtilService,
private routerParam: ActivatedRoute,
private localStorage: LocalStorageService,
private utils: UtilsService,
private network: Network,
private translate: TranslateService,
private alertCtrl: AlertController,
private router: Router
) {
this.networkAvailable = this.commonUtils.networkInfo.isNetworkAvailable;
this.routerParam.queryParams.subscribe((params) => {
this.submissionId = params.submissionId;
this.selectedEvidenceIndex = params.selectedEvidenceIndex;
this.entityName = params.name;
this.goBackNum=params.goBackNum
});
}
ionViewDidEnter() {
this.localStorage
.getLocalStorage(this.utils.getAssessmentLocalStorageKey(this.submissionId))
.then((data) => {
this.loaded = true;
this.entityDetails = data;
this.currentEvidence = data['assessment']['evidences'][this.selectedEvidenceIndex];
this.evidenceSections = this.currentEvidence['sections'];
this.checkForEvidenceCompletion();
})
.catch((error) => {
this.loaded = true;
});
}
checkForEvidenceCompletion(): void {
let allAnswered;
for (const section of this.evidenceSections) {
allAnswered = true;
for (const question of section.questions) {
if (!question.isCompleted) {
allAnswered = false;
break;
}
}
if (this.currentEvidence.isSubmitted) {
section.progressStatus = 'submitted';
} else if (!this.currentEvidence.startTime) {
section.progressStatus = '';
} else if (allAnswered) {
section.progressStatus = 'completed';
} else if (!allAnswered && section.progressStatus) {
section.progressStatus = 'inProgress';
} else if (!section.progressStatus) {
section.progressStatus = '';
}
}
this.allAnsweredForEvidence = true;
for (const section of this.evidenceSections) {
if (section.progressStatus !== 'completed') {
this.allAnsweredForEvidence = false;
break;
}
}
this.localStorage.setLocalStorage(this.utils.getAssessmentLocalStorageKey(this.submissionId), this.entityDetails);
}
async checkForNetworkTypeAlert() {
if (
this.network.type === 'cellular' ||
this.network.type === 'unknown' ||
this.network.type === '2g' ||
this.network.type === 'ethernet'
) {
let translateObject;
this.translate
.get(['FRMELEMNTS_LBL_CONFIRM', 'FRMELEMNTS_LBL_YES', 'FRMELEMNTS_LBL_NO', 'FRMELEMNTS_LBL_SLOW_INTERNET'])
.subscribe((translations) => {
translateObject = translations;
});
let alert = await this.alertCtrl.create({
header: translateObject['FRMELEMNTS_LBL_CONFIRM'],
message: translateObject['FRMELEMNTS_MSG_SLOW_INTERNET'],
buttons: [
{
text: translateObject['FRMELEMNTS_LBL_NO'],
role: 'cancel',
handler: () => {
},
},
{
text: translateObject['FRMELEMNTS_LBL_YES'],
handler: () => {
this.goToImageListing();
},
},
],
});
alert.present();
} else if (this.network.type === 'wifi' || this.network.type === '3g' || this.network.type === '4g') {
this.goToImageListing();
} else if (this.network.type === 'none') {
let noInternetMsg;
this.translate.get(['FRMELEMENTS_MSG_FEATURE_USING_OFFLINE']).subscribe((translations) => {
noInternetMsg = translations['FRMELEMENTS_MSG_FEATURE_USING_OFFLINE'];
this.commonUtils.showToast(noInternetMsg);
});
}
}
goToImageListing() {
if (this.networkAvailable) {
const params = {
// selectedEvidenceId: this.currentEvidence._id,
submissionId: this.submissionId,
name: this.entityName,
selectedEvidenceIndex: this.selectedEvidenceIndex,
};
this.router.navigate([RouterLinks.IMAGE_LISTING], { queryParams: params,replaceUrl:this.goBackNum?false:true });
} else {
this.translate.get('FRMELEMNTS_MSG_PLEASE_NETWORK').subscribe((translations) => {
this.commonUtils.showToast(translations);
});
}
}
}
<ion-content>
<div style="margin-bottom: 100px" *ngIf="loaded">
<h3 padding>{{ currentEvidence?.name }}</h3>
<ion-card *ngFor="let section of currentEvidence?.sections">
<ion-card-header>
{{ section?.name }}
</ion-card-header>
<ion-card-content>
<ion-list>
<ion-item *ngFor="let question of section?.questions; let i = index" text-wrap>
<div
*ngIf="
question?.responseType !== 'matrix' && question?.responseType !== 'pageQuestions' && question?.value
"
>
<p *ngIf="question?.responseType !== 'radio' && question?.responseType !== 'multiselect'">
Ans. {{ question?.value }}
</p>
<p *ngIf="question?.responseType === 'radio' || question?.responseType === 'multiselect'">
Ans.
{{ question | getLabels }}
</p>
<p *ngIf="question.remarks">{{ question.remarks }}</p>
</div>
<div
*ngIf="
question?.responseType === 'matrix' && question?.responseType !== 'pageQuestions' && question?.value
"
>
<div *ngFor="let instance of question.value; let j = index" class="instanceQuest">
<h5 class="instacnce">{{ question?.instanceIdentifier }} {{ j + 1 }}</h5>
<div *ngFor="let answer of instance; let k = index" class="matrixQuestion">
<div *ngIf="answer?.value">
<h3>{{ answer?.questionNumber}}. {{ answer?.question[0] }}</h3>
<p *ngIf="answer?.responseType !== 'radio' && answer?.responseType !== 'multiselect' && answer?.responseType !== 'date'">
Ans. {{ answer?.value }}
</p>
<p *ngIf="answer?.responseType === 'radio' || answer?.responseType === 'multiselect'">
Ans.
{{ answer | getLabels }}
</p>
<p *ngIf="answer?.responseType === 'date'">
Ans.
{{ answer?.value | date:'medium':'IST' }}
</p>
<p *ngIf="question.remarks">{{ question.remarks }}</p>
</div>
</div>
</div>
</div>
<div *ngIf="question?.responseType === 'pageQuestions'">
<div *ngFor="let answer of question.pageQuestions; let k = index" class="matrixQuestion">
<div *ngIf="answer?.responseType === 'matrix'; else notMatrix">
<div *ngIf="answer.value">
<h3>{{ answer?.questionNumber}}. {{ answer?.question[0] }}</h3>
<div *ngFor="let instance of answer.value; let j = index" class="instanceQuest">
<h5 class="instacnce">{{ answer?.instanceIdentifier }} {{ j + 1 }}</h5>
<div *ngFor="let ans of instance; let k = index" class="matrixQuestion">
<h3>{{ ans?.questionNumber}}. {{ ans?.question[0] }}</h3>
<p *ngIf="ans?.responseType !== 'radio' && ans?.responseType !== 'multiselect' && ans?.responseType !== 'date'">
Ans. {{ ans?.value }}
</p>
<p *ngIf="ans?.responseType === 'radio' || ans?.responseType === 'multiselect'">
Ans.
{{ ans | getLabels }}
</p>
<p *ngIf="ans?.responseType === 'date'">
Ans.
{{ ans?.value | date:'medium':'IST' }}
</p>
<p *ngIf="question.remarks">{{ question.remarks }}</p>
</div>
</div>
</div>
</div>
<ng-template #notMatrix>
<div class="instanceQuest" *ngIf="answer?.value">
<h5>{{ answer?.questionNumber}}. {{ answer?.question[0] }}</h5>
<p *ngIf="answer?.responseType !== 'radio' && answer?.responseType !== 'multiselect' && answer?.responseType !== 'date'">
Ans. {{ answer?.value }}
</p>
<p *ngIf="answer?.responseType === 'radio' || answer?.responseType === 'multiselect'">
Ans.
{{ answer | getLabels }}
</p>
<p *ngIf="answer?.responseType === 'date'">
Ans.
{{ answer?.value | date:'medium':'IST' }}
</p>
<p *ngIf="question.remarks">{{ question.remarks }}</p>
</div>
</ng-template>
</div>
</div>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</div>
</ion-content>
<ion-footer no-shadow *ngIf="(allAnsweredForEvidence && !currentEvidence.isSubmitted) || currentEvidence?.enableSubmit">
<ion-toolbar position="bottom">
<ion-row>
<ion-button full class="w-100 custom-btn-txt-transform-none" (click)="checkForNetworkTypeAlert()">
{{ 'FRMELEMNTS_BTN_UPLOAD_AND_SUBMIT' | translate }}
</ion-button>
</ion-row>
</ion-toolbar>
</ion-footer>
@import 'src/assets/styles/base/_variables.scss';
@import 'src/assets/styles/_custom-mixins.scss';
@import 'src/assets/styles/_variables.scss';
.question {
font-weight: 500;
}
.instanceQuest {
background: $gray-100;
border: 1px solid $gray-400;
padding: 10px;
margin: 2px 0;
border-radius: 2px;
}
.instacnce {
margin: 10px 0;
font-weight: 600 !important;
}
.matrixQuestion {
margin: 20px 0;
}
Legend
Html element with directive