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

general form changes

Browse Source
This commit is contained in:
gandhimathi 2018-12-26 19:40:40 +05:30
parent 6365d43aa2
commit 4c082b59b8
2 changed files with 162 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html
View File

@ -31,54 +31,67 @@
</mat-card-header> </mat-card-header>
<mat-card-content formArrayName="applicant_relation"> <mat-card-content formArrayName="applicant_relation">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" *ngFor="let relation of _generalForm.controls.applicant_relation['controls']; let r = index;" [formGroupName]="r"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" *ngFor="let relation of _generalForm.controls.applicant_relation['controls']; let r = index;" [formGroupName]="r">
<mat-card > <mat-card >
<mat-card-header> <mat-card-header>
<mat-card-title>{{relation.controls.applicant_name.value | titlecase}}</mat-card-title> <mat-card-title>{{relation.controls.applicant_name.value | titlecase}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div formArrayName="multiple_relation">
<mat-form-field style="width: 50%" *ngIf="relation.controls.company_name.value"> <div *ngFor="let mulRel of relation.get('multiple_relation').controls; let m = index" [formGroupName]="m">
<input matInput placeholder="Company / Firm" formControlName="company_name" [readonly]="true" type="text"> <div fxLayout="row nowrap">
</mat-form-field> <mat-form-field style="width: 45%">
<mat-form-field style="width: 40%" *ngIf="relation.controls.company_name.value"> <mat-select placeholder="Relation to" formControlName="applicant_relation_to">
<mat-select placeholder="Relation" formControlName="company_relationship"> <mat-option>Select</mat-option>
<mat-option>Select</mat-option> <mat-option *ngFor="let rel of fetch_related_details" [value]="rel">
<mat-option *ngFor="let comrelShip of companyRelationShipList" [value]="comrelShip.company_relationship_id"> <!-- [disabled]="relation.controls.applicant_name.value == rel" -->
{{comrelShip.name | titlecase}} {{rel | titlecase}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 50%"> <mat-form-field style="width: 40%">
<mat-select placeholder="Relation" formControlName="relationship">
<mat-select placeholder="Relation to" formControlName="applicant_relation_to"> <mat-option>Select</mat-option>
<mat-option>Select</mat-option> <mat-option *ngFor="let relShip of relationShipList" [value]="relShip.relationship_id">
<mat-option *ngFor="let rel of fetch_related_details" [value]="rel"> {{relShip.name | titlecase}}
<!-- [disabled]="relation.controls.applicant_name.value == rel" --> </mat-option>
{{rel | titlecase}} </mat-select>
</mat-option> </mat-form-field>
</mat-select> <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Add More Relation" matTooltipPosition="above" color="primary" (click)="addMoreRelation(r,m)" *ngIf="m==0"><mat-icon>add</mat-icon></button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="removeRelation(r,m)" *ngIf="m>0"
<!-- <input matInput placeholder="Relation to" formControlName="applicant_relation_to" type="text"> --> matTooltip="Remove Relation" matTooltipPosition="above">
</mat-form-field> <mat-icon>delete</mat-icon>
<mat-form-field style="width: 40%" *ngIf="relation.controls.applicant_relation_to.value"> </button>
<mat-select placeholder="Relation" formControlName="relationship"> </div>
<mat-option>Select</mat-option> <div formArrayName="multiple_company_relation">
<mat-option *ngFor="let relShip of relationShipList" [value]="relShip.relationship_id"> <div fxLayout="row nowrap" *ngFor="let comRel of mulRel.get('multiple_company_relation').controls; let c = index" [formGroupName]="c">
{{relShip.name | titlecase}} <mat-form-field style="width: 40%">
</mat-option> <input matInput placeholder="Company / Firm" formControlName="company_name" type="text">
</mat-select> </mat-form-field>
</mat-form-field> <mat-form-field style="width: 30%">
<div align="end" *ngIf="relation.controls.pd_co_applicant_id.value==0"> <mat-select placeholder="Relation" formControlName="company_relationship">
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="removeOthers(r,relation.value)" <mat-option>Select</mat-option>
matTooltip="Delete" matTooltipPosition="above"> <mat-option *ngFor="let comrelShip of companyRelationShipList" [value]="comrelShip.company_relationship_id">
<mat-icon>delete</mat-icon> {{comrelShip.name | titlecase}}
</button> </mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Add More Company" matTooltipPosition="above" color="primary" (click)="addMoreCompanyRelation(r,m,c)" *ngIf="c==0"><mat-icon>add</mat-icon></button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="removeCompanyRelation(r,m,c)" *ngIf="c>0"
matTooltip="Remove Company" matTooltipPosition="above">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div> </div>
</div>
</mat-card-content> </mat-card-content>
<mat-card-actions align="end" *ngIf="relation.controls.pd_co_applicant_id.value==0">
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="removeOthers(r,relation.value)"
matTooltip="Delete" matTooltipPosition="above">
<mat-icon>delete</mat-icon>
</button>
</mat-card-actions>
</mat-card> </mat-card>
</div> </div>

150
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.ts
View File

@ -112,16 +112,54 @@ export class GeneralInfoComponent implements OnInit {
} }
if(exist_applicant_relation.length > 0){ if(exist_applicant_relation.length > 0){
exist_applicant_relation.forEach(val => { exist_applicant_relation.forEach((val,key) => {
relationControl.push(this.createApplicantRelation(val)); let control: any = this._generalForm.get('applicant_relation') as FormArray;
control.push(this.createApplicantRelation(val));
control = control.controls[key].get('multiple_relation') as FormArray;
val.multiple_relation.forEach((firstInnerelement,firstInnerKey) => {
control.push(this.createMultipleRelation(firstInnerelement));
let innerControl = this._generalForm.get('applicant_relation') as FormArray;
innerControl = innerControl.controls[key].get('multiple_relation') as FormArray;
innerControl = innerControl.controls[firstInnerKey].get('multiple_company_relation') as FormArray;
firstInnerelement.multiple_company_relation.forEach((secondInnerValue,secondInnerKey) => {
innerControl.push(this.createMultipleCompanyRelation(secondInnerValue))
});
});
//push related to details //push related to details
this.fetch_related_details.push(val.applicant_name); this.fetch_related_details.push(val.applicant_name);
}); });
} }
}, error => this.errorMessage = <any> error); }, error => this.errorMessage = <any> error);
} }
// check and uncheck function
checkboxChange(event, index, item) {
if(item.exist_status.value){
let relationControl: any = <FormArray>this._generalForm.controls['applicant_relation'];
let applicant_details: any= {'pd_co_applicant_id':item.pd_co_applicant_id.value,'applicant_name':item.applicant_name.value,'applicant_relation_to':'','relation':'','company_name':item.company_name.value,'company_relation':''};
relationControl.push(this.createApplicantRelation(applicant_details));
relationControl = <FormArray> relationControl.controls[relationControl.controls.length-1].get('multiple_relation');
relationControl.push(this.createMultipleRelation(applicant_details))
relationControl = <FormArray> relationControl.controls[relationControl.controls.length-1].get('multiple_company_relation');
relationControl.push(this.createMultipleCompanyRelation(applicant_details))
// to push selected persons names
this.fetch_related_details.push(item.applicant_name.value);
}
else {
if(item.pd_co_applicant_id.value!=0){
let relationControl = <FormArray>this._generalForm.controls['applicant_relation'];
let pos_id = relationControl.value.map(e=> e.pd_co_applicant_id).indexOf(item.pd_co_applicant_id.value);
relationControl.removeAt(pos_id);
// remove related to details
let pos_name=this.fetch_related_details.indexOf(item.applicant_name.value);
this.fetch_related_details.splice(pos_name, 1);
}
}
}
// create applicant form array // create applicant form array
createApplicant(elementValue:any){ createApplicant(elementValue:any){
return this._fb.group({ return this._fb.group({
@ -137,34 +175,59 @@ export class GeneralInfoComponent implements OnInit {
return this._fb.group({ return this._fb.group({
pd_co_applicant_id: [elementValue.pd_co_applicant_id], pd_co_applicant_id: [elementValue.pd_co_applicant_id],
applicant_name: [elementValue.applicant_name], applicant_name: [elementValue.applicant_name],
company_name: [elementValue.company_name,elementValue.company_name ? Validators.required : Validators.nullValidator], multiple_relation: this._fb.array([]),
company_relationship: [elementValue.company_relationship],
applicant_relation_to: [elementValue.applicant_relation_to, Validators.required],
relationship: [elementValue.relationship],
}); });
} }
// create multiple relation details
// checkand un check function createMultipleRelation(elementValue: any) {
checkboxChange(event, index, item) { return this._fb.group({
if(item.exist_status.value){ applicant_relation_to: [elementValue.applicant_relation_to, Validators.required],
let relationControl = <FormArray>this._generalForm.controls['applicant_relation']; relationship: [elementValue.relationship],
let applicant_details: any= {'pd_co_applicant_id':item.pd_co_applicant_id.value,'applicant_name':item.applicant_name.value,'applicant_relation_to':'','relation':'','company_name':item.company_name.value,'company_relation':''}; multiple_company_relation : this._fb.array([]),
relationControl.push(this.createApplicantRelation(applicant_details)); });
// push related to details }
this.fetch_related_details.push(item.applicant_name.value);
// add more relation
} addMoreRelation(rindex,mindex) {
else { let control: any = this._generalForm.get('applicant_relation') as FormArray;
if(item.pd_co_applicant_id.value!=0){ control = control.controls[rindex].get('multiple_relation') as FormArray;
let relationControl = <FormArray>this._generalForm.controls['applicant_relation']; let setValues: any = {applicant_relation_to :'',relationship:''}
let pos_id = relationControl.value.map(e=> e.pd_co_applicant_id).indexOf(item.pd_co_applicant_id.value); control.push(this.createMultipleRelation(setValues))
relationControl.removeAt(pos_id); let setCompanyValue = {company_name :'',company_relationship:''};
// remove related to details control = <FormArray> control.controls[control.controls.length-1].get('multiple_company_relation');
let pos_name=this.fetch_related_details.indexOf(item.applicant_name.value); control.push(this.createMultipleCompanyRelation(setCompanyValue))
this.fetch_related_details.splice(pos_name, 1); }
}
// remove relation
removeRelation(rindex,mindex) {
let control: any = this._generalForm.get('applicant_relation') as FormArray;
control = control.controls[rindex].get('multiple_relation') as FormArray;
control.removeAt(mindex);
}
// create multiple company relation
createMultipleCompanyRelation(elementValue: any) {
return this._fb.group({
company_name: [elementValue.company_name,elementValue.company_name ? Validators.required : Validators.nullValidator],
company_relationship: [elementValue.company_relationship],
});
}
// add more company relation
addMoreCompanyRelation(rindex,mindex,cindex) {
let control: any = this._generalForm.get('applicant_relation') as FormArray;
control = control.controls[rindex].get('multiple_relation') as FormArray;
control = control.controls[mindex].get('multiple_company_relation') as FormArray;
let setValues: any = {company_name :'',company_relationship:''}
control.push(this.createMultipleCompanyRelation(setValues))
}
// remove company relation
removeCompanyRelation(rindex,mindex,cindex) {
let control: any = this._generalForm.get('applicant_relation') as FormArray;
control = control.controls[rindex].get('multiple_relation') as FormArray;
control = control.controls[mindex].get('multiple_company_relation') as FormArray;
control.removeAt(cindex);
} }
}
// add more applicant details // add more applicant details
addOtherApplicant() { addOtherApplicant() {
@ -176,10 +239,14 @@ export class GeneralInfoComponent implements OnInit {
dialogRef.afterClosed() dialogRef.afterClosed()
.subscribe(dataresult => { .subscribe(dataresult => {
if(dataresult.data.length>0){ if(dataresult.data.length>0){
let relationControl = <FormArray>this._generalForm.controls['applicant_relation'];
dataresult.data.forEach(element => { dataresult.data.forEach(element => {
let applicant_details: any= {'pd_co_applicant_id':element.pd_co_applicant_id,'applicant_name':element.applicant_name,'applicant_relation_to':'','relation':'','company_name':element.company_name,'company_relation':''}; let relationControl = <FormArray>this._generalForm.controls['applicant_relation'];
let applicant_details: any= {'pd_co_applicant_id':element.pd_co_applicant_id,'applicant_name':element.applicant_name,'applicant_relation_to':'','relation':'','company_name':element.company_name,'company_relation':''};
relationControl.push(this.createApplicantRelation(applicant_details)); relationControl.push(this.createApplicantRelation(applicant_details));
relationControl = <FormArray> relationControl.controls[relationControl.controls.length-1].get('multiple_relation');
relationControl.push(this.createMultipleRelation(applicant_details))
relationControl = <FormArray> relationControl.controls[relationControl.controls.length-1].get('multiple_company_relation');
relationControl.push(this.createMultipleCompanyRelation(applicant_details))
// push related to details // push related to details
this.fetch_related_details.push(element.applicant_name); this.fetch_related_details.push(element.applicant_name);
}); });
@ -192,7 +259,6 @@ export class GeneralInfoComponent implements OnInit {
// remove other details // remove other details
removeOthers(index, item: any){ removeOthers(index, item: any){
console.log(item)
if(item.pd_co_applicant_id==0){ if(item.pd_co_applicant_id==0){
let relationControl = <FormArray>this._generalForm.controls['applicant_relation']; let relationControl = <FormArray>this._generalForm.controls['applicant_relation'];
relationControl.removeAt(index); relationControl.removeAt(index);
@ -226,22 +292,22 @@ export class GeneralInfoComponent implements OnInit {
} }
}); });
// this is for selected applicant relation // this is for selected applicant relation
formData.applicant_relation.forEach((element,key) => { // formData.applicant_relation.forEach((element,key) => {
applicantRelationList.push({ // applicantRelationList.push({
"pd_co_applicant_id":element.pd_co_applicant_id, // "pd_co_applicant_id":element.pd_co_applicant_id,
"applicant_name":element.applicant_name, // "applicant_name":element.applicant_name,
"company_name":element.company_name, // "company_name":element.company_name,
"company_relationship":element.company_relationship, // "company_relationship":element.company_relationship,
"applicant_relation_to":element.applicant_relation_to, // "applicant_relation_to":element.applicant_relation_to,
"relationship":element.relationship, // "relationship":element.relationship,
}) // })
}); // });
saveRecords.pdid=formData.pdid; saveRecords.pdid=formData.pdid;
saveRecords.formid=formData.formid; saveRecords.formid=formData.formid;
saveRecords.general_remark=formData.general_remark; saveRecords.general_remark=formData.general_remark;
saveRecords.selected_applicant=applicantList; saveRecords.selected_applicant=applicantList;
saveRecords.applicant_relation=applicantRelationList; saveRecords.applicant_relation=formData.applicant_relation;
this._pd.savePDFormDetailsWithID(saveRecords).subscribe( this._pd.savePDFormDetailsWithID(saveRecords).subscribe(
dataresult => { dataresult => {
if (dataresult.status == 200) { if (dataresult.status == 200) {