Merge branch 'FieldPickerListData' of https://github.com/joaojmendes/sp-dev-fx-controls-react into joaojmendes-FieldPickerListData

Author: estruyf

src/FieldPickerListData.ts

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

src/controls/fields/fieldPickerListData/FieldPickerListData.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { IFieldPickerListDataProps } from "./IFieldPickerListDataProps";
+import { IFieldPickerListDataState } from "./IFieldPickerListDataState";
+import { escape } from "@microsoft/sp-lodash-subset";
+import { TagPicker } from "office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker";
+import SPservice from "../../../services/SPService";
+import { Label } from "office-ui-fabric-react/lib/Label";
+
+
+export class FieldPickerListData extends React.Component<
+  IFieldPickerListDataProps,
+  IFieldPickerListDataState
+> {
+  private _value: Array<any>;
+  private _spservice: SPservice;
+  constructor(props: IFieldPickerListDataProps) {
+    super(props);
+    // States
+    this.state = {
+      noresultsFoundText:
+        typeof this.props.noresultsFoundText === undefined
+          ? "No Items Found"
+          : this.props.noresultsFoundText,
+      showError: false,
+      errorMessage: "",
+      suggestionsHeaderText:
+        typeof this.props.sugestedHeaderText === undefined
+          ? "Select Value"
+          : this.props.sugestedHeaderText
+    };
+
+    // Get SPService Factory
+    this._spservice = new SPservice(this.props.context);
+
+    // handlers
+    this.onFilterChanged = this.onFilterChanged.bind(this);
+    this.getTextFromItem = this.getTextFromItem.bind(this);
+    this.onItemChanged = this.onItemChanged.bind(this);
+
+    // Teste Parameters
+    this._value = this.props.value !== undefined ? this.props.value : [];
+  }
+  // Render Field
+  public render(): React.ReactElement<IFieldPickerListDataProps> {
+    const { className, disabled, itemLimit } = this.props;
+    return (
+      <div>
+        <TagPicker
+          onResolveSuggestions={this.onFilterChanged}
+          //   getTextFromItem={(item: any) => { return item.name; }}
+          getTextFromItem={this.getTextFromItem}
+          pickerSuggestionsProps={{
+            suggestionsHeaderText: this.state.suggestionsHeaderText,
+            noResultsFoundText: this.state.noresultsFoundText
+          }}
+          defaultSelectedItems={this._value}
+          onChange={this.onItemChanged}
+          className={className}
+          itemLimit={itemLimit}
+          disabled={disabled}
+        />
+        <Label style={{color:'#FF0000'}}> {this.state.errorMessage} </Label>
+      </div>
+    );
+  }
+  // Get text from Item
+  private getTextFromItem(item: any): string {
+    return item.name;
+  }
+  /*
+  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.props.onSelectedItem(selectedItems);
+  }
+  // Filter Change
+  private onFilterChanged(
+    filterText: string,
+    tagList: { key: string; name: string }[]
+  ) {
+    return new Promise<{ key: string; name: string }[]>((resolve, reject) => {
+      this.loadListItems(filterText)
+        .then((resolvedSugestions: { key: string; name: string }[]) => {
+          this.setState({
+            errorMessage: "",
+            showError: false
+          });
+          resolve(resolvedSugestions);
+        })
+        .catch((reason: any) => {
+          console.log(`Error get Items ${reason}`);
+          this.setState({
+            showError: true,
+            errorMessage: reason.message,
+            noresultsFoundText: reason.message
+          });
+          resolve([]);
+        });
+    });
+  }
+  /*
+Function to load List Items
+*/
+  private async loadListItems(
+    filterText: string
+  ): Promise<{ key: string; name: string }[]> {
+    let { listId, columnInternalName, webUrl } = this.props;
+    let arrayItems: { key: string; name: string }[] = [];
+    try {
+      let listItems = await this._spservice.getListItems(
+        filterText,
+        listId,
+        columnInternalName,
+        webUrl
+      );
+      // has Items ?
+      if (listItems.length > 0) {
+        listItems.map((item, i) => {
+          arrayItems.push({ key: item.Id, name: item[columnInternalName] });
+        });
+      }
+      return Promise.resolve(arrayItems);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+}

src/controls/fields/fieldPickerListData/IFieldPickerListDataProps.ts

@@ -0,0 +1,15 @@
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
+export interface IFieldPickerListDataProps {
+  listId: string;
+  columnInternalName:string;
+  onSelectedItem: (item:any) => void;
+  className?: string;
+  webUrl?:string;
+  value?:Array<string>;
+  disabled?: boolean;
+  itemLimit: number;
+  context: WebPartContext |  ApplicationCustomizerContext;
+  sugestedHeaderText?:string;
+  noresultsFoundText?:string;
+}

src/controls/fields/fieldPickerListData/IFieldPickerListDataState.ts

@@ -0,0 +1,6 @@
+export interface IFieldPickerListDataState {
+  noresultsFoundText: string;
+  showError: boolean;
+  errorMessage: string;
+  suggestionsHeaderText:string;
+}

src/controls/fields/fieldPickerListData/index.ts

@@ -0,0 +1,5 @@
+// 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/index.ts

@@ -22,3 +22,4 @@ export * from './FieldTextRenderer';
 export * from './FieldTitleRenderer';
 export * from './FieldUrlRenderer';
 export * from './FieldUserRenderer';
+export * from './FieldPickerListData';

src/services/ISPService.ts

@@ -18,4 +18,10 @@ export interface ISPService {
      * @param options Options used to order and filter during the API query
      */
     getLibs(options?: ILibsOptions): Promise<ISPLists>;
-}
+    getListItems?(
+      filterText: string,
+      listId: string,
+      internalColumnName: string,
+      webUrl?: string
+    ) : Promise<any[]>;
+}

src/services/SPService.ts

@@ -1,12 +1,18 @@
 import { ISPService, ILibsOptions, LibsOrderBy } from "./ISPService";
 import { ISPLists } from "../common/SPEntities";
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { ApplicationCustomizerContext } from '@microsoft/sp-application-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) {}
+  constructor(private _context: WebPartContext | ApplicationCustomizerContext) {
+   sp.setup({
+      spfxContext: this._context
+    });
+  }
+
 
   /**
    * Get lists or libraries
@@ -33,4 +39,37 @@ export default class SPService implements ISPService {
     return this._context.spHttpClient.get(queryUrl, SPHttpClient.configurations.v1)
     .then(response => response.json()) as Promise<ISPLists>;
   }
+
+  /**
+   * Get List Items
+   *
+   */
+  public async getListItems(
+    filterText: string,
+    listId: string,
+    internalColumnName: string,
+    webUrl?: string
+  ): Promise<any[]> {
+    let filter = `startswith(${internalColumnName},'${filterText}')`;
+    let returnItems: any[];
+    console.log(
+      `Page context url ${this._context.pageContext.web.absoluteUrl}`
+    );
+    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);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
 }