#578 - TaxonomyPicker enhancements

pnp · Jun 10, 2020 · d552081 · d552081
1 parent 2ee1c1d
commit d552081
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 14 deletions.
diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
@@ -10,7 +10,8 @@
           "`FolderExplorer`: Add clear button to filter text box [#553](https://github.com/pnp/sp-dev-fx-controls-react/pull/553)",
           "`TreeView`: there should be possibility to collapse the first level nodes by default [#561](https://github.com/pnp/sp-dev-fx-controls-react/issues/561)",
           "`TreeView`: Expand to selected [#559](https://github.com/pnp/sp-dev-fx-controls-react/issues/559)",
-          "`DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)"
+          "`DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [#497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)",
+          "`TaxonomyPicker`: Added the `hideTerm` and `disableTerm` actions [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)"
         ],
         "fixes": [
           "`TaxonomyPicker`: Correct the AnchorID getting all TermSet search options [#150](https://github.com/pnp/sp-dev-fx-controls-react/issues/150)",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,7 +8,8 @@
 - `FolderExplorer`: Add clear button to filter text box [#553](https://github.com/pnp/sp-dev-fx-controls-react/pull/553)
 - `TreeView`: there should be possibility to collapse the first level nodes by default [#561](https://github.com/pnp/sp-dev-fx-controls-react/issues/561)
 - `TreeView`: Expand to selected [#559](https://github.com/pnp/sp-dev-fx-controls-react/issues/559)
-- `DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)
+- `DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [#497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)
+- `TaxonomyPicker`: Added the `hideTerm` and `disableTerm` actions [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)
 
 ### Fixes
 

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -8,7 +8,8 @@
 - `FolderExplorer`: Add clear button to filter text box [#553](https://github.com/pnp/sp-dev-fx-controls-react/pull/553)
 - `TreeView`: there should be possibility to collapse the first level nodes by default [#561](https://github.com/pnp/sp-dev-fx-controls-react/issues/561)
 - `TreeView`: Expand to selected [#559](https://github.com/pnp/sp-dev-fx-controls-react/issues/559)
-- `DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)
+- `DateTimePicker`: When using the datetimePicker I would like to have an opportunity to set maximum/minimum date like in Office UI Fabric [#497](https://github.com/pnp/sp-dev-fx-controls-react/issues/497)
+- `TaxonomyPicker`: Added the `hideTerm` and `disableTerm` actions [#578](https://github.com/pnp/sp-dev-fx-controls-react/issues/578)
 
 ### Fixes
 

diff --git a/docs/documentation/docs/controls/TaxonomyPicker.md b/docs/documentation/docs/controls/TaxonomyPicker.md
@@ -47,7 +47,7 @@ import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/Taxon
 
 ```typescript
 private onTaxPickerChange(terms : IPickerTerms) {
-    console.log("Terms", terms);
+  console.log("Terms", terms);
 }
 ```
 
@@ -65,16 +65,64 @@ Since version `1.12.0`, you can apply term actions to all terms or specific ones
                 isTermSetSelectable={false}
                 termActions={{
                   actions: [{
-                    title: "Update term label",
+                    title: "Get term labels",
                     iconName: "LocaleLanguage",
-                    id: "UpdateTermLabel",
+                    id: "test",
+                    invokeActionOnRender: true,
+                    hidden: true,
                     actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                      console.log(term.Name, term.TermsCount);
                       return {
                         updateActionType: UpdateType.updateTermLabel,
                         value: `${term.Name} (updated)`
                       };
                     },
-                    applyToTerm: (term: ITerm) => (true) // Applying the action to all terms
+                    applyToTerm: (term: ITerm) => (term && term.Name && term.Name === "internal")
+                  },
+                  {
+                    title: "Hide term",
+                    id: "hideTerm",
+                    invokeActionOnRender: true,
+                    hidden: true,
+                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                      return {
+                        updateActionType: UpdateType.hideTerm,
+                        value: true
+                      };
+                    },
+                    applyToTerm: (term: ITerm) => (term && term.Name && (term.Name.toLowerCase() === "help desk" || term.Name.toLowerCase() === "multi-column valo site page"))
+                  },
+                  {
+                    title: "Disable term",
+                    id: "disableTerm",
+                    invokeActionOnRender: true,
+                    hidden: true,
+                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                      return {
+                        updateActionType: UpdateType.disableTerm,
+                        value: true
+                      };
+                    },
+                    applyToTerm: (term: ITerm) => (term && term.Name && term.Name.toLowerCase() === "secured")
+                  },
+                  {
+                    title: "Disable or hide term",
+                    id: "disableOrHideTerm",
+                    invokeActionOnRender: true,
+                    hidden: true,
+                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                      if (term.TermsCount > 0) {
+                        return {
+                          updateActionType: UpdateType.disableTerm,
+                          value: true
+                        };
+                      }
+                      return {
+                        updateActionType: UpdateType.hideTerm,
+                        value: true
+                      };
+                    },
+                    applyToTerm: (term: ITerm) => true
                   }]
                 }} />
 ```
@@ -160,13 +208,15 @@ Interface `UpdateAction`
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | updateActionType | UpdateType | yes | Defines the type of update you want to perform |
-| value | string | no | New term label value to update. Only required when you want to update the term |
+| value | string \| boolean | no | When `updateTermLabel` is used, it should return a string. When `hideTerm` or `disableTerm` are used, you should return a boolean. |
 
 Enum `UpdateType`
 
 | Value |
 | ---- |
 | updateTermLabel |
 | updateTermsTree |
+| hideTerm |
+| disableTerm |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)
diff --git a/src/controls/taxonomyPicker/ITaxonomyPicker.ts b/src/controls/taxonomyPicker/ITaxonomyPicker.ts
@@ -152,4 +152,6 @@ export interface ITermProps extends ITermChanges {
 export interface ITermState {
   selected?: boolean;
   termLabel: string;
+  hidden?: boolean;
+  disabled?: boolean;
 }
diff --git a/src/controls/taxonomyPicker/Term.tsx b/src/controls/taxonomyPicker/Term.tsx
@@ -21,7 +21,9 @@ export default class Term extends React.Component<ITermProps, ITermState> {
 
     this.state = {
       selected: active.length > 0,
-      termLabel: this.props.term.Name
+      termLabel: this.props.term.Name,
+      hidden: false,
+      disabled: false
     };
 
     this._handleChange = this._handleChange.bind(this);
@@ -75,7 +77,15 @@ export default class Term extends React.Component<ITermProps, ITermState> {
 
     if (updateAction.updateActionType === UpdateType.updateTermLabel) {
       this.setState({
-        termLabel: updateAction.value
+        termLabel: updateAction.value as string
+      });
+    } else if (updateAction.updateActionType === UpdateType.hideTerm) {
+      this.setState({
+        hidden: updateAction.value as boolean
+      });
+    } else if (updateAction.updateActionType === UpdateType.disableTerm) {
+      this.setState({
+        disabled: updateAction.value as boolean
       });
     } else {
       this.props.updateTaxonomyTree();
@@ -93,14 +103,18 @@ export default class Term extends React.Component<ITermProps, ITermState> {
       display: "inline-flex"
     };
 
+    if (this.state.hidden) {
+      return null;
+    }
+
     return (
       <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}
+              disabled={this.props.term.IsDeprecated || !this.props.term.IsAvailableForTagging || this.props.disabled || this.state.disabled}
               className={this.getClassName()}
               label={this.state.termLabel}
               onChange={this._handleChange} />

diff --git a/src/controls/taxonomyPicker/termActions/ITermsActions.ts b/src/controls/taxonomyPicker/termActions/ITermsActions.ts
@@ -64,15 +64,29 @@ export enum TermActionsDisplayStyle {
  * Specifies the action that should be applied after executing the action callback.
  */
 export enum UpdateType {
+  /**
+   * Allows you to update the label of the term
+   */
   updateTermLabel = 1,
-  updateTermsTree
+  /**
+   * Allows you to update part of the taxonomy tree
+   */
+  updateTermsTree,
+  /**
+   * Allows you to hide the term
+   */
+  hideTerm,
+  /**
+   * Allows you to disable the term
+   */
+  disableTerm
 }
 /**
  * Specifies the result that will be returned to the Term after the execution of the callback.
  */
 export interface UpdateAction {
   updateActionType: UpdateType;
-  value?: string;
+  value?: string | boolean;
 }
 
 export interface ITermActions {

diff --git a/src/services/ISPTermStorePickerService.ts b/src/services/ISPTermStorePickerService.ts
@@ -75,6 +75,7 @@ export interface ITerm {
   CustomSortOrderIndex?: number;
   PathDepth?: number;
   ParentId?: string;
+  TermsCount?: number;
   LocalCustomProperties?: {
     [property: string]: any
   };

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -665,7 +665,71 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             onChange={this._onTaxPickerChange}
             isTermSetSelectable={false}
             hideDeprecatedTags={true}
-            hideTagsNotAvailableForTagging={true} />
+            hideTagsNotAvailableForTagging={true}
+            termActions={{
+              actions: [{
+                title: "Get term labels",
+                iconName: "LocaleLanguage",
+                id: "test",
+                invokeActionOnRender: true,
+                hidden: true,
+                actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                  console.log(term.Name, term.TermsCount);
+                  return {
+                    updateActionType: UpdateType.updateTermLabel,
+                    value: `${term.Name} (updated)`
+                  };
+                },
+                applyToTerm: (term: ITerm) => (term && term.Name && term.Name === "internal")
+              },
+              {
+                title: "Hide term",
+                id: "hideTerm",
+                invokeActionOnRender: true,
+                hidden: true,
+                actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                  return {
+                    updateActionType: UpdateType.hideTerm,
+                    value: true
+                  };
+                },
+                applyToTerm: (term: ITerm) => (term && term.Name && (term.Name.toLowerCase() === "help desk" || term.Name.toLowerCase() === "multi-column valo site page"))
+              },
+              {
+                title: "Disable term",
+                id: "disableTerm",
+                invokeActionOnRender: true,
+                hidden: true,
+                actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                  return {
+                    updateActionType: UpdateType.disableTerm,
+                    value: true
+                  };
+                },
+                applyToTerm: (term: ITerm) => (term && term.Name && term.Name.toLowerCase() === "secured")
+              },
+              {
+                title: "Disable or hide term",
+                id: "disableOrHideTerm",
+                invokeActionOnRender: true,
+                hidden: true,
+                actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                  if (term.TermsCount > 0) {
+                    return {
+                      updateActionType: UpdateType.disableTerm,
+                      value: true
+                    };
+                  }
+                  return {
+                    updateActionType: UpdateType.hideTerm,
+                    value: true
+                  };
+                },
+                applyToTerm: (term: ITerm) => true
+              }],
+              termActionsDisplayMode: TermActionsDisplayMode.buttons,
+              termActionsDisplayStyle: TermActionsDisplayStyle.textAndIcon
+            }} />
 
           <DefaultButton text="Add" onClick={() => {
             this.setState({