#165 - Updates to improve bundle

Author: estruyf

src/FieldPickerListData.ts

@@ -1 +1 @@
-export * from './controls/fields/fieldPickerListData/index';
+export * from './controls/fieldPickerListData/index';

src/controls/fields/fieldPickerListData/FieldPickerListData.tsx renamed to src/controls/fieldPickerListData/FieldPickerListData.tsx

@@ -1,19 +1,23 @@
 import * as strings from 'ControlStrings';
 import * as React from "react";
-import SPservice from "../../../services/SPService";
+import SPservice from "../../services/SPService";
 import { escape } from "@microsoft/sp-lodash-subset";
 import { TagPicker } from "office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker";
 import { Label } from "office-ui-fabric-react/lib/Label";
 import { IFieldPickerListDataProps, IFieldPickerListDataState } from ".";
+import * as telemetry from '../../common/telemetry';
 
 
 export class FieldPickerListData extends React.Component<IFieldPickerListDataProps, IFieldPickerListDataState> {
-  private _value: Array<any>;
+  private _value: any[];
   private _spservice: SPservice;
+  private selectedItems: any[];
 
   constructor(props: IFieldPickerListDataProps) {
     super(props);
 
+    telemetry.track('FieldPickerListData', {});
+
     // States
     this.state = {
       noresultsFoundText: typeof this.props.noresultsFoundText === undefined ? strings.genericNoResultsFoundText : this.props.noresultsFoundText,
@@ -25,8 +29,15 @@ export class FieldPickerListData extends React.Component<IFieldPickerListDataPro
     // Get SPService Factory
     this._spservice = new SPservice(this.props.context);
 
-    // Teste Parameters
+    // Test Parameters
     this._value = this.props.value !== undefined ? this.props.value : [];
+    this.selectedItems = [];
+  }
+
+  public componentDidUpdate(prevProps: IFieldPickerListDataProps, prevState: IFieldPickerListDataState): void {
+    if (this.props.listId !== prevProps.listId) {
+      this.selectedItems = [];
+    }
   }
 
   /**
@@ -66,16 +77,27 @@ export class FieldPickerListData extends React.Component<IFieldPickerListDataPro
    * On Selected Item
    */
   private onItemChanged = (selectedItems: { key: string; name: string }[]): void => {
-    let item: { key: string; name: string } = selectedItems[0];
-    console.log(`selected items nr: ${selectedItems.length}`);
+    this.selectedItems = selectedItems;
     this.props.onSelectedItem(selectedItems);
   }
 
   /**
    * Filter Change
    */
   private onFilterChanged = async (filterText: string, tagList: { key: string; name: string }[]) => {
-    const resolvedSugestions: { key: string; name: string }[] = await this.loadListItems(filterText);
+    let resolvedSugestions: { key: string; name: string }[] = await this.loadListItems(filterText);
+
+    // Filter out the already retrieved items, so that they cannot be selected again
+    if (this.selectedItems && this.selectedItems.length > 0) {
+      let filteredSuggestions = [];
+      for (const suggestion of resolvedSugestions) {
+        const exists = this.selectedItems.filter(sItem => sItem.key === suggestion.key);
+        if (!exists || exists.length === 0) {
+          filteredSuggestions.push(suggestion);
+        }
+      }
+      resolvedSugestions = filteredSuggestions;
+    }
 
     if (resolvedSugestions) {
       this.setState({

src/controls/fields/fieldPickerListData/IFieldPickerListDataProps.ts renamed to src/controls/fieldPickerListData/IFieldPickerListDataProps.ts

@@ -1,5 +1,6 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
 import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
+
 export interface IFieldPickerListDataProps {
   listId: string;
   columnInternalName:string;

src/controls/fields/fieldPickerListData/IFieldPickerListDataState.ts renamed to src/controls/fieldPickerListData/IFieldPickerListDataState.ts

@@ -1,5 +1,4 @@
 // A file is required to be in the root of the /src directory by the TypeScript compiler
 export * from './IFieldPickerListDataProps';
 export * from './IFieldPickerListDataState';
-export * from '../../../services/SPService';
 export * from './FieldPickerListData';

src/controls/fields/fieldPickerListData/index.ts renamed to src/controls/fieldPickerListData/index.ts

@@ -3,15 +3,10 @@ import { ISPLists } from "../common/SPEntities";
 import { WebPartContext } from "@microsoft/sp-webpart-base";
 import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
 import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
-import { sp, Web } from "@pnp/sp";
 
 export default class SPService implements ISPService {
 
-  constructor(private _context: WebPartContext | ApplicationCustomizerContext) {
-   sp.setup({
-      spfxContext: this._context
-    });
-  }
+  constructor(private _context: WebPartContext | ApplicationCustomizerContext) {}
 
   /**
    * Get lists or libraries
@@ -47,19 +42,19 @@ export default class SPService implements ISPService {
    * Get List Items
    */
   public async getListItems(filterText: string, listId: string, internalColumnName: string, webUrl?: string): Promise<any[]> {
-    let filter = `startswith(${internalColumnName},'${filterText}')`;
-
     let returnItems: any[];
-    let spWeb: Web;
-    if (typeof webUrl === undefined) {
-      spWeb = new Web(webUrl);
-    } else {
-      spWeb = new Web(this._context.pageContext.web.absoluteUrl);
-    }
 
     try {
-      returnItems = await spWeb.lists.getById(listId).items.select("Id", internalColumnName).filter(filter).get();
-      return Promise.resolve(returnItems);
+      const apiUrl = `${this._context.pageContext.web.absoluteUrl}/_api/web/lists('${listId}')/items?$select=Id,${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}')`;
+      const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
+      if (data.ok) {
+        const results = await data.json();
+        if (results && results.value && results.value.length > 0) {
+          return results.value;
+        }
+      }
+
+      return [];
     } catch (error) {
       return Promise.reject(error);
     }

src/services/SPService.ts

@@ -19,6 +19,7 @@ import { SecurityTrimmedControl, PermissionLevel } from '../../../SecurityTrimme
 import { SPPermission } from '@microsoft/sp-page-context';
 import { PeoplePicker, PrincipalType } from '../../../PeoplePicker';
 import { getItemClassNames } from 'office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.classNames';
+import { FieldPickerListData } from "../../../../lib/FieldPickerListData";
 
 /**
  * Component that can be used to test out the React controls from this project
@@ -32,7 +33,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       items: [],
       iFrameDialogOpened: false,
       initialValues: [],
-      authorEmails: []
+      authorEmails: [],
+      selectedList: null
     };
 
     this._onIconSizeChange = this._onIconSizeChange.bind(this);
@@ -119,8 +121,11 @@ private onServicePickerChange(terms: IPickerTerms): void {
    * Selected lists change event
    * @param lists
    */
-  private onListPickerChange (lists: string | string[]) {
+  private onListPickerChange = (lists: string | string[]) => {
     console.log("Lists:", lists);
+    this.setState({
+      selectedList: typeof lists === "string" ? lists : lists.pop()
+    });
   }
 
   /**
@@ -135,13 +140,22 @@ private onServicePickerChange(terms: IPickerTerms): void {
       });
     }
   }
-  /** Method that retrieves the selected items from People  Picker
+
+  /**
+   * Method that retrieves the selected items from People  Picker
    * @param items
    */
   private _getPeoplePickerItems(items: any[]) {
     console.log('Items:', items);
   }
 
+  /**
+   * Selected item from the list data picker
+   */
+  private fieldPickerListDataSelected(item: any) {
+    console.log(item);
+  }
+
   /**
    * Renders the component
    */
@@ -262,6 +276,14 @@ private onServicePickerChange(terms: IPickerTerms): void {
                             onSelectionChanged={this.onListPickerChange} />
               </div>
 
+              <div className="ms-font-m">Field picker list data tester:
+                <FieldPickerListData listId={this.state.selectedList}
+                                     columnInternalName="Title"
+                                     itemLimit={5}
+                                     context={this.props.context}
+                                     onSelectedItem={this.fieldPickerListDataSelected} />
+              </div>
+
               <div className="ms-font-m">Services tester:
               <TaxonomyPicker
                 allowMultipleSelections={true}

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -16,4 +16,5 @@ export interface IControlsTestState {
   initialValues: any[];
   iFrameDialogOpened?: boolean;
   authorEmails: string[];
+  selectedList: string;
 }