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

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

@ -15,12 +15,12 @@ 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;
@ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective; @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
@ContentChild(SelectFooterTemplateDirective) footerTemplate: SelectFooterTemplateDirective; @ContentChild(SelectFooterTemplateDirective) footerTemplate: SelectFooterTemplateDirective;
@ -30,29 +30,29 @@ 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;
constructor(private cdr: ChangeDetectorRef) { constructor(private cdr: ChangeDetectorRef) {
this.trackFn = this.trackBy.bind(this); this.trackFn = this.trackBy.bind(this);
} }
trackBy(item: any) { trackBy(item: any) {
return this.dataSource.resolveIdField(item); return this.dataSource.resolveIdField(item);
} }
valueChanged(event) { valueChanged(event) {
this.changeEvent.emit(event); this.changeEvent.emit(event);
} }
@ -75,33 +75,33 @@ 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)
return []; return [];
return t.data; return t.data;
}) })
); );
} }
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 => {
@ -130,19 +131,19 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
}); });
} else { } else {
searchfilters = [<ISimpleFilter>{ searchfilters = [<ISimpleFilter>{
path: this.searchPath, path: this.searchPath,
type: 'Contains', // Default: Contains type: 'Contains', // Default: Contains
value: searchTerm value: searchTerm
}] }]
} }
} else { } else {
searchfilters = [<ISimpleFilter>{ searchfilters = [<ISimpleFilter>{
path: this.bindLabel, path: this.bindLabel,
type: 'Contains', // Default: Contains type: 'Contains', // Default: Contains
value: searchTerm value: searchTerm
}] }]
} }
} }
let sorts: ISort[]; let sorts: ISort[];
@ -152,24 +153,23 @@ 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
}); });
} }
get hasOptionTemplate() { get hasOptionTemplate() {
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,8 +178,8 @@ 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;
} }

76
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;
@ -29,43 +29,43 @@ export class NgSelectComponent implements OnInit,OnDestroy {
@ContentChild(SelectFooterTemplateDirective) footerTemplate: SelectFooterTemplateDirective; @ContentChild(SelectFooterTemplateDirective) footerTemplate: SelectFooterTemplateDirective;
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent; @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
@Input() dataSource: IDataSource<any>; @Input() dataSource: IDataSource<any>;
@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;
constructor(private cdr: ChangeDetectorRef) { constructor(private cdr: ChangeDetectorRef) {
this.trackFn = this.trackBy.bind(this); this.trackFn = this.trackBy.bind(this);
} }
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();
} }
} }
valueChanged(event) { valueChanged(event) {
this.changeEvent.emit(event); this.changeEvent.emit(event);
} }
@ -93,24 +93,24 @@ 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)
return []; return [];
return t.data; return t.data;
}) })
); );
} }
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
@ -119,14 +119,16 @@ export class NgSelectComponent implements OnInit,OnDestroy {
this.refreshDataSource(); //send the query to server to sorting & filtering by default 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; 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 => {
@ -139,19 +141,19 @@ export class NgSelectComponent implements OnInit,OnDestroy {
}); });
} else { } else {
searchfilters = [<ISimpleFilter>{ searchfilters = [<ISimpleFilter>{
path: this.searchPath, path: this.searchPath,
type: 'Contains', // Default: Contains type: 'Contains', // Default: Contains
value: searchTerm value: searchTerm
}] }]
} }
} else { } else {
searchfilters = [<ISimpleFilter>{ searchfilters = [<ISimpleFilter>{
path: this.bindLabel, path: this.bindLabel,
type: 'Contains', // Default: Contains type: 'Contains', // Default: Contains
value: searchTerm value: searchTerm
}] }]
} }
} }
let sorts: ISort[]; let sorts: ISort[];
@ -161,24 +163,24 @@ 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
}); });
} }
get hasOptionTemplate() { get hasOptionTemplate() {
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,8 +189,8 @@ 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>