From 4ccba42b181f7f0f016984da0b92b6af91d971f5 Mon Sep 17 00:00:00 2001 From: David Lebee Date: Thu, 26 Aug 2021 10:23:36 -0400 Subject: [PATCH] fixed that when you empty the search it gets back the records. --- .../multi-select/multi-select.component.ts | 70 ++++++++--------- .../ng-select/ng-select.component.ts | 76 ++++++++++--------- .../ng-select-demo.component.html | 2 +- 3 files changed, 75 insertions(+), 73 deletions(-) diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts index 96adefb..2e544f6 100644 --- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts @@ -15,12 +15,12 @@ import { SelectFooterTemplateDirective } from '../directives/select-footer-templ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true -}], + }], styleUrls: ['./multi-select.component.scss'] }) -export class MultiSelectComponent implements OnInit,OnDestroy { +export class MultiSelectComponent implements OnInit, OnDestroy { + - @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective; @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective; @ContentChild(SelectFooterTemplateDirective) footerTemplate: SelectFooterTemplateDirective; @@ -30,29 +30,29 @@ export class MultiSelectComponent implements OnInit,OnDestroy { @Input() searchPath: string | string[]; @Input() searchType: string; @Input() sortingPath: string | string[]; - @Input() serverFiltering:boolean; - @Input() bindLabel:string; + @Input() serverFiltering: boolean; + @Input() bindLabel: string; @Input() bindValue: string; @Input() placeholder: string; @Output('change') changeEvent = new EventEmitter(); trackFn: (item: any) => any; - data$ : Observable; - isLoading:boolean = false; + data$: Observable; + isLoading: boolean = false; searchInput$ = new Subject(); - private _loadingSubscription: Subscription; + private _loadingSubscription: Subscription; - constructor(private cdr: ChangeDetectorRef) { + constructor(private cdr: ChangeDetectorRef) { this.trackFn = this.trackBy.bind(this); - + } trackBy(item: any) { return this.dataSource.resolveIdField(item); } - + valueChanged(event) { this.changeEvent.emit(event); } @@ -75,33 +75,33 @@ export class MultiSelectComponent implements OnInit,OnDestroy { } ngOnInit(): void { - this.dataFetching(); + this.dataFetching(); this.detectLoading(); - if(this.serverFiltering){ + if (this.serverFiltering) { this.searchOnServer(); - }else{ + } else { this.refreshDataSource(); } } - dataFetching(){ + dataFetching() { this.data$ = this.dataSource.data$.pipe( map(t => { - if (t == null) + if (t == null) return []; return t.data; }) ); } - detectLoading(){ - this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { + detectLoading() { + this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { this.isLoading = loading; this.cdr.detectChanges(); }); } - searchOnServer(){ + searchOnServer() { this.searchInput$.pipe( distinctUntilChanged(), // emit the difference from previous input debounceTime(500) // this is for delaying searching speed @@ -114,10 +114,11 @@ export class MultiSelectComponent implements OnInit,OnDestroy { return this.selectComponent.selectedItems.map(t => t.value); } - refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ - let searchfilters:ISimpleFilter[] = null; - if(searchTerm) - { + refreshDataSource(searchTerm: any = null, page: number = null, pageSize: number = null) { + let searchfilters: ISimpleFilter[] = []; + if (searchTerm == "") + searchTerm = null; + if (searchTerm) { if (this.searchPath) { if (Array.isArray(this.searchPath)) { searchfilters = this.searchPath.map(path => { @@ -130,19 +131,19 @@ export class MultiSelectComponent implements OnInit,OnDestroy { }); } else { searchfilters = [{ - path: this.searchPath, + path: this.searchPath, type: 'Contains', // Default: Contains value: searchTerm }] } } else { searchfilters = [{ - path: this.bindLabel, + path: this.bindLabel, type: 'Contains', // Default: Contains value: searchTerm }] } - + } let sorts: ISort[]; @@ -152,24 +153,23 @@ export class MultiSelectComponent implements OnInit,OnDestroy { ascending: true })); } else { - sorts = [{path: this.sortingPath || this.bindLabel, ascending: true}]; + sorts = [{ path: this.sortingPath || this.bindLabel, ascending: true }]; } - this.dataSource.query({ page: page, pageSize: pageSize, - filters:searchfilters, - sorts:sorts + filters: searchfilters, + sorts: sorts }); } - get hasOptionTemplate() { + get hasOptionTemplate() { return this.optionTemplate ? true : false; } - get selectOptionTemplate(){ - if (this.optionTemplate) + get selectOptionTemplate() { + if (this.optionTemplate) return this.optionTemplate.template; return null; } @@ -178,8 +178,8 @@ export class MultiSelectComponent implements OnInit,OnDestroy { return this.labelTemplate ? true : false; } - get selectLabelTemplate(){ - if (this.labelTemplate) + get selectLabelTemplate() { + if (this.labelTemplate) return this.labelTemplate.template; return null; } diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts index bcc8ae2..06f537b 100644 --- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts @@ -18,10 +18,10 @@ import { SelectFooterTemplateDirective } from '../directives/select-footer-templ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgSelectComponent), multi: true -}], + }], styleUrls: ['./ng-select.component.scss'] }) -export class NgSelectComponent implements OnInit,OnDestroy { +export class NgSelectComponent implements OnInit, OnDestroy { @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective; @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective; @@ -29,43 +29,43 @@ export class NgSelectComponent implements OnInit,OnDestroy { @ContentChild(SelectFooterTemplateDirective) footerTemplate: SelectFooterTemplateDirective; - + @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent; @Input() dataSource: IDataSource; @Input() searchPath: string | string[]; @Input() searchType: string; @Input() sortingPath: string | string[]; - @Input() serverFiltering:boolean; - @Input() bindLabel:string; + @Input() serverFiltering: boolean; + @Input() bindLabel: string; @Input() bindValue: string; @Input() placeholder: string; @Output('change') changeEvent = new EventEmitter(); trackFn: (item: any) => any; - data$ : Observable; - isLoading:boolean = false; + data$: Observable; + isLoading: boolean = false; searchInput$ = new Subject(); - private _loadingSubscription: Subscription; + private _loadingSubscription: Subscription; - constructor(private cdr: ChangeDetectorRef) { + constructor(private cdr: ChangeDetectorRef) { this.trackFn = this.trackBy.bind(this); - + } ngOnInit(): void { - this.dataFetching(); + this.dataFetching(); this.detectLoading(); - if(this.serverFiltering){ + if (this.serverFiltering) { this.searchOnServer(); - }else{ + } else { this.refreshDataSource(); } } - + valueChanged(event) { this.changeEvent.emit(event); } @@ -93,24 +93,24 @@ export class NgSelectComponent implements OnInit,OnDestroy { } - dataFetching(){ + dataFetching() { this.data$ = this.dataSource.data$.pipe( map(t => { - if (t == null) + if (t == null) return []; return t.data; }) ); } - detectLoading(){ - this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { + detectLoading() { + this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { this.isLoading = loading; this.cdr.detectChanges(); }); } - searchOnServer(){ + searchOnServer() { this.searchInput$.pipe( distinctUntilChanged(), // emit the difference from previous input debounceTime(500) // this is for delaying searching speed @@ -119,14 +119,16 @@ export class NgSelectComponent implements OnInit,OnDestroy { this.refreshDataSource(); //send the query to server to sorting & filtering by default } - get selectedModel() { + get selectedModel() { return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0].value : null; } - refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ - let searchfilters:ISimpleFilter[] = null; - if(searchTerm) - { + refreshDataSource(searchTerm: any = null, page: number = null, pageSize: number = null) { + let searchfilters: ISimpleFilter[] = []; + if (searchTerm == "") + searchTerm = null; + + if (searchTerm) { if (this.searchPath) { if (Array.isArray(this.searchPath)) { searchfilters = this.searchPath.map(path => { @@ -139,19 +141,19 @@ export class NgSelectComponent implements OnInit,OnDestroy { }); } else { searchfilters = [{ - path: this.searchPath, + path: this.searchPath, type: 'Contains', // Default: Contains value: searchTerm }] } } else { searchfilters = [{ - path: this.bindLabel, + path: this.bindLabel, type: 'Contains', // Default: Contains value: searchTerm }] } - + } let sorts: ISort[]; @@ -161,24 +163,24 @@ export class NgSelectComponent implements OnInit,OnDestroy { ascending: true })); } else { - sorts = [{path: this.sortingPath || this.bindLabel, ascending: true}]; + sorts = [{ path: this.sortingPath || this.bindLabel, ascending: true }]; } this.dataSource.query({ page: page, pageSize: pageSize, - filters:searchfilters, - sorts:sorts + filters: searchfilters, + sorts: sorts }); } - get hasOptionTemplate() { + get hasOptionTemplate() { return this.optionTemplate ? true : false; } - get selectOptionTemplate(){ - if (this.optionTemplate) + get selectOptionTemplate() { + if (this.optionTemplate) return this.optionTemplate.template; return null; } @@ -187,8 +189,8 @@ export class NgSelectComponent implements OnInit,OnDestroy { return this.labelTemplate ? true : false; } - get selectLabelTemplate(){ - if (this.labelTemplate) + get selectLabelTemplate() { + if (this.labelTemplate) return this.labelTemplate.template; return null; } @@ -197,8 +199,8 @@ export class NgSelectComponent implements OnInit,OnDestroy { return this.notFoundTemplate ? true : false; } - get selectNotFoundTemplate(){ - if(this.notFoundTemplate) + get selectNotFoundTemplate() { + if (this.notFoundTemplate) return this.notFoundTemplate.template; return null; } diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html index 3374845..5b9a712 100644 --- a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html +++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html @@ -75,7 +75,7 @@ selected: {{ myValue3 | json }} selected: {{ myValue2 | json }}

Multi-Select Demo

- +
Name: {{ item.name }} - Address: {{item.address }}