ps-ng-select works one shot

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>

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();
+  });
+});

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 {
+  }
+
+}

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 }}  

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();
+  });
+});

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
+      ]
+    })
+  }
+
+}

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 { }

projects/poweredsoft/ngx-cdk-ui/src/public-api.ts

@@ -12,3 +12,8 @@ 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';
+
+//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';

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 { }

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>

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>;  
+  
+
+  constructor(private merchantService: MerchantService,
+              ) {
+    this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
+  }
 
   ngOnInit(): void {
-  }
+    
+  }
+
+  
 
 }