Align code updates for the FieldPickerListData

Author: estruyf

src/controls/fields/fieldPickerListData/FieldPickerListData.tsx

@@ -1,129 +1,118 @@
+import * as strings from 'ControlStrings';
 import * as React from "react";
-import { IFieldPickerListDataProps } from "./IFieldPickerListDataProps";
-import { IFieldPickerListDataState } from "./IFieldPickerListDataState";
+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 SPservice from "../../../services/SPService";
 import { Label } from "office-ui-fabric-react/lib/Label";
+import { IFieldPickerListDataProps, IFieldPickerListDataState } from ".";
 
 
-export class FieldPickerListData extends React.Component<
-  IFieldPickerListDataProps,
-  IFieldPickerListDataState
-> {
+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,
+      noresultsFoundText: typeof this.props.noresultsFoundText === undefined ? strings.genericNoResultsFoundText : this.props.noresultsFoundText,
       showError: false,
       errorMessage: "",
-      suggestionsHeaderText:
-        typeof this.props.sugestedHeaderText === undefined
-          ? "Select Value"
-          : this.props.sugestedHeaderText
+      suggestionsHeaderText: typeof this.props.sugestedHeaderText === undefined ? strings.FieldPickerListDataSelectValue : 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
+
+  /**
+   * Render the 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}
-        />
+        <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
+
+  /**
+   * Get text from Item
+   */
   private getTextFromItem(item: any): string {
     return item.name;
   }
-  /*
-  On Selected Item
-*/
-  private onItemChanged(selectedItems: { key: string; name: string }[]): void {
+
+  /**
+   * 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([]);
-        });
-    });
+
+  /**
+   * Filter Change
+   */
+  private onFilterChanged = async (filterText: string, tagList: { key: string; name: string }[]) => {
+    const resolvedSugestions: { key: string; name: string }[] = await this.loadListItems(filterText);
+
+    if (resolvedSugestions) {
+      this.setState({
+        errorMessage: "",
+        showError: false
+      });
+
+      return resolvedSugestions;
+    } else {
+      return [];
+    }
   }
-  /*
-Function to load List Items
-*/
-  private async loadListItems(
-    filterText: string
-  ): Promise<{ key: string; name: string }[]> {
+
+  /**
+   * Function to load List Items
+   */
+  private loadListItems = async (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 ?
+      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, webUrl);
+      // Check if the list had items
       if (listItems.length > 0) {
-        listItems.map((item, i) => {
+        for (const item of listItems) {
           arrayItems.push({ key: item.Id, name: item[columnInternalName] });
-        });
+        }
       }
-      return Promise.resolve(arrayItems);
+      return arrayItems;
     } catch (error) {
-      return Promise.reject(error);
+      console.log(`Error get Items`, error);
+      this.setState({
+        showError: true,
+        errorMessage: error.message,
+        noresultsFoundText: error.message
+      });
+      return null;
     }
   }
 }

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -399,7 +399,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   public render(): React.ReactElement<IPeoplePickerProps> {
     const suggestionProps: IBasePickerSuggestionsProps = {
       suggestionsHeaderText: strings.peoplePickerSuggestionsHeaderText,
-      noResultsFoundText: strings.peoplePickerNoResultsFoundText,
+      noResultsFoundText: strings.genericNoResultsFoundText,
       loadingText: strings.peoplePickerLoadingText,
       resultsMaximumNumber: this.props.suggestionsLimit ? this.props.suggestionsLimit : 5
     };

src/loc/de-de.ts

@@ -50,7 +50,10 @@ define([], () => {
     peoplePickerComponentErrorMessage: "Benutzerauswahl ist ein Pflichtfeld",
     peoplePickerComponentTitleText: "Benutzer auswählen",
     peoplePickerSuggestionsHeaderText: 'Vorgeschlagene Benutzer',
-    peoplePickerNoResultsFoundText: 'Kein Ergebnis gefunden',
-    peoplePickerLoadingText: 'Laden'
+    peoplePickerLoadingText: 'Laden',
+
+    FieldPickerListDataSelectValue: 'Wähle Wert',
+
+    genericNoResultsFoundText: 'Kein Ergebnis gefunden'
   };
 });

src/loc/en-us.ts

@@ -50,7 +50,10 @@ define([], () => {
     peoplePickerComponentErrorMessage: "Required Field",
     peoplePickerComponentTitleText: "Pick the user(s)",
     peoplePickerSuggestionsHeaderText: 'Suggested People',
-    peoplePickerNoResultsFoundText: 'No results found',
-    peoplePickerLoadingText: 'Loading'
+    peoplePickerLoadingText: 'Loading',
+
+    FieldPickerListDataSelectValue: 'Select value',
+
+    genericNoResultsFoundText: 'No results found'
   };
 });

src/loc/fr-fr.ts

@@ -50,7 +50,10 @@ define([], () => {
     peoplePickerComponentErrorMessage: "Le sélecteur de personnes est obligatoire",
     peoplePickerComponentTitleText: "Choisissez l'utilisateur(s)",
     peoplePickerSuggestionsHeaderText: 'Personnes suggérées',
-    peoplePickerNoResultsFoundText: 'Aucun résultat trouvé',
-    peoplePickerLoadingText: 'Chargement'
+    peoplePickerLoadingText: 'Chargement',
+
+    FieldPickerListDataSelectValue: 'Sélectionnez une valeur',
+
+    genericNoResultsFoundText: 'Aucun résultat trouvé'
   };
 });

src/loc/mystrings.d.ts

@@ -3,7 +3,7 @@ declare interface IControlStrings {
   peoplePickerComponentErrorMessage: string;
   peoplePickerComponentTitleText: string;
   peoplePickerSuggestionsHeaderText: string;
-  peoplePickerNoResultsFoundText: string;
+  genericNoResultsFoundText: string;
   peoplePickerLoadingText: string;
 
 
@@ -23,6 +23,8 @@ declare interface IControlStrings {
   TaxonomyPickerMenuTermSet: string;
   TaxonomyPickerInLabel: string;
   TaxonomyPickerTermSetLabel: string;
+
+  FieldPickerListDataSelectValue: string;
 }
 
 declare module 'ControlStrings' {

src/loc/nl-nl.ts

@@ -50,7 +50,10 @@ define([], () => {
     peoplePickerComponentErrorMessage: "Verplicht veld",
     peoplePickerComponentTitleText: "Kies personen",
     peoplePickerSuggestionsHeaderText: 'Voorgestelde personen',
-    peoplePickerNoResultsFoundText: 'Geen resultaten gevonden',
-    peoplePickerLoadingText: 'Laden'
+    peoplePickerLoadingText: 'Laden',
+
+    FieldPickerListDataSelectValue: 'Selecteer veld',
+
+    genericNoResultsFoundText: 'Geen resultaten gevonden'
   };
 });