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

state,city and pincode searchable dropdown

Browse Source
This commit is contained in:
sriram-at-840620226347 2019-10-22 19:21:32 +05:30
parent 2fcabfb996
commit 727843ac4e
11 changed files with 600 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-master/edit-pd-master.component.ts
View File

@ -707,7 +707,11 @@ if(!option){
"other_pincode":filteredAddressesdata[0].other_pincode,
"remarks": my_array.remarks,
}
// console.log('my console',my_array.addresses);
delete my_array.addresses[0].stateSearch;
delete my_array.addresses[0].citySearch;
delete my_array.addresses[0].pinSearch;
// console.log(my_array.addresses,typeof(my_array));
this.disableAfterSubmit = true;
console.log('this.masterRandomString',this.masterRandomString);
this._pd.editPdMasterDetails(lenderMasterArray, updateStatus,this.masterRandomString).subscribe(result => {

36
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
View File

@ -50,7 +50,11 @@
<mat-form-field style="width: 32%">
<mat-select placeholder="State" formControlName="state"
(selectionChange)="getCityAndPincodeDetails($event.value,i,1)">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(init_addr,i,'state')"
[placeholderLabel]="'Search State...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let SL of stateData"
[value]="SL.state_id">{{SL.name}}</mat-option>
</mat-select>
@ -58,7 +62,11 @@
<mat-form-field style="width: 32%">
<mat-select placeholder="City" formControlName="city">
<mat-option> Select </mat-option>
<mat-option>
<ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(init_addr,i,'city','1')"
[placeholderLabel]="'Search City...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let CL of cityData"
[value]="CL.city_id">{{CL.city_name}}</mat-option>
</mat-select>
@ -66,7 +74,11 @@
<mat-form-field style="width: 24%">
<mat-select placeholder="Pincode" formControlName="pincode" (selectionChange)="setOthers($event.value,i,1)">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(init_addr,i,'pin','1')"
[placeholderLabel]="'Search Pincode...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let PL of pincodeData"
[value]="PL.pincode_id">{{PL.pincode}}</mat-option>
</mat-select>
@ -128,7 +140,11 @@
<mat-select placeholder="State"
formControlName="alternative_state"
(selectionChange)="getCityAndPincodeDetails($event.value,a,2)">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(alter_addr,i,'state')"
[placeholderLabel]="'Search State...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let SL of stateData"
[value]="SL.state_id">{{SL.name}}</mat-option>
</mat-select>
@ -137,7 +153,11 @@
<mat-form-field style="width: 32%">
<mat-select placeholder="City"
formControlName="alternative_city">
<mat-option> Select </mat-option>
<mat-option>
<ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(alter_addr,i,'city','2')"
[placeholderLabel]="'Search City...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let CL of alertnativeCityData"
[value]="CL.city_id">{{CL.city_name}}
</mat-option>
@ -147,7 +167,11 @@
<mat-form-field style="width: 24%">
<mat-select placeholder="Pincode"
formControlName="alternative_pincode" (selectionChange)="setOthers($event.value,a,2)">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(alter_addr,i,'pin','2')"
[placeholderLabel]="'Search Pincode...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option
*ngFor="let PL of alertnativePincodeData"
[value]="PL.pincode_id">{{PL.pincode}}

149
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
View File

@ -14,6 +14,8 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import { TitleCasePipe } from '@angular/common';
import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'app-address',
@ -63,6 +65,12 @@ export class AddressComponent implements OnInit {
public addressForm: FormGroup;
lender_short_name: any;
image_doc_params: { pdid: number; form_id: number; company_id: string; };
/**Declaration of search dropdown */
protected _onDestroy = new Subject<void>();
stateDataList: any = [];
cityDataList: any = [];
pincodeDataList: any = [];
/**Constructor of the class */
constructor(private el: ElementRef, notifier: NotifierService,
@ -229,6 +237,9 @@ export class AddressComponent implements OnInit {
if (AddressDetails != null) {
return this.fb.group({
address: [this.transformName(AddressDetails.address), Validators.compose([Validators.required])],
stateSearch: [''],
citySearch: [''],
pinSearch: [''],
state: [AddressDetails.state],
city: [AddressDetails.city],
pincode: [AddressDetails.pincode],/** ,Validators.compose([Validators.minLength(6),Validators.maxLength(6)]) */
@ -241,6 +252,9 @@ export class AddressComponent implements OnInit {
state: [''],
city: [''],
pincode: [''],
stateSearch: [''],
citySearch: [''],
pinSearch: [''],
pincode_others: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(6)])],
});
}
@ -254,6 +268,8 @@ export class AddressComponent implements OnInit {
alternative_state: [AddressDetails.alternative_state],
alternative_city: [AddressDetails.alternative_city],
alternative_pincode: [AddressDetails.alternative_pincode],
stateSearch:[''],
citySearch:[''],
alternative_pincode_others: [AddressDetails.alternative_pincode_others, Validators.compose([Validators.minLength(6), Validators.maxLength(6)])],
reason_for_alternative_address: [AddressDetails.reason_for_alternative_address, Validators.compose([Validators.required])],
});
@ -265,6 +281,9 @@ export class AddressComponent implements OnInit {
alternative_state: [''],
alternative_city: [''],
alternative_pincode: [''],
stateSearch:[''],
citySearch:[''],
pinSearch:[''],
alternative_pincode_others:['', Validators.compose([Validators.minLength(6), Validators.maxLength(6)])],
reason_for_alternative_address: ['', Validators.compose([Validators.required])],
});
@ -302,6 +321,7 @@ export class AddressComponent implements OnInit {
}
else if (type == 6 && val.isactive == 1) {
this.stateData.push(val);
this.stateDataList = this.stateData;
}
})
});
@ -317,9 +337,13 @@ export class AddressComponent implements OnInit {
if (flag == 1) {
this.cityData = data.records.cities;
this.pincodeData = data.records.pincode;
this.cityDataList = this.cityData;
this.pincodeDataList = this.pincodeData;
} else if (flag == 2) {
this.alertnativeCityData = data.records.cities;
this.alertnativePincodeData = data.records.pincode;
this.cityDataList = this.alertnativeCityData;
this.pincodeDataList = this.alertnativePincodeData;
}
}
});
@ -829,5 +853,130 @@ export class AddressComponent implements OnInit {
// }
// });
// }
searchFun(control:any,i:number,option,flag){
console.log("control",control)
if (option == 'state') {
console.log("state")
control.controls['stateSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchState(control.controls['stateSearch'].value)
})
}
if (option == 'city') {
// this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
control.controls['citySearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.SearchCity(control.controls['citySearch'].value, i,flag);
})
}
if (option == 'pin') {
console.log("pin")
control.controls['pinSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchPin(control.controls['pinSearch'].value,i,flag)
})
}
}
searchPin(val:any,index:number, flag){
if (flag == 1) {
if(!this.pincodeData){
return
}
let searchValue=val
if(!searchValue){
this.pincodeData=this.pincodeDataList.slice()
return
}else{
searchValue=searchValue.toLowerCase()
}
this.pincodeData=this.pincodeDataList.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
} else if (flag == 2) {
if(!this.alertnativePincodeData){
return
}
let searchValue=val
if(!searchValue){
this.alertnativePincodeData=this.pincodeDataList.slice()
return
}else{
searchValue=searchValue.toLowerCase()
}
this.alertnativePincodeData=this.pincodeDataList.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
}
}
SearchCity(val: any, i: number, flag) {
if (flag == 1) {
// let cityData=
console.log(this.cityDataList)
if (!this.cityDataList) {
return
}
let searchValue = val
if (!searchValue) {
this.cityData=this.cityDataList.slice()
return
} else {
searchValue = searchValue.toLowerCase()
}
this.cityData=
this.cityDataList.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
console.log("City Data value",this.cityData)
// this.filteredCity.next(
// this.cityDataList[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
// )
} else if (flag == 2) {
// let cityData=
console.log(this.cityDataList)
if (!this.cityDataList) {
return
}
let searchValue = val
if (!searchValue) {
this.alertnativeCityData=this.cityDataList.slice()
return
} else {
searchValue = searchValue.toLowerCase()
}
this.alertnativeCityData=
this.cityDataList.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
console.log("City Data value",this.alertnativeCityData)
// this.filteredCity.next(
// this.cityDataList[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
// )
}
}
searchState(val: any) {
console.log("statedata")
if (!this.stateDataList) {
return
}
let searchVal = val
if (!searchVal) {
// this.filteredState.next(this.stateList.slice())
this.stateData=this.stateDataList.slice()
return
}
else {
searchVal = searchVal.toLowerCase()
}
this.stateData=this.stateDataList.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
// this.filteredState.next(
// this.stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
// )
}
}

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

@ -363,7 +363,11 @@
{{manufacturing.value.main_products}}</mat-label>
<!-- <input matInput placeholder="Countries Where The Export Is Being Done" formControlName="country_name" > -->
<mat-select placeholder="Countries" formControlName="country_name">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
[placeholderLabel]="'Search Countries...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
{{CL.country_name}}
</mat-option>
@ -653,6 +657,11 @@
<!-- <input matInput placeholder="Countries Where The Export Is Being Done" formControlName="country_name" > -->
<mat-select placeholder="Countries Where The Export Is Being Done"
formControlName="country_name">
<mat-option>
<ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
[placeholderLabel]="'Search Countries...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
{{CL.country_name}}
</mat-option>
@ -944,6 +953,11 @@
<mat-label>Countries Where The Export Is Being Done for
{{wholesale.value.main_products}}</mat-label>
<mat-select placeholder="Countries" formControlName="country_name">
<mat-option>
<ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
[placeholderLabel]="'Search Countries...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
{{CL.country_name}}
</mat-option>
@ -1233,6 +1247,11 @@
<mat-label>Countries Where The Export Is Being Done for
{{serviceprovider.value.main_products}}</mat-label>
<mat-select placeholder="Countries" formControlName="country_name">
<mat-option>
<ngx-mat-select-search formControlName="countrySearch" (keyup)="searchFun(countryList,i,'country')"
[placeholderLabel]="'Search Countries...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let CL of countryDataList" [value]="CL.country_id">
{{CL.country_name}}
</mat-option>

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

@ -28,6 +28,8 @@ import { DatePipe } from '@angular/common';
/**sweet alert */
import Swal from 'sweetalert2';
import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'app-business-info',
templateUrl: './business-info.component.html',
@ -80,6 +82,11 @@ export class BusinessInfoComponent implements OnInit {
generalExistBusinessYear: Number;
generalExistBusinessMonth: Number;
/**Declaration of search dropdown */
protected _onDestroy = new Subject<void>();
countryData: any = [];
//Declaration FOr Validation
yearErrorMessage: any = [];
monthErrorMessage: any = [];
@ -96,6 +103,7 @@ export class BusinessInfoComponent implements OnInit {
temp_additiondetailofposmachine: any = [];
image_doc_params: { pdid: number; form_id: number; company_id: String; };
@ViewChild('business_activity_type') business_activity_type_scroll : ElementRef
constructor(notifier: NotifierService,
private fb: FormBuilder,
@ -1033,7 +1041,8 @@ export class BusinessInfoComponent implements OnInit {
createCountrySale() {
return this.fb.group({
country_name: ['', Validators.compose([Validators.required])],
approx_sale: ['', Validators.compose([Validators.required])]
approx_sale: ['', Validators.compose([Validators.required])],
countrySearch: ['']
});
}
// add more dtate for manufacturing
@ -1296,6 +1305,7 @@ export class BusinessInfoComponent implements OnInit {
data.records.forEach(val => {
if (val.isactive == 1) {
this.countryDataList.push(val);
this.countryData = this.countryDataList;
}
})
});
@ -1409,8 +1419,14 @@ export class BusinessInfoComponent implements OnInit {
// Out of Total Export Sales what % of Sales is done in Albania?
getPlaceHolderName(id) {
let name = this.countryDataList.filter(value => value.country_id == id);
if(name.length>0){
return 'Out of Total Export Sales what % of Sales is done in ' + name[0].country_name + ' ?';
}
else{
return
}
return 'Out of Total Export Sales what % of Sales is done in ' + name[0].country_name + ' ?';
// return name[0].country_name +'?';
}
// get work experience based on create form control
@ -2047,4 +2063,39 @@ export class BusinessInfoComponent implements OnInit {
}
});
} */
searchFun(control:any,i:number,option){
console.log("control",control)
if (option == 'country') {
console.log("country")
control.controls['countrySearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchcountry(control.controls['countrySearch'].value)
})
}
}
searchcountry(val: any) {
console.log("countryData")
if (!this.countryData) {
return
}
let searchVal = val
if (!searchVal) {
// this.filteredState.next(this.countryDataList.slice())
this.countryDataList=this.countryData.slice()
return
}
else {
searchVal = searchVal.toLowerCase()
}
this.countryDataList=this.countryData.filter(res => res.country_name.toLowerCase().indexOf(searchVal) > -1)
// this.filteredState.next(
// this.countryDataList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
// )
}
}

18
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
View File

@ -39,7 +39,11 @@
<mat-form-field style="width:45%;">
<mat-select matInput placeholder="State" formControlName="residence_state"
required (selectionChange)="getCity($event.value,ix)">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(sup,i,'state')"
[placeholderLabel]="'Search State...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option value="{{s.state_id}}" *ngFor="let s of stateData">
{{s.name}}
</mat-option>
@ -48,7 +52,11 @@
<mat-form-field style="width:45%;">
<mat-select matInput placeholder="City" formControlName="residence_city"
required>
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(sup,ix,'city')"
[placeholderLabel]="'Search City...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let c of cityData[ix]" [value]="c.city_id">
{{c.city_name}}
</mat-option>
@ -61,7 +69,11 @@
<mat-form-field style="width:45%;">
<mat-select matInput placeholder="Pin" formControlName="residence_pin"
required>
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(sup,ix,'pin')"
[placeholderLabel]="'Search Pincode...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let p of pincodeData[ix]" [value]="p.pincode_id">
{{p.pincode}}
</mat-option>

103
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts
View File

@ -11,6 +11,8 @@ import { ActivatedRoute, Router } from "@angular/router";
/** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
@ -59,6 +61,13 @@ export class FamilyDetailsComponent implements OnInit {
documentsAndFilesList : any = [];
lender_short_name: any;
image_doc_params: { pdid: string; form_id: number; company_id: string; };
/**Declaration of search dropdown */
protected _onDestroy = new Subject<void>();
stateDataList: any = [];
cityDataList: any = [];
pincodeDataList: any = [];
/** constructor Of the class */
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
@ -295,6 +304,9 @@ export class FamilyDetailsComponent implements OnInit {
residence_city: ['', Validators.compose([])],
residence_state: ['', Validators.compose([])],
residence_pin: ['', Validators.compose([])],
stateSearch: [''],
citySearch: [''],
pinSearch:[''],
residence_other_pincode: [''],
residence_No_of_years: ['', Validators.compose([])],
residence_No_of_months:[''],
@ -324,6 +336,9 @@ export class FamilyDetailsComponent implements OnInit {
residence_city: [val.residence_city, Validators.compose([])],
residence_state: [val.residence_state, Validators.compose([])],
residence_pin: [val.residence_pin, Validators.compose([])],
stateSearch: [''],
citySearch: [''],
pinSearch :[''],
residence_other_pincode: [val.residence_other_pincode],
residence_No_of_years: [val.residence_No_of_years, Validators.compose([])],
residence_No_of_months:[val.residence_No_of_months || ''],
@ -526,6 +541,7 @@ export class FamilyDetailsComponent implements OnInit {
}
else if (type == 6) {
this.stateData = data.records.filter(item => item.isactive == 1);
this.stateDataList = this.stateData;
}
else if (type == 7) {
this.titleData = data.records.filter(item => item.isactive == 1);
@ -540,6 +556,8 @@ export class FamilyDetailsComponent implements OnInit {
this.cityData[i] = data.records.cities;
this.pincodeData[i] = data.records.pincode;
this.cityDataList[i] = this.cityData[i];
this.pincodeDataList[i] = this.pincodeData[i];
}
});
@ -740,4 +758,89 @@ export class FamilyDetailsComponent implements OnInit {
// });
// }
searchFun(control:any,i:number,option){
console.log("control",control)
if (option == 'state') {
console.log("state")
control.controls['stateSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchState(control.controls['stateSearch'].value)
})
}
if (option == 'city') {
// this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
control.controls['citySearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.SearchCity(control.controls['citySearch'].value, i);
})
}
if (option == 'pin') {
console.log("pin")
control.controls['pinSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchPin(control.controls['pinSearch'].value,i)
})
}
}
searchPin(val:any,index:number){
if(!this.pincodeData[index]){
return
}
let searchValue=val
if(!searchValue){
this.pincodeData[index]=this.pincodeDataList[index].slice()
return
}else{
searchValue=searchValue.toLowerCase()
}
this.pincodeData[index]=this.pincodeDataList[index].filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
}
SearchCity(val: any, i: number) {
// let cityData=
console.log(this.cityDataList[i])
if (!this.cityDataList[i]) {
return
}
let searchValue = val
if (!searchValue) {
this.cityData[i]=this.cityDataList[i].slice()
return
} else {
searchValue = searchValue.toLowerCase()
}
this.cityData[i]=
this.cityDataList[i].filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
console.log("City Data value",this.cityData)
// this.filteredCity.next(
// this.cityDataList[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
// )
}
searchState(val: any) {
console.log("statedata")
if (!this.stateDataList) {
return
}
let searchVal = val
if (!searchVal) {
// this.filteredState.next(this.stateList.slice())
this.stateData=this.stateDataList.slice()
return
}
else {
searchVal = searchVal.toLowerCase()
}
this.stateData=this.stateDataList.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
// this.filteredState.next(
// this.stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
// )
}
}

18
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
View File

@ -259,7 +259,11 @@
</mat-form-field>
<mat-form-field style="width:46%;">
<mat-select placeholder="State" formControlName="state" (selectionChange)="getCityAndPincodeDetails($event.value)">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(loanDetailsForm,i,'state')"
[placeholderLabel]="'Search State...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let SL of m_stateList"
[value]="SL.state_id">{{SL.name}}</mat-option>
</mat-select>
@ -267,7 +271,11 @@
<mat-form-field style="width:46%;">
<mat-select placeholder="City" formControlName="city">
<mat-option> Select </mat-option>
<mat-option>
<ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(loanDetailsForm,i,'city')"
[placeholderLabel]="'Search City...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let CL of m_cityList"
[value]="CL.city_id">{{CL.city_name}}</mat-option>
</mat-select>
@ -275,7 +283,11 @@
<mat-form-field style="width:46%;">
<mat-select placeholder="Pincode" formControlName="pincode">
<mat-option>Select</mat-option>
<mat-option>
<ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(loanDetailsForm,i,'pin')"
[placeholderLabel]="'Search Pincode...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let PL of m_pincodeList"
[value]="PL.pincode_id">{{PL.pincode}}</mat-option>
</mat-select>

99
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
View File

@ -16,6 +16,8 @@ import { ActivatedRoute, Router } from '@angular/router';
/** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import { ImageCropComponent } from '../dialogue/image-crop/image-crop.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
@ -34,6 +36,12 @@ export class LoanDetailsComponent implements OnInit {
pageTitle: string = "Loan Details";
disableAfterSubmit: boolean = false;
/**Declaration of search dropdown */
protected _onDestroy = new Subject<void>();
stateData: any = [];
cityData: any = [];
pincodeData: any = [];
/**Declaration of formfields Variables */
private notifier: NotifierService;
public loanDetailsForm: FormGroup;
@ -85,6 +93,9 @@ export class LoanDetailsComponent implements OnInit {
Owner_placeholder:string;
address_placeholder: string;
image_doc_params: { pdid: number; form_id: number; company_id: string; };
/** Constructor Of the Class */
constructor(notifier: NotifierService,
private fb: FormBuilder,
@ -436,6 +447,7 @@ export class LoanDetailsComponent implements OnInit {
data => {
if (data.status == 200 && data.dataStatus == true) {
this.m_stateList = data.records;
this.stateData = this.m_stateList;
}
else{
this.notifier.notify('warning', 'STATE Master Api Did not call ! Status - '+ data.status +' datastatus - '+ data.dataStatus);
@ -477,6 +489,9 @@ export class LoanDetailsComponent implements OnInit {
state: [''],
city: [''],
pincode: [''],
stateSearch: [''],
citySearch: [''],
pinSearch: [''],
other_pincode:[''],
loandetails_remarks: [''],
});
@ -733,6 +748,8 @@ export class LoanDetailsComponent implements OnInit {
if (data.status == 200) {
this.m_cityList = data.records.cities;
this.m_pincodeList = data.records.pincode;
this.cityData = this.m_cityList;
this.pincodeData = this.m_pincodeList;
}
});
}
@ -1024,4 +1041,86 @@ export class LoanDetailsComponent implements OnInit {
}
});
}*/
searchFun(control:any,i:number,option){
console.log("control",control)
if (option == 'city') {
// this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
control.controls['citySearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.SearchCity(control.controls['citySearch'].value, i);
})
}
if (option == 'state') {
console.log("state")
control.controls['stateSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchState(control.controls['stateSearch'].value)
})
}
if (option == 'pin') {
console.log("pin")
control.controls['pinSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchPin(control.controls['pinSearch'].value,i)
})
}
}
searchPin(val:any,index:number){
if(!this.m_pincodeList){
return
}
let searchValue=val
if(!searchValue){
this.m_pincodeList=this.pincodeData.slice()
return
}else{
searchValue=searchValue.toLowerCase()
}
this.m_pincodeList=this.pincodeData.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
}
SearchCity(val: any, i: number) {
// let cityData=
console.log(this.cityData)
if (!this.cityData) {
return
}
let searchValue = val
if (!searchValue) {
this.m_cityList=this.cityData.slice()
return
} else {
searchValue = searchValue.toLowerCase()
}
this.m_cityList=
this.cityData.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
console.log("City Data value",this.m_cityList)
// this.filteredCity.next(
// this.cityData[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
// )
}
searchState(val: any) {
console.log("statedata")
if (!this.stateData) {
return
}
let searchVal = val
if (!searchVal) {
// this.filteredState.next(this.m_stateList.slice())
this.m_stateList=this.stateData.slice()
return
}
else {
searchVal = searchVal.toLowerCase()
}
this.m_stateList=this.stateData.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
// this.filteredState.next(
// this.m_stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
// )
}
}

15
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.html
View File

@ -42,6 +42,11 @@
<mat-label>State</mat-label>
<mat-select placeholder=""
formControlName="state" required>
<mat-option>
<ngx-mat-select-search formControlName="stateSearch" (keyup)="searchFun(_rentalForm,i,'state')"
[placeholderLabel]="'Search State...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let stVal of stateList" [value]="stVal.state_id">
{{stVal.name}}
</mat-option>
@ -51,6 +56,11 @@
<mat-label>City</mat-label>
<mat-select placeholder=""
formControlName="city" required>
<mat-option>
<ngx-mat-select-search formControlName="citySearch" (keyup)="searchFun(_rentalForm,i,'city')"
[placeholderLabel]="'Search City...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let ctVal of cityList" [value]="ctVal.city_id">
{{ctVal.city_name}}
</mat-option>
@ -61,6 +71,11 @@
<mat-label>Pincode</mat-label>
<mat-select placeholder=""
formControlName="pincode" required>
<mat-option>
<ngx-mat-select-search formControlName="pinSearch" (keyup)="searchFun(_rentalForm,i,'pin')"
[placeholderLabel]="'Search Pincode...'"
[noEntriesFoundLabel]="'no matching records found'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let pinVal of pincodeList" [value]="pinVal.pincode_id">
{{pinVal.pincode}}
</mat-option>

96
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-verification/manage-rental-verification/manage-rental-verification.component.ts
View File

@ -8,6 +8,8 @@ import { PdTrigerService } from './../../../../../../pd-service/pd-triger.servic
/**sweet alert */
import Swal from 'sweetalert2';
import { ImageCropComponent } from '../../dialogue/image-crop/image-crop.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'app-manage-rental-verification',
@ -69,6 +71,12 @@ export class ManageRentalVerificationComponent implements OnInit {
SwalButtonText: string;
SwalMessage: string;
image_doc_params: { pdid: string; form_id: number; company_id: string; };
/**Declaration of search dropdown */
protected _onDestroy = new Subject<void>();
stateData: any = [];
cityData: any = [];
pincodeData: any = [];
constructor(notifier: NotifierService, private _pd: PdTrigerService ,private _fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: any,private dialogRef: MatDialogRef<ManageRentalVerificationComponent>,private dialog: MatDialog) {
@ -81,6 +89,7 @@ export class ManageRentalVerificationComponent implements OnInit {
this.mergeCompanyApplicant = this.data.masterData.mergeCompanyApplicant;
this.unitTypeList = this.data.masterData.unitTypeList;
this.stateList = this.data.masterData.stateList;
this.stateData = this.stateList;
this.unitMeasurementList = this.data.masterData.unitMeasurementList;
// console.log(this.mergeCompanyApplicant);
// console.log(this.data.masterData.mergeCompanyApplicant);
@ -167,6 +176,8 @@ export class ManageRentalVerificationComponent implements OnInit {
if (data.status == 200) {
this.cityList = data.records.cities;
this.pincodeList = data.records.pincode;
this.cityData = this.cityList;
this.pincodeData = this.pincodeList;
}
});
});
@ -199,6 +210,9 @@ export class ManageRentalVerificationComponent implements OnInit {
state:['',Validators.required],
city:['',Validators.required],
pincode:['',Validators.required],
stateSearch:[''],
citySearch:[''],
pinSearch:[''],
validate_visited_address:[true],
person_met: ['',Validators.required],
property_owner: ['',Validators.required],
@ -1114,6 +1128,88 @@ retriveFile(){
const index = this.data.parentData.pdapplicants_detials.findIndex(name => name.applicant_name === 'Others');
this.data.parentData.pdapplicants_detials.splice(index, 1);
}
searchFun(control:any,i:number,option){
console.log("control",control)
if (option == 'city') {
// this.cityData[i]=this.filterCity(this.stateList,control.value.state_name)
control.controls['citySearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.SearchCity(control.controls['citySearch'].value, i);
})
}
if (option == 'state') {
console.log("state")
control.controls['stateSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchState(control.controls['stateSearch'].value)
})
}
if (option == 'pin') {
console.log("pin")
control.controls['pinSearch'].valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(()=>{
this.searchPin(control.controls['pinSearch'].value,i)
})
}
}
searchPin(val:any,index:number){
if(!this.pincodeList){
return
}
let searchValue=val
if(!searchValue){
this.pincodeList=this.pincodeData.slice()
return
}else{
searchValue=searchValue.toLowerCase()
}
this.pincodeList=this.pincodeData.filter(value=>value.pincode.toLowerCase().indexOf(searchValue) > -1)
}
SearchCity(val: any, i: number) {
// let cityData=
console.log(this.cityData)
if (!this.cityData) {
return
}
let searchValue = val
if (!searchValue) {
this.cityList=this.cityData.slice()
return
} else {
searchValue = searchValue.toLowerCase()
}
this.cityList=
this.cityData.filter(val=>val.city_name.toLowerCase().indexOf(searchValue)> -1)
console.log("City Data value",this.cityList)
// this.filteredCity.next(
// this.cityData[i].filter(value => value.city_name.toLowerCase().indexOf(searchValue) > -1)
// )
}
searchState(val: any) {
console.log("statedata")
if (!this.stateData) {
return
}
let searchVal = val
if (!searchVal) {
// this.filteredState.next(this.stateList.slice())
this.stateList=this.stateData.slice()
return
}
else {
searchVal = searchVal.toLowerCase()
}
this.stateList=this.stateData.filter(res => res.name.toLowerCase().indexOf(searchVal) > -1)
// this.filteredState.next(
// this.stateList.filter(res => res.state_name.toLowerCase().indexOf(searchVal) > -1)
// )
}
}