Enhancement for #69

pnp · Jun 12, 2018 · a2e5d33 · a2e5d33
1 parent d4fc573
commit a2e5d33
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 33 deletions.
diff --git a/CHANGELOG.json b/CHANGELOG.json
@@ -6,10 +6,11 @@
         "new": [],
         "enhancements": [
           "Add `npm postinstall` script to automatically add the localization config [#64](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/64)",
+          "Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)",
           "Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)",
           "Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)",
-          "Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)",
-          "Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control"
+          "Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control. Related to previous enhancement.",
+          "Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)"
         ],
         "fixes": [
           "`PropertyFieldPeoplePicker` validation error does not clear as expected [#68](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/68)"

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,10 +5,11 @@
 **Enhancements**
 
 - Add `npm postinstall` script to automatically add the localization config [#64](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/64)
+- Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)
 - Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)
 - Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)
-- Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)
-- Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control
+- Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control. Related to previous enhancement.
+- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)
 
 **Fixes**
 

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -5,10 +5,11 @@
 **Enhancements**
 
 - Add `npm postinstall` script to automatically add the localization config [#64](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/64)
+- Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)
 - Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)
 - Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)
-- Add a description to the `PropertyFieldCollectionData` panel [#67](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/67)
-- Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control
+- Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control. Related to previous enhancement.
+- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)
 
 **Fixes**
 

diff --git a/docs/documentation/docs/controls/PropertyFieldTermPicker.md b/docs/documentation/docs/controls/PropertyFieldTermPicker.md
@@ -84,6 +84,7 @@ The `PropertyFieldTermPicker` control can be configured with the following prope
 | limitByTermsetNameOrID | string | no | Limit the terms that can be picked by the Term Set name or ID. |
 | hideTermStoreName | boolean | no | Specifies if you want to show or hide the term store name from the panel. |
 | isTermSetSelectable | boolean | no | Specify if the term set 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. |
 | onPropertyChange | function | yes | Defines a onPropertyChange function to raise when the date gets changed. |
 | properties | any | yes | Parent web part properties, this object is use to update the property value.  |
 | key | string | yes | An unique key that indicates the identity of this control. |

diff --git a/src/propertyFields/termPicker/IPropertyFieldTermPicker.ts b/src/propertyFields/termPicker/IPropertyFieldTermPicker.ts
@@ -142,6 +142,10 @@ export interface IPropertyFieldTermPickerProps {
    * Specify if the term set itself is selectable in the tree view
    */
   isTermSetSelectable?: boolean;
+  /**
+   * Specify which terms should be disabled in the term set so that they cannot be selected
+   */
+  disabledTermIds?: string[];
 }
 
 /**

diff --git a/src/propertyFields/termPicker/IPropertyFieldTermPickerHost.ts b/src/propertyFields/termPicker/IPropertyFieldTermPickerHost.ts
@@ -32,6 +32,7 @@ export interface ITermGroupProps extends ITermChanges {
   termsService: SPTermStorePickerService;
   multiSelection: boolean;
   isTermSetSelectable?: boolean;
+  disabledTermIds?: string[];
 }
 
 export interface ITermGroupState {
@@ -45,6 +46,7 @@ export interface ITermSetProps extends ITermChanges {
   autoExpand: () => void;
   multiSelection: boolean;
   isTermSetSelectable?: boolean;
+  disabledTermIds?: string[];
 }
 
 export interface ITermSetState {
@@ -57,6 +59,7 @@ export interface ITermProps extends ITermChanges {
   termset: string;
   term: ITerm;
   multiSelection: boolean;
+  disabled: boolean;
 }
 
 export interface ITermState {

diff --git a/src/propertyFields/termPicker/PropertyFieldTermPicker.ts b/src/propertyFields/termPicker/PropertyFieldTermPicker.ts
@@ -29,6 +29,7 @@ class PropertyFieldTermPickerBuilder implements IPropertyPaneField<IPropertyFiel
   private panelTitle: string;
   private hideTermStoreName: boolean;
   private isTermSetSelectable: boolean;
+  private disabledTermIds: string[];
 
   public onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void { }
   private customProperties: any;
@@ -57,6 +58,7 @@ class PropertyFieldTermPickerBuilder implements IPropertyPaneField<IPropertyFiel
     this.limitByTermsetNameOrID = _properties.limitByTermsetNameOrID;
     this.hideTermStoreName = _properties.hideTermStoreName;
     this.isTermSetSelectable = _properties.isTermSetSelectable;
+    this.disabledTermIds = _properties.disabledTermIds;
 
     if (_properties.disabled === true) {
       this.disabled = _properties.disabled;
@@ -91,6 +93,7 @@ class PropertyFieldTermPickerBuilder implements IPropertyPaneField<IPropertyFiel
       limitByTermsetNameOrID: this.limitByTermsetNameOrID,
       hideTermStoreName: this.hideTermStoreName,
       isTermSetSelectable: this.isTermSetSelectable,
+      disabledTermIds: this.disabledTermIds,
       context: this.context,
       onDispose: this.dispose,
       onRender: this.render,

diff --git a/src/propertyFields/termPicker/PropertyFieldTermPickerHost.tsx b/src/propertyFields/termPicker/PropertyFieldTermPickerHost.tsx
@@ -290,6 +290,7 @@ export default class PropertyFieldTermPickerHost extends React.Component<IProper
                   onChanged={this.termsFromPickerChanged}
                   allowMultipleSelections={this.props.allowMultipleSelections}
                   isTermSetSelectable={this.props.isTermSetSelectable}
+                  disabledTermIds={this.props.disabledTermIds}
                 />
               </td>
               <td className={styles.termFieldRow}>
@@ -335,7 +336,15 @@ export default class PropertyFieldTermPickerHost extends React.Component<IProper
                   }
                   {
                     termStore.Groups._Child_Items_.map((group) => {
-                      return <TermGroup key={group.Id} group={group} termstore={termStore.Id} termsService={this.termsService} activeNodes={this.state.activeNodes} changedCallback={this.termsChanged} multiSelection={this.props.allowMultipleSelections} isTermSetSelectable={this.props.isTermSetSelectable} />;
+                      return <TermGroup key={group.Id} 
+                                        group={group} 
+                                        termstore={termStore.Id} 
+                                        termsService={this.termsService} 
+                                        activeNodes={this.state.activeNodes} 
+                                        changedCallback={this.termsChanged} 
+                                        multiSelection={this.props.allowMultipleSelections} 
+                                        isTermSetSelectable={this.props.isTermSetSelectable} 
+                                        disabledTermIds={this.props.disabledTermIds} />;
                     })
                   }
                 </div>

diff --git a/src/propertyFields/termPicker/Term.tsx b/src/propertyFields/termPicker/Term.tsx
@@ -58,7 +58,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}
+          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/propertyFields/termPicker/TermGroup.tsx b/src/propertyFields/termPicker/TermGroup.tsx
@@ -54,7 +54,16 @@ export default class TermGroup extends React.Component<ITermGroupProps, ITermGro
         <div style={styleProps}>
           {
             this.props.group.TermSets._Child_Items_.map(termset => {
-              return <TermSet key={termset.Id} termset={termset} termstore={this.props.termstore} termsService={this.props.termsService} autoExpand={this._autoExpand} activeNodes={this.props.activeNodes} changedCallback={this.props.changedCallback} multiSelection={this.props.multiSelection} isTermSetSelectable={this.props.isTermSetSelectable} />;
+              return <TermSet key={termset.Id} 
+                              termset={termset} 
+                              termstore={this.props.termstore} 
+                              termsService={this.props.termsService} 
+                              autoExpand={this._autoExpand} 
+                              activeNodes={this.props.activeNodes} 
+                              changedCallback={this.props.changedCallback} 
+                              multiSelection={this.props.multiSelection} 
+                              isTermSetSelectable={this.props.isTermSetSelectable}
+                              disabledTermIds={this.props.disabledTermIds} />;
             })
           }
         </div>

diff --git a/src/propertyFields/termPicker/TermPicker.tsx b/src/propertyFields/termPicker/TermPicker.tsx
@@ -23,6 +23,7 @@ export interface ITermPickerProps {
   value: IPickerTerms;
   allowMultipleSelections: boolean;
   isTermSetSelectable: boolean;
+  disabledTermIds: string[];
   onChanged: (items: IPickerTerm[]) => void;
 }
 
@@ -105,12 +106,13 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
    * When Filter Changes a new search for suggestions
    */
   private async onFilterChanged(filterText: string, tagList: IPickerTerm[]): Promise<IPickerTerm[]> {
+    const { context, termPickerHostProps, allowMultipleSelections, isTermSetSelectable, disabledTermIds } = this.props;
     // Only allow to select other tags if multi-selection is enabled
-    if (filterText !== "" && (this.props.allowMultipleSelections || tagList.length === 0)) {
-      let termsService = new SPTermStorePickerService(this.props.termPickerHostProps, this.props.context);
+    if (filterText !== "" && (allowMultipleSelections || tagList.length === 0)) {
+      let termsService = new SPTermStorePickerService(termPickerHostProps, context);
       let terms = await termsService.searchTermsByName(filterText);
       // Check if the termset can be selected
-      if (this.props.isTermSetSelectable) {
+      if (isTermSetSelectable) {
         // Retrieve the current termset
         const termSets = await termsService.getTermSets();
         // Check if termset was retrieved and if it contains the filter value
@@ -131,8 +133,19 @@ export default class TermPicker extends React.Component<ITermPickerProps, ITermP
       // Filter out the terms which are already set
       const filteredTerms = [];
       for (const term of terms) {
-        if (tagList.filter(tag => tag.key === term.key).length === 0) {
-          filteredTerms.push(term);
+        let canBePicked = true;
+        // Check if the term is in the disabled list
+        if (disabledTermIds && disabledTermIds.length > 0) {
+          if (disabledTermIds.indexOf(term.key) !== -1) {
+            canBePicked = false;
+          }
+        }
+        // Check if the term can be used
+        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/propertyFields/termPicker/TermSet.tsx b/src/propertyFields/termPicker/TermSet.tsx
@@ -109,7 +109,19 @@ export default class TermSet extends React.Component<ITermSetProps, ITermSetStat
             <div style={styleProps}>
               {
                 this.state.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} />;
+                  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;
+                  }
+
+                  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/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts b/src/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts
@@ -160,6 +160,27 @@ export default class PropertyControlsTestWebPart extends BaseClientSideWebPart<I
                   ],
                   disabled: false
                 }),
+                PropertyFieldTermPicker('terms', {
+                  label: 'Select terms',
+                  panelTitle: 'Select terms',
+                  initialValues: this.properties.terms,
+                  allowMultipleSelections: true,
+                  excludeSystemGroup: false,
+                  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"],
+                  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+                  properties: this.properties,
+                  context: this.context,
+                  disabled: false,
+                  onGetErrorMessage: null,
+                  deferredValidationTime: 0,
+                  //limitByGroupNameOrID: 'Hockey Example',
+                  // limitByTermsetNameOrID: 'Countries',
+                  isTermSetSelectable: true,
+                  key: 'termSetsPickerFieldId',
+                  hideTermStoreName: true
+                }),
                 PropertyFieldNumber("numberValue", {
                   key: "numberValue",
                   label: "Number value only",
@@ -249,24 +270,6 @@ export default class PropertyControlsTestWebPart extends BaseClientSideWebPart<I
                   deferredValidationTime: 0,
                   key: 'multiListPickerFieldId'
                 }),
-                PropertyFieldTermPicker('terms', {
-                  label: 'Select terms',
-                  panelTitle: 'Select terms',
-                  initialValues: this.properties.terms,
-                  allowMultipleSelections: true,
-                  excludeSystemGroup: false,
-                  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
-                  properties: this.properties,
-                  context: this.context,
-                  disabled: false,
-                  onGetErrorMessage: null,
-                  deferredValidationTime: 0,
-                  //limitByGroupNameOrID: 'Hockey Example',
-                  limitByTermsetNameOrID: 'Countries',
-                  isTermSetSelectable: true,
-                  key: 'termSetsPickerFieldId',
-                  hideTermStoreName: true
-                }),
                 PropertyFieldDateTimePicker('datetime', {
                   label: 'Select the date and time',
                   disabled: false,