web: components: Added group selector into AdvancedSelector

web/ASC.Web.Components/asc-web-components.code-workspace

@@ -11,6 +11,7 @@
 		"cSpell.words": [
 			"Romb",
 			"Rombs",
+			"combobox",
 			"reactstrap"
 		]
 	}

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

@@ -7,9 +7,11 @@ import { FixedSizeList } from "react-window";
 import Link from "../link";
 import Checkbox from "../checkbox";
 import Button from "../button";
+import ComboBox from "../combobox";
 import { isArrayEqual } from "../../utils/array";
 import findIndex from "lodash/findIndex";
 import filter from "lodash/filter";
+import countBy from "lodash/countBy";
 
 const Container = ({
   value,
@@ -33,6 +35,10 @@ const StyledContainer = styled(Container)`
     margin-bottom: 12px;
   }
 
+  .options_group_selector {
+    margin-bottom: 12px;
+  }
+
   .option_select_all_checkbox {
     margin-bottom: 12px;
     margin-left: 8px;
@@ -165,11 +171,21 @@ class AdvancedSelector extends React.Component {
       options,
       isMultiSelect,
       buttonLabel,
-      selectAllLabel
+      selectAllLabel,
+      groups,
+      selectedGroups,
     } = this.props;
 
     const { selectedOptions, selectedAll } = this.state;
 
+    /*const groupsWithCount = groups.map((group) => {
+      const count = countBy(options, (option) => option.groups.indexOf(group.key) > -1);
+      return {
+        key: group.key,
+        label: `${group.label} (0/${count})`
+      }
+    });*/
+
     return (
       <StyledContainer {...this.props}>
         <SearchInput
@@ -182,6 +198,17 @@ class AdvancedSelector extends React.Component {
           value={value}
           onChange={onSearchChanged}
         />
+        {groups && groups.length > 0 && 
+        <ComboBox
+          className="options_group_selector"
+          isDisabled={isDisabled}
+          options={groups}
+          onSelect={group => console.log('Selected group', group)}
+          selectedOption={selectedGroups[0]}
+          dropDownMaxHeight={200}
+          scaled={true}
+          size='content'
+        />}
         {isMultiSelect && 
         <Checkbox
           label={selectAllLabel}

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

@@ -1,36 +1,75 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withKnobs, text, number } from '@storybook/addon-knobs/react';
-import withReadme from 'storybook-readme/with-readme';
-import Readme from './README.md';
-import { AdvancedSelector } from 'asc-web-components';
-import Section from '../../.storybook/decorators/section';
-import { boolean } from '@storybook/addon-knobs/dist/deprecated';
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { withKnobs, text, number } from "@storybook/addon-knobs/react";
+import withReadme from "storybook-readme/with-readme";
+import Readme from "./README.md";
+import { AdvancedSelector } from "asc-web-components";
+import Section from "../../.storybook/decorators/section";
+import { boolean } from "@storybook/addon-knobs/dist/deprecated";
 
-storiesOf('Components|AdvancedSelector', module)
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+storiesOf("Components|AdvancedSelector", module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('base', () => {
-    const optionsCount = number("Users count", 100);
+  .add("base", () => {
 
-    let options = [{key: "self", label: "Me"}]; 
-    
-    options = [...options, ...[...Array(optionsCount).keys()].map(
-      index => {
-        return { key: `user${index}`, label: `User ${index+1} of ${optionsCount}` };
+    const optionsCount = number("Users count", 10000);
+
+    const groups = [
+      {
+        key: "group-all",
+        label: "All groups"
+      },
+      {
+        key: "group-dev",
+        label: "Development"
+      },
+      {
+        key: "group-management",
+        label: "Management"
+      },
+      {
+        key: "group-marketing",
+        label: "Marketing"
+      },
+      {
+        key: "group-mobile",
+        label: "Mobile"
+      },
+      {
+        key: "group-support",
+        label: "Support"
+      },
+      {
+        key: "group-web",
+        label: "Web"
       }
-    )];
+    ];
+    
+    const options = Array.from({ length: optionsCount }, (v, index) => {
+      const additional_group = groups[getRandomInt(1, 6)];
+      return {
+        key: `user${index}`,
+        groups: ["group-all", additional_group],
+        label: `User${index + 1} (All groups, ${additional_group.label})`
+      };
+    });
 
     return (
-    <Section>
-        <AdvancedSelector 
+      <Section>
+        <AdvancedSelector
           placeholder={text("placeholder", "Search users")}
-          onSearchChanged={(e) => console.log(e.target.value)}
+          onSearchChanged={e => console.log(e.target.value)}
           options={options}
+          groups={groups}
+          selectedGroups={[groups[0]]}
           isMultiSelect={boolean("isMultiSelect", true)}
           buttonLabel={text("buttonLabel", "Add members")}
-          onSelect={(selectedOptions) => console.log("onSelect", selectedOptions)}
+          onSelect={selectedOptions => console.log("onSelect", selectedOptions)}
         />
-    </Section>
+      </Section>
     );
-  });
+  });