temp commit the ng-select before removing

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

@@ -1,9 +1,17 @@
-<ng-select [items]="data$ | async"
-           [bindLabel]="bindLabel"
-           bindValue="id"
+<ng-select [items]="data$ |async"
+           [bindLabel]="bindLabel"    
+           [bindValue]="bindValue"       
            autofocus
-           [typeahead] = "searchInput$"           
-           [(ngModel)]="selectedId">
+           [typeahead] = "searchInput$"
+           [trackByFn]="trackFn"       
+           (change)="valueChanged($event)">
+           <ng-container *ngIf="hasOptionTemplate">
+               <ng-template ng-option-tmp let-item="item" let-index="index">
+                <ng-container [ngTemplateOutlet]="selectOptionTemplate"
+                    [ngTemplateOutletContext]="{
+                    $implicit: item,
+                    index: index       
+                    }"></ng-container>
+               </ng-template>
+           </ng-container>
 </ng-select>
-
-<br/>Selected: {{selectedId | json }}  

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

@@ -1,47 +1,86 @@
-import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
+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 {
+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 = "Contains";
+  @Input() searchType: string;
   @Input() sortingPath: string;
-  @Input() disableServer:boolean = false;
-
+  @Input() serverFiltering:boolean;
   @Input() bindLabel:string;
+  @Input() bindValue: string;
 
+  @Output('change') changeEvent = new EventEmitter();
 
+  trackFn: (item: any) => any;
   data$ : Observable<any[]>;
-  selectedId:any;
   isLoading:boolean = false;
   searchInput$ = new Subject<string>();
 
-  private _dataSubscription: Subscription;  
+  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);
+  }
 
-  constructor(private cdr: ChangeDetectorRef) { }
   ngOnDestroy(): void {
-    this._dataSubscription.unsubscribe();
+    this._loadingSubscription.unsubscribe();
   }
 
   ngOnInit(): void {
     this.dataFetching();    
     this.detectLoading();
-    if(!this.disableServer){
+
+    console.log(this.serverFiltering);
+
+    if(this.serverFiltering){
       this.searchOnServer();
     }else{
       this.refreshDataSource();
     }
   }
 
-
   dataFetching(){
     this.data$ = this.dataSource.data$.pipe(
       map(t => {
@@ -50,11 +89,10 @@ export class NgSelectComponent implements OnInit, OnDestroy {
         return t.data;
       })
     );
-    this._dataSubscription = this.dataSource.data$.subscribe();
   }
 
   detectLoading(){
-    this.dataSource.loading$.subscribe(loading => {      
+    this._loadingSubscription = this.dataSource.loading$.subscribe(loading => {      
       this.isLoading = loading;
       this.cdr.detectChanges();
     });
@@ -69,12 +107,16 @@ export class NgSelectComponent implements OnInit, OnDestroy {
     this.refreshDataSource(); //send the query to server to sorting & filtering by default
   }
 
-  refreshDataSource(searchTerm:any = null, page:number=null, pageSize:number=null){
+  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,      
-        type: this.searchType, // Default: Contains
+        path: this.searchPath || this.bindLabel,      
+        type: this.searchType || 'Contains', // Default: Contains
         value: searchTerm
       }]
     }
@@ -83,9 +125,19 @@ export class NgSelectComponent implements OnInit, OnDestroy {
       pageSize: pageSize,
       filters:searchfilters,
       sorts:[
-        {path: this.sortingPath, ascending: true} 
+        {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

@@ -2,18 +2,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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { SelectOptionTemplateDirective } from './select-option-template.directive';
 
 
 
 @NgModule({
-  declarations: [NgSelectComponent, NgMultiSelectComponent],
+  declarations: [NgSelectComponent, NgMultiSelectComponent, SelectOptionTemplateDirective],
   imports: [
     CommonModule,
     FormsModule,
     NgSelectModule,
   ],
-  exports:[NgSelectComponent,NgMultiSelectComponent]
+  exports:[NgSelectComponent,NgMultiSelectComponent,SelectOptionTemplateDirective]
 })
 export class PsSelectorsModule { }

projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/select-option-template.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psSelectOptionTemplate]'
+})
+export class SelectOptionTemplateDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}

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

@@ -16,4 +16,5 @@ 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';
+export * from './lib/ps-selectors/ng-multi-select/ng-multi-select.component';
+export * from './lib/ps-selectors/select-option-template.directive';

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

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PsSelectorsModule } from '@poweredsoft/ngx-cdk-ui';
 
 
@@ -14,6 +14,7 @@ import { PsSelectorsModule } from '@poweredsoft/ngx-cdk-ui';
     CommonModule,
     NgSelectModule,
     FormsModule,
+    ReactiveFormsModule,
     NgSelectDemoRoutingModule,
     PsSelectorsModule  //our ng select module
   ]

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

@@ -1,6 +1,37 @@
 <h2>Single Select Demo</h2>
-<ps-ng-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-select>
+<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [serverFiltering]="true">
+    <div *psSelectOptionTemplate="let item">
+        {{ item.name }} - {{ item.address }}
+    </div>
+</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>
+<ps-ng-multi-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-multi-select>
+
+
+<!-- <form>
+    <ps-ng-select [dataSource]="merchantDataSource" searchPath="name" sortingPath="name" formControlName="name" [disableServer]="false" bindLabel="name">
+        <ng-template *psSelectOptionTemplate="let item" ng-label-tmp >
+            <span>Name: </span> {{item.name}} | <span>Adress: </span>{{item.address}} | <span>Date: </span>{{item.openDate}}
+        </ng-template>
+    </ps-ng-select>
+</form> -->
+<form #form [formGroup]="myForm">
+    <ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" formControlName="merchantId">
+        <div *psSelectOptionTemplate="let item">
+            {{ item.name }} - {{ item.address }}
+        </div>
+    </ps-ng-select>
+</form>
+
+{{ myForm.value | json }}
+
+
+<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue">
+    <div *psSelectOptionTemplate="let item">
+        {{ item.name }} - {{ item.address }}
+    </div>
+</ps-ng-select>
+
+{{ myValue | json }}

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

@@ -5,6 +5,7 @@ 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';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'ps-ng-select-demo',
@@ -15,10 +16,16 @@ export class NgSelectDemoComponent implements OnInit {
 
   merchantDataSource: IDataSource<IMerchant>;  
   
+  selectedValue: IMerchant;
+  myForm: FormGroup;
+  myValue: string;
 
-  constructor(private merchantService: MerchantService,
+  constructor(private merchantService: MerchantService, private fb: FormBuilder
               ) {
     this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
+    this.myForm = fb.group({
+      'merchantId': [null, null]
+    })
   }
 
   ngOnInit(): void {