Merge pull request #1052 from Whiteshark57/useSessionStorage#998

AJIXuMuK · web-flow · commit 33fdd4354f94 · 2021-11-25T09:33:22.000-08:00
Add useSessionStorage, onPanelSelectionChange and selectChildrenIfParentSelected to Taxonomy Picker Control
diff --git a/src/common/utilities/LocalesHelper.ts b/src/common/utilities/LocalesHelper.ts
@@ -1,3 +1,5 @@
+import { findIndex } from '@microsoft/sp-lodash-subset';
+
 export class LocalesHelper {
 
   private static locales = {
@@ -53,7 +55,7 @@ export class LocalesHelper {
     10266: 'sr-Cyrl-RS',
   };
   public static getLocaleId(localeName: string): number {
-    const pos: number = Object.keys(this.locales).findIndex(locKey => this.locales[locKey] === localeName);
+    const pos: number = findIndex(Object.keys(this.locales), locKey => this.locales[locKey] === localeName);
     if (pos > -1) {
       return parseInt(Object.keys(this.locales)[pos]);
     }
diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
@@ -25,7 +25,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   private dropArea = null;
   private dropRef = element => {
     this.dropArea = element;
-  };
+  }
 
   constructor(props: IListViewProps) {
     super(props);
diff --git a/src/controls/taxonomyPicker/ITaxonomyPicker.ts b/src/controls/taxonomyPicker/ITaxonomyPicker.ts
@@ -1,4 +1,4 @@
-import { IPickerTerms } from './ITermPicker';
+import { IPickerTerm, IPickerTerms } from './ITermPicker';
 import { ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
 import { IWebPartContext } from '@microsoft/sp-webpart-base';
 import { ITermActions } from './termActions/ITermsActions';
@@ -120,6 +120,23 @@ export interface ITaxonomyPickerProps  {
    * Note that error message should be specified in onGetErrorMessage
    */
   required?: boolean;
+
+  /**
+   * Specifies if you want to use session storage
+   * Default will be true
+   */
+   useSessionStorage?: boolean;
+
+   /**
+   * Panel selection change handler. Can be used to interact with the control while selecting items in the panel, before Click or Cancel is clicked.
+   */
+  onPanelSelectionChange?: (prevValue: IPickerTerms, newValue: IPickerTerms) => void;
+
+  /**
+   * Specifies if the childrens should be selected when parent is selected.
+   * By default this is set to false.
+   */
+  selectChildrenIfParentSelected?: boolean;
 }
 
 /**
diff --git a/src/controls/taxonomyPicker/TaxonomyPicker.tsx b/src/controls/taxonomyPicker/TaxonomyPicker.tsx
@@ -15,8 +15,9 @@ import { sortBy, cloneDeep, isEqual } from '@microsoft/sp-lodash-subset';
 import uniqBy = require('lodash/uniqBy');
 import TermParent from './TermParent';
 import FieldErrorMessage from './ErrorMessage';
-
+import { initializeIcons } from '@uifabric/icons';
 import * as telemetry from '../../common/telemetry';
+import { EmptyGuid } from '../../common/Constants';
 
 /**
  * Image URLs / Base64
@@ -27,6 +28,8 @@ export const GROUP_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ
 export const TERMSET_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACaSURBVDhPrZLRCcAgDERdpZMIjuQA7uWH4CqdxMY0EQtNjKWB0A/77sxF55SKMTalk8a61lqCFqsLiwKac84ZRUUBi7MoYHVmAfjfjzE6vJqZQfie0AcwBQVW8ATi7AR7zGGGNSE6Q2cyLSPIjRswjO7qKhcPDN2hK46w05wZMcEUIG+HrzzcrRsQBIJ5hS8C9fGAPmRwu/9RFxW6L8CM4Ry8AAAAAElFTkSuQmCC'; // /_layouts/15/Images/EMMTermSet.png
 export const TERM_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACzSURBVDhPY2AYNKCoqIgTiOcD8X8S8F6wB4Aa1IH4akNDw+mPHz++/E8EuHTp0jmQRSDNCcXFxa/XrVt3gAh9KEpgBvx/9OjRLVI1g9TDDYBp3rlz5//Kysr/IJoYgGEASPPatWsbQDQxAMOAbdu2gZ0FookBcAOePHlyhxgN6GqQY+Hdhg0bDpJqCNgAaDrQAnJuNDY2nvr06dMbYgw6e/bsabgBUEN4yEiJ2wdNViLfIQC3sTh2vtJcswAAAABJRU5ErkJggg==';
 
+initializeIcons();
+
 /**
  * Renders the controls for PropertyFieldTermPicker component
  */
@@ -89,7 +92,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       };
     }
 
-    if (nextProps.errorMessage) {
+    if (nextProps.errorMessage !== this.props.errorMessage) {
       if (!newState) {
         newState = {};
       }
@@ -111,7 +114,8 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       hideTagsNotAvailableForTagging,
       initialValues,
       validateOnLoad,
-      termsetNameOrID
+      termsetNameOrID,
+      useSessionStorage
     } = this.props;
 
     let isValidateOnLoad = validateOnLoad && initialValues && initialValues.length >= 1;
@@ -120,7 +124,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       const notFoundTerms: string[] = [];
       const notFoundTermIds: string[] = [];
 
-      const termSet = await this.termsService.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging);
+      const termSet = await this.termsService.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging, useSessionStorage);
       const allTerms = termSet.Terms;
 
       for (let i = 0, len = initialValues.length; i < len; i++) {
@@ -152,7 +156,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       // });
     }
 
-    this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging).then((response: ITermSet) => {
+    this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging, this.props.useSessionStorage).then((response: ITermSet) => {
       // Check if a response was retrieved
       let termSetAndTerms = response ? response : null;
       this.setState({
@@ -166,7 +170,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    * Force update of the taxonomy tree - required by term action in case the term has been added, deleted or moved.
    */
   private async updateTaxonomyTree(): Promise<void> {
-    const termSetAndTerms = await this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging);
+    const termSetAndTerms = await this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging, this.props.useSessionStorage);
 
     this.setState({
       termSetAndTerms
@@ -229,11 +233,20 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    */
   private termsChanged(term: ITerm, checked: boolean): void {
 
-    let activeNodes = this.state.activeNodes;
+    let activeNodes = this.state.activeNodes.slice();
     if (typeof term === 'undefined' || term === null) {
       return;
     }
 
+    const {
+      allowMultipleSelections,
+      selectChildrenIfParentSelected
+    } = this.props;
+
+    const {
+      termSetAndTerms
+    } = this.state;
+
     // Term item to add to the active nodes array
     const termItem = {
       name: term.Name,
@@ -242,24 +255,58 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       termSet: term.TermSet.Id
     };
 
+    // Check if we need to process child terms
+    let children: ITerm[] = [];
+    if (allowMultipleSelections && selectChildrenIfParentSelected) {
+      if (term.Id === term.TermSet.Id) {
+        children = termSetAndTerms.Terms || [];
+      } else {
+        children = termSetAndTerms.Terms ? termSetAndTerms.Terms.filter(t => {
+          return t.PathOfTerm.indexOf(`${term.PathOfTerm}`) !== -1;
+        }) : [];
+      }
+    }
+
     // Check if the term is checked or unchecked
     if (checked) {
       // Check if it is allowed to select multiple terms
-      if (this.props.allowMultipleSelections) {
+      if (allowMultipleSelections) {
         // Add the checked term
         activeNodes.push(termItem);
-        // Filter out the duplicate terms
-        activeNodes = uniqBy(activeNodes, 'key');
       } else {
         // Only store the current selected item
         activeNodes = [termItem];
       }
+
+      if (children.length) {
+        activeNodes.push(...children.map(c => {
+          return {
+            name: c.Name,
+            key: c.Id,
+            path: c.PathOfTerm,
+            termSet: c.TermSet.Id
+          };
+        }));
+      }
+
+      // Filter out the duplicate terms
+      activeNodes = uniqBy(activeNodes, 'key');
     } else {
       // Remove the term from the list of active nodes
       activeNodes = activeNodes.filter(item => item.key !== term.Id);
+
+      if (children.length) {
+        const childIds = children.map(c => c.Id);
+        activeNodes = activeNodes.filter(item => childIds.indexOf(item.key) === -1);
+      }
     }
     // Sort all active nodes
     activeNodes = sortBy(activeNodes, 'path');
+
+    if (this.props.onPanelSelectionChange) {
+      this.props.onPanelSelectionChange(this.state.activeNodes.slice(), activeNodes);
+    }
+
     // Update the current state
     this.setState({
       activeNodes: activeNodes
@@ -312,22 +359,51 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     return input;
   }
 
+  private async validateOnGetErrorMessage(targetValue: string): Promise<boolean> {
+    const errorMessage = await this.props.onGetErrorMessage(
+      [
+        {
+          key: EmptyGuid,
+          name: targetValue,
+          path: targetValue,
+          termSet: this.termsService.cleanGuid(this.props.termsetNameOrID)
+        }
+      ]
+    );
+
+    if (!!errorMessage) {
+      this.setState({
+        errorMessage: errorMessage
+      });
+    } else {
+      this.setState({
+        errorMessage: null
+      });
+    }
+
+    return !errorMessage;
+  }
+
   /**
    * Triggers when taxonomy picker control loses focus
    */
-  private onBlur(event: React.FocusEvent<HTMLElement | Autofill>): void {
+  private async onBlur(event: React.FocusEvent<HTMLElement | Autofill>): Promise<void> {
     const { validateInput } = this.props;
     if (!!validateInput) {
       // Perform validation of input text, only if taxonomy picker is configured with validateInput={true} property.
       const target: HTMLInputElement = event.target as HTMLInputElement;
       const targetValue = !!target ? target.value : null;
-      if (!!targetValue) {
-        this.invalidTerm = targetValue;
-      }
-      else {
-        this.invalidTerm = null;
+      if (!!this.props.onGetErrorMessage && !!targetValue) {
+        await this.validateOnGetErrorMessage(targetValue);
+      } else {
+        if (!!targetValue) {
+          this.invalidTerm = targetValue;
+        }
+        else {
+          this.invalidTerm = null;
+        }
+        this.validateInputText();
       }
-      this.validateInputText();
     }
   }
   
@@ -403,6 +479,9 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     if (typeof result === 'string') {
       if (!result) {
         this.validated(value);
+        this.setState({
+          errorMessage: undefined
+        });
       }
       else {
         this.setState({
@@ -416,6 +495,9 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
 
         if (!resolvedResult) {
           this.validated(value);
+          this.setState({
+            errorMessage: undefined
+          });
         }
         else {
           this.setState({
diff --git a/src/services/SPTermStorePickerService.ts b/src/services/SPTermStorePickerService.ts
@@ -149,7 +149,7 @@ export default class SPTermStorePickerService {
    * Retrieve all terms for the given term set
    * @param termset
    */
-  public async getAllTerms(termset: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean): Promise<ITermSet> {
+  public async getAllTerms(termset: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage: boolean = true): Promise<ITermSet> {
     if (Environment.type === EnvironmentType.Local) {
       // If the running environment is local, load the data from the mock
       return this.getAllMockTerms();
@@ -168,7 +168,7 @@ export default class SPTermStorePickerService {
         }
       }
 
-      let childTerms = this.getTermsById(termsetId);
+      let childTerms = this.getTermsById(termsetId, useSessionStorage);
 
       if (childTerms) {
         return childTerms;
@@ -231,7 +231,13 @@ export default class SPTermStorePickerService {
               }
             }
 
-            sessionStorage.setItem(termsetId, JSON.stringify(termStoreResultTermSet));
+            try {
+              if (useSessionStorage && window.sessionStorage) {
+                window.sessionStorage.setItem(termsetId, JSON.stringify(termStoreResultTermSet));
+              }
+            } catch (error) {
+              // Do nothing, sometimes storage quota exceed error if too many items
+            }
             return termStoreResultTermSet;
           }
           return null;
@@ -282,12 +288,21 @@ export default class SPTermStorePickerService {
     }
   }
 
-  private getTermsById(termId) {
-    var terms = sessionStorage.getItem(termId);
-    if (terms)
-      return JSON.parse(terms);
-    else
+  private getTermsById(termId, useSessionStorage: boolean = true) {
+    try {
+      if (useSessionStorage && window.sessionStorage) {
+        let terms = window.sessionStorage.getItem(termId);
+        if (terms)
+          return JSON.parse(terms);
+        else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    } catch (error) {
       return null;
+    }
   }
 
   private searchTermsBySearchText(terms, searchText) {
@@ -303,7 +318,8 @@ export default class SPTermStorePickerService {
       // If the running environment is local, load the data from the mock
       return SPTermStoreMockHttpClient.searchTermsByName(searchText);
     } else {
-      var childTerms = this.getTermsById(termId);
+      const { useSessionStorage } = this.props;
+      let childTerms = this.getTermsById(termId, useSessionStorage);
       if (childTerms) {
         return this.searchTermsBySearchText(childTerms, searchText);
       }
@@ -318,7 +334,8 @@ export default class SPTermStorePickerService {
           termsetNameOrID,
           termId,
           hideDeprecatedTags,
-          hideTagsNotAvailableForTagging);
+          hideTagsNotAvailableForTagging,
+          useSessionStorage);
 
         if (terms) {
           return this.searchTermsBySearchText(terms, searchText);
@@ -332,7 +349,7 @@ export default class SPTermStorePickerService {
   /**
    * Retrieve all terms for the given term set and anchorId
    */
-  public async getAllTermsByAnchorId(termsetNameOrID: string, anchorId: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean): Promise<IPickerTerm[]> {
+  public async getAllTermsByAnchorId(termsetNameOrID: string, anchorId: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage: boolean = true): Promise<IPickerTerm[]> {
 
     let returnTerms: IPickerTerm[] = [];
 
@@ -343,7 +360,7 @@ export default class SPTermStorePickerService {
         returnTerms.push(this.convertTermToPickerTerm(term));
       });
     } else {
-      const childTerms = this.getTermsById(anchorId);
+      const childTerms = this.getTermsById(anchorId, useSessionStorage);
       if (childTerms) {
         return childTerms;
       }
@@ -361,7 +378,13 @@ export default class SPTermStorePickerService {
             returnTerms.push(this.convertTermToPickerTerm(term));
           });
 
-          sessionStorage.setItem(anchorId, JSON.stringify(returnTerms));
+          try {
+            if (useSessionStorage && window.sessionStorage) {
+              window.sessionStorage.setItem(anchorId, JSON.stringify(returnTerms));
+            }
+          } catch (error) {
+            // Do nothing
+          }
         }
       } else {
         terms.forEach(term => {
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
