web: components: Added filtration by group in AdvancedSelector

web/ASC.Web.Components/src/components/advanced-selector/index.js

@@ -24,6 +24,9 @@ const Container = ({
   options,
   selectedOptions,
   buttonLabel,
+  selectAllLabel,
+  groups,
+  selectedGroups,
   ...props
 }) => <div {...props} />;
 
@@ -73,7 +76,11 @@ class AdvancedSelector extends React.Component {
 
     this.state = {
       selectedOptions: this.props.selectedOptions || [],
-      selectedAll: this.props.selectedAll || false
+      selectedAll: this.props.selectedAll || false,
+      currentGroup:
+        this.props.groups && this.props.groups.length > 0
+          ? this.props.groups[0]
+          : "No groups"
     };
   }
 
@@ -82,17 +89,20 @@ class AdvancedSelector extends React.Component {
       this.setState({ selectedOptions: this.props.selectedOptions });
     }
 
-    if(this.props.isMultiSelect !== prevProps.isMultiSelect) {
+    if (this.props.isMultiSelect !== prevProps.isMultiSelect) {
       this.setState({ selectedOptions: [] });
     }
 
-    if(this.props.selectedAll !== prevProps.selectedAll) {
+    if (this.props.selectedAll !== prevProps.selectedAll) {
       this.setState({ selectedAll: this.props.selectedAll });
     }
   }
 
   onButtonClick = () => {
-    this.props.onSelect && this.props.onSelect(this.state.selectedAll ? this.props.options : this.state.selectedOptions);
+    this.props.onSelect &&
+      this.props.onSelect(
+        this.state.selectedAll ? this.props.options : this.state.selectedOptions
+      );
   };
 
   onSelect = option => {
@@ -103,7 +113,7 @@ class AdvancedSelector extends React.Component {
     const { selectedOptions } = this.state;
     const newSelectedOptions = e.target.checked
       ? [...selectedOptions, option]
-              : filter(selectedOptions, (obj) => obj.key !== option.key);
+      : filter(selectedOptions, obj => obj.key !== option.key);
 
     //console.log("onChange", option, e.target.checked, newSelectedOptions);
 
@@ -113,16 +123,24 @@ class AdvancedSelector extends React.Component {
     });
   };
 
-  onSelectedAllChange = (e) => {
+  onSelectedAllChange = e => {
     this.setState({
       selectedAll: e.target.checked,
       selectedOptions: e.target.checked ? this.props.options : []
     });
-  }
+  };
+
+  onCurrentGroupChange = option => {
+    this.setState({
+      currentGroup: option
+    });
+  };
 
   renderRow = ({ data, index, style }) => {
     const option = data[index];
-    var isChecked = this.state.selectedAll || findIndex(this.state.selectedOptions, { key: option.key }) > -1;
+    var isChecked =
+      this.state.selectedAll ||
+      findIndex(this.state.selectedOptions, { key: option.key }) > -1;
 
     //console.log("renderRow", option, isChecked, this.state.selectedOptions);
     return (
@@ -160,10 +178,20 @@ class AdvancedSelector extends React.Component {
       buttonLabel,
       selectAllLabel,
       groups,
-      selectedGroups,
+      selectedGroups
     } = this.props;
 
-    const { selectedOptions, selectedAll } = this.state;
+    const { selectedOptions, selectedAll, currentGroup } = this.state;
+
+    const filtered = filter(options, option => {
+      return (
+        option.groups &&
+        option.groups.length > 0 &&
+        option.groups.indexOf(currentGroup.key) > -1
+      );
+    });
+
+    console.log("AdvancedSelector render()", currentGroup, filtered);
 
     return (
       <StyledContainer {...this.props}>
@@ -177,31 +205,34 @@ class AdvancedSelector extends React.Component {
           value={value}
           onChange={onSearchChanged}
         />
-        {groups && groups.length > 0 && 
+        {groups && groups.length > 0 && (
           <ComboBox
             className="options_group_selector"
             isDisabled={isDisabled}
             options={groups}
-          onSelect={group => console.log('Selected group', group)}
-          selectedOption={selectedGroups[0]}
+            onSelect={group => console.log("Selected group", group)}
+            selectedOption={currentGroup}
             dropDownMaxHeight={200}
             scaled={true}
-          size='content'
-        />}
-        {isMultiSelect && 
+            size="content"
+            onSelect={this.onCurrentGroupChange}
+          />
+        )}
+        {isMultiSelect && (
           <Checkbox
             label={selectAllLabel}
             isChecked={selectedAll || selectedOptions.length === options.length}
             isIndeterminate={!selectedAll && selectedOptions.length > 0}
             className="option_select_all_checkbox"
             onChange={this.onSelectedAllChange}
-         />}
+          />
+        )}
         <FixedSizeList
           className="options_list"
           height={maxHeight}
           itemSize={32}
-          itemCount={options.length}
-          itemData={options}
+          itemCount={filtered.length}
+          itemData={filtered}
           outerElementType={CustomScrollbarsVirtualList}
         >
           {this.renderRow.bind(this)}
@@ -213,7 +244,9 @@ class AdvancedSelector extends React.Component {
             size="big"
             label={buttonLabel}
             scale={true}
-            isDisabled={!this.state.selectedOptions || !this.state.selectedOptions.length}
+            isDisabled={
+              !this.state.selectedOptions || !this.state.selectedOptions.length
+            }
             onClick={this.onButtonClick}
           />
         )}

web/ASC.Web.Storybook/stories/advanced-selector/index.stories.js

@@ -53,7 +53,7 @@ storiesOf("Components|AdvancedSelector", module)
       const additional_group = groups[getRandomInt(1, 6)];
       return {
         key: `user${index}`,
-        groups: ["group-all", additional_group],
+        groups: ["group-all", additional_group.key],
         label: `User${index + 1} (All groups, ${additional_group.label})`
       };
     });