demo checking

projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.ts

@@ -111,9 +111,7 @@ export class MultiSelectComponent implements OnInit {
   }
 
   get selectedModel() {
-
     return this.selectComponent.selectedItems.map(t => t.value);
-    //return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0].value : null;
   }
 
   refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){

projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts

@@ -37,9 +37,9 @@ export class FormGroupCommandModalComponent implements OnInit {
 
   ngOnInit(): void {
     this.errorMessage = null;
-    // this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
+    this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
       
-    // });
+    });
    
     this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {      
       let validationSummary = '';

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

@@ -1,21 +0,0 @@
-<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.spec.ts

@@ -1,25 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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, 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() {
-    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.spec.ts

@@ -1,25 +0,0 @@
-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

@@ -1,143 +0,0 @@
-import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy, ContentChild, QueryList, ContentChildren, ViewChild, forwardRef, EventEmitter, Output } from '@angular/core';
-import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
-import { Observable, Subject, Subscription } from 'rxjs';
-import { distinctUntilChanged, debounceTime, map } from 'rxjs/operators';
-import { SelectOptionTemplateDirective } from '../select-option-template.directive';
-import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-
-@Component({
-  selector: 'ps-ng-select',
-  templateUrl: './ng-select.component.html',
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => NgSelectComponent),
-    multi: true
-}],
-  styleUrls: ['./ng-select.component.scss']
-})
-export class NgSelectComponent implements OnInit, OnDestroy, ControlValueAccessor  {
-
-  @ContentChild(SelectOptionTemplateDirective) selectTemplate: SelectOptionTemplateDirective;
-  @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
-  @Input() dataSource: IDataSource<any>;
-  @Input() searchPath: string;
-  @Input() searchType: string;
-  @Input() sortingPath: string;
-  @Input() serverFiltering:boolean;
-  @Input() bindLabel:string;
-  @Input() bindValue: string;
-
-  @Output('change') changeEvent = new EventEmitter();
-
-  trackFn: (item: any) => any;
-  data$ : Observable<any[]>;
-  isLoading:boolean = false;
-  searchInput$ = new Subject<string>();
-
-  private _loadingSubscription: Subscription;  
-
-  constructor(private cdr: ChangeDetectorRef) {    
-    this.trackFn = this.trackBy.bind(this);
-  
-  }
- 
-  valueChanged(event) {
-    this.changeEvent.emit(event);
-  }
-
-  writeValue(obj: any): void {
-    this.selectComponent.writeValue(obj);
-  }
-  registerOnChange(fn: any): void {
-    this.selectComponent.registerOnChange(fn);
-  }
-  registerOnTouched(fn: any): void {
-    this.selectComponent.registerOnTouched(fn);
-  }
-  setDisabledState?(isDisabled: boolean): void {
-    if (this.selectComponent.setDisabledState)
-      this.selectComponent.setDisabledState(isDisabled);
-  }
-
-  trackBy(item: any) {
-    return this.dataSource.resolveIdField(item);
-  }
-
-  ngOnDestroy(): void {
-    this._loadingSubscription.unsubscribe();
-  }
-
-  ngOnInit(): void {
-    this.dataFetching();    
-    this.detectLoading();
-
-    console.log(this.serverFiltering);
-
-    if(this.serverFiltering){
-      this.searchOnServer();
-    }else{
-      this.refreshDataSource();
-    }
-  }
-
-  dataFetching(){
-    this.data$ = this.dataSource.data$.pipe(
-      map(t => {
-        if (t == null)        
-          return [];
-        return t.data;
-      })
-    );
-  }
-
-  detectLoading(){
-    this._loadingSubscription = 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, 100)); // page: 1, pageSize: 50
-
-    this.refreshDataSource(); //send the query to server to sorting & filtering by default
-  }
-
-  get selectedModel() {
-    return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0].value : null;
-  }
-
-  refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){
-    let searchfilters:ISimpleFilter[] = null;
-    if(searchTerm){
-      searchfilters = [<ISimpleFilter>{
-        path: this.searchPath || this.bindLabel,      
-        type: this.searchType || 'Contains', // Default: Contains
-        value: searchTerm
-      }]
-    }
-    this.dataSource.query({
-      page: page,
-      pageSize: pageSize,
-      filters:searchfilters,
-      sorts:[
-        {path: this.sortingPath || this.bindLabel, ascending: true} 
-      ]
-    })
-  }
-
-  get hasOptionTemplate() {    
-    return this.selectTemplate ? true : false;
-  }
-
-  get selectOptionTemplate(){
-    if (this.selectTemplate)    
-      return this.selectTemplate.template;
-    return null;
-  }
-
-}

projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts

@@ -1,20 +0,0 @@
-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, ReactiveFormsModule } 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

@@ -13,7 +13,3 @@ 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/command-modal-demo/command-modal-demo/command-modal-demo.component.html

@@ -46,7 +46,7 @@
 </ng-template>
 
 <ng-template #theModal let-command let-loading="loading">
-    <form ngNativeValidate  >
+    <form   >
         Name
         <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
         Address

src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html

@@ -4,12 +4,15 @@
 
     <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
         
-        <ng-container *psDataGridHeader>
+        <!-- <ng-container *psDataGridHeader>
             <h1>Hey! </h1>
             <p>Welcome to my Grid!</p>
             <label>New merchant name</label>
             <input class="form-control" #newMerchantName/>
             <button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
+        </ng-container> -->
+        <ng-container *psDataGridHeader>
+            Some header
         </ng-container>
         <ng-container psDataGridCol="id">
             <div *psDataGridColHeader>ID</div>
@@ -27,11 +30,10 @@
         <ng-container psDataGridCol="commands">
             <ng-container *psDataGridColHeader>Actions</ng-container>
             <ng-container *psDataGridCell="let model">
-                <button class="btn btn-primary mr-2">{{model.name}}</button>
+                <button class="btn btn-primary mr-2">Some Actions</button>
             </ng-container>
         </ng-container>
         <ng-container *psDataGridFooter>
-            
             <strong>Footer works!</strong>
         </ng-container>
     </ps-data-grid>

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

@@ -1,8 +1,7 @@
 <h2>Single Select Demo | ngModel | option template</h2>
 <ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue">
     <div *psNgSelectOption="let item">
-        <!-- {{ item.name }} - {{ item.address }} -->
+       {{ item.name }} - {{ item.address }}       
-        {{item | json}}
     </div>
 </ps-ng-select>
 
@@ -10,7 +9,7 @@ selected: {{ myValue | json }}
 
 <h2>Single Select With Form | formGroup | option template</h2>
 <form #form [formGroup]="myForm">
-    <ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
+    <ps-ng-select [dataSource]="merchantDataSource2" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
         <div *psNgSelectOption="let item">
             {{ item.name }} - {{ item.address }}
         </div>
@@ -20,14 +19,14 @@ selected: {{ myValue | json }}
 selected:  {{ myForm.value | json }}
 
 <h2>Single Select Demo | label Template</h2>
-<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue" [serverFiltering]="true">
+<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
     <div  *psNgSelectLabel="let item">
-        <span>Name: </span>{{ item.name }} - <img src="/src/assets/avatar.png"><span> Address: </span>{{item.address }}
+        <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
     </div>
 </ps-ng-select>
 
  <h2>Multi-Select Demo</h2>
-<ps-ng-multi-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id"  [serverFiltering]="true" [(ngModel)]="myValue" >
+<ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id"  [serverFiltering]="true" [(ngModel)]="myValue4" >
 
 </ps-ng-multi-select>
 selected: {{ myValue | json }} 

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

@@ -14,15 +14,24 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 })
 export class NgSelectDemoComponent implements OnInit {
 
-  merchantDataSource: IDataSource<IMerchant>;  
+  merchantDataSource: IDataSource<IMerchant>;
+  merchantDataSource2: IDataSource<IMerchant>; 
+  merchantDataSource3: IDataSource<IMerchant>; 
+  merchantDataSource4: IDataSource<IMerchant>;   
   
   selectedValue: IMerchant;
+  selectedValue2: IMerchant;
+  selectedValue3: IMerchant;
+  selectedValue4: IMerchant;
   myForm: FormGroup;
   myValue: string;
 
   constructor(private merchantService: MerchantService, private fb: FormBuilder
               ) {
     this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
+    this.merchantDataSource2 = merchantService.createDataSource(); 
+    this.merchantDataSource3 = merchantService.createDataSource(); 
+    this.merchantDataSource4 = merchantService.createDataSource(); 
     this.myForm = fb.group({
       'merchantId': [null, null]
     })