question master add changes : kdk
This commit is contained in:
dineshkumarkannan
parent
229bebcb57
commit
e5d4a00505
@ -1,55 +1,71 @@
|
||||
<div style="max-height: 580px;">
|
||||
<!--<pre> {{ m_group | json}}</pre>-->
|
||||
|
||||
<h2 mat-dialog-title>{{pageTitle}}</h2>
|
||||
<mat-dialog-content class="mat-typography">
|
||||
<mat-card style="width: 580px; padding: 6px;">
|
||||
<div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" fxLayoutAlign="center">
|
||||
<h2 mat-dialog-title style="width: 50%;">{{pageTitle}}</h2>
|
||||
<div style="width: 20%;"></div>
|
||||
<div style="width: 30%;text-align:right;">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="onNoClick()"><mat-icon>close</mat-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
<form [formGroup]="_addQuesFrom" (submit)="onSubmit()">
|
||||
<!--<div class="form-group">-->
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<form [formGroup]="_addQuesFrom" (submit)="onSubmit()" novalidate>
|
||||
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
|
||||
<div fxFlex="50">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Category" formControlName="fk_question_category">
|
||||
<mat-option *ngFor="let ct of categories" [value]="ct.question_category_id">{{ ct.category_name }}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="submitted && f.fk_question_category.hasError('required')" class="mat-text-warn">You must Select Category.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="50">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Group" formControlName="fk_question_group_id">
|
||||
<mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="submitted && f.fk_question_group_id.hasError('required')" class="mat-text-warn">You must Select Group.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<div class="example-full-width">
|
||||
<mat-form-field fxFill>
|
||||
<textarea matInput placeholder="Question" formControlName="question"></textarea>
|
||||
<mat-error *ngIf="submitted && f.question.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<div class="example-full-width">
|
||||
<mat-form-field fxFill>
|
||||
<textarea matInput placeholder="Description" formControlName="description"></textarea>
|
||||
<mat-error *ngIf="submitted && f.description.hasError('required')" class="mat-text-warn">You must Include Description.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Answer Type" formControlName="fk_question_answertype">
|
||||
<mat-option *ngFor="let ans of questionsOptions" [value]="ans.question_answer_type_id">{{ ans.answer_type_name }}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="submitted && f.fk_question_answertype.hasError('required')" class="mat-text-warn">You must Select Answer Type.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<div formArrayName="answers" class="example-full-width">
|
||||
<div formArrayName="answers" fxFill>
|
||||
<div *ngFor="let answ of _addQuesFrom.controls.answers['controls']; let i=index">
|
||||
<div [formGroupName]="i">
|
||||
<div fxLayout="row" style="width: 100%">
|
||||
<div style="width: 80%">
|
||||
<div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
|
||||
<div fxFlex="80">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<!--<span>Answer {{i + 1}}</span>-->
|
||||
<textarea matInput placeholder="Answer" formControlName="answer"></textarea>
|
||||
<!--<mat-error *ngIf="submitted && answer.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>-->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div style="width:20%">
|
||||
<div fxFlex="30">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Group" formControlName="fk_question_group_id">
|
||||
<mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="20">
|
||||
<span *ngIf="_addQuesFrom.controls.answers.controls.length > 1" (click)="removeLanguage(i)">
|
||||
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
|
||||
</span>
|
||||
@ -57,22 +73,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" (click)="addLanguage($event); false"><mat-icon>add</mat-icon></button>
|
||||
<!-- <button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" (click)="addLanguage($event); false">Add More</button> -->
|
||||
<!--<a (click)="addLanguage()" style="cursor: default">Add another Answer </a>-->
|
||||
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
|
||||
class="mr-1 mb-1 hover-icon" (click)="addLanguage($event); false"><mat-icon>add</mat-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
<!--Error List Shown Here-->
|
||||
<!--<ul>
|
||||
<li *ngFor="let err of errorMessage">
|
||||
<mat-error>{{err.err}}</mat-error>
|
||||
</li>
|
||||
</ul>-->
|
||||
<div class="row" style="text-align:right;">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
|
||||
</div>
|
||||
<!--</div>-->
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close>Cancel</button>
|
||||
</mat-dialog-actions>
|
||||
@ -39,6 +39,7 @@ export class AddComponent implements OnInit {
|
||||
public submitted = false;
|
||||
public categories: any = [];
|
||||
public questionsOptions: any = [];
|
||||
public m_group: any = [];
|
||||
errorMessage: string;
|
||||
|
||||
/**
|
||||
@ -62,6 +63,7 @@ export class AddComponent implements OnInit {
|
||||
question: [null, Validators.compose([Validators.required])],
|
||||
description: [null, Validators.compose([Validators.required])],
|
||||
fk_question_category: [null, Validators.compose([Validators.required])],
|
||||
fk_question_group_id: [null, Validators.compose([Validators.required])],
|
||||
fk_question_answertype: [null, Validators.compose([Validators.required])],
|
||||
answers: this._formBuilder.array([
|
||||
this.initAnswers(),
|
||||
@ -70,6 +72,7 @@ export class AddComponent implements OnInit {
|
||||
// OnInit Load Category and Question Type Masters
|
||||
this.getCategoryListMaster();
|
||||
this.getQuestionOptionsMaster();
|
||||
this.getQuestionGroupMaster();
|
||||
}
|
||||
|
||||
// convenience getter for easy access to form fields
|
||||
@ -78,7 +81,8 @@ export class AddComponent implements OnInit {
|
||||
// Dynamic Form field creation Functionality : START ===>
|
||||
initAnswers() {
|
||||
return this._formBuilder.group({
|
||||
answer: ['', Validators.compose([Validators.required])]
|
||||
answer: ['', Validators.compose([Validators.required])],
|
||||
fk_question_group_id: ['']
|
||||
});
|
||||
}
|
||||
addLanguage(e) {
|
||||
@ -103,6 +107,19 @@ export class AddComponent implements OnInit {
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
getQuestionGroupMaster() {
|
||||
this.masterService.getAllMasterData('QUESTIONGROUP').subscribe(
|
||||
data => {
|
||||
this.m_group = data.records;
|
||||
},
|
||||
error => {
|
||||
this.notifier.notify('warning', 'No Question Group Records Found.!');
|
||||
this.errorMessage = "No Question Group Records Found.";
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
getQuestionOptionsMaster() {
|
||||
this.masterService.getAllMasterData('QUESTIONANSWERTYPE').subscribe(
|
||||
data => {
|
||||
|
||||
@ -1,63 +1,77 @@
|
||||
<div style="max-height: 480px;">
|
||||
<h2 mat-dialog-title>{{pageTitle}}</h2>
|
||||
<mat-dialog-content class="mat-typography">
|
||||
<mat-card style="width: 580px; padding: 6px;">
|
||||
<div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" fxLayoutAlign="center">
|
||||
<h2 mat-dialog-title style="width: 50%;">{{pageTitle}}</h2>
|
||||
<div style="width: 20%;"></div>
|
||||
<div style="width: 30%;text-align:right;">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="onNoClick()"><mat-icon>close</mat-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="_addQuesFrom" (submit)="onSubmit()">
|
||||
<!--<div class="form-group">-->
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
|
||||
<div fxFlex="50">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Category" formControlName="fk_question_category">
|
||||
<mat-option *ngFor="let ct of categories" [value]="ct.question_category_id">{{ ct.category_name }}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="submitted && f.fk_question_category.hasError('required')" class="mat-text-warn">You must Select Category.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="50">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Group" formControlName="fk_question_group_id">
|
||||
<mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="submitted && f.fk_question_group_id.hasError('required')" class="mat-text-warn">You must Select Group.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<div class="example-full-width">
|
||||
<mat-form-field fxFill>
|
||||
<textarea matInput placeholder="Question" formControlName="question"></textarea>
|
||||
<mat-error *ngIf="submitted && f.question.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<div class="example-full-width">
|
||||
<mat-form-field fxFill>
|
||||
<textarea matInput placeholder="Description" formControlName="description"></textarea>
|
||||
<mat-error *ngIf="submitted && f.description.hasError('required')" class="mat-text-warn">You must Include Description.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Answer Type" formControlName="fk_question_answertype">
|
||||
<mat-option *ngFor="let ans of questionsOptions" [value]="ans.question_answer_type_id">{{ ans.answer_type_name }}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="submitted && f.fk_question_answertype.hasError('required')" class="mat-text-warn">You must Select Answer Type.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
|
||||
<!--<mat-checkbox formControlName="isactive" [ngModel]="f.isactive.value === 1 ? true : false"
|
||||
(ngModelChange)="f.isactive.value = $event ? 1 : 0">Active/InActive</mat-checkbox>
|
||||
-->
|
||||
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start none">
|
||||
<div formArrayName="answers" class="example-full-width">
|
||||
<div formArrayName="answers" fxFill>
|
||||
<div *ngFor="let answ of f_ans.controls; let i=index">
|
||||
<div [formGroupName]="i">
|
||||
<div fxLayout="row" style="width: 100%">
|
||||
<div style="width: 80%">
|
||||
<div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
|
||||
<div fxFlex="80">
|
||||
<mat-form-field class="ml-xs example-full-width">
|
||||
<!--<span>Answer {{i + 1}} </span>-->
|
||||
<textarea matInput placeholder="Answer" formControlName="answer"></textarea>
|
||||
<!--<mat-error *ngIf="submitted && answer.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>-->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div style="width:20%">
|
||||
<div fxFlex="30">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Select Group" formControlName="fk_question_group_id">
|
||||
<mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="20">
|
||||
<mat-checkbox *ngIf="answ.get('question_answer_id').value != null" formControlName="isactive" [ngModel]="answ.get('isactive').value == 1 ? true : answ.get('isactive').value == 0 ? false : null"
|
||||
(ngModelChange)="answ.get('isactive').value = $event ? 1 : 0"></mat-checkbox>
|
||||
<span *ngIf="_addQuesFrom.controls.answers.controls.length > 1" (click)="removeLanguage(i)">
|
||||
@ -67,12 +81,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" (click)="addLanguage(null, null, null, $event); false"><mat-icon>add</mat-icon></button>
|
||||
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
|
||||
class="mr-1 mb-1 hover-icon" (click)="addLanguage(null, null, null, $event); false"><mat-icon>add</mat-icon></button>
|
||||
<!-- <button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" (click)="addLanguage(null, null, null, $event); false">Add More</button> -->
|
||||
<!--<a (click)="addLanguage()" style="cursor: default">Add another Answer </a>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Error List Shown Here-->
|
||||
<!--<ul>
|
||||
<li *ngFor="let err of errorMessage">
|
||||
@ -87,6 +101,8 @@
|
||||
<!--</div>-->
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<notifier-container></notifier-container>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close>Cancel</button>
|
||||
</mat-dialog-actions>
|
||||
<notifier-container></notifier-container>
|
||||
@ -39,6 +39,7 @@ export class EditComponent implements OnInit {
|
||||
public _addQuesFrom: FormGroup;
|
||||
public submitted = false;
|
||||
public categories: any = [];
|
||||
public m_group: any = [];
|
||||
public questionsOptions: any = [];
|
||||
errorMessage: string;
|
||||
|
||||
@ -60,15 +61,16 @@ export class EditComponent implements OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
this.loadFormData();
|
||||
if (this.data["0"].length > 0) {
|
||||
for (let val of this.data["0"]) {
|
||||
// alert(JSON.stringify(val));
|
||||
let vals = val;
|
||||
this.addLanguage(vals['answer'], vals['question_answer_id'], vals['isactive'], null);
|
||||
}
|
||||
}
|
||||
// if (this.data["0"].length > 0) {
|
||||
// for (let val of this.data["0"]) {
|
||||
// // alert(JSON.stringify(val));
|
||||
// let vals = val;
|
||||
// this.addLanguage(vals['answer'], vals['question_answer_id'], vals['isactive'], null);
|
||||
// }
|
||||
// }
|
||||
// OnInit Load Category and Question Type Masters
|
||||
this.getCategoryListMaster();
|
||||
this.getQuestionGroupMaster();
|
||||
this.getQuestionOptionsMaster();
|
||||
}
|
||||
|
||||
@ -78,7 +80,7 @@ export class EditComponent implements OnInit {
|
||||
for (let val of this.data["0"]) {
|
||||
// alert(JSON.stringify(val));
|
||||
let vals = val;
|
||||
this.addLanguage(vals['answer'], vals['question_answer_id'], vals['isactive'], null);
|
||||
this.addLanguage(vals['answer'], vals['question_answer_id'], vals['fk_question_group_id'], vals['isactive'], null);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -91,6 +93,7 @@ export class EditComponent implements OnInit {
|
||||
question: [this.data.question, Validators.compose([Validators.required])],
|
||||
description: [this.data.description, Validators.compose([Validators.required])],
|
||||
fk_question_category: [this.data.fk_question_category, Validators.compose([Validators.required])],
|
||||
fk_question_group_id: [this.data.fk_question_group_id, Validators.compose([Validators.required])],
|
||||
fk_question_answertype: [this.data.fk_question_answertype, Validators.compose([Validators.required])],
|
||||
isactive: [this.data.isactive],
|
||||
answers: this._formBuilder.array([
|
||||
@ -107,17 +110,18 @@ export class EditComponent implements OnInit {
|
||||
|
||||
|
||||
// Dynamic Form field creation Functionality : START ===>
|
||||
initAnswers(ans, fk_id, isAct) {
|
||||
initAnswers(ans, fk_id, fk_question_group_id, isAct) {
|
||||
isAct = isAct == null ? 1 : isAct;
|
||||
return this._formBuilder.group({
|
||||
answer: [ans, Validators.compose([Validators.required])],
|
||||
question_answer_id: [fk_id],
|
||||
fk_question_group_id: [fk_question_group_id],
|
||||
isactive: [isAct]
|
||||
});
|
||||
}
|
||||
addLanguage(ans, fk_id, isAct, e) {
|
||||
addLanguage(ans, fk_id, fk_question_group_id, isAct, e) {
|
||||
const control = <FormArray>this._addQuesFrom.controls['answers'];
|
||||
control.push(this.initAnswers(ans, fk_id, isAct));
|
||||
control.push(this.initAnswers(ans, fk_id, fk_question_group_id, isAct));
|
||||
}
|
||||
removeLanguage(i: number) {
|
||||
const control = <FormArray>this._addQuesFrom.controls['answers'];
|
||||
@ -137,6 +141,18 @@ export class EditComponent implements OnInit {
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
getQuestionGroupMaster() {
|
||||
this.masterService.getAllMasterData('QUESTIONGROUP').subscribe(
|
||||
data => {
|
||||
this.m_group = data.records;
|
||||
},
|
||||
error => {
|
||||
this.notifier.notify('warning', 'No Question Group Records Found.!');
|
||||
this.errorMessage = "No Question Group Records Found.";
|
||||
}
|
||||
)
|
||||
}
|
||||
getQuestionOptionsMaster() {
|
||||
this.masterService.getAllMasterData('QUESTIONANSWERTYPE').subscribe(
|
||||
data => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user