ng-select basic done

projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html

@@ -1,5 +1,5 @@
 <ng-select [items]="data$ | async"
-           bindLabel="name"
+           [bindLabel]="bindLabel"
            bindValue="id"
            autofocus
            [typeahead] = "searchInput$"           

projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
-import { Observable, Subject } from 'rxjs';
+import { Observable, Subject, Subscription } from 'rxjs';
 import { distinctUntilChanged, debounceTime, map } from 'rxjs/operators';
 
 @Component({
@@ -8,21 +8,37 @@ import { distinctUntilChanged, debounceTime, map } from 'rxjs/operators';
   templateUrl: './ng-select.component.html',
   styleUrls: ['./ng-select.component.scss']
 })
-export class NgSelectComponent implements OnInit {
+export class NgSelectComponent implements OnInit, OnDestroy {
 
   @Input() dataSource: IDataSource<any>;
+  @Input() searchPath: string;
+  @Input() searchType: string = "Contains";
+  @Input() sortingPath: string;
+  @Input() disableServer:boolean = false;
+
+  @Input() bindLabel:string;
+
 
   data$ : Observable<any[]>;
   selectedId:any;
   isLoading:boolean = false;
   searchInput$ = new Subject<string>();
 
+  private _dataSubscription: Subscription;  
+
   constructor(private cdr: ChangeDetectorRef) { }
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+  }
 
   ngOnInit(): void {
     this.dataFetching();    
     this.detectLoading();
-    this.searchOnServer();
+    if(!this.disableServer){
+      this.searchOnServer();
+    }else{
+      this.refreshDataSource();
+    }
   }
 
 
@@ -34,6 +50,7 @@ export class NgSelectComponent implements OnInit {
         return t.data;
       })
     );
+    this._dataSubscription = this.dataSource.data$.subscribe();
   }
 
   detectLoading(){
@@ -47,26 +64,26 @@ export class NgSelectComponent implements OnInit {
     this.searchInput$.pipe(
       distinctUntilChanged(), // emit the difference from previous input
       debounceTime(500)  // this is for delaying searching speed
-    ).subscribe(searchTerm => this.refreshDataSource(searchTerm));
+    ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 50)); // page: 1, pageSize: 50
 
     this.refreshDataSource(); //send the query to server to sorting & filtering by default
   }
 
-  refreshDataSource(searchTerm:any = null){
+  refreshDataSource(searchTerm:any = null, page:number=null, pageSize:number=null){
     let searchfilters:ISimpleFilter[] = null;
     if(searchTerm){
       searchfilters = [<ISimpleFilter>{
-        path: 'name',      //Todo: add input variable for this filtering path
+        path: this.searchPath,      
-        type: 'startsWith',//Todo: add input variable for this type, could be contains, startsWith, endswith, equal
+        type: this.searchType, // Default: Contains
         value: searchTerm
       }]
     }
     this.dataSource.query({
-      page: 1,
+      page: page,
-      pageSize: 50,
+      pageSize: pageSize,
       filters:searchfilters,
       sorts:[
-        {path: 'name', ascending: true} //Todo: add input variable for sorting path
+        {path: this.sortingPath, ascending: true} 
       ]
     })
   }

src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html

@@ -1,4 +1 @@
-
+<ps-ng-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-select>
-
-
-<ps-ng-select [dataSource]="merchantDataSource" ></ps-ng-select>