Merge branch 'geltapatio-602-Pnp-Taxonomy-Picker-onload-validation' into dev

Author: AJIXuMuK

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -164,6 +164,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |
 | termActions | ITermActions | no | Allows to execute custom action on the term like e.g. get other term labelsITermActions. |
 | hideTagsNotAvailableForTagging | boolean | no | Specifies if the tags marked with 'Available for tagging' = false should be hidden |
+| validateOnLoad | boolean | no | Specifies if the initial values will be validated, when the component is loaded. Default value is false |
 | hideDeprecatedTags | boolean | no | Specifies if deprecated tags  should be hidden |
 | placeholder | string | no | Short text hint to display in empty picker |
 | errorMessage | string | no | Static error message displayed below the picker. Use `onGetErrorMessage` to dynamically change the error message displayed (if any) based on the current value. `errorMessage` and `onGetErrorMessage` are mutually exclusive (`errorMessage` takes precedence). |

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -9,9 +9,9 @@ import { ExtensionContext } from '@microsoft/sp-extension-base';
  * PropertyFieldTermPickerHost properties interface
 //  */
 export interface ITaxonomyPickerProps  {
-   /**
-   * Property field label displayed on top
-   */
+  /**
+  * Property field label displayed on top
+  */
   label: string;
   /**
    * TermSet Picker Panel title
@@ -79,6 +79,11 @@ export interface ITaxonomyPickerProps  {
    */
   placeholder?: string;
 
+  /**
+   * Specifies if the initial values will be validated, when the component is loaded
+   */
+  validateOnLoad?: boolean;
+
   /**
    * The method is used to get the validation error message and determine whether the input value is valid or not.
    * Mutually exclusive with the static string errorMessage (it will take precedence over this).
@@ -118,6 +123,10 @@ export interface ITaxonomyPickerProps  {
 export interface ITaxonomyPickerState {
   termSetAndTerms? : ITermSet;
   errorMessage?: string;
+  /**
+   * Error message populated in the component. errorMessage takes precedence over this.
+   */
+  internalErrorMessage?: string;
   openPanel?: boolean;
   loaded?: boolean;
   activeNodes?: IPickerTerms;

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -55,6 +55,14 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     this.onSave = this.onSave.bind(this);
     this.termsChanged = this.termsChanged.bind(this);
     this.termsFromPickerChanged = this.termsFromPickerChanged.bind(this);
+    this.termsService = new SPTermStorePickerService(this.props, this.props.context);
+  }
+
+  /**
+   * componentDidMount lifecycle hook
+   */
+  public componentDidMount() {
+    this.validateTerms();
   }
 
   /**
@@ -87,11 +95,47 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     }
   }
 
+  /**
+  * it checks, if all entries still exist in term store. if allowMultipleSelections is true. it have to validate all values
+  */
+  private async validateTerms(): Promise<void> {
+
+    const {
+      hideDeprecatedTags,
+      hideTagsNotAvailableForTagging,
+      initialValues,
+      validateOnLoad,
+      termsetNameOrID
+    } = this.props;
+
+    let isValidateOnLoad = validateOnLoad && initialValues && initialValues.length >= 1;
+    if (isValidateOnLoad) {
+
+      let notFoundTerms: string[] = [];
+      const termSet = await this.termsService.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging);
+      const allTerms = termSet.Terms;
+
+      for (let i = 0, len = initialValues.length; i < len; i++) {
+        const pickerTerm = initialValues[i];
+
+        if (!allTerms.filter(t => t.Id === pickerTerm.key).length) {
+          notFoundTerms.push(pickerTerm.name);
+        }
+      }
+
+      if (notFoundTerms.length) {
+        this.setState({
+          internalErrorMessage: strings.TaxonomyPickerTermsNotFound.replace('{0}', notFoundTerms.join(', '))
+        });
+      }
+    }
+  }
+
   /**
    * Loads the list from SharePoint current web site
    */
   private loadTermStores(): void {
-    this.termsService = new SPTermStorePickerService(this.props, this.props.context);
+
 
     if (this.props.termActions && this.props.termActions.initialize) {
       this.props.termActions.initialize(this.termsService);
@@ -334,6 +378,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     const {
       activeNodes,
       errorMessage,
+      internalErrorMessage,
       openPanel,
       loaded,
       termSetAndTerms
@@ -361,7 +406,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
           </div>
         </div>
 
-        <FieldErrorMessage errorMessage={errorMessage} />
+        <FieldErrorMessage errorMessage={errorMessage || internalErrorMessage} />
 
         <Panel
           isOpen={openPanel}

src/loc/en-us.ts

@@ -45,6 +45,7 @@ define([], () => {
     "TaxonomyPickerMenuTermSet": "Menu for Term Set",
     "TaxonomyPickerInLabel": "in",
     "TaxonomyPickerTermSetLabel": "Term Set",
+    "TaxonomyPickerTermsNotFound": "The next selected term(s) could not be found in the term store: {0}",
 
     peoplePickerComponentTooltipMessage: "People Picker",
     peoplePickerComponentErrorMessage: "Required Field",

src/loc/mystrings.d.ts

@@ -26,6 +26,7 @@ declare interface IControlStrings {
   TaxonomyPickerMenuTermSet: string;
   TaxonomyPickerInLabel: string;
   TaxonomyPickerTermSetLabel: string;
+  TaxonomyPickerTermsNotFound: string;
 
   ListItemPickerSelectValue: string;