diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html
index 5955490..44df12c 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html
@@ -1 +1,21 @@
-
ng-multi-select works!
+Select multiple elements
+
+
+
+
+
+ Selected value:
+
+
+
+
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts
index abf5717..f56cf51 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts
@@ -1,15 +1,97 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Observable, Subscription, Subject } from 'rxjs';
+import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
+import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
@Component({
selector: 'ps-ng-multi-select',
templateUrl: './ng-multi-select.component.html',
styleUrls: ['./ng-multi-select.component.scss']
})
-export class NgMultiSelectComponent implements OnInit {
+export class NgMultiSelectComponent implements OnInit, OnDestroy {
- constructor() { }
+ @Input() dataSource: IDataSource;
+ @Input() searchPath: string;
+ @Input() searchType: string = "Contains";
+ @Input() sortingPath: string;
+ @Input() disableServer:boolean = false;
+ @Input() bindLabel:string;
- ngOnInit(): void {
+ data$ : Observable;
+ selectedId:any[];
+ isLoading:boolean = false;
+ searchInput$ = new Subject();
+ private _dataSubscription: Subscription;
+
+ constructor(private cdr: ChangeDetectorRef) {
}
+ ngOnDestroy(): void {
+ this._dataSubscription.unsubscribe();
+ }
+
+ ngOnInit() {
+ this.dataFetching();
+ this.detectLoading();
+ if(!this.disableServer){
+ this.searchOnServer();
+ }else{
+ this.refreshDataSource();
+ }
+
+ }
+
+ dataFetching(){
+ this.data$ = this.dataSource.data$.pipe(
+ map(t => {
+ if (t == null)
+ return [];
+ return t.data;
+ })
+ );
+ this._dataSubscription = this.dataSource.data$.subscribe();
+ }
+
+ detectLoading(){
+ this.dataSource.loading$.subscribe(loading => {
+ this.isLoading = loading;
+ this.cdr.detectChanges();
+ });
+ }
+
+ searchOnServer(){
+ this.searchInput$.pipe(
+ distinctUntilChanged(), // emit the difference from previous input
+ debounceTime(500) // this is for delaying searching speed
+ ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 50)); // page: 1, pageSize: 100
+
+ this.refreshDataSource(); //send the query to server to sorting & filtering by default
+ }
+
+ refreshDataSource(searchTerm:any = null, page:number=null, pageSize:number=null){
+ let searchfilters:ISimpleFilter[] = null;
+ if(searchTerm){
+ searchfilters = [{
+ path: this.searchPath,
+ type: this.searchType, // Default: Contains
+ value: searchTerm
+ }]
+ }
+ this.dataSource.query({
+ page: page,
+ pageSize: pageSize,
+ filters:searchfilters,
+ sorts:[
+ {path: this.sortingPath, ascending: true}
+ ]
+ })
+ }
+
+ clearModel() {
+ this.selectedId = [];
+}
+
+changeModel() {
+ this.selectedId = [{ name: 'New person' }];
+}
}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts
index 46de87b..7bce209 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts
@@ -64,7 +64,7 @@ export class NgSelectComponent implements OnInit, OnDestroy {
this.searchInput$.pipe(
distinctUntilChanged(), // emit the difference from previous input
debounceTime(500) // this is for delaying searching speed
- ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 50)); // page: 1, pageSize: 50
+ ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 100)); // page: 1, pageSize: 50
this.refreshDataSource(); //send the query to server to sorting & filtering by default
}
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 f49b018..bd5c98c 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
@@ -1 +1,6 @@
-
\ No newline at end of file
+Single Select Demo
+
+
+
+Multi-Select Demo
+
\ No newline at end of file