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,
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;
@ -30,16 +30,16 @@ 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<any[]>;
isLoading:boolean = false;
data$: Observable<any[]>;
isLoading: boolean = false;
searchInput$ = new Subject<string>();
private _loadingSubscription: Subscription;
@ -77,14 +77,14 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
ngOnInit(): void {
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)
@ -94,14 +94,14 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
);
}
detectLoading(){
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 => {
@ -152,15 +153,14 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
ascending: true
}));
} else {
sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}];
sorts = [<ISort>{ path: this.sortingPath || this.bindLabel, ascending: true }];
}
this.dataSource.query({
page: page,
pageSize: pageSize,
filters:searchfilters,
sorts:sorts
filters: searchfilters,
sorts: sorts
});
}
@ -168,7 +168,7 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
return this.optionTemplate ? true : false;
}
get selectOptionTemplate(){
get selectOptionTemplate() {
if (this.optionTemplate)
return this.optionTemplate.template;
return null;
@ -178,7 +178,7 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
return this.labelTemplate ? true : false;
}
get selectLabelTemplate(){
get selectLabelTemplate() {
if (this.labelTemplate)
return this.labelTemplate.template;
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,
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;
@ -35,16 +35,16 @@ export class NgSelectComponent 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<any[]>;
isLoading:boolean = false;
data$: Observable<any[]>;
isLoading: boolean = false;
searchInput$ = new Subject<string>();
private _loadingSubscription: Subscription;
@ -58,9 +58,9 @@ export class NgSelectComponent implements OnInit,OnDestroy {
this.dataFetching();
this.detectLoading();
if(this.serverFiltering){
if (this.serverFiltering) {
this.searchOnServer();
}else{
} else {
this.refreshDataSource();
}
}
@ -93,7 +93,7 @@ export class NgSelectComponent implements OnInit,OnDestroy {
}
dataFetching(){
dataFetching() {
this.data$ = this.dataSource.data$.pipe(
map(t => {
if (t == null)
@ -103,14 +103,14 @@ export class NgSelectComponent implements OnInit,OnDestroy {
);
}
detectLoading(){
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
@ -123,10 +123,12 @@ export class NgSelectComponent implements OnInit,OnDestroy {
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 => {
@ -161,15 +163,15 @@ export class NgSelectComponent implements OnInit,OnDestroy {
ascending: true
}));
} else {
sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}];
sorts = [<ISort>{ path: this.sortingPath || this.bindLabel, ascending: true }];
}
this.dataSource.query({
page: page,
pageSize: pageSize,
filters:searchfilters,
sorts:sorts
filters: searchfilters,
sorts: sorts
});
}
@ -177,7 +179,7 @@ export class NgSelectComponent implements OnInit,OnDestroy {
return this.optionTemplate ? true : false;
}
get selectOptionTemplate(){
get selectOptionTemplate() {
if (this.optionTemplate)
return this.optionTemplate.template;
return null;
@ -187,7 +189,7 @@ export class NgSelectComponent implements OnInit,OnDestroy {
return this.labelTemplate ? true : false;
}
get selectLabelTemplate(){
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;
}

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 }}
<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">
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
</div>