From 3d02e19bd10c8f8dc57f334d2e5f65227f3d5ef0 Mon Sep 17 00:00:00 2001
From: David Lebee <david@poweredsoft.com>
Date: Thu, 26 Aug 2021 09:48:57 -0400
Subject: [PATCH] added cute features to select.

---
 .../multi-select/multi-select.component.ts    | 57 ++++++++++++++-----
 .../ng-select/ng-select.component.ts          | 57 ++++++++++++++-----
 .../ng-select-demo.component.html             | 26 +++++++++
 3 files changed, 114 insertions(+), 26 deletions(-)

diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
index 2416360..96adefb 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
 import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
-import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
+import { IDataSource, ISimpleFilter, ISort } from '@poweredsoft/data';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
@@ -27,9 +27,9 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
 
   @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
   @Input() dataSource: IDataSource<any>;
-  @Input() searchPath: string;
+  @Input() searchPath: string | string[];
   @Input() searchType: string;
-  @Input() sortingPath: string;
+  @Input() sortingPath: string | string[];
   @Input() serverFiltering:boolean;
   @Input() bindLabel:string;
   @Input() bindValue: string;
@@ -116,21 +116,52 @@ export class MultiSelectComponent implements OnInit,OnDestroy {
 
   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
-      }]
+    if(searchTerm)
+    {
+      if (this.searchPath) {
+        if (Array.isArray(this.searchPath)) {
+          searchfilters = this.searchPath.map(path => {
+            return <ISimpleFilter>{
+              path: path,
+              type: 'Contains',
+              value: searchTerm,
+              and: false
+            }
+          });
+        } else {
+          searchfilters = [<ISimpleFilter>{
+            path: this.searchPath,      
+            type: 'Contains', // Default: Contains
+            value: searchTerm
+          }]
+        }
+      } else {
+        searchfilters = [<ISimpleFilter>{
+          path: this.bindLabel,      
+          type: 'Contains', // Default: Contains
+          value: searchTerm
+        }]
+      }
+      
     }
+
+    let sorts: ISort[];
+    if (this.sortingPath && Array.isArray(this.sortingPath)) {
+      sorts = this.sortingPath.map(sortPath => (<ISort>{
+        path: sortPath,
+        ascending: true
+      }));
+    } else {
+      sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}];
+    }
+
+
     this.dataSource.query({
       page: page,
       pageSize: pageSize,
       filters:searchfilters,
-      sorts:[
-        {path: this.sortingPath || this.bindLabel, ascending: true} 
-      ]
-    })
+      sorts:sorts
+    });
   }
 
   get hasOptionTemplate() {    
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
index 920679d..bcc8ae2 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
 import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
-import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
+import { IDataSource, ISimpleFilter, ISort } from '@poweredsoft/data';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
@@ -32,9 +32,9 @@ export class NgSelectComponent implements OnInit,OnDestroy {
   
   @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
   @Input() dataSource: IDataSource<any>;
-  @Input() searchPath: string;
+  @Input() searchPath: string | string[];
   @Input() searchType: string;
-  @Input() sortingPath: string;
+  @Input() sortingPath: string | string[];
   @Input() serverFiltering:boolean;
   @Input() bindLabel:string;
   @Input() bindValue: string;
@@ -125,21 +125,52 @@ export class NgSelectComponent implements OnInit,OnDestroy {
 
   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
-      }]
+    if(searchTerm)
+    {
+      if (this.searchPath) {
+        if (Array.isArray(this.searchPath)) {
+          searchfilters = this.searchPath.map(path => {
+            return <ISimpleFilter>{
+              path: path,
+              type: 'Contains',
+              value: searchTerm,
+              and: false
+            }
+          });
+        } else {
+          searchfilters = [<ISimpleFilter>{
+            path: this.searchPath,      
+            type: 'Contains', // Default: Contains
+            value: searchTerm
+          }]
+        }
+      } else {
+        searchfilters = [<ISimpleFilter>{
+          path: this.bindLabel,      
+          type: 'Contains', // Default: Contains
+          value: searchTerm
+        }]
+      }
+      
     }
+
+    let sorts: ISort[];
+    if (this.sortingPath && Array.isArray(this.sortingPath)) {
+      sorts = this.sortingPath.map(sortPath => (<ISort>{
+        path: sortPath,
+        ascending: true
+      }));
+    } else {
+      sorts = [<ISort>{path: this.sortingPath || this.bindLabel, ascending: true}];
+    }
+
+
     this.dataSource.query({
       page: page,
       pageSize: pageSize,
       filters:searchfilters,
-      sorts:[
-        {path: this.sortingPath || this.bindLabel, ascending: true} 
-      ]
-    })
+      sorts:sorts
+    });
   }
 
   get hasOptionTemplate() {    
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 c2335b3..3374845 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
@@ -15,6 +15,32 @@ selected: {{ myValue | json }}
         </div>
     </ps-ng-select>
 </form>
+
+
+selected:  {{ myForm.value | json }}
+
+<h2>Single Select With Form | formGroup | option template (Making sure not breaking change single override path)</h2>
+<form #form [formGroup]="myForm">
+    <ps-ng-select [dataSource]="merchantDataSource2" sortingPath="name" searchPath="name" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
+        <div *psNgSelectOption="let item">
+           <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+        </div>
+    </ps-ng-select>
+</form>
+
+
+selected:  {{ myForm.value | json }}
+
+<h2>Single Select With Form | formGroup | option template (multiple search paths)</h2>
+<form #form [formGroup]="myForm">
+    <ps-ng-select [dataSource]="merchantDataSource2" [sortingPath]="['name', 'address']" [searchPath]="['name', 'address']" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
+        <div *psNgSelectOption="let item">
+           <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+        </div>
+    </ps-ng-select>
+</form>
+
+
 selected:  {{ myForm.value | json }}
 
 <h2>Single Select Demo | label Template</h2>