From 7f75f35b2a3a04d720087ab9a56bedde88ce5c69 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Tue, 30 Jun 2020 15:48:41 -0500
Subject: [PATCH] ps-ng-select works one shot

---
 .../ng-multi-select.component.html            |  1 +
 .../ng-multi-select.component.scss            |  0
 .../ng-multi-select.component.spec.ts         | 25 +++++++
 .../ng-multi-select.component.ts              | 15 ++++
 .../ng-select/ng-select.component.html        |  9 +++
 .../ng-select/ng-select.component.scss        |  0
 .../ng-select/ng-select.component.spec.ts     | 25 +++++++
 .../ng-select/ng-select.component.ts          | 74 +++++++++++++++++++
 .../lib/ps-selectors/ps-selectors.module.ts   | 19 +++++
 .../poweredsoft/ngx-cdk-ui/src/public-api.ts  |  7 +-
 .../ng-select-demo/ng-select-demo.module.ts   |  4 +-
 .../ng-select-demo.component.html             |  4 +
 .../ng-select-demo.component.ts               | 21 +++++-
 13 files changed, 199 insertions(+), 5 deletions(-)
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.scss
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.scss
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts
 create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts

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
new file mode 100644
index 0000000..5955490
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html
@@ -0,0 +1 @@
+<p>ng-multi-select works!</p>
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts
new file mode 100644
index 0000000..dd1f6e1
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgMultiSelectComponent } from './ng-multi-select.component';
+
+describe('NgMultiSelectComponent', () => {
+  let component: NgMultiSelectComponent;
+  let fixture: ComponentFixture<NgMultiSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NgMultiSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgMultiSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000..abf5717
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ps-ng-multi-select',
+  templateUrl: './ng-multi-select.component.html',
+  styleUrls: ['./ng-multi-select.component.scss']
+})
+export class NgMultiSelectComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html
new file mode 100644
index 0000000..3002f81
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html
@@ -0,0 +1,9 @@
+<ng-select [items]="data$ | async"
+           bindLabel="name"
+           bindValue="id"
+           autofocus
+           [typeahead] = "searchInput$"           
+           [(ngModel)]="selectedId">
+</ng-select>
+
+<br/>Selected: {{selectedId | json }}  
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts
new file mode 100644
index 0000000..9dc9b61
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgSelectComponent } from './ng-select.component';
+
+describe('NgSelectComponent', () => {
+  let component: NgSelectComponent;
+  let fixture: ComponentFixture<NgSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NgSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000..0940e3e
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts
@@ -0,0 +1,74 @@
+import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
+import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
+import { Observable, Subject } from 'rxjs';
+import { distinctUntilChanged, debounceTime, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ps-ng-select',
+  templateUrl: './ng-select.component.html',
+  styleUrls: ['./ng-select.component.scss']
+})
+export class NgSelectComponent implements OnInit {
+
+  @Input() dataSource: IDataSource<any>;
+
+  data$ : Observable<any[]>;
+  selectedId:any;
+  isLoading:boolean = false;
+  searchInput$ = new Subject<string>();
+
+  constructor(private cdr: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+    this.dataFetching();    
+    this.detectLoading();
+    this.searchOnServer();
+  }
+
+
+  dataFetching(){
+    this.data$ = this.dataSource.data$.pipe(
+      map(t => {
+        if (t == null)        
+          return [];
+        return t.data;
+      })
+    );
+  }
+
+  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));
+
+    this.refreshDataSource(); //send the query to server to sorting & filtering by default
+  }
+
+  refreshDataSource(searchTerm:any = null){
+    let searchfilters:ISimpleFilter[] = null;
+    if(searchTerm){
+      searchfilters = [<ISimpleFilter>{
+        path: 'name',      //Todo: add input variable for this filtering path
+        type: 'startsWith',//Todo: add input variable for this type, could be contains, startsWith, endswith, equal
+        value: searchTerm
+      }]
+    }
+    this.dataSource.query({
+      page: 1,
+      pageSize: 50,
+      filters:searchfilters,
+      sorts:[
+        {path: 'name', ascending: true} //Todo: add input variable for sorting path
+      ]
+    })
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts
new file mode 100644
index 0000000..dc35df7
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgSelectComponent } from './ng-select/ng-select.component';
+import { NgMultiSelectComponent } from './ng-multi-select/ng-multi-select.component';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+
+
+@NgModule({
+  declarations: [NgSelectComponent, NgMultiSelectComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgSelectModule,
+  ],
+  exports:[NgSelectComponent,NgMultiSelectComponent]
+})
+export class PsSelectorsModule { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index 1a748a8..d8531dd 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -11,4 +11,9 @@ export * from './lib/data-grid/directives/data-grid-header.directive';
 export * from './lib/data-grid/directives/data-grid-footer.directive';
 export * from './lib/data-grid/directives/data-grid-loader.directive';
 export * from './lib/data-grid/directives/data-grid-cell-filter.directive';
-export * from './lib/data-grid/directives/data-grid-col-sort.directive';
\ No newline at end of file
+export * from './lib/data-grid/directives/data-grid-col-sort.directive';
+
+//ng selects
+export * from './lib/ps-selectors/ps-selectors.module';
+export * from './lib/ps-selectors/ng-select/ng-select.component';
+export * from './lib/ps-selectors/ng-multi-select/ng-multi-select.component';
\ No newline at end of file
diff --git a/src/app/ng-select-demo/ng-select-demo.module.ts b/src/app/ng-select-demo/ng-select-demo.module.ts
index 5c9072b..59b05bc 100644
--- a/src/app/ng-select-demo/ng-select-demo.module.ts
+++ b/src/app/ng-select-demo/ng-select-demo.module.ts
@@ -4,6 +4,7 @@ import { NgSelectDemoComponent } from './ng-select-demo/ng-select-demo.component
 import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule } from '@angular/forms';
+import { PsSelectorsModule } from '@poweredsoft/ngx-cdk-ui';
 
 
 
@@ -13,7 +14,8 @@ import { FormsModule } from '@angular/forms';
     CommonModule,
     NgSelectModule,
     FormsModule,
-    NgSelectDemoRoutingModule
+    NgSelectDemoRoutingModule,
+    PsSelectorsModule  //our ng select module
   ]
 })
 export class NgSelectDemoModule { }
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 e69de29..7a28c9c 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
@@ -0,0 +1,4 @@
+
+
+
+<ps-ng-select [dataSource]="merchantDataSource" ></ps-ng-select>
\ No newline at end of file
diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts
index ad5b580..6e9d72e 100644
--- a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts
+++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts
@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { MerchantService } from 'src/app/data/services/merchant.service';
+
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { Observable, Subject } from 'rxjs';
+import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
 
 @Component({
   selector: 'ps-ng-select-demo',
@@ -7,9 +13,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NgSelectDemoComponent implements OnInit {
 
-  constructor() { }
+  merchantDataSource: IDataSource<IMerchant>;  
+  
 
-  ngOnInit(): void {
+  constructor(private merchantService: MerchantService,
+              ) {
+    this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
   }
 
+  ngOnInit(): void {
+    
+  }
+
+  
+
 }