From d871abd7c937094e1824196a432d76b166f53f50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= <joao.j.mendes@outlook.com>
Date: Sun, 20 Oct 2019 14:30:01 +0100
Subject: [PATCH 1/4] add new control Property , "filterList"

---
 docs/documentation/docs/controls/ListItemPicker.md  |  4 +++-
 package-lock.json                                   | 13 +++++++++----
 src/controls/listItemPicker/IListItemPickerProps.ts |  2 +-
 src/controls/listItemPicker/ListItemPicker.tsx      |  5 +++--
 src/services/SPService.ts                           |  6 +++---
 .../controlsTest/components/ControlsTest.tsx        |  6 ++++--
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/docs/documentation/docs/controls/ListItemPicker.md b/docs/documentation/docs/controls/ListItemPicker.md
index b72cc4681..b1b23e854 100644
--- a/docs/documentation/docs/controls/ListItemPicker.md
+++ b/docs/documentation/docs/controls/ListItemPicker.md
@@ -1,6 +1,6 @@
 # ListItemPicker control
 
-This control allows you to select one or more items from a list. The item selection is based from a column value. The control will suggest items based on the inserted value.
+This control allows you to select one or more items from a list. The List can be filter to allow select items from a subset of items The item selection is based from a column value. The control will suggest items based on the inserted value.
 
 Here is an example of the control:
 
@@ -24,6 +24,7 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
 <ListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
                 columnInternalName='Title'
                 valueColumnInternalName='Id'
+                filterList="Title eq 'SPFx'"
                 itemLimit={2}
                 onSelectedItem={this.onSelectedItem}
                 context={this.props.context} />
@@ -58,5 +59,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
 | noResultsFoundText | string | no | The text that should appear when no results are returned. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |
+| filterList | string | no | condition to filter list Item, same as $filter ODATA parameter|
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)
diff --git a/package-lock.json b/package-lock.json
index 7063a9c54..021f6acbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6690,7 +6690,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7105,7 +7106,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7161,6 +7163,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7204,12 +7207,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/controls/listItemPicker/IListItemPickerProps.ts b/src/controls/listItemPicker/IListItemPickerProps.ts
index e0083839e..41a80131d 100644
--- a/src/controls/listItemPicker/IListItemPickerProps.ts
+++ b/src/controls/listItemPicker/IListItemPickerProps.ts
@@ -7,7 +7,7 @@ export interface IListItemPickerProps {
   context: WebPartContext |  ApplicationCustomizerContext;
   listId: string;
   itemLimit: number;
-
+  filterList?: string;
   className?: string;
   webUrl?: string;
   defaultSelectedItems?: any[];
diff --git a/src/controls/listItemPicker/ListItemPicker.tsx b/src/controls/listItemPicker/ListItemPicker.tsx
index 061161236..052b5e65b 100644
--- a/src/controls/listItemPicker/ListItemPicker.tsx
+++ b/src/controls/listItemPicker/ListItemPicker.tsx
@@ -112,12 +112,13 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
    * Function to load List Items
    */
   private loadListItems = async (filterText: string): Promise<{ key: string; name: string }[]> => {
-    let { listId, columnInternalName, keyColumnInternalName, webUrl } = this.props;
+    let { listId, columnInternalName, keyColumnInternalName, webUrl, filterList } = this.props;
     let arrayItems: { key: string; name: string }[] = [];
     let keyColumn: string = keyColumnInternalName || 'Id';
+    let filter: string =  filterList || undefined;
 
     try {
-      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, keyColumn, webUrl);
+      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, keyColumn, webUrl, filter);
       // Check if the list had items
       if (listItems.length > 0) {
         for (const item of listItems) {
diff --git a/src/services/SPService.ts b/src/services/SPService.ts
index 8971d5417..0e943e510 100644
--- a/src/services/SPService.ts
+++ b/src/services/SPService.ts
@@ -47,12 +47,12 @@ export default class SPService implements ISPService {
   /**
    * Get List Items
    */
-  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string): Promise<any[]> {
+  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, filterList?: string ): Promise<any[]> {
     let returnItems: any[];
-    
+    const filter: string = filterList  ? `and ${filterList}` : '';
     try {
       const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
-      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}')`;
+      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}') ${filter}`;
       const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
       if (data.ok) {
         const results = await data.json();
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index fb6e8e59a..f23fbeb65 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -693,8 +693,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               </div>
 
               <div className="ms-font-m">Field picker list data tester:
-                <ListItemPicker listId={this.state.selectedList}
-                  columnInternalName="Title"
+                <ListItemPicker listId={'76a8231b-35b6-4703-b1f4-5d03d3dfb1ca'}
+                  columnInternalName="DescricaoItem"
+                  keyColumnInternalName="Empresa"
+                  filterList={"TipodePedido eq 'Ambos'"}
                   itemLimit={5}
                   context={this.props.context}
                   onSelectedItem={this.listItemPickerDataSelected} />

From 959035b2dbbec2f90c85d8cb12a0f95d3c9cf672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= <joao.j.mendes@outlook.com>
Date: Sun, 20 Oct 2019 16:13:43 +0100
Subject: [PATCH 2/4] Update ControlsTest.tsx

---
 src/webparts/controlsTest/components/ControlsTest.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index f23fbeb65..e5e7d56d1 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -693,13 +693,15 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               </div>
 
               <div className="ms-font-m">Field picker list data tester:
+
                 <ListItemPicker listId={'76a8231b-35b6-4703-b1f4-5d03d3dfb1ca'}
-                  columnInternalName="DescricaoItem"
-                  keyColumnInternalName="Empresa"
-                  filterList={"TipodePedido eq 'Ambos'"}
+                  columnInternalName="Title"
+                  keyColumnInternalName="Id"
+                  filterList={"Title eq 'SPFx'"}
                   itemLimit={5}
                   context={this.props.context}
                   onSelectedItem={this.listItemPickerDataSelected} />
+                  
               </div>
 
               <div className="ms-font-m">Services tester:

From 729f24a093a1a422b237d6bec74965f264ca4b74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= <joao.j.mendes@outlook.com>
Date: Tue, 22 Oct 2019 00:18:59 +0100
Subject: [PATCH 3/4] Encode Filter String characters

---
 src/services/SPService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/SPService.ts b/src/services/SPService.ts
index 0e943e510..b9baadc03 100644
--- a/src/services/SPService.ts
+++ b/src/services/SPService.ts
@@ -52,7 +52,7 @@ export default class SPService implements ISPService {
     const filter: string = filterList  ? `and ${filterList}` : '';
     try {
       const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
-      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}') ${filter}`;
+      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'","''"))}') ${filter}`;
       const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
       if (data.ok) {
         const results = await data.json();

From 3e68f2825e0979b4880d40a63c2a093c550a9bbb Mon Sep 17 00:00:00 2001
From: AJIXuMuK <aleksei.terentiev@gmail.com>
Date: Thu, 14 Nov 2019 19:39:09 -0800
Subject: [PATCH 4/4] filterList -> filter

---
 docs/documentation/docs/controls/ListItemPicker.md    | 6 +++---
 src/controls/listItemPicker/IListItemPickerProps.ts   | 2 +-
 src/controls/listItemPicker/ListItemPicker.tsx        | 3 +--
 src/services/SPService.ts                             | 6 +++---
 src/webparts/controlsTest/components/ControlsTest.tsx | 4 ++--
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/docs/documentation/docs/controls/ListItemPicker.md b/docs/documentation/docs/controls/ListItemPicker.md
index a1181c4de..1f8f6d3aa 100644
--- a/docs/documentation/docs/controls/ListItemPicker.md
+++ b/docs/documentation/docs/controls/ListItemPicker.md
@@ -1,6 +1,6 @@
 # ListItemPicker control
 
-This control allows you to select one or more items from a list. The List can be filter to allow select items from a subset of items The item selection is based from a column value. The control will suggest items based on the inserted value.
+This control allows you to select one or more items from a list. The List can be filtered to allow select items from a subset of items The item selection is based from a column value. The control will suggest items based on the inserted value.
 
 Here is an example of the control:
 
@@ -24,7 +24,7 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
 <ListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
                 columnInternalName='Title'
                 valueColumnInternalName='Id'
-                filterList="Title eq 'SPFx'"
+                filter="Title eq 'SPFx'"
                 itemLimit={2}
                 onSelectedItem={this.onSelectedItem}
                 context={this.props.context} />
@@ -59,6 +59,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
 | noResultsFoundText | string | no | The text that should appear when no results are returned. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |
-| filterList | string | no | condition to filter list Item, same as $filter ODATA parameter|
+| filter | string | no | condition to filter list Item, same as $filter ODATA parameter|
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)
diff --git a/src/controls/listItemPicker/IListItemPickerProps.ts b/src/controls/listItemPicker/IListItemPickerProps.ts
index 41a80131d..d2dee826d 100644
--- a/src/controls/listItemPicker/IListItemPickerProps.ts
+++ b/src/controls/listItemPicker/IListItemPickerProps.ts
@@ -7,7 +7,7 @@ export interface IListItemPickerProps {
   context: WebPartContext |  ApplicationCustomizerContext;
   listId: string;
   itemLimit: number;
-  filterList?: string;
+  filter?: string;
   className?: string;
   webUrl?: string;
   defaultSelectedItems?: any[];
diff --git a/src/controls/listItemPicker/ListItemPicker.tsx b/src/controls/listItemPicker/ListItemPicker.tsx
index 052b5e65b..18fdfef32 100644
--- a/src/controls/listItemPicker/ListItemPicker.tsx
+++ b/src/controls/listItemPicker/ListItemPicker.tsx
@@ -112,10 +112,9 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
    * Function to load List Items
    */
   private loadListItems = async (filterText: string): Promise<{ key: string; name: string }[]> => {
-    let { listId, columnInternalName, keyColumnInternalName, webUrl, filterList } = this.props;
+    let { listId, columnInternalName, keyColumnInternalName, webUrl, filter } = this.props;
     let arrayItems: { key: string; name: string }[] = [];
     let keyColumn: string = keyColumnInternalName || 'Id';
-    let filter: string =  filterList || undefined;
 
     try {
       let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, keyColumn, webUrl, filter);
diff --git a/src/services/SPService.ts b/src/services/SPService.ts
index b9baadc03..7a4053c59 100644
--- a/src/services/SPService.ts
+++ b/src/services/SPService.ts
@@ -47,12 +47,12 @@ export default class SPService implements ISPService {
   /**
    * Get List Items
    */
-  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, filterList?: string ): Promise<any[]> {
+  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, filter?: string ): Promise<any[]> {
     let returnItems: any[];
-    const filter: string = filterList  ? `and ${filterList}` : '';
+    const filterStr = `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'","''"))}')${filter ? ' and ' + filter : ''}`; //string = filterList  ? `and ${filterList}` : '';
     try {
       const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
-      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'","''"))}') ${filter}`;
+      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}`;
       const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
       if (data.ok) {
         const results = await data.json();
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index e5e7d56d1..f5095f234 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -697,11 +697,11 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                 <ListItemPicker listId={'76a8231b-35b6-4703-b1f4-5d03d3dfb1ca'}
                   columnInternalName="Title"
                   keyColumnInternalName="Id"
-                  filterList={"Title eq 'SPFx'"}
+                  filter={"Title eq 'SPFx'"}
                   itemLimit={5}
                   context={this.props.context}
                   onSelectedItem={this.listItemPickerDataSelected} />
-                  
+
               </div>
 
               <div className="ms-font-m">Services tester: