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

added cute features to select.

Browse Source
This commit is contained in:
David Lebee 2021-08-26 09:48:57 -04:00
parent af5cdbb4bd
commit 3d02e19bd1
3 changed files with 114 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
import { IDataSource, ISimpleFilter, ISort } from '@poweredsoft/data';
import { Observable, Subject, Subscription } from 'rxjs';
import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
@ -27,9 +27,9 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
@Input() dataSource: IDataSource<any>;
@Input() searchPath: string;
@Input() searchPath: string | string[];
@Input() searchType: string;
@Input() sortingPath: string;
@Input() sortingPath: string | string[];
@Input() serverFiltering:boolean;
@Input() bindLabel:string;
@Input() bindValue: string;
@ -116,21 +116,52 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){
let searchfilters:ISimpleFilter[] = null;
if(searchTerm){
searchfilters = [<ISimpleFilter>{
path: this.searchPath || this.bindLabel,
type: this.searchType || 'Contains', // Default: Contains
value: searchTerm
}]
if(searchTerm)
{
if (this.searchPath) {
if (Array.isArray(this.searchPath)) {
searchfilters = this.searchPath.map(path => {
return <ISimpleFilter>{
path: path,
type: 'Contains',
value: searchTerm,
and: false
}
});
} else {
searchfilters = [<ISimpleFilter>{
path: this.searchPath,
type: 'Contains', // Default: Contains
value: searchTerm
}]
}
} else {
searchfilters = [<ISimpleFilter>{
path: this.bindLabel,
type: 'Contains', // Default: Contains
value: searchTerm
}]
}
}
let sorts: ISort[];
if (this.sortingPath && Array.isArray(this.sortingPath)) {
sorts = this.sortingPath.map(sortPath => (<ISort>{
path: sortPath,
ascending: true
}));
} else {
sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}];
}
this.dataSource.query({
page: page,
pageSize: pageSize,
filters:searchfilters,
sorts:[
{path: this.sortingPath || this.bindLabel, ascending: true}
]
})
sorts:sorts
});
}
get hasOptionTemplate() {

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

@ -1,6 +1,6 @@
import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
import { IDataSource, ISimpleFilter, ISort } from '@poweredsoft/data';
import { Observable, Subject, Subscription } from 'rxjs';
import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
@ -32,9 +32,9 @@ export class NgSelectComponent implements OnInit,OnDestroy {
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
@Input() dataSource: IDataSource<any>;
@Input() searchPath: string;
@Input() searchPath: string | string[];
@Input() searchType: string;
@Input() sortingPath: string;
@Input() sortingPath: string | string[];
@Input() serverFiltering:boolean;
@Input() bindLabel:string;
@Input() bindValue: string;
@ -125,21 +125,52 @@ export class NgSelectComponent implements OnInit,OnDestroy {
refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){
let searchfilters:ISimpleFilter[] = null;
if(searchTerm){
searchfilters = [<ISimpleFilter>{
path: this.searchPath || this.bindLabel,
type: this.searchType || 'Contains', // Default: Contains
value: searchTerm
}]
if(searchTerm)
{
if (this.searchPath) {
if (Array.isArray(this.searchPath)) {
searchfilters = this.searchPath.map(path => {
return <ISimpleFilter>{
path: path,
type: 'Contains',
value: searchTerm,
and: false
}
});
} else {
searchfilters = [<ISimpleFilter>{
path: this.searchPath,
type: 'Contains', // Default: Contains
value: searchTerm
}]
}
} else {
searchfilters = [<ISimpleFilter>{
path: this.bindLabel,
type: 'Contains', // Default: Contains
value: searchTerm
}]
}
}
let sorts: ISort[];
if (this.sortingPath && Array.isArray(this.sortingPath)) {
sorts = this.sortingPath.map(sortPath => (<ISort>{
path: sortPath,
ascending: true
}));
} else {
sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}];
}
this.dataSource.query({
page: page,
pageSize: pageSize,
filters:searchfilters,
sorts:[
{path: this.sortingPath || this.bindLabel, ascending: true}
]
})
sorts:sorts
});
}
get hasOptionTemplate() {

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

@ -15,6 +15,32 @@ selected: {{ myValue | json }}
</div>
</ps-ng-select>
</form>
selected: {{ myForm.value | json }}
<h2>Single Select With Form | formGroup | option template (Making sure not breaking change single override path)</h2>
<form #form [formGroup]="myForm">
<ps-ng-select [dataSource]="merchantDataSource2" sortingPath="name" searchPath="name" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
<div *psNgSelectOption="let item">
<span>Merchant:</span> {{ item.name }} - <span>Address: </span>{{ item.address }}
</div>
</ps-ng-select>
</form>
selected: {{ myForm.value | json }}
<h2>Single Select With Form | formGroup | option template (multiple search paths)</h2>
<form #form [formGroup]="myForm">
<ps-ng-select [dataSource]="merchantDataSource2" [sortingPath]="['name', 'address']" [searchPath]="['name', 'address']" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
<div *psNgSelectOption="let item">
<span>Merchant:</span> {{ item.name }} - <span>Address: </span>{{ item.address }}
</div>
</ps-ng-select>
</form>
selected: {{ myForm.value | json }}
<h2>Single Select Demo | label Template</h2>