neighbour hood forms changes
This commit is contained in:
gandhimathi
parent
61250f930e
commit
56166f6076
@ -1,3 +1,123 @@
|
||||
<p>
|
||||
neighbour-hood works!
|
||||
</p>
|
||||
<form [formGroup]="_neighbourhoodForm" novalidate>
|
||||
|
||||
<h2 mat-dialog-title class="paragraph_change">
|
||||
<div fxFlex="70" align="left">
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
{{pageTitle}}
|
||||
</div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<mat-radio-group formControlName="check_type" class="example-radio-group">
|
||||
<mat-radio-button class="example-radio-button" color="primary" [value]="types.id" *ngFor="let types of check_type; let t = index">{{types.type_name}}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div fxFlex="30" align="end">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
|
||||
</div>
|
||||
</h2>
|
||||
<mat-dialog-content formArrayName="neighbourhood_list" *ngIf="_neighbourhoodForm.controls.check_type.value==0">
|
||||
<mat-card *ngFor="let neighbourhood of _neighbourhoodForm.controls.neighbourhood_list['controls']; let n = index;" [formGroupName]="n">
|
||||
<mat-card-content>
|
||||
<div fxLayout="row nowrap">
|
||||
<mat-form-field style="width: 42%">
|
||||
<input matInput placeholder="Neighbour Name" formControlName="neighbourhood_name" type="text">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 42%">
|
||||
<mat-select placeholder="Do You Know" formControlName="do_know">
|
||||
<mat-option value="Yes">Yes</mat-option>
|
||||
<mat-option value="No">No</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row nowrap" *ngIf="neighbourhood.controls.do_know.value=='Yes'">
|
||||
<mat-form-field style="width: 42%">
|
||||
<input matInput placeholder="How Long to Know the Applicant " formControlName="how_long_do_know" type="text" (keypress)="keyPress($event)">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 42%">
|
||||
<mat-select placeholder="Is the Applicant Owner" formControlName="is_applicant_owner">
|
||||
<mat-option value="Yes">Yes</mat-option>
|
||||
<mat-option value="No">No</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button type="button" mat-raised-button mat-icon-button (click)="removeNeighbourhood(r)"
|
||||
matTooltip="Remove neighbourhood" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="n!=0">
|
||||
<mat-icon>delete</mat-icon></button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-content formArrayName="referencecheck_list" *ngIf="_neighbourhoodForm.controls.check_type.value==1">
|
||||
<mat-card *ngFor="let reference of _neighbourhoodForm.controls.referencecheck_list['controls']; let r = index;" [formGroupName]="r">
|
||||
<mat-card-content>
|
||||
<mat-form-field style="width: 28%">
|
||||
<input matInput placeholder="Name" formControlName="reference_name" type="text">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 28%">
|
||||
<input matInput placeholder="Mobile Number" formControlName="mobile" type="text" (keypress)="keyPress($event)">
|
||||
<mat-error *ngIf="reference['controls'].mobile.hasError('maxlength') || reference['controls'].mobile.hasError('minlength')">Enter Valid Mobile Number. </mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 28%">
|
||||
<input matInput placeholder="Landline Number" formControlName="landline" type="text" (keypress)="keyPress($event)">
|
||||
<mat-error *ngIf="reference['controls'].landline.hasError('maxlength') || reference['controls'].landline.hasError('minlength')">Enter Valid Landline Number. </mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 28%">
|
||||
<textarea matInput placeholder="Location" formControlName="location"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 28%">
|
||||
|
||||
<mat-select placeholder="Relation With Business" formControlName="relationship_with">
|
||||
<mat-option>Select</mat-option>
|
||||
<mat-option *ngFor="let relationship of busineesRelationshipList" [value]="relationship.relation_with_business_id">
|
||||
{{relationship.relation_with_business_name | titlecase}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 28%" *ngIf="reference.controls.relationship_with.value==5">
|
||||
<input matInput placeholder="Others" formControlName="others" type="text">
|
||||
</mat-form-field>
|
||||
<p #period_paragraph>Period of Relationship</p>
|
||||
<mat-form-field style="width: 12%">
|
||||
<input matInput placeholder="Year" formControlName="year_relation_applicant" type="text" (keypress)="keyPress($event)">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 12%">
|
||||
<input matInput placeholder="Month" formControlName="months_relation_applicant" type="text" (keypress)="keyPress($event)">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 28%">
|
||||
<input matInput [placeholder]="reference.controls.relationship_with.value ==4 ? 'Rent Amount' : 'Volume of Business'" formControlName="business_volume_amount" type="text" (keypress)="keyPress($event)">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 22%">
|
||||
<mat-select placeholder="Unit" formControlName="business_volume_unit">
|
||||
<mat-option>Select</mat-option>
|
||||
<mat-option *ngFor="let volume of volumeunitList" [value]="volume.frequency_id">
|
||||
{{volume.name | titlecase}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button type="button" mat-raised-button mat-icon-button (click)="removeReferencecheck(r)"
|
||||
matTooltip="Remove Reference Check" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="r!=0">
|
||||
<mat-icon>delete</mat-icon></button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
|
||||
<mat-form-field appearance="outline" style="width: 100%">
|
||||
<mat-label>Remarks</mat-label>
|
||||
<textarea matInput placeholder="Remarks" formControlName="neighbour_reference_remark" required></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="40" align="end">
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Save" matTooltipPosition="above" (click)="_neighbourhoodForm.controls.check_type.value==0 ? addNeighbourhood() : addReferencecheck()"><mat-icon>add</mat-icon></button>
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Save" matTooltipPosition="above" (click)="saveNeighbourhood(_neighbourhoodForm.value)"><mat-icon>save</mat-icon></button>
|
||||
</div>
|
||||
|
||||
</mat-dialog-actions>
|
||||
<notifier-container></notifier-container>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
.paragraph_change {
|
||||
color: #e00201 !important;
|
||||
}
|
||||
mat-form-field {
|
||||
margin: 0 2%;
|
||||
}
|
||||
#period_paragraph {
|
||||
margin: 0 2%;
|
||||
}
|
||||
|
||||
.example-radio-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.example-radio-button {
|
||||
margin: 0 4%;
|
||||
color: #000 !important
|
||||
}
|
||||
@ -1,15 +1,270 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Component, OnInit, Input, Output, Inject } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
|
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
|
||||
import { NotifierService } from 'angular-notifier';
|
||||
import { PdTrigerService } from './../../../../../pd-service/pd-triger.service';
|
||||
import { parse } from 'url';
|
||||
@Component({
|
||||
selector: 'app-neighbour-hood',
|
||||
templateUrl: './neighbour-hood.component.html',
|
||||
styleUrls: ['./neighbour-hood.component.scss']
|
||||
})
|
||||
export class NeighbourHoodComponent implements OnInit {
|
||||
pageTitle: string ="Neighbourhood / Reference Check";
|
||||
public _neighbourhoodForm: FormGroup;
|
||||
pdid : string;
|
||||
form_id:number;
|
||||
private notifier: NotifierService;
|
||||
check_type:any=[{'id':0,'type_name':'Neighbourhood'},{'id':1,'type_name':'Reference Check'}]
|
||||
default_reference_details: any= {'reference_name':'','mobile':'','landline':'','location':'','relationship_with':'','year_relation_applicant':'','months_relation_applicant':'','business_volume_amount':'','business_volume_unit':''};
|
||||
default_neighbourhood_details: any= {'neighbourhood_name':'','do_know':'','how_long_do_know':'','is_applicant_owner':''};
|
||||
|
||||
constructor() { }
|
||||
busineesRelationshipList:any=[];
|
||||
volumeunitList:any=[];
|
||||
errorMessage:any;
|
||||
constructor(notifier: NotifierService, private _pd: PdTrigerService ,private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: any,) {
|
||||
this.pdid = this.data.pdmaster_details.pd_id;
|
||||
this.notifier = notifier;
|
||||
this.form_id = 19;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initFormDetails();
|
||||
|
||||
// call neghbourhhod / reference check changes
|
||||
this._neighbourhoodForm.controls['check_type'].valueChanges.subscribe(value => {
|
||||
const referencecheckControl = <FormArray>this._neighbourhoodForm.controls['referencecheck_list'];
|
||||
const neighbourhoodControl = <FormArray>this._neighbourhoodForm.controls['neighbourhood_list'];
|
||||
if(value==0){
|
||||
referencecheckControl.controls = [];
|
||||
referencecheckControl.setValue([]);
|
||||
if(neighbourhoodControl.value.length==0){
|
||||
neighbourhoodControl.push(this.createNeighbourhood(this.default_neighbourhood_details));
|
||||
}
|
||||
}
|
||||
else {
|
||||
neighbourhoodControl.controls = [];
|
||||
neighbourhoodControl.setValue([]);
|
||||
if(referencecheckControl.value.length==0){
|
||||
referencecheckControl.push(this.createReerenceCheck(this.default_reference_details));
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// init form details
|
||||
initFormDetails() {
|
||||
this._neighbourhoodForm = this._fb.group({
|
||||
pdid:this.pdid,
|
||||
formid:this.form_id,
|
||||
check_type:0,
|
||||
neighbourhood_list: this._fb.array([]),
|
||||
referencecheck_list: this._fb.array([]),
|
||||
neighbour_reference_remark:''
|
||||
});
|
||||
// load form data
|
||||
this.loadFormData();
|
||||
this.getMasterDetails('RELATIONWITHBUSINESS',1);
|
||||
this.getMasterDetails('FREQUENCY',2);
|
||||
|
||||
}
|
||||
|
||||
// load form data
|
||||
loadFormData(){
|
||||
let params: any = {};
|
||||
params.pd_id = this.pdid;
|
||||
params.pd_form_id = '19';
|
||||
let referencecheckControl = <FormArray>this._neighbourhoodForm.controls['referencecheck_list'];
|
||||
referencecheckControl.controls = [];
|
||||
const neighbourhoodControl = <FormArray>this._neighbourhoodForm.controls['neighbourhood_list'];
|
||||
neighbourhoodControl.controls=[];
|
||||
this._pd.retriveForm(params).subscribe(data => {
|
||||
if(data.dataStatus) {
|
||||
let exist_ref_details = data.records.referencecheck_list ? Object.keys(data.records.referencecheck_list).map((item)=>data.records.referencecheck_list[item]) : [];
|
||||
let exist_neighbourhood_details = data.records.neighbourhood_list ? Object.keys(data.records.neighbourhood_list).map((item)=>data.records.neighbourhood_list[item]) : [];
|
||||
if(exist_neighbourhood_details.length>0 && data.records.check_type==0){
|
||||
exist_neighbourhood_details.forEach(element => {
|
||||
neighbourhoodControl.push(this.createNeighbourhood(element));
|
||||
});
|
||||
}
|
||||
else if(exist_ref_details.length>0 && data.records.check_type==1){
|
||||
exist_ref_details.forEach(element => {
|
||||
referencecheckControl.push(this.createReerenceCheck(element));
|
||||
});
|
||||
}
|
||||
|
||||
this._neighbourhoodForm.controls['neighbour_reference_remark'].setValue(data.records.neighbour_reference_remark ? data.records.neighbour_reference_remark : '');
|
||||
this._neighbourhoodForm.controls['check_type'].setValue(data.records.check_type==1 ? 1 : data.records.check_type==0 ? 0 : '');
|
||||
}
|
||||
|
||||
else {
|
||||
neighbourhoodControl.push(this.createNeighbourhood(this.default_neighbourhood_details));
|
||||
|
||||
}
|
||||
|
||||
}, error => this.errorMessage = <any> error);
|
||||
}
|
||||
|
||||
// get all master details
|
||||
getMasterDetails(table:string,type:number){
|
||||
this._pd.getAllMasterDatas(table).subscribe(
|
||||
data => {
|
||||
if (data.status == 200) {
|
||||
if(type==1){
|
||||
this.busineesRelationshipList=data.records.filter(item => item.isactive == 1);
|
||||
}
|
||||
if(type==2){
|
||||
this.volumeunitList=data.records.filter(item => item.isactive == 1);
|
||||
}
|
||||
|
||||
}
|
||||
}, error => this.errorMessage = <any> error);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// create reference check form array
|
||||
createReerenceCheck(elementValue:any){
|
||||
return this._fb.group({
|
||||
reference_name: [elementValue.reference_name, Validators.required],
|
||||
mobile: [elementValue.mobile,Validators.compose([Validators.required,Validators.minLength(10),Validators.maxLength(10)])],
|
||||
landline: [elementValue.landline,Validators.compose([Validators.minLength(6),Validators.maxLength(8)])],
|
||||
location:[elementValue.location,Validators.required],
|
||||
relationship_with:[elementValue.relationship_with,Validators.required],
|
||||
others: [elementValue.others],
|
||||
year_relation_applicant:[elementValue.year_relation_applicant,Validators.required],
|
||||
months_relation_applicant:[elementValue.months_relation_applicant,Validators.required],
|
||||
business_volume_amount:[elementValue.business_volume_amount,Validators.required],
|
||||
business_volume_unit:[elementValue.business_volume_unit, Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
// add more referencecheck details
|
||||
|
||||
addReferencecheck(){
|
||||
const referenceControl = <FormArray>this._neighbourhoodForm.controls['referencecheck_list'];
|
||||
referenceControl.push(this.createReerenceCheck(this.default_reference_details));
|
||||
}
|
||||
|
||||
// remove referencecheck details
|
||||
removeReferencecheck(renoveIndex) {
|
||||
const remove_control = <FormArray>this._neighbourhoodForm.controls['referencecheck_list'];
|
||||
remove_control.removeAt(renoveIndex)
|
||||
}
|
||||
|
||||
// create neighbourhood form array
|
||||
createNeighbourhood(elementValue:any){
|
||||
return this._fb.group({
|
||||
neighbourhood_name: [elementValue.neighbourhood_name, Validators.required],
|
||||
do_know: [elementValue.do_know,Validators.required],
|
||||
how_long_do_know: [elementValue.how_long_do_know],
|
||||
is_applicant_owner: [elementValue.is_applicant_owner],
|
||||
});
|
||||
}
|
||||
|
||||
// add more createNeighbourhood details
|
||||
|
||||
addNeighbourhood(){
|
||||
const neighbourhoodControl = <FormArray>this._neighbourhoodForm.controls['neighbourhood_list'];
|
||||
neighbourhoodControl.push(this.createNeighbourhood(this.default_neighbourhood_details));
|
||||
}
|
||||
|
||||
// remove neighbour hood details
|
||||
removeNeighbourhood(renoveIndex) {
|
||||
const remove_control = <FormArray>this._neighbourhoodForm.controls['neighbourhood_list'];
|
||||
remove_control.removeAt(renoveIndex)
|
||||
}
|
||||
|
||||
/** On Key Press Event For Mobile Number */
|
||||
keyPress(event: any) {
|
||||
const pattern = /[0-9]/;
|
||||
|
||||
let inputChar = String.fromCharCode(event.charCode);
|
||||
if (event.keyCode != 8 && !pattern.test(inputChar)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
//save heighbourhood forms
|
||||
saveNeighbourhood(formData:any){
|
||||
let resultMessage:string='';
|
||||
if (this._neighbourhoodForm.invalid) {
|
||||
this.validateAllFormFields(this._neighbourhoodForm);
|
||||
return;
|
||||
}
|
||||
else{
|
||||
let saveRecords:any = {}
|
||||
let referencecheck_list:any=[];
|
||||
let neighbourhood_list:any=[];
|
||||
if(formData.check_type==0){
|
||||
formData.neighbourhood_list.forEach((element,key) => {
|
||||
neighbourhood_list.push({
|
||||
"neighbourhood_name":element.neighbourhood_name,
|
||||
"do_know":element.do_know,
|
||||
"how_long_do_know":element.how_long_do_know,
|
||||
"is_applicant_owner":element.is_applicant_owner,
|
||||
})
|
||||
});
|
||||
saveRecords.neighbourhood_list=neighbourhood_list;
|
||||
resultMessage='Neihbourhood Updated.!'
|
||||
}
|
||||
else{
|
||||
// this for referencecheck_list for selected
|
||||
formData.referencecheck_list.forEach((element,key) => {
|
||||
referencecheck_list.push({
|
||||
"reference_name":element.reference_name,
|
||||
"mobile":element.mobile,
|
||||
"landline":element.landline,
|
||||
"location":element.location,
|
||||
"relationship_with":element.relationship_with,
|
||||
"others":element.others,
|
||||
"year_relation_applicant":element.year_relation_applicant,
|
||||
"months_relation_applicant":element.months_relation_applicant,
|
||||
"business_volume_amount":element.business_volume_amount,
|
||||
"business_volume_unit":element.business_volume_unit,
|
||||
})
|
||||
});
|
||||
saveRecords.referencecheck_list=referencecheck_list;
|
||||
resultMessage='Reference Check Updated.!'
|
||||
}
|
||||
|
||||
saveRecords.check_type=formData.check_type;
|
||||
saveRecords.pdid=formData.pdid;
|
||||
saveRecords.formid=formData.formid;
|
||||
saveRecords.neighbour_reference_remark=formData.neighbour_reference_remark;
|
||||
this._pd.savePDFormDetailsWithID(saveRecords).subscribe(
|
||||
dataresult => {
|
||||
if (dataresult.status == 200) {
|
||||
this.notifier.notify('success', resultMessage);
|
||||
|
||||
}
|
||||
else {
|
||||
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
|
||||
// this.errorMessage = "Some Thing Wents Wrong Try Again !";
|
||||
}
|
||||
}, error => {
|
||||
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// validate all form group and form array fields
|
||||
validateAllFormFields(formGroup: any) {
|
||||
Object.keys(formGroup.controls).forEach(field => {
|
||||
const control = formGroup.get(field);
|
||||
|
||||
if (control instanceof FormControl) {
|
||||
control.markAsTouched({ onlySelf: true });
|
||||
} else if (control instanceof FormGroup) {
|
||||
this.validateAllFormFields(control);
|
||||
} else if (control instanceof FormArray) {
|
||||
this.validateAllFormFields(control);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user