multi-select basic

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

@@ -1 +1,21 @@
-<p>ng-multi-select works!</p>
+<p>Select multiple elements</p>
+
+<ng-select
+    [items]="data$ | async"
+    [multiple]="true"
+    [closeOnSelect]="false"
+    [searchable]="true"
+    [bindLabel]="bindLabel"
+    [typeahead] = "searchInput$" 
+    placeholder="Select people"
+    [(ngModel)]="selectedId">
+</ng-select>
+
+<div class="mt-3">
+    Selected value: <br/>
+    <ul>
+        <li *ngFor="let item of selectedId">{{item.name}}</li>
+    </ul>
+    <button (click)="clearModel()" class="btn btn-secondary btn-sm">Clear model</button>
+    <button (click)="changeModel()" class="btn btn-secondary btn-sm">Change model</button>
+</div>

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<any>;
+  @Input() searchPath: string;
+  @Input() searchType: string = "Contains";
+  @Input() sortingPath: string;
+  @Input() disableServer:boolean = false;
+  @Input() bindLabel:string;
 
-  ngOnInit(): void {
+  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() {
+    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 = [<ISimpleFilter>{
+        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' }];
+}
 }

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
   }

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

@@ -1 +1,6 @@
+<h2>Single Select Demo</h2>
 <ps-ng-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-select>
+
+
+<h2>Multi-Select Demo</h2>
+<ps-ng-multi-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-multi-select>