web: common: bump version

web/ASC.Web.Common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-common",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Ascensio System SIA common components and solutions library",
   "license": "AGPL-3.0",
   "files": [
@@ -26,12 +26,12 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "faker": "^4.1.0",
     "history": "4.9.0",
     "lodash": "4.17.15",
     "lodash-es": "4.17.15",
     "moment": "^2.24.0",
-    "universal-cookie": "^4.0.2",
-    "faker": "^4.1.0"
+    "universal-cookie": "^4.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",

web/ASC.Web.Common/src/components/group-selector/group-selector.stories.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import {
+  withKnobs,
+  boolean
+} from "@storybook/addon-knobs/react";
+import Section from "../../../.storybook/decorators/section";
+
+import GroupSelector from ".";
+import { BooleanValue } from "react-values";
+import { Button } from "asc-web-components";
+//import withReadme from "storybook-readme/with-readme";
+//import Readme from "./README.md";
+
+storiesOf("Components|GroupSelector", module)
+  .addDecorator(withKnobs)
+  //.addDecorator(withReadme(Readme))
+  .addParameters({ options: { addonPanelInRight: false } })
+  .add("base", () => {
+    return (
+      <Section>
+        <BooleanValue>
+          {({ value, toggle }) => (
+            <div style={{ position: "relative" }}>
+              <Button label="Toggle dropdown" onClick={toggle} />
+              <GroupSelector 
+                isOpen={value} 
+                useFake={true} 
+                isMultiSelect={boolean("isMultiSelect", true)}
+                onSelect={(group) => {
+                  action("onSelect", group);
+                  toggle();
+                }} 
+              />
+            </div>
+          )}
+        </BooleanValue>
+      </Section>
+    );
+  });

web/ASC.Web.Common/src/components/group-selector/index.js

@@ -0,0 +1,128 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { AdvancedSelector2 } from "asc-web-components";
+import { getGroupList } from "../../api/groups";
+import { setClientBasePath } from "../../api/client";
+
+class GroupSelector extends React.Component {
+    constructor(props) {
+        super(props);
+
+        const { isOpen } = props;
+        this.state = this.getDefaultState(isOpen, []);
+      }
+    
+      componentDidMount() {
+        const PREFIX = "api";
+        const VERSION = "2.0";
+        const baseURL = `http://localhost:8092/${PREFIX}/${VERSION}`;
+        setClientBasePath(baseURL);
+
+        getGroupList(this.props.useFake)
+          .then((groups) => this.setState({groups: this.convertGroups(groups)}))
+          .catch((error) => console.log(error));
+      }
+
+      componentDidUpdate(prevProps) {
+        if(this.props.isOpen !== prevProps.isOpen)
+          this.setState({ isOpen: this.props.isOpen });
+      }
+
+      convertGroups = groups => {
+        return groups
+          ? groups.map(g => {
+              return {
+                key: g.id,
+                label: g.name,
+                total: 0
+              };
+            })
+          : [];
+      };
+
+      loadNextPage = ({ startIndex, searchValue }) => {
+        console.log(
+          `loadNextPage(startIndex=${startIndex}, searchValue="${searchValue}")`
+        );
+
+        this.setState({ isNextPageLoading: true }, () => {
+
+          getGroupList(this.props.useFake)
+            .then((groups) => {
+
+              const newOptions = this.convertGroups(groups);
+
+              this.setState({
+                hasNextPage: false,
+                isNextPageLoading: false,
+                options: newOptions
+              });
+            })
+            .catch((error) => console.log(error));
+        });
+      };
+
+      getDefaultState = (isOpen, groups) => {
+        return {
+          isOpen: isOpen,
+          groups,
+          hasNextPage: true,
+          isNextPageLoading: false
+        };
+      };
+
+    render() {
+        const {
+            isOpen,
+            groups,
+            selectedOptions,
+            hasNextPage,
+            isNextPageLoading
+          } = this.state;
+
+        const { 
+            displayTypes,
+            isMultiSelect,
+            isDisabled,
+            onSelect
+        } = this.props;
+
+        return (
+        <AdvancedSelector2
+            options={groups}
+            hasNextPage={hasNextPage}
+            isNextPageLoading={isNextPageLoading}
+            loadNextPage={this.loadNextPage}
+            size={"compact"}
+            displayType={displayTypes}
+            selectedOptions={selectedOptions}
+            isOpen={isOpen}
+            isMultiSelect={isMultiSelect}
+            isDisabled={isDisabled}
+            searchPlaceHolderLabel={"Search"}
+            selectButtonLabel={"Add departments"}
+            selectAllLabel={"Select all"}
+            groupsHeaderLabel={"Groups"}
+            emptySearchOptionsLabel={"There are no departments with such name"}
+            emptyOptionsLabel={"There are no departments"}
+            loadingLabel={'Loading... Please wait...'}
+            onSelect={onSelect}
+            onSearchChanged={value => {
+              //action("onSearchChanged")(value);
+              console.log("Search group", value);
+              this.setState({ options: [], hasNextPage: true });
+            }}
+      />);
+    }
+}
+
+GroupSelector.propTypes = {
+  onSelect: PropTypes.func,
+  useFake: PropTypes.bool,
+}
+
+GroupSelector.defaultProps = {
+  useFake: false
+}
+
+export default GroupSelector;