Open-Harbor/ngx-data-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed that when you empty the search it gets back the records.

Browse Source
This commit is contained in:
David Lebee 2021-08-26 10:23:36 -04:00
parent 3d02e19bd1
commit 4ccba42b18
3 changed files with 75 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
View File

@ -15,10 +15,10 @@ import { SelectFooterTemplateDirective } from '../directives/select-footer-templ
provide: NG_VALUE_ACCESSOR, provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MultiSelectComponent), useExisting: forwardRef(() => MultiSelectComponent),
multi: true multi: true
}], }],
styleUrls: ['./multi-select.component.scss'] styleUrls: ['./multi-select.component.scss']
}) })
export class MultiSelectComponent implements OnInit,OnDestroy { export class MultiSelectComponent implements OnInit, OnDestroy {
@ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective; @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
@ -30,16 +30,16 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
@Input() searchPath: string | string[]; @Input() searchPath: string | string[];
@Input() searchType: string; @Input() searchType: string;
@Input() sortingPath: string | string[]; @Input() sortingPath: string | string[];
@Input() serverFiltering:boolean; @Input() serverFiltering: boolean;
@Input() bindLabel:string; @Input() bindLabel: string;
@Input() bindValue: string; @Input() bindValue: string;
@Input() placeholder: string; @Input() placeholder: string;
@Output('change') changeEvent = new EventEmitter(); @Output('change') changeEvent = new EventEmitter();
trackFn: (item: any) => any; trackFn: (item: any) => any;
data$ : Observable<any[]>; data$: Observable<any[]>;
isLoading:boolean = false; isLoading: boolean = false;
searchInput$ = new Subject<string>(); searchInput$ = new Subject<string>();
private _loadingSubscription: Subscription; private _loadingSubscription: Subscription;
@ -77,14 +77,14 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
ngOnInit(): void { ngOnInit(): void {
this.dataFetching(); this.dataFetching();
this.detectLoading(); this.detectLoading();
if(this.serverFiltering){ if (this.serverFiltering) {
this.searchOnServer(); this.searchOnServer();
}else{ } else {
this.refreshDataSource(); this.refreshDataSource();
} }
} }
dataFetching(){ dataFetching() {
this.data$ = this.dataSource.data$.pipe( this.data$ = this.dataSource.data$.pipe(
map(t => { map(t => {
if (t == null) if (t == null)
@ -94,14 +94,14 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
); );
} }
detectLoading(){ detectLoading() {
this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { this._loadingSubscription = this.dataSource.loading$.subscribe(loading => {
this.isLoading = loading; this.isLoading = loading;
this.cdr.detectChanges(); this.cdr.detectChanges();
}); });
} }
searchOnServer(){ searchOnServer() {
this.searchInput$.pipe( this.searchInput$.pipe(
distinctUntilChanged(), // emit the difference from previous input distinctUntilChanged(), // emit the difference from previous input
debounceTime(500) // this is for delaying searching speed 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); return this.selectComponent.selectedItems.map(t => t.value);
} }
refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ refreshDataSource(searchTerm: any = null, page: number = null, pageSize: number = null) {
let searchfilters:ISimpleFilter[] = null; let searchfilters: ISimpleFilter[] = [];
if(searchTerm) if (searchTerm == "")
{ searchTerm = null;
if (searchTerm) {
if (this.searchPath) { if (this.searchPath) {
if (Array.isArray(this.searchPath)) { if (Array.isArray(this.searchPath)) {
searchfilters = this.searchPath.map(path => { searchfilters = this.searchPath.map(path => {
@ -152,15 +153,14 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
ascending: true ascending: true
})); }));
} else { } else {
sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}]; sorts = [<ISort>{ path: this.sortingPath || this.bindLabel, ascending: true }];
} }
this.dataSource.query({ this.dataSource.query({
page: page, page: page,
pageSize: pageSize, pageSize: pageSize,
filters:searchfilters, filters: searchfilters,
sorts:sorts sorts: sorts
}); });
} }
@ -168,7 +168,7 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
return this.optionTemplate ? true : false; return this.optionTemplate ? true : false;
} }
get selectOptionTemplate(){ get selectOptionTemplate() {
if (this.optionTemplate) if (this.optionTemplate)
return this.optionTemplate.template; return this.optionTemplate.template;
return null; return null;
@ -178,7 +178,7 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
return this.labelTemplate ? true : false; return this.labelTemplate ? true : false;
} }
get selectLabelTemplate(){ get selectLabelTemplate() {
if (this.labelTemplate) if (this.labelTemplate)
return this.labelTemplate.template; return this.labelTemplate.template;
return null; return null;

46
projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
View File

@ -18,10 +18,10 @@ import { SelectFooterTemplateDirective } from '../directives/select-footer-templ
provide: NG_VALUE_ACCESSOR, provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgSelectComponent), useExisting: forwardRef(() => NgSelectComponent),
multi: true multi: true
}], }],
styleUrls: ['./ng-select.component.scss'] styleUrls: ['./ng-select.component.scss']
}) })
export class NgSelectComponent implements OnInit,OnDestroy { export class NgSelectComponent implements OnInit, OnDestroy {
@ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective; @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
@ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective; @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
@ -35,16 +35,16 @@ export class NgSelectComponent implements OnInit,OnDestroy {
@Input() searchPath: string | string[]; @Input() searchPath: string | string[];
@Input() searchType: string; @Input() searchType: string;
@Input() sortingPath: string | string[]; @Input() sortingPath: string | string[];
@Input() serverFiltering:boolean; @Input() serverFiltering: boolean;
@Input() bindLabel:string; @Input() bindLabel: string;
@Input() bindValue: string; @Input() bindValue: string;
@Input() placeholder: string; @Input() placeholder: string;
@Output('change') changeEvent = new EventEmitter(); @Output('change') changeEvent = new EventEmitter();
trackFn: (item: any) => any; trackFn: (item: any) => any;
data$ : Observable<any[]>; data$: Observable<any[]>;
isLoading:boolean = false; isLoading: boolean = false;
searchInput$ = new Subject<string>(); searchInput$ = new Subject<string>();
private _loadingSubscription: Subscription; private _loadingSubscription: Subscription;
@ -58,9 +58,9 @@ export class NgSelectComponent implements OnInit,OnDestroy {
this.dataFetching(); this.dataFetching();
this.detectLoading(); this.detectLoading();
if(this.serverFiltering){ if (this.serverFiltering) {
this.searchOnServer(); this.searchOnServer();
}else{ } else {
this.refreshDataSource(); this.refreshDataSource();
} }
} }
@ -93,7 +93,7 @@ export class NgSelectComponent implements OnInit,OnDestroy {
} }
dataFetching(){ dataFetching() {
this.data$ = this.dataSource.data$.pipe( this.data$ = this.dataSource.data$.pipe(
map(t => { map(t => {
if (t == null) if (t == null)
@ -103,14 +103,14 @@ export class NgSelectComponent implements OnInit,OnDestroy {
); );
} }
detectLoading(){ detectLoading() {
this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { this._loadingSubscription = this.dataSource.loading$.subscribe(loading => {
this.isLoading = loading; this.isLoading = loading;
this.cdr.detectChanges(); this.cdr.detectChanges();
}); });
} }
searchOnServer(){ searchOnServer() {
this.searchInput$.pipe( this.searchInput$.pipe(
distinctUntilChanged(), // emit the difference from previous input distinctUntilChanged(), // emit the difference from previous input
debounceTime(500) // this is for delaying searching speed debounceTime(500) // this is for delaying searching speed
@ -123,10 +123,12 @@ export class NgSelectComponent implements OnInit,OnDestroy {
return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0].value : null; return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0].value : null;
} }
refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ refreshDataSource(searchTerm: any = null, page: number = null, pageSize: number = null) {
let searchfilters:ISimpleFilter[] = null; let searchfilters: ISimpleFilter[] = [];
if(searchTerm) if (searchTerm == "")
{ searchTerm = null;
if (searchTerm) {
if (this.searchPath) { if (this.searchPath) {
if (Array.isArray(this.searchPath)) { if (Array.isArray(this.searchPath)) {
searchfilters = this.searchPath.map(path => { searchfilters = this.searchPath.map(path => {
@ -161,15 +163,15 @@ export class NgSelectComponent implements OnInit,OnDestroy {
ascending: true ascending: true
})); }));
} else { } else {
sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}]; sorts = [<ISort>{ path: this.sortingPath || this.bindLabel, ascending: true }];
} }
this.dataSource.query({ this.dataSource.query({
page: page, page: page,
pageSize: pageSize, pageSize: pageSize,
filters:searchfilters, filters: searchfilters,
sorts:sorts sorts: sorts
}); });
} }
@ -177,7 +179,7 @@ export class NgSelectComponent implements OnInit,OnDestroy {
return this.optionTemplate ? true : false; return this.optionTemplate ? true : false;
} }
get selectOptionTemplate(){ get selectOptionTemplate() {
if (this.optionTemplate) if (this.optionTemplate)
return this.optionTemplate.template; return this.optionTemplate.template;
return null; return null;
@ -187,7 +189,7 @@ export class NgSelectComponent implements OnInit,OnDestroy {
return this.labelTemplate ? true : false; return this.labelTemplate ? true : false;
} }
get selectLabelTemplate(){ get selectLabelTemplate() {
if (this.labelTemplate) if (this.labelTemplate)
return this.labelTemplate.template; return this.labelTemplate.template;
return null; return null;
@ -197,8 +199,8 @@ export class NgSelectComponent implements OnInit,OnDestroy {
return this.notFoundTemplate ? true : false; return this.notFoundTemplate ? true : false;
} }
get selectNotFoundTemplate(){ get selectNotFoundTemplate() {
if(this.notFoundTemplate) if (this.notFoundTemplate)
return this.notFoundTemplate.template; return this.notFoundTemplate.template;
return null; return null;
} }

2
src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
View File

@ -75,7 +75,7 @@ selected: {{ myValue3 | json }}
selected: {{ myValue2 | json }} selected: {{ myValue2 | json }}
<h2>Multi-Select Demo</h2> <h2>Multi-Select Demo</h2>
<ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue4" > <ps-ng-multi-select [dataSource]="merchantDataSource4" sortingPath="name" [searchPath]="['name', 'address']" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue4" >
<div *psNgSelectOption="let item"> <div *psNgSelectOption="let item">
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }} <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
</div> </div>