Add TermActions unctionality.

Author: Piotr Siatka

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -1,8 +1,8 @@
 import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
 import { IPickerTerms } from './ITermPicker';
-import { ITermStore, IGroup, ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
-import SPTermStorePickerService from '../../services/SPTermStorePickerService';
+import { ITermSet, ITerm } from '../../services/ISPTermStorePickerService';
 import { IWebPartContext } from '@microsoft/sp-webpart-base';
+import { ITermActions } from './termActions/ITermsActions';
 
 /**
  * PropertyFieldTermPickerHost properties interface
@@ -52,6 +52,17 @@ export interface ITaxonomyPickerProps  {
    * Whether the property pane field is enabled or not.
    */
   disabled?: boolean;
+
+  /**
+   * Include standard term actions.
+   */
+  includeDefaultTermActions?: boolean;
+
+  /**
+   * Specifies the available term actions and their basic properties.
+   */
+  termActions?: ITermActions;
+
   /**
    * The method is used to get the validation error message and determine whether the input value is valid or not.
    *
@@ -77,12 +88,12 @@ export interface ITaxonomyPickerProps  {
  * PropertyFieldTermPickerHost state interface
  */
 export interface ITaxonomyPickerState {
-
   termSetAndTerms? : ITermSet;
   errorMessage?: string;
   openPanel?: boolean;
   loaded?: boolean;
   activeNodes?: IPickerTerms;
+  termActions?: ITermActions;
 }
 
 export interface ITermChanges {
@@ -99,6 +110,7 @@ export interface ITermParentProps extends ITermChanges {
   anchorId? : string;
   isTermSetSelectable?: boolean;
 
+  termActions?: ITermActions;
   autoExpand: () => void;
   termSetSelectedChange?: (termSet: ITermSet, isChecked: boolean) => void;
 }
@@ -114,8 +126,10 @@ export interface ITermProps extends ITermChanges {
   term: ITerm;
   multiSelection: boolean;
   disabled: boolean;
+  termActions?: ITermActions;
 }
 
 export interface ITermState {
   selected?: boolean;
+  termLabel: string;
 }

src/controls/taxonomyPicker/ITermPicker.ts

@@ -1,8 +1,6 @@
 import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
 import { IWebPartContext } from '@microsoft/sp-webpart-base';
 
-
-
 /**
  * Selected terms
  */

src/controls/taxonomyPicker/TaxonomyPicker.module.scss

@@ -1,3 +1,7 @@
+.contextualMenu {
+  display: inline-block
+}
+
 .listItem {
   height: 36px;
   line-height: 36px;

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -7,13 +7,15 @@ import TermPicker from './TermPicker';
 import { IPickerTerms, IPickerTerm } from './ITermPicker';
 import { ITaxonomyPickerProps, ITaxonomyPickerState } from './ITaxonomyPicker';
 import SPTermStorePickerService from './../../services/SPTermStorePickerService';
-import { ITermSet, IGroup, ITerm } from './../../services/ISPTermStorePickerService';
+import { ITermSet, ITerm } from './../../services/ISPTermStorePickerService';
+import { TermLabelAction, ITermActions } from './termActions';
+
 import styles from './TaxonomyPicker.module.scss';
 import { sortBy, uniqBy, cloneDeep, isEqual } from '@microsoft/sp-lodash-subset';
 import TermParent from './TermParent';
 import FieldErrorMessage from './ErrorMessage';
-import * as telemetry from '../../common/telemetry';
 
+import * as telemetry from '../../common/telemetry';
 
 /**
  * Image URLs / Base64
@@ -53,6 +55,7 @@ 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);
   }
 
   /**
@@ -76,24 +79,29 @@ 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();
     this.termsService.getAllTerms(this.props.termsetNameOrID).then((response: ITermSet) => {
       // Check if a response was retrieved
-      if (response !== null) {
-        this.setState({
-          termSetAndTerms: response,
-          loaded: true
-        });
-      } else {
-        this.setState({
-          termSetAndTerms: null,
-          loaded: true
-        });
-      }
+      let termSetAndTerms = response ? response : null;
+      this.setState({
+        termSetAndTerms,
+        loaded: true,
+        termActions
+      });
     });
   }
 
@@ -304,7 +312,10 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
                             disabledTermIds={this.props.disabledTermIds}
                             disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents}
                             changedCallback={this.termsChanged}
-                            multiSelection={this.props.allowMultipleSelections} />
+                            multiSelection={this.props.allowMultipleSelections}
+
+                            termActions={this.state.termActions}
+                            />
               </div>
             )
           }

src/controls/taxonomyPicker/Term.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Checkbox, ICheckboxStyles } from 'office-ui-fabric-react/lib/Checkbox';
 import { ITermProps, ITermState } from './ITaxonomyPicker';
 
 import styles from './TaxonomyPicker.module.scss';
+import TermActionsControl from './termActions/TermActionsControl';
+import { UpdateAction, UpdateType } from './termActions';
 
 
 /**
@@ -17,7 +19,8 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     let active = this.props.activeNodes.filter(item => item.key === this.props.term.Id);
 
     this.state = {
-      selected: active.length > 0
+      selected: active.length > 0,
+      termLabel: this.props.term.Name
     };
 
     this._handleChange = this._handleChange.bind(this);
@@ -43,7 +46,8 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     if (!this.props.multiSelection) {
       let active = nextProps.activeNodes.filter(item => item.key === this.props.term.Id);
       this.state = {
-        selected: active.length > 0
+        selected: active.length > 0,
+        termLabel: this.state.termLabel
       };
     }
   }
@@ -63,23 +67,49 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     return styles.termEnabled;
   }
 
+  private termActionCallback = (updateAction: UpdateAction): void => {
+    if (updateAction == null) {
+      return;
+    }
+
+    if (updateAction.updateActionType === UpdateType.updateTermLabel) {
+      this.props.term.Name = updateAction.value;
+      this.setState({
+        termLabel: updateAction.value
+      })
+    }
+  }
+
   /**
    * Default React render
    */
   public render(): JSX.Element {
     const styleProps: React.CSSProperties = {
       marginLeft: `${(this.props.term.PathDepth * 30)}px`
     };
+    const checkBoxStyle: React.CSSProperties = {
+      display: "inline-flex"
+    }
 
     return (
-      <div className={`${styles.listItem} ${styles.term}`} style={styleProps}>
-        <Checkbox
-          checked={this.state.selected}
-          disabled={this.props.term.IsDeprecated || !this.props.term.IsAvailableForTagging || this.props.disabled}
-          className={this.getClassName()}
-          label={this.props.term.Name}
-          onChange={this._handleChange} />
+      <div>
+        <div className={`${styles.listItem} ${styles.term}`} style={styleProps}>
+          <div>
+            <Checkbox
+              checked={this.state.selected}
+              style={checkBoxStyle}
+              disabled={this.props.term.IsDeprecated || !this.props.term.IsAvailableForTagging || this.props.disabled}
+              className={this.getClassName()}
+              label={this.state.termLabel}
+              onChange={this._handleChange} />
+          </div>
+          {
+            this.props.termActions &&
+            <TermActionsControl term={this.props.term} termActions={this.props.termActions} termActionCallback={this.termActionCallback} />
+          }
+        </div>
       </div>
+
     );
   }
 }

src/controls/taxonomyPicker/TermParent.tsx

@@ -108,7 +108,7 @@ 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} />;
+                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} />;
               })
             }
           </div>

src/controls/taxonomyPicker/termActions/ButtonTermAction.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
+import { ITermAction, TermActionsDisplayStyle, IConreteTermActionProps } from './ITermsActions';
+
+export default class ButtonTermAction extends React.Component<IConreteTermActionProps> {
+  public render(): React.ReactElement<IConreteTermActionProps> {
+    const { term, termActions } = this.props;
+
+    return (
+      <div style={{ display: 'flex', alignItems: 'stretch', height: '32px' }}>
+        {
+          termActions &&
+          termActions.map(termAction => {
+            const { name, text, iconName } = this._prepareCommandBarButton(termAction);
+            return (
+              <div>
+                <CommandBarButton split={true}
+                  onClick={() => { this._onActionExecute(termAction); }}
+                  iconProps={{ iconName: iconName }}
+                  text={text}
+                  name={name}
+                  key={term.Id}
+                  style={this._getTermActionActionButtonStyle()}
+                />
+              </div>
+            )
+          })
+        }
+      </div>
+    );
+  }
+
+
+  private _prepareCommandBarButton = (termAction: ITermAction): { name: string, text: string, iconName: string } => {
+    let name, text, iconName = "";
+
+    if (this.props.displayStyle && (this.props.displayStyle === TermActionsDisplayStyle.text || this.props.displayStyle === TermActionsDisplayStyle.textAndIcon)) {
+      name = termAction.displayText;
+      text = termAction.displayText;
+    }
+    if (this.props.displayStyle && (this.props.displayStyle === TermActionsDisplayStyle.icon || this.props.displayStyle === TermActionsDisplayStyle.textAndIcon)) {
+      iconName = termAction.iconName;
+    }
+
+    return { name, text, iconName };
+  }
+
+  private _getTermActionActionButtonStyle = (): React.CSSProperties => {
+    let result: React.CSSProperties = {
+      backgroundColor: "transparent",
+      width: "32px",
+      height: "32px"
+    }
+
+    return result;
+  }
+
+  private _onActionExecute = async (termAction: ITermAction) => {
+    const updateAction = await termAction.actionCallback(this.props.term);
+    this.props.termActionCallback(updateAction);
+  }
+}

src/controls/taxonomyPicker/termActions/DefaultTermActions.ts

@@ -0,0 +1,52 @@
+import { ITerm } from "../../../services/ISPTermStorePickerService";
+import SPTermStorePickerService from "../../../services/SPTermStorePickerService";
+
+import { ITermAction, UpdateAction, UpdateType } from ".";
+import { findIndex } from "@microsoft/sp-lodash-subset";
+
+/**
+ * TermAction is responsible to obtain different labels for the term.
+ */
+export class TermLabelAction implements ITermAction {
+  public iconName: string = "LocaleLanguage";
+  public displayText: string = "Get Labels"
+  public id: string = "TermLabelActionId";
+
+  private _spTermsService: SPTermStorePickerService;
+  private _labels: string[];
+  private _processedTerms: ITerm[];
+
+  constructor(spTermService: SPTermStorePickerService) {
+    this._spTermsService = spTermService;
+    this._processedTerms = [];
+  }
+
+  public applyToTerm = (currentTerm: ITerm): boolean => {
+    const termIndex = findIndex(this._processedTerms, term => term.Id == currentTerm.Id);
+    if (termIndex >= 0) {
+      return false;
+    }
+    return true;
+  }
+
+  public actionCallback = async (currentTerm: ITerm): Promise<UpdateAction> => {
+    try {
+      // Set pointer to loading
+      let updateAction : UpdateAction = null;
+      this._labels = await this._spTermsService.getTermLabels(currentTerm.Id);
+
+      if (this._labels) {
+        let termLabel: string = this._labels.join(" ; ");
+        updateAction = {
+          updateActionType: UpdateType.updateTermLabel,
+          value: termLabel
+        };
+        return updateAction;
+      }
+      return null;
+    } catch (error) {
+      console.log(error);
+      return null;
+    }
+  }
+}