Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

template edit screen , extra code clean up with component comment msg : kdk

Browse Source
This commit is contained in:
dineshkumarkannan 2018-10-19 11:15:52 +05:30
parent 407f45eada
commit 1fd7ae16c2
7 changed files with 203 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html
View File

@ -1,7 +1,3 @@
<!--<pre>{{ templateCategoryRecord | json }}</pre>
<pre> {{ m_category | json}}</pre>-->
<form [formGroup]="_editTempCategoryFrom" (submit)="onSubmit()"> <form [formGroup]="_editTempCategoryFrom" (submit)="onSubmit()">
<div formArrayName="temp_category" class="example-full-width"> <div formArrayName="temp_category" class="example-full-width">
<mat-card *ngFor="let answ of _editTempCategoryFrom.controls.temp_category['controls']; let i=index ; let last = last;"> <mat-card *ngFor="let answ of _editTempCategoryFrom.controls.temp_category['controls']; let i=index ; let last = last;">
@ -24,46 +20,12 @@
<mat-error *ngIf="submitted && answ['controls'].weightage.hasError('required')" class="mat-text-warn">Weightage Required.!</mat-error> <mat-error *ngIf="submitted && answ['controls'].weightage.hasError('required')" class="mat-text-warn">Weightage Required.!</mat-error>
</div> </div>
<div fxFlex="30%"> <div fxFlex="30%">
<button (click)="removeLanguage(i)" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button> <button (click)="removeLanguage(i)" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above" type="button"><mat-icon>delete</mat-icon></button>
</div> </div>
<!--<div fxFlex="0 1 auto" class="ml-xs">
<button *ngIf="last" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Add More" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button>
</div>-->
</div> </div>
</div> </div>
<mat-error *ngIf="submitted && i == dublicateRerdIndex "> This Category Already Exist.!</mat-error> <mat-error *ngIf="submitted && i == dublicateRerdIndex "> This Category Already Exist.!</mat-error>
</mat-card> </mat-card>
<!--<mat-card role="list">-->
<!--<mat-card style="width: 70%;" *ngFor="let answ of _editTempCategoryFrom.controls.temp_category['controls']; let i=index ; let last = last;"
role="listitem">
<div [formGroupName]="i">
<div fxLayout="row" fxLayoutWrap fxLayoutGap="5%" fxLayoutAlign="start center">
<div fxFlex="0 1 auto" class="ml-xs">
<mat-form-field>
<mat-select placeholder="Category" formControlName="fk_question_category_id">
<mat-option *ngFor="let category of m_category" [value]="category.question_category_id">{{ category.category_name }}</mat-option>
</mat-select>
<mat-error *ngIf="submitted && i == dublicateRerdIndex "> This Category Already Exist.!</mat-error>
</mat-form-field>
</div>
<div fxFlex="0 1 auto" class="ml-xs">
<mat-form-field style="width: 25%; text-align: center" appearance="outline">
<input matInput formControlName="weightage">
</mat-form-field> <span>%</span>
</div>
<div fxFlex="0 1 auto" class="ml-xs">
<button *ngIf="_editTempCategoryFrom.controls.temp_category.controls.length > 1" (click)="removeLanguage(i)" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</div>
<div fxFlex="0 1 auto" class="ml-xs">
<button *ngIf="last" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Add More" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button>
</div>
</div>
</div>
<mat-error *ngIf="submitted && i == dublicateRerdIndex "> This Category Already Exist.!</mat-error>
</mat-card>-->
<!--</mat-card>-->
</div> </div>
<div> <div>
<button mat-fab class="mr-1 mb-1" color="primary" matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button> <button mat-fab class="mr-1 mb-1" color="primary" matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button>

67
ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.ts
View File

@ -9,6 +9,11 @@ import { NotifierService } from 'angular-notifier';
import { TemplatesService } from './../../../../service/templates/templates.service'; import { TemplatesService } from './../../../../service/templates/templates.service';
import { MastersService } from './../../../../service/masters/masters.service'; import { MastersService } from './../../../../service/masters/masters.service';
/*
* Question Cagegory add and edit functionality with dynamic form creation with validation
* : kdk
*/
@Component({ @Component({
selector: 'app-template-edit-category', selector: 'app-template-edit-category',
templateUrl: './edit-category.component.html', templateUrl: './edit-category.component.html',
@ -48,14 +53,6 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
// this.initAnswers(), // this.initAnswers(),
]) ])
}) })
// if(this.categoryList.length > 0){
// for (let val of this.categoryList) {
// // alert(JSON.stringify(val));
// let vals = val;
// this.addLanguage(vals['fk_category_id'], vals['name'], vals['weightage'], null);
// }
// }
} }
ngAfterViewInit() { ngAfterViewInit() {
@ -77,7 +74,6 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
} }
} }
// Dynamic Form field creation Functionality : START ===> // Dynamic Form field creation Functionality : START ===>
initAnswers(data) { initAnswers(data) {
return this._formBuilder.group({ return this._formBuilder.group({
@ -112,9 +108,6 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
if (data.records) { if (data.records) {
this.templateCategoryRecord = data.records; this.templateCategoryRecord = data.records;
this.setFormDatas(this.templateCategoryRecord); this.setFormDatas(this.templateCategoryRecord);
// this.templateListData = data.records;
// this.dataLength = data.records.length;
// this.dataSource.data = this.templateListData;
} else { } else {
// this.noTemplateLendersFound = true; // this.noTemplateLendersFound = true;
} }
@ -150,30 +143,6 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
// convenience getter for easy access to form fields // convenience getter for easy access to form fields
get f() { return this._editTempCategoryFrom.controls; } get f() { return this._editTempCategoryFrom.controls; }
public m_categoryList = [{
fk_category_id: 1,
name: 'Category List 1',
weightage: 2,
}, {
fk_category_id: 2,
name: 'Category List 2',
weightage: 5,
}, {
fk_category_id: 3,
name: 'Category List 2',
weightage: 5,
}];
public categoryList = [{
fk_category_id: 1,
name: 'Category List 1',
weightage: 2,
}, {
fk_category_id: 2,
name: 'Category List 2',
weightage: 5,
}];
// Dynamic Form field creation Functionality : START ===> // Dynamic Form field creation Functionality : START ===>
// initAnswers(fk_cat_id, name, weightage) { // initAnswers(fk_cat_id, name, weightage) {
// return this._formBuilder.group({ // return this._formBuilder.group({
@ -186,9 +155,16 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
// const control = <FormArray>this._editTempCategoryFrom.controls['temp_category']; // const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
// control.push(this.initAnswers(fk_cat_id, name, weightage)); // control.push(this.initAnswers(fk_cat_id, name, weightage));
// } // }
removeLanguage(i: number) { removeLanguage(i: number) {
const control = <FormArray>this._editTempCategoryFrom.controls['temp_category']; let value = (<FormArray>this._editTempCategoryFrom.controls['temp_category']).at(i).get('template_category_weightage_id').value;
control.removeAt(i); if (value == null) {
const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
control.removeAt(i);
} else {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
}
} }
// END ===> // END ===>
@ -200,17 +176,14 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
this.submitted = true; this.submitted = true;
// stop here if form is invalid // stop here if form is invalid
if (this._editTempCategoryFrom.invalid) { if (this._editTempCategoryFrom.invalid) {
alert('no'); this.notifier.notify('warning', 'Should Fill Required Fields.!');
return; return;
} else { } else {
var formValues = this._editTempCategoryFrom.value; var formValues = this._editTempCategoryFrom.value;
//To Remove The "Null" With Key also //To Remove The "Null" With Key also
Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]); Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]);
let val = formValues.temp_category; let val = formValues.temp_category;
let totalScore = val.map(value => { return Number(value.weightage); }).reduce((acc, value) => { return acc + value; }, 0); let totalScore = val.map(value => { return Number(value.weightage); }).reduce((acc, value) => { return acc + value; }, 0);
if (totalScore == 100) { if (totalScore == 100) {
if (!this.checkDuplicateInObject(formValues.temp_category)) { if (!this.checkDuplicateInObject(formValues.temp_category)) {
this.templatesService.updateTempateIDCategoryDetails(formValues.temp_category).subscribe( this.templatesService.updateTempateIDCategoryDetails(formValues.temp_category).subscribe(
@ -231,10 +204,10 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
this.errorMessage = "Some Thing Wents Wrong Try Again.!"; this.errorMessage = "Some Thing Wents Wrong Try Again.!";
}); });
} else { } else {
alert("duplication records occured.!"); this.notifier.notify('warning', 'duplication records occured.!');
} }
} else { } else {
alert("value should equal to 100") this.notifier.notify('warning', 'value should equal to 100.!');
} }
} }
@ -248,8 +221,8 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
inputArray.map((item, index) => { inputArray.map((item, index) => {
let currentVal = inputArray[index]; let currentVal = inputArray[index];
for(let i = index+1 ; i < inputArray.length ; i++ ){ for (let i = index + 1; i < inputArray.length; i++) {
if(currentVal.fk_question_category_id === inputArray[i].fk_question_category_id){ if (currentVal.fk_question_category_id === inputArray[i].fk_question_category_id) {
console.log('duplication: ' + i); console.log('duplication: ' + i);
this.dublicateRerdIndex = i; this.dublicateRerdIndex = i;
seenDuplicate = true; seenDuplicate = true;
@ -264,6 +237,4 @@ export class EditCategoryComponent implements OnInit, OnDestroy, AfterViewInit {
//Called once, before the instance is destroyed. //Called once, before the instance is destroyed.
//Add 'implements OnDestroy' to the class. //Add 'implements OnDestroy' to the class.
} }
} }

7
ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html
View File

@ -1,10 +1,3 @@
<!--<pre>{{ templateLenderRecord | json}}</pre>
<pre> {{ m_lender | json}} </pre>
<pre> {{ m_product | json}} </pre>
<pre> {{ m_customerSegment | json}} </pre>-->
<form [formGroup]="_editTempLenderFrom" (submit)="onSubmit()"> <form [formGroup]="_editTempLenderFrom" (submit)="onSubmit()">
<div formArrayName="temp_lender" class="example-full-width"> <div formArrayName="temp_lender" class="example-full-width">
<mat-card *ngFor="let answ of _editTempLenderFrom.controls.temp_lender['controls']; let i=index"> <mat-card *ngFor="let answ of _editTempLenderFrom.controls.temp_lender['controls']; let i=index">

187
ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.ts
View File

@ -1,6 +1,6 @@
import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core'; import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material'; import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material';
import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms'; import { FormGroup, FormControl, FormBuilder, Validators, FormArray } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { DataSource } from '@angular/cdk/table'; import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
@ -9,6 +9,10 @@ import { NotifierService } from 'angular-notifier';
import { TemplatesService } from './../../../../service/templates/templates.service'; import { TemplatesService } from './../../../../service/templates/templates.service';
import { MastersService } from './../../../../service/masters/masters.service'; import { MastersService } from './../../../../service/masters/masters.service';
/*
* Question Lender Details Get Multi drop-down and dynamic form with validation
* : kdk
*/
@Component({ @Component({
selector: 'app-template-edit-lender', selector: 'app-template-edit-lender',
@ -17,31 +21,31 @@ import { MastersService } from './../../../../service/masters/masters.service';
}) })
export class EditLenderComponent implements OnInit { export class EditLenderComponent implements OnInit {
@Input() questionId: number; @Input() questionId: number;
public noTemplateLendersFound: boolean; public noTemplateLendersFound: boolean;
public templateLenderRecord: any; public templateLenderRecord: any;
public errorMessage; public errorMessage;
public m_lender : any; public m_lender: any;
public m_product: any; public m_product: any;
public m_customerSegment : any; public m_customerSegment: any;
public _editTempLenderFrom: FormGroup; public _editTempLenderFrom: FormGroup;
public submitted = false; public submitted = false;
/** /**
* Notifier service * Notifier service
*/ */
private notifier : NotifierService; private notifier: NotifierService;
constructor( constructor(
notifier: NotifierService, notifier: NotifierService,
private templatesService: TemplatesService, private templatesService: TemplatesService,
private mastersService: MastersService, private mastersService: MastersService,
private _formBuilder: FormBuilder) { private _formBuilder: FormBuilder) {
this.notifier = notifier; this.notifier = notifier;
} }
ngOnInit() { ngOnInit() {
@ -51,51 +55,51 @@ export class EditLenderComponent implements OnInit {
this.getCustomerSegmentMasters(); this.getCustomerSegmentMasters();
this._editTempLenderFrom = this._formBuilder.group({ this._editTempLenderFrom = this._formBuilder.group({
temp_lender: this._formBuilder.array([ temp_lender: this._formBuilder.array([
// this.initAnswers(), // this.initAnswers(),
]) ])
}) })
} }
setFormDatas(record){ setFormDatas(record) {
if (record.length > 0) { if (record.length > 0) {
for (let val of record) { for (let val of record) {
let vals = { let vals = {
template_lender_map_id: val.template_lender_map_id, template_lender_map_id: val.template_lender_map_id,
fk_template_id: val.fk_template_id, fk_template_id: val.fk_template_id,
fk_lender_id: val.fk_lender_id, fk_lender_id: val.fk_lender_id,
fk_product_id: val.fk_product_id, fk_product_id: val.fk_product_id,
fk_customer_segment: val.fk_customer_segment, fk_customer_segment: val.fk_customer_segment,
isactive: val.isactive, isactive: val.isactive,
}; };
this.addLanguage(vals, null); this.addLanguage(vals, null);
} }
} }
} }
getTemplateLenderDetails(){ getTemplateLenderDetails() {
this.templatesService.getTemplateIDLenderDetails(this.questionId).subscribe( this.templatesService.getTemplateIDLenderDetails(this.questionId).subscribe(
data => { data => {
if (data) { if (data) {
if (data.records) { if (data.records) {
this.noTemplateLendersFound = false; this.noTemplateLendersFound = false;
this.templateLenderRecord = data.records; this.templateLenderRecord = data.records;
this.setFormDatas(this.templateLenderRecord); this.setFormDatas(this.templateLenderRecord);
// this.templateListData = data.records; // this.templateListData = data.records;
// this.dataLength = data.records.length; // this.dataLength = data.records.length;
// this.dataSource.data = this.templateListData; // this.dataSource.data = this.templateListData;
} else { } else {
this.noTemplateLendersFound = true; this.noTemplateLendersFound = true;
} }
} else { } else {
this.noTemplateLendersFound = true; this.noTemplateLendersFound = true;
} }
} }
); );
} }
getLenderMasters(){ getLenderMasters() {
this.templatesService.getLenderMasterListDetails().subscribe( this.templatesService.getLenderMasterListDetails().subscribe(
data => { data => {
this.m_lender = data.records; this.m_lender = data.records;
}, },
error => { error => {
@ -105,9 +109,9 @@ export class EditLenderComponent implements OnInit {
); );
} }
getProductsMasters(){ getProductsMasters() {
this.templatesService.getProductsMasterListDetails().subscribe( this.templatesService.getProductsMasterListDetails().subscribe(
data => { data => {
this.m_product = data.records; this.m_product = data.records;
}, },
error => { error => {
@ -118,8 +122,8 @@ export class EditLenderComponent implements OnInit {
} }
getCustomerSegmentMasters() { getCustomerSegmentMasters() {
this.templatesService.getCustomerSegmentsMasterListDetails().subscribe( this.templatesService.getCustomerSegmentsMasterListDetails().subscribe(
data => { data => {
this.m_customerSegment = data.records; this.m_customerSegment = data.records;
}, },
error => { error => {
@ -129,31 +133,22 @@ export class EditLenderComponent implements OnInit {
); );
} }
// convenience getter for easy access to form fields // convenience getter for easy access to form fields
get f() { return this._editTempLenderFrom.controls; } get f() { return this._editTempLenderFrom.controls; }
// Dynamic Form field creation Functionality : START ===>
public entityOptions = [{
fk_lender_id: 1,
name: 'Lender1'
},{
fk_lender_id: 2,
name: 'Lender2'
}];
// Dynamic Form field creation Functionality : START ===>
initAnswers(data) { initAnswers(data) {
return this._formBuilder.group({ return this._formBuilder.group({
template_lender_map_id: [data.template_lender_map_id], template_lender_map_id: [data.template_lender_map_id],
fk_template_id: [data.fk_template_id], fk_template_id: [data.fk_template_id],
fk_lender_id: [data.fk_lender_id, Validators.compose([Validators.required])], fk_lender_id: [data.fk_lender_id, Validators.compose([Validators.required])],
fk_product_id: [data.fk_product_id , Validators.compose([Validators.required])], fk_product_id: [data.fk_product_id, Validators.compose([Validators.required])],
fk_customer_segment: [data.fk_customer_segment, Validators.compose([Validators.required])], fk_customer_segment: [data.fk_customer_segment, Validators.compose([Validators.required])],
isactive: [data.isactive], isactive: [data.isactive],
}); });
} }
addLanguage(data, e) { addLanguage(data, e) {
if(data == null){ if (data == null) {
let newDate = { let newDate = {
template_lender_map_id: null, template_lender_map_id: null,
fk_template_id: this.questionId, fk_template_id: this.questionId,
@ -176,7 +171,6 @@ export class EditLenderComponent implements OnInit {
// END ===> // END ===>
/** To Save/Edited Popup Data */ /** To Save/Edited Popup Data */
onSubmit() { onSubmit() {
this.submitted = true; this.submitted = true;
@ -189,49 +183,46 @@ export class EditLenderComponent implements OnInit {
//To Remove The "Null" With Key also //To Remove The "Null" With Key also
Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]); Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]);
// alert(JSON.stringify(formValues.temp_lender)); // alert(JSON.stringify(formValues.temp_lender));
if (!this.checkDuplicateInObject(formValues.temp_lender)) {
if(!this.checkDuplicateInObject(formValues.temp_lender)) { this.templatesService.updateTempateIDLenderDetails(formValues.temp_lender).subscribe(
this.templatesService.updateTempateIDLenderDetails(formValues.temp_lender).subscribe( dataresult => {
dataresult => { if (dataresult.status == 200) {
if (dataresult.status == 200) { console.log(dataresult);
console.log(dataresult); this.notifier.notify('success', 'Your Changes Updated.!');
this.notifier.notify('success', 'Your Changes Updated.!'); const arr = <FormArray>this._editTempLenderFrom.controls.temp_lender;
const arr = <FormArray>this._editTempLenderFrom.controls.temp_lender; arr.controls.splice(0);
arr.controls.splice(0); this.getTemplateLenderDetails();
this.getTemplateLenderDetails(); }
} else {
else {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
this.errorMessage = "Something Wents Wrong Try Again.!";
}
}, error => {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!'); this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
this.errorMessage = "Some Thing Wents Wrong Try Again.!"; this.errorMessage = "Something Wents Wrong Try Again.!";
}); }
}, error => {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
this.errorMessage = "Some Thing Wents Wrong Try Again.!";
});
} else { } else {
alert("duplication records occured.!"); this.notifier.notify('warning', 'duplication records occured.!');
} }
} }
} }
checkDuplicateInObject(inputArray) { checkDuplicateInObject(inputArray) {
let seenDuplicate = false; let seenDuplicate = false;
inputArray.map(function (item, index) {
inputArray.map(function(item, index) { let currentVal = inputArray[index];
let currentVal = inputArray[index]; for (let i = index + 1; i < inputArray.length; i++) {
for(let i = index+1 ; i < inputArray.length ; i++ ){ if (currentVal.fk_lender_id === inputArray[i].fk_lender_id
if(currentVal.fk_lender_id === inputArray[i].fk_lender_id && currentVal.fk_product_id === inputArray[i].fk_product_id
&& currentVal.fk_product_id === inputArray[i].fk_product_id && currentVal.fk_customer_segment === inputArray[i].fk_customer_segment) {
&& currentVal.fk_customer_segment === inputArray[i].fk_customer_segment){ console.log('duplication: ' + i);
console.log('duplication: ' + i); seenDuplicate = true;
seenDuplicate = true;
}
} }
console.log(index); }
}); console.log(index);
return seenDuplicate; });
return seenDuplicate;
} }
ngOnDestroy(): void { ngOnDestroy(): void {

211
ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/category-question-answer/category-question-answer.component.ts
View File

@ -1,6 +1,6 @@
import { Component, ViewChild, OnInit, OnDestroy, Input, Inject } from '@angular/core'; import { Component, ViewChild, OnInit, OnDestroy, Input, Inject } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA, PageEvent } from '@angular/material'; import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA, PageEvent } from '@angular/material';
import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms'; import { FormGroup, FormControl, FormBuilder, Validators, FormArray } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { DataSource } from '@angular/cdk/table'; import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
@ -17,6 +17,11 @@ export interface DialogData {
/**sweet alert */ /**sweet alert */
// import Swal from 'sweetalert2'; // import Swal from 'sweetalert2';
/*
* Templates Category Question list with answers , with multiple question with answer dynamic form validation
* : kdk
*/
@Component({ @Component({
selector: 'app-category-question-answer', selector: 'app-category-question-answer',
templateUrl: './category-question-answer.component.html', templateUrl: './category-question-answer.component.html',
@ -24,17 +29,16 @@ export interface DialogData {
}) })
export class CategoryQuestionAnswerComponent implements OnInit { export class CategoryQuestionAnswerComponent implements OnInit {
countries = ['d', 'd', 'd', 'd', 'd' ,'d']; countries = ['d', 'd', 'd', 'd', 'd', 'd'];
regularDistribution = 100 / 3; regularDistribution = 100 / 3;
@Input() CaterogyQuesAns: any; @Input() CaterogyQuesAns: any;
_editquestionAnswerForm: FormGroup; _editquestionAnswerForm: FormGroup;
public panelOpenState : boolean; public panelOpenState: boolean;
// secondFormGroup: FormGroup; // secondFormGroup: FormGroup;
/** /**
* Notifier service * Notifier service
*/ */
@ -46,57 +50,53 @@ export class CategoryQuestionAnswerComponent implements OnInit {
private mastersService: MastersService, private mastersService: MastersService,
private _formBuilder: FormBuilder, private _formBuilder: FormBuilder,
public dialog: MatDialog) { public dialog: MatDialog) {
this.notifier = notifier; this.notifier = notifier;
this._editquestionAnswerForm = this._formBuilder.group({ this._editquestionAnswerForm = this._formBuilder.group({
temp_questions: this._formBuilder.array([ temp_questions: this._formBuilder.array([
// this.initAnswers(), // this.initAnswers(),
]) ])
}); });
// this.secondFormGroup = this._formBuilder.group({ // this.secondFormGroup = this._formBuilder.group({
// secondCtrl: '' // secondCtrl: ''
// }); // });
} }
ngOnInit() { ngOnInit() {
this.setFirstFormDate(this.CaterogyQuesAns.questions); this.setFirstFormDate(this.CaterogyQuesAns.questions);
} }
// setFirstFormDate(records){ // setFirstFormDate(records){
// alert(JSON.stringify(records)); // alert(JSON.stringify(records));
// } // }
animal: string;
name: string;
openDialog(): void {
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
data: {category_id: this.CaterogyQuesAns.fk_question_category_id, template_id: this.CaterogyQuesAns.fk_template_id} data: { category_id: this.CaterogyQuesAns.fk_question_category_id, template_id: this.CaterogyQuesAns.fk_template_id }
}); });
dialogRef.afterClosed().subscribe(result => { dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed'); console.log('The dialog was closed');
this.animal = result;
this.setModelFirstFormDate(result); this.setModelFirstFormDate(result);
// alert(result); // alert(result);
}); });
} }
setModelFirstFormDate(record){ setModelFirstFormDate(record) {
let val = record; let val = record;
let vals = { let vals = {
question_id: val.question_id, question_id: val.question_id,
question: val.question, question: val.question,
template_question_id: val.template_question_id, template_question_id: val.template_question_id,
fk_template_id: val.fk_template_id == null ? this.CaterogyQuesAns.fk_template_id : val.fk_template_id, fk_template_id: val.fk_template_id == null ? this.CaterogyQuesAns.fk_template_id : val.fk_template_id,
fk_question_id: val.fk_question_id == null ? val.question_id: val.fk_question_id, fk_question_id: val.fk_question_id == null ? val.question_id : val.fk_question_id,
question_weightage: val.question_weightage, question_weightage: val.question_weightage,
fk_template_question_category_id: val.fk_template_question_category_id == null ? this.CaterogyQuesAns.fk_question_category_id : val.fk_template_question_category_id, fk_template_question_category_id: val.fk_template_question_category_id == null ? this.CaterogyQuesAns.fk_question_category_id : val.fk_template_question_category_id,
question_answerable_by:val.question_answerable_by, question_answerable_by: val.question_answerable_by,
isactive: val.isactive == null? 1 : val.isactive, isactive: val.isactive == null ? 1 : val.isactive,
answers: val.answers answers: val.answers
}; };
this.addLanguage(vals, null); this.addLanguage(vals, null);
} }
setFirstFormDate(record) { setFirstFormDate(record) {
@ -107,11 +107,11 @@ export class CategoryQuestionAnswerComponent implements OnInit {
question: val.question, question: val.question,
template_question_id: val.template_question_id, template_question_id: val.template_question_id,
fk_template_id: val.fk_template_id == null ? this.CaterogyQuesAns.fk_template_id : val.fk_template_id, fk_template_id: val.fk_template_id == null ? this.CaterogyQuesAns.fk_template_id : val.fk_template_id,
fk_question_id: val.fk_question_id == null ? val.question_id: val.fk_question_id, fk_question_id: val.fk_question_id == null ? val.question_id : val.fk_question_id,
question_weightage: val.question_weightage, question_weightage: val.question_weightage,
fk_template_question_category_id: val.fk_template_question_category_id == null ? this.CaterogyQuesAns.fk_template_question_category_id : val.fk_template_question_category_id, fk_template_question_category_id: val.fk_template_question_category_id == null ? this.CaterogyQuesAns.fk_template_question_category_id : val.fk_template_question_category_id,
question_answerable_by:val.question_answerable_by, question_answerable_by: val.question_answerable_by,
isactive: val.isactive == null? 1 : val.isactive, isactive: val.isactive == null ? 1 : val.isactive,
answers: val.answers answers: val.answers
}; };
this.addLanguage(vals, null); this.addLanguage(vals, null);
@ -119,48 +119,44 @@ export class CategoryQuestionAnswerComponent implements OnInit {
} }
} }
setAnswers(record, i){ setAnswers(record, i) {
for (let val of record) { for (let val of record) {
let vals = { let vals = {
question_answer_id: val.question_answer_id, question_answer_id: val.question_answer_id,
answer: val.answer, answer: val.answer,
template_answer_weightage_id: val.template_answer_weightage_id, template_answer_weightage_id: val.template_answer_weightage_id,
fk_template_question_id: val.fk_template_question_id, fk_template_question_id: val.fk_template_question_id,
fk_question_answer_id: val.fk_question_answer_id == null ? val.question_answer_id : val.fk_question_answer_id , fk_question_answer_id: val.fk_question_answer_id == null ? val.question_answer_id : val.fk_question_answer_id,
template_answer_weightage: val.template_answer_weightage, template_answer_weightage: val.template_answer_weightage,
template_answer_remark: val.template_answer_remark, template_answer_remark: val.template_answer_remark,
isactive: val.isactive isactive: val.isactive
}; };
this.addAnswerData(vals, null, i); this.addAnswerData(vals, null, i);
}
} }
}
// ================== Dynamic Form set for Answers // ================== Dynamic Form set for Answers
addAnswerData(data, e, ix) { addAnswerData(data, e, ix) {
// const control = <FormArray>this._editquestionAnswerForm.controls['temp_questions'].get('answers'); const control = (<FormArray>this._editquestionAnswerForm.controls['temp_questions']).at(ix).get('answers') as FormArray;
// let id = 0; // alert(control);
const control = (<FormArray>this._editquestionAnswerForm.controls['temp_questions']).at(ix).get('answers') as FormArray;
// alert(control);
control.push(this.initAnswerData(data)); control.push(this.initAnswerData(data));
} }
initAnswerData(data){ initAnswerData(data) {
return this._formBuilder.group({ return this._formBuilder.group({
answer:[data.answer], answer: [data.answer],
template_answer_weightage_id: [data.template_answer_weightage_id], template_answer_weightage_id: [data.template_answer_weightage_id],
fk_template_question_id: [data.fk_template_question_id], fk_template_question_id: [data.fk_template_question_id],
fk_question_answer_id: [data.fk_question_answer_id], fk_question_answer_id: [data.fk_question_answer_id],
template_answer_weightage: [data.template_answer_weightage, Validators.compose([Validators.required])], template_answer_weightage: [data.template_answer_weightage, Validators.compose([Validators.required])],
template_answer_remark: [data.template_answer_remark], template_answer_remark: [data.template_answer_remark],
isactive: [data.isactive] isactive: [data.isactive]
}); });
} }
// ============================================= // =============================================
// Dynamic Form field creation Functionality : START ===> // Dynamic Form field creation Functionality : START ===>
initAnswers(data) { initAnswers(data) {
return this._formBuilder.group({ return this._formBuilder.group({
@ -174,14 +170,14 @@ export class CategoryQuestionAnswerComponent implements OnInit {
isactive: [data.isactive], isactive: [data.isactive],
question_answerable_by: [data.question_answerable_by], question_answerable_by: [data.question_answerable_by],
answers: this._formBuilder.array([ answers: this._formBuilder.array([
// this.setAnswers(data.answers) // this.setAnswers(data.answers)
]) ])
}); });
} }
addLanguage(data, e) { addLanguage(data, e) {
if (data == null) { if (data == null) {
let newDate = { let newDate = {
question:null, question: null,
template_question_id: null, template_question_id: null,
fk_template_id: null, fk_template_id: null,
fk_question_category_id: null, fk_question_category_id: null,
@ -191,11 +187,8 @@ export class CategoryQuestionAnswerComponent implements OnInit {
const control = <FormArray>this._editquestionAnswerForm.controls['temp_questions']; const control = <FormArray>this._editquestionAnswerForm.controls['temp_questions'];
control.push(this.initAnswers(newDate)); control.push(this.initAnswers(newDate));
} else { } else {
// alert(JSON.stringify(data));
const control = <FormArray>this._editquestionAnswerForm.controls['temp_questions']; const control = <FormArray>this._editquestionAnswerForm.controls['temp_questions'];
control.push(this.initAnswers(data)); control.push(this.initAnswers(data));
// alert(control.length);
// alert(JSON.stringify(this._editquestionAnswerForm.controls.temp_questions['controls']));
this.setAnswers(data.answers, control.length - 1); this.setAnswers(data.answers, control.length - 1);
} }
} }
@ -203,23 +196,22 @@ export class CategoryQuestionAnswerComponent implements OnInit {
removeLanguage(inx) { removeLanguage(inx) {
// let value = <FormArray>this._editquestionAnswerForm.controls['temp_questions'].indexOf(inx); // let value = <FormArray>this._editquestionAnswerForm.controls['temp_questions'].indexOf(inx);
let value = (<FormArray>this._editquestionAnswerForm.controls['temp_questions']).at(inx).get('template_question_id').value; let value = (<FormArray>this._editquestionAnswerForm.controls['temp_questions']).at(inx).get('template_question_id').value;
if(value == null){ if (value == null) {
const control = <FormArray>this._editquestionAnswerForm.controls['temp_questions']; const control = <FormArray>this._editquestionAnswerForm.controls['temp_questions'];
control.removeAt(inx); control.removeAt(inx);
} else { } else {
alert(); this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
}
} }
// alert(JSON.stringify(value));
}
submitted: boolean; submitted: boolean;
onSubmit() { onSubmit() {
this.submitted = true; this.submitted = true;
// stop here if form is invalid // stop here if form is invalid
if (this._editquestionAnswerForm.invalid) { if (this._editquestionAnswerForm.invalid) {
alert('no'); this.notifier.notify('warning', 'Please Should Fill Required Fields.!');
return; return;
} else { } else {
var formValues = this._editquestionAnswerForm.value; var formValues = this._editquestionAnswerForm.value;
@ -236,10 +228,7 @@ alert();
if (dataresult.status == 200) { if (dataresult.status == 200) {
console.log(dataresult); console.log(dataresult);
this.notifier.notify('success', 'Your Changes Updated.!'); this.notifier.notify('success', 'Your Changes Updated.!');
// const arr = <FormArray>this._editquestionAnswerForm.controls.temp_questions; }
// arr.controls.splice(0);
// this.getTemplateCategoryDetails();
}
else { else {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!'); this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
// this.errorMessage = "Something Wents Wrong Try Again.!"; // this.errorMessage = "Something Wents Wrong Try Again.!";
@ -249,13 +238,12 @@ alert();
// this.errorMessage = "Some Thing Wents Wrong Try Again.!"; // this.errorMessage = "Some Thing Wents Wrong Try Again.!";
}); });
} else { } else {
alert("duplication records occured.!"); this.notifier.notify('warning', 'duplication records occured.!');
} }
} else { } else {
// Swal('value should equal to 100.!','error'); // Swal('value should equal to 100.!','error');
alert("value should equal to 100"); this.notifier.notify('warning', 'value should equal to 100.!');
} }
} }
} }
@ -264,11 +252,10 @@ alert();
checkDuplicateInObject(inputArray) { checkDuplicateInObject(inputArray) {
this.dublicateRerdIndex = -1; this.dublicateRerdIndex = -1;
let seenDuplicate = false; let seenDuplicate = false;
inputArray.map((item, index) => { inputArray.map((item, index) => {
let currentVal = inputArray[index]; let currentVal = inputArray[index];
for(let i = index+1 ; i < inputArray.length ; i++ ){ for (let i = index + 1; i < inputArray.length; i++) {
if(currentVal.question_id === inputArray[i].question_id){ if (currentVal.question_id === inputArray[i].question_id) {
console.log('duplication: ' + i); console.log('duplication: ' + i);
this.dublicateRerdIndex = i; this.dublicateRerdIndex = i;
seenDuplicate = true; seenDuplicate = true;
@ -283,7 +270,7 @@ alert();
@Component({ @Component({
selector: 'dialog-overview-example-dialog', selector: 'dialog-overview-example-dialog',
styles:[` styles: [`
.listHover: hover { .listHover: hover {
background: yellow; background: yellow;
}` }`
@ -292,44 +279,34 @@ alert();
}) })
export class DialogOverviewExampleDialog { export class DialogOverviewExampleDialog {
// typesOfShoes: string[] = [ public m_questions: any;
// 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, ',
// 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, ',
// 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, ',
// 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, ',
// 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, '
// ];
public m_questions:any;
constructor( constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData, @Inject(MAT_DIALOG_DATA) public data: DialogData,
private templatesService: TemplatesService, private templatesService: TemplatesService,
private mastersService: MastersService,) { private mastersService: MastersService) {
this.getCategoryRemainingQuesMasters(); this.getCategoryRemainingQuesMasters();
} }
onNoClick(ques): void {
this.dialogRef.close(ques);
}
errorRecord : string; onNoClick(ques): void {
noRecordFound: boolean; this.dialogRef.close(ques);
}
getCategoryRemainingQuesMasters() { errorRecord: string;
noRecordFound: boolean;
getCategoryRemainingQuesMasters() {
this.templatesService.getRemaningQuestionCategory(this.data).subscribe( this.templatesService.getRemaningQuestionCategory(this.data).subscribe(
data => { data => {
if(data.status === 200 && data.dataStatus){ if (data.status === 200 && data.dataStatus) {
this.noRecordFound = true; this.noRecordFound = true;
this.m_questions = data.records; this.m_questions = data.records;
} else { } else {
this.noRecordFound = false; this.noRecordFound = false;
} }
}, },
error => { error => {
this.noRecordFound = true; this.noRecordFound = true;
// this.notifier.notify('warning', 'No Category Master Records Found.!');
// this.m_category = "No Category Master Records Found.";
} }
); );
} }

12
ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.html
View File

@ -1,5 +1,4 @@
<mat-card> <mat-card>
<!--<pre>{{ templateQuesAnsRecord | json}}</pre>-->
<mat-accordion> <mat-accordion>
<mat-expansion-panel *ngFor="let data of templateQuesAnsRecord"> <mat-expansion-panel *ngFor="let data of templateQuesAnsRecord">
<mat-expansion-panel-header fxLayout="row" fxLayoutWrap fxLayoutGap="5%" fxLayoutAlign="start center"> <mat-expansion-panel-header fxLayout="row" fxLayoutWrap fxLayoutGap="5%" fxLayoutAlign="start center">
@ -14,16 +13,5 @@
<app-category-question-answer [CaterogyQuesAns]="data"> <app-category-question-answer [CaterogyQuesAns]="data">
</app-category-question-answer> </app-category-question-answer>
</mat-expansion-panel> </mat-expansion-panel>
<!--<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
Category 2
</mat-panel-title>
<mat-panel-description>
50%
</mat-panel-description>
</mat-expansion-panel-header>
<p>I'm visible because I am open</p>
</mat-expansion-panel>-->
</mat-accordion> </mat-accordion>
</mat-card> </mat-card>

83
ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.ts
View File

@ -20,110 +20,27 @@ export class EditQuestionAnswerComponent implements OnInit {
@Input() questionId: number; @Input() questionId: number;
public _editTempCategoryFrom: FormGroup;
public submitted = false; public submitted = false;
public panelOpenState : boolean; public panelOpenState : boolean;
public templateQuesAnsRecord: any; public templateQuesAnsRecord: any;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor( constructor(
notifier: NotifierService, notifier: NotifierService,
private templatesService: TemplatesService, private templatesService: TemplatesService,
private mastersService: MastersService, private mastersService: MastersService,
private _formBuilder: FormBuilder,
public dialog: MatDialog) { public dialog: MatDialog) {
this.firstFormGroup = this._formBuilder.group({
temp_questions: this._formBuilder.array([
// this.initAnswers(),
])
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ''
});
} }
ngOnInit() { ngOnInit() {
this.getTemplateQuesAnsDetails(); this.getTemplateQuesAnsDetails();
this.initalLoadFormData();
if(this.categoryList.length > 0){
for (let val of this.categoryList) {
// alert(JSON.stringify(val));
let vals = val;
this.addLanguage(vals['fk_category_id'], vals['name'], vals['weightage'], null);
}
}
} }
setFormQuestionData(record) {
// alert(JSON.stringify(record));
}
initalLoadFormData(){
this._editTempCategoryFrom = this._formBuilder.group({
temp_category: this._formBuilder.array([
// this.initAnswers(),
])
})
}
// convenience getter for easy access to form fields
get f() { return this._editTempCategoryFrom.controls; }
public m_categoryList = [{
fk_category_id: 1,
name: 'Category List 1',
weightage: 2,
},{
fk_category_id: 2,
name: 'Category List 2',
weightage: 5,
},{
fk_category_id: 3,
name: 'Category List 2',
weightage: 5,
}];
public categoryList = [{
fk_category_id: 1,
name: 'Category List 1',
weightage: 2,
},{
fk_category_id: 2,
name: 'Category List 2',
weightage: 5,
}];
// Dynamic Form field creation Functionality : START ===>
initAnswers(fk_cat_id, name, weightage) {
return this._formBuilder.group({
fk_category_id: [fk_cat_id, Validators.compose([Validators.required])],
name: [name, Validators.compose([Validators.required])],
weightage: [weightage, Validators.compose([Validators.required])],
});
}
addLanguage(fk_cat_id, name, weightage, e) {
const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
control.push(this.initAnswers(fk_cat_id, name, weightage));
}
removeLanguage(i: number) {
const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
control.removeAt(i);
}
// END ===>
getTemplateQuesAnsDetails() { getTemplateQuesAnsDetails() {
this.templatesService.getTemplateIDQuesAnsDetails(this.questionId).subscribe( this.templatesService.getTemplateIDQuesAnsDetails(this.questionId).subscribe(
data => { data => {
if (data) { if (data) {
if (data.records) { if (data.records) {
this.templateQuesAnsRecord = data.records; this.templateQuesAnsRecord = data.records;
this.setFormQuestionData(this.templateQuesAnsRecord);
// this.templateListData = data.records;
// this.dataLength = data.records.length;
// this.dataSource.data = this.templateListData;
} else { } else {
// this.noTemplateLendersFound = true; // this.noTemplateLendersFound = true;
} }