Added property to disable children #82

pnp · Jun 8, 2018 · b27fb2c · b27fb2c
1 parent 62609d0
commit b27fb2c
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 **Enhancements**
 
-- Added a property to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)
+- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)
 
 ## 1.4.0
 

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -4,7 +4,7 @@
 
 **Enhancements**
 
-- Added a property to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)
+- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)
 
 ## 1.4.0
 

diff --git a/docs/documentation/docs/controls/TaxonomyPicker.md b/docs/documentation/docs/controls/TaxonomyPicker.md
@@ -69,6 +69,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | onChange | function | no |  captures the event of when the terms in the picker has changed. |
 | isTermSetSelectable | boolean | no | Specify if the TermSet itself is selectable in the tree view. |
 | 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. |
 
 Interface `IPickerTerm`

diff --git a/src/controls/taxonomyPicker/ITaxonomyPicker.ts b/src/controls/taxonomyPicker/ITaxonomyPicker.ts
@@ -44,6 +44,10 @@ export interface ITaxonomyPickerProps  {
    * Specify which terms should be disabled in the term set so that they cannot be selected
    */
   disabledTermIds?: string[];
+  /**
+   * Specify if you want to disable the child terms when their parent is disabled
+   */
+  disableChildrenOfDisabledParents?: boolean;
   /**
    * Whether the property pane field is enabled or not.
    */
@@ -85,6 +89,7 @@ export interface ITermChanges {
   changedCallback: (term: ITerm, checked: boolean) => void;
   activeNodes?: IPickerTerms;
   disabledTermIds?: string[];
+  disableChildrenOfDisabledParents?: boolean;
 }
 
 
@@ -108,6 +113,7 @@ export interface ITermProps extends ITermChanges {
   termset: string;
   term: ITerm;
   multiSelection: boolean;
+  disabled: boolean;
 }
 
 export interface ITermState {

diff --git a/src/controls/taxonomyPicker/TaxonomyPicker.tsx b/src/controls/taxonomyPicker/TaxonomyPicker.tsx
@@ -240,7 +240,8 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
                   isTermSetSelectable={this.props.isTermSetSelectable}
                   onChanged={this.termsFromPickerChanged}
                   allowMultipleSelections={this.props.allowMultipleSelections}
-                  disabledTermIds={this.props.disabledTermIds} />
+                  disabledTermIds={this.props.disabledTermIds}
+                  disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents} />
               </td>
               <td className={styles.termFieldRow}>
                 <IconButton disabled={this.props.disabled} iconProps={{ iconName: 'Tag' }} onClick={this.onOpenPanel} />
@@ -283,6 +284,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
                             termSetSelectedChange={this.termSetSelectedChange}
                             activeNodes={this.state.activeNodes}
                             disabledTermIds={this.props.disabledTermIds}
+                            disableChildrenOfDisabledParents={this.props.disableChildrenOfDisabledParents}
                             changedCallback={this.termsChanged}
                             multiSelection={this.props.allowMultipleSelections} />
               </div>

diff --git a/src/controls/taxonomyPicker/Term.tsx b/src/controls/taxonomyPicker/Term.tsx
@@ -48,19 +48,6 @@ export default class Term extends React.Component<ITermProps, ITermState> {
     }
   }
 
-  /**
-   * Check if the current term needs to be disabled
-   */
-  private checkIfTermIsDisabled(): boolean {
-    // Check if disabled term IDs are provided
-    if (this.props.disabledTermIds && this.props.disabledTermIds.length > 0) {
-      // Check if the current term ID exists in the disabled term IDs array
-      return this.props.disabledTermIds.indexOf(this.props.term.Id) !== -1;
-    }
-
-    return false;
-  }
-
   /**
    * Default React render
    */
@@ -73,7 +60,7 @@ export default class Term extends React.Component<ITermProps, ITermState> {
       <div className={`${styles.listItem} ${styles.term}`} style={styleProps}>
         <Checkbox
           checked={this.state.selected}
-          disabled={this.props.term.IsDeprecated || this.checkIfTermIsDisabled()}
+          disabled={this.props.term.IsDeprecated || this.props.disabled}
           className={this.props.term.IsDeprecated ? styles.termDisabled : styles.termEnabled}
           label={this.props.term.Name}
           onChange={this._handleChange} />

diff --git a/src/controls/taxonomyPicker/TermParent.tsx b/src/controls/taxonomyPicker/TermParent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Spinner, SpinnerType } from 'office-ui-fabric-react/lib/Spinner';
 import { ITermParentProps, ITermParentState } from './ITaxonomyPicker';
-import { ITerm, ITermSet } from '../../services/ISPTermStorePickerService';
+import { ITerm } from '../../services/ISPTermStorePickerService';
 import { EXPANDED_IMG, COLLAPSED_IMG, TERMSET_IMG, TERM_IMG } from './TaxonomyPicker';
 import Term from './Term';
 
@@ -87,11 +87,29 @@ export default class TermParent extends React.Component<ITermParentProps, ITermP
     // Check if the terms have been loaded
     if (this.state.loaded) {
       if (this._terms.length > 0) {
+        let disabledPaths = [];
         termElm = (
           <div style={styleProps}>
             {
               this._terms.map(term => {
-                return <Term key={term.Id} term={term} termset={this.props.termset.Id} activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback} multiSelection={this.props.multiSelection} disabledTermIds={this.props.disabledTermIds} />;
+                // debugger;
+                let disabled = false;
+                if (this.props.disabledTermIds && this.props.disabledTermIds.length > 0) {
+                  // Check if the current term ID exists in the disabled term IDs array
+                  disabled = this.props.disabledTermIds.indexOf(term.Id) !== -1;
+                  if (disabled) {
+                    // Push paths to the disabled list
+                    disabledPaths.push(term.PathOfTerm);
+                  }
+                }
+
+                if (this.props.disableChildrenOfDisabledParents) {
+                  // Check if parent is disabled
+                  const parentPath = disabledPaths.filter(p => term.PathOfTerm.indexOf(p) !== -1);
+                  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} />;
               })
             }
           </div>

diff --git a/src/controls/taxonomyPicker/TermPicker.tsx b/src/controls/taxonomyPicker/TermPicker.tsx
@@ -8,6 +8,7 @@ import { IWebPartContext } from '@microsoft/sp-webpart-base';
 import * as strings from 'ControlStrings';
 import { Icon } from 'office-ui-fabric-react';
 import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import { ITermSet } from '../../services/ISPTermStorePickerService';
 
 export class TermBasePicker extends BasePicker<IPickerTerm, IBasePickerProps<IPickerTerm>>
 {
@@ -26,11 +27,13 @@ export interface ITermPickerProps {
   allowMultipleSelections : boolean;
   isTermSetSelectable?: boolean;
   disabledTermIds?: string[];
+  disableChildrenOfDisabledParents?: boolean;
 
   onChanged: (items: IPickerTerm[]) => void;
 }
 
 export default class TermPicker extends React.Component<ITermPickerProps, ITermPickerState> {
+  private allTerms: ITermSet = null;
 
   /**
    * Constructor method
@@ -126,14 +129,45 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
       }
       // Filter out the terms which are already set
       const filteredTerms = [];
+      const { disabledTermIds, disableChildrenOfDisabledParents } = this.props;
       for (const term of terms) {
+        let canBePicked = true;
+
         // Check if term is not disabled
-        if (this.props.disabledTermIds && this.props.disabledTermIds.length > 0 && this.props.disabledTermIds.indexOf(term.key) !== -1) {
-          break;
+        if (disabledTermIds && disabledTermIds.length > 0) {
+          // Check if current term need to be disabled
+          if (disabledTermIds.indexOf(term.key) !== -1) {
+            canBePicked = false;
+          } else {
+            // Check if child terms need to be disabled
+            if (disableChildrenOfDisabledParents) {
+              // Check if terms were already retrieved
+              if (!this.allTerms) {
+                this.allTerms = await termsService.getAllTerms(this.props.termPickerHostProps.termsetNameOrID);
+              }
+
+              // Check if there are terms retrieved
+              if (this.allTerms.Terms && this.allTerms.Terms.length > 0) {
+                // Find the disabled parents
+                const disabledParents = this.allTerms.Terms.filter(t => disabledTermIds.indexOf(t.Id) !== -1);
+                // Check if disabled parents were found
+                if (disabledParents && disabledParents.length > 0) {
+                  // Check if the current term lives underneath a disabled parent
+                  const findTerm = disabledParents.filter(pt => term.path.indexOf(pt.PathOfTerm) !== -1);
+                  if (findTerm && findTerm.length > 0) {
+                    canBePicked = false;
+                  }
+                }
+              }
+            }
+          }
         }
-        // Only retrieve the terms which are not yet tagged
-        if (tagList.filter(tag => tag.key === term.key).length === 0) {
-          filteredTerms.push(term);
+
+        if (canBePicked) {
+          // Only retrieve the terms which are not yet tagged
+          if (tagList.filter(tag => tag.key === term.key).length === 0) {
+            filteredTerms.push(term);
+          }
         }
       }
       return filteredTerms;

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -223,7 +223,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   allowMultipleSelections={true}
                   termsetNameOrID="b3e9b754-2593-4ae6-abc2-35345402e186"
                   // anchorId="0ec2f948-3978-499e-9d3f-e51c4494d44c"
-                  disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
+                  // disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
+                  disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "73d18756-20af-41de-808c-2a1e21851e44", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
+                  // disabledTermIds={["cd6f6d3c-672d-4244-9320-c1e64cc0626f", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
+                  disableChildrenOfDisabledParents={true}
                   panelTitle="Select Term"
                   label="Taxonomy Picker"
                   context={this.props.context}