Implement term actions functionality. Refactor. Fix bugs. Documentation.

Author: Piotr Siatka

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -42,6 +42,7 @@ import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/Taxon
   context={this.props.context}
   onChange={this.onTaxPickerChange}
   isTermSetSelectable={false}
+  termActions={termActions}
 />
 ```
 
@@ -71,6 +72,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | disabledTermIds | string[] | no | Specify which terms should be disabled in the term set so that they cannot be selected. |
 | disableChildrenOfDisabledParents | boolean | no | Specify if you want to disable the child terms when their parent is disabled. |
 | 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. |
 
 Interface `IPickerTerm`
 
@@ -86,4 +88,18 @@ Interface `IPickerTerms`
 
 An Array of IPickerTerm
 
+Interface `ITermActions`
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| actions | ITermAction[] | yes | The array of supported actions |
+| termActionsDisplayStyle | TermActionsDisplayStyle | no | Defines how to display term action button, available options: text (default), icon, text and icon |
+| termActionsDisplayMode | TermActionsDisplayMode | no | Defines how to display term actions, as buttons (default) or dropdown |
+
+Interface `ITermAction`
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| id | string | yes | Unique id of the term action |
+| displayText | string | no | Name of the action |
+| iconName | string | no | Name of the icon to be used to display action |
+
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -93,7 +93,6 @@ export interface ITaxonomyPickerState {
   openPanel?: boolean;
   loaded?: boolean;
   activeNodes?: IPickerTerms;
-  termActions?: ITermActions;
 }
 
 export interface ITermChanges {
@@ -112,6 +111,7 @@ export interface ITermParentProps extends ITermChanges {
 
   termActions?: ITermActions;
   autoExpand: () => void;
+  updateTaxonomyTree: () => void;
   termSetSelectedChange?: (termSet: ITermSet, isChecked: boolean) => void;
 }
 
@@ -127,6 +127,8 @@ export interface ITermProps extends ITermChanges {
   multiSelection: boolean;
   disabled: boolean;
   termActions?: ITermActions;
+
+  updateTaxonomyTree: () => void;
 }
 
 export interface ITermState {

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -55,7 +55,6 @@ 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.prepareTermActions = this.prepareTermActions.bind(this);
   }
 
   /**
@@ -79,32 +78,36 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     }
   }
 
-  private prepareTermActions = (): ITermActions => {
-    let termActions = this.props.termActions ? cloneDeep(this.props.termActions) : null;
-    // Add default available actions
-    if (termActions && termActions.addDefaultActions) {
-      termActions.concreateActions.unshift(new TermLabelAction(this.termsService));
-    }
-    return termActions;
-  }
-
   /**
    * Loads the list from SharePoint current web site
    */
   private loadTermStores(): void {
     this.termsService = new SPTermStorePickerService(this.props, this.props.context);
-    let termActions = this.prepareTermActions();
+
+    if (this.props.termActions) {
+      this.props.termActions.actions.map(x => {
+        x.initialize(this.termsService);
+      });
+    }
     this.termsService.getAllTerms(this.props.termsetNameOrID).then((response: ITermSet) => {
       // Check if a response was retrieved
       let termSetAndTerms = response ? response : null;
       this.setState({
         termSetAndTerms,
-        loaded: true,
-        termActions
+        loaded: true
       });
     });
   }
 
+  /**
+   * Force update of the taxonomy tree - required by term action in case the term has been added, deleted or moved.
+   */
+  private updateTaxonomyTree(): void {
+    this.setState({
+      termSetAndTerms: this.state.termSetAndTerms
+    });
+  }
+
   /**
    * Open the right Panel
    */
@@ -314,7 +317,8 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
                             changedCallback={this.termsChanged}
                             multiSelection={this.props.allowMultipleSelections}
 
-                            termActions={this.state.termActions}
+                            updateTaxonomyTree={this.updateTaxonomyTree}
+                            termActions={this.props.termActions}
                             />
               </div>
             )

src/controls/taxonomyPicker/Term.tsx

@@ -76,7 +76,10 @@ export default class Term extends React.Component<ITermProps, ITermState> {
       this.props.term.Name = updateAction.value;
       this.setState({
         termLabel: updateAction.value
-      })
+      });
+    }
+    else {
+      this.props.updateTaxonomyTree();
     }
   }
 
@@ -89,7 +92,7 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     };
     const checkBoxStyle: React.CSSProperties = {
       display: "inline-flex"
-    }
+    };
 
     return (
       <div>

src/controls/taxonomyPicker/TermParent.tsx

@@ -108,7 +108,10 @@ export default class TermParent extends React.Component<ITermParentProps, ITermP
                   disabled = parentPath && parentPath.length > 0;
                 }
 
-                return <Term key={term.Id} term={term} termset={this.props.termset.Id} activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback} multiSelection={this.props.multiSelection} disabled={disabled} termActions={this.props.termActions} />;
+                return <Term key={term.Id} term={term} termset={this.props.termset.Id}
+                                  activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback}
+                                  multiSelection={this.props.multiSelection} disabled={disabled}
+                                  termActions={this.props.termActions} updateTaxonomyTree={this.props.updateTaxonomyTree}/>;
               })
             }
           </div>

src/controls/taxonomyPicker/index.ts

@@ -1,3 +1,5 @@
 export * from './ITaxonomyPicker';
 export * from './TaxonomyPicker';
-export * from './ITermPicker';
+export * from './ITermPicker';
+export * from "./termActions/ITermsActions";
+export * from './termActions/TermActionsControl';

src/controls/taxonomyPicker/termActions/ButtonTermAction.tsx

@@ -23,7 +23,7 @@ export default class ButtonTermAction extends React.Component<IConreteTermAction
                   style={this._getTermActionActionButtonStyle()}
                 />
               </div>
-            )
+            );
           })
         }
       </div>
@@ -50,7 +50,7 @@ export default class ButtonTermAction extends React.Component<IConreteTermAction
       backgroundColor: "transparent",
       width: "32px",
       height: "32px"
-    }
+    };
 
     return result;
   }

src/controls/taxonomyPicker/termActions/DropdownTermAction.tsx

@@ -38,16 +38,16 @@ export class DropdownTermAction extends React.Component<IConreteTermActionProps>
         useTargetWidth = false;
       }
       if (displayStyle && (displayStyle === TermActionsDisplayStyle.icon || displayStyle === TermActionsDisplayStyle.textAndIcon)) {
-        termActionMenuItem.iconProps = { iconName: termAction.iconName }
+        termActionMenuItem.iconProps = { iconName: termAction.iconName };
       }
 
       items.push(termActionMenuItem);
-    })
+    });
 
     const contextualMenuProps: IContextualMenuProps = {
       items,
       useTargetWidth
-    }
+    };
     return contextualMenuProps;
   }
 
@@ -60,7 +60,7 @@ export class DropdownTermAction extends React.Component<IConreteTermActionProps>
       width: "14px",
       display: "inline-flex",
       padding: "0px"
-    }
+    };
 
     return result;
   }

src/controls/taxonomyPicker/termActions/ITermsActions.ts

@@ -1,4 +1,5 @@
 import { ITerm } from '../../../services/ISPTermStorePickerService';
+import SPTermStorePickerService from '../../../services/SPTermStorePickerService';
 
 export interface ITermActionsControlProps {
   /**
@@ -70,8 +71,7 @@ export interface UpdateAction {
 }
 
 export interface ITermActions {
-  addDefaultActions: boolean;
-  concreateActions: ITermAction[];
+  actions: ITermAction[];
   termActionsDisplayStyle?: TermActionsDisplayStyle;
   termActionsDisplayMode?: TermActionsDisplayMode;
 }
@@ -89,17 +89,18 @@ export interface ITermAction {
    */
   iconName?: string;
 
-  /**
-   * Specifies it the waiting dialog should be displayed when executing the action.
-   */
-  isBlocking?: boolean;
-  /**
-   * Method that verifies if the action can be applied to the term. If false, action won't be avaialable.
-   * @param currentTerm
-   */
-  applyToTerm(currentTerm: ITerm): boolean;
+   /**
+    * Method checks if the current term is supported.
+    * @param currentTerm
+    */
+  applyToTerm(currentTerm: ITerm): Promise<boolean> | boolean;
   /**
    * Method to be executed when action is fired.
    */
   actionCallback: (currentTerm: ITerm) => Promise<UpdateAction>;
+
+  /**
+   * Initializes the term action with the taxonomy servie.
+   */
+  initialize: (spTermService: SPTermStorePickerService) => Promise<void>;
 }

src/controls/taxonomyPicker/termActions/DefaultTermActions.ts renamed to src/controls/taxonomyPicker/termActions/TermActions.ts

@@ -9,18 +9,22 @@ import { findIndex } from "@microsoft/sp-lodash-subset";
  */
 export class TermLabelAction implements ITermAction {
   public iconName: string = "LocaleLanguage";
-  public displayText: string = "Get Labels"
+  public displayText: string = "Get Labels";
   public id: string = "TermLabelActionId";
 
   private _spTermsService: SPTermStorePickerService;
   private _labels: string[];
   private _processedTerms: ITerm[];
 
-  constructor(spTermService: SPTermStorePickerService) {
-    this._spTermsService = spTermService;
+  constructor() {
     this._processedTerms = [];
   }
 
+  public initialize = (spTermService: SPTermStorePickerService): Promise<void> =>  {
+    this._spTermsService = spTermService;
+    return Promise.resolve();
+  }
+
   public applyToTerm = (currentTerm: ITerm): boolean => {
     const termIndex = findIndex(this._processedTerms, term => term.Id == currentTerm.Id);
     if (termIndex >= 0) {
@@ -32,7 +36,7 @@ export class TermLabelAction implements ITermAction {
   public actionCallback = async (currentTerm: ITerm): Promise<UpdateAction> => {
     try {
       // Set pointer to loading
-      let updateAction : UpdateAction = null;
+      let updateAction: UpdateAction = null;
       this._labels = await this._spTermsService.getTermLabels(currentTerm.Id);
 
       if (this._labels) {