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 @@
+
ng-multi-select works!
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;
+
+ 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 @@
+
+
+
+
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;
+
+ 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;
+
+ data$ : Observable;
+ selectedId:any;
+ isLoading:boolean = false;
+ searchInput$ = new Subject();
+
+ 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 = [{
+ 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 @@
+
+
+
+
\ 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;
+
- ngOnInit(): void {
+ constructor(private merchantService: MerchantService,
+ ) {
+ this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
}
+ ngOnInit(): void {
+
+ }
+
+
+
}