ASC.People: ProfileAction: added GroupSelector

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js

@@ -3,7 +3,8 @@ import isEqual from "lodash/isEqual";
 import {
   FieldContainer,
   SelectorAddButton,
-  SelectedItem
+  SelectedItem,
+  AdvancedSelector
 } from "asc-web-components";
 
 class DepartmentField extends React.Component {
@@ -19,10 +20,21 @@ class DepartmentField extends React.Component {
       isDisabled,
       hasError,
       labelText,
-      addButtonTitle,
-      departments,
-      onAddDepartment,
-      onRemoveDepartment
+
+      showGroupSelectorButtonTitle,
+
+      onShowGroupSelector,
+      onCloseGroupSelector,
+      onRemoveGroup,
+
+      selectorIsVisible,
+      selectorSearchPlaceholder,
+      selectorOptions,
+      selectorSelectedOptions,
+      selectorAddButtonText,
+      selectorSelectAllText,
+      selectorOnSearchGroups,
+      selectorOnSelectGroups
     } = this.props;
 
     return (
@@ -34,16 +46,31 @@ class DepartmentField extends React.Component {
       >
         <SelectorAddButton
           isDisabled={isDisabled}
-          title={addButtonTitle}
-          onClick={onAddDepartment}
+          title={showGroupSelectorButtonTitle}
+          onClick={onShowGroupSelector}
           className="department-add-btn"
         />
-        {departments.map(department => (
+        <AdvancedSelector
+          isDropDown={true}
+          isOpen={selectorIsVisible}
+          maxHeight={336}
+          width={379}
+          placeholder={selectorSearchPlaceholder}
+          onSearchChanged={selectorOnSearchGroups}
+          options={selectorOptions}
+          selected={selectorSelectedOptions}
+          isMultiSelect={true}
+          buttonLabel={selectorAddButtonText}
+          selectAllLabel={selectorSelectAllText}
+          onSelect={selectorOnSelectGroups}
+          onCancel={onCloseGroupSelector}
+        />
+        {selectorSelectedOptions.map(option => (
             <SelectedItem
-              key={`department_${department.id}`}
-              text={department.name}
+              key={`department_${option.key}`}
+              text={option.label}
               onClose={() => {
-                onRemoveDepartment(department.id);
+                onRemoveGroup(option.key);
               }}
               isInline={true}
               className="department-item"

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/Form.js

@@ -20,6 +20,8 @@ const MainContainer = styled.div`
   }
 
   .departments-field {
+    position: relative;
+
     .department-add-btn {
       margin: 0 8px 8px 0;
       float: left;

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
-import { Avatar, Button, Textarea, toastr, AdvancedSelector } from 'asc-web-components'
+import { Avatar, Button, Textarea, toastr } from 'asc-web-components'
 import { withTranslation } from 'react-i18next';
 import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts } from "../../../../../store/people/selectors";
 import { createProfile } from '../../../../../store/profile/actions';
@@ -27,16 +27,17 @@ class CreateUserForm extends React.Component {
     this.onInputChange = this.onInputChange.bind(this);
     this.onBirthdayDateChange = this.onBirthdayDateChange.bind(this);
     this.onWorkFromDateChange = this.onWorkFromDateChange.bind(this);
-    this.onGroupClose = this.onGroupClose.bind(this);
     this.onCancel = this.onCancel.bind(this);
 
     this.onContactsItemAdd = this.onContactsItemAdd.bind(this);
     this.onContactsItemTypeChange = this.onContactsItemTypeChange.bind(this);
     this.onContactsItemTextChange = this.onContactsItemTextChange.bind(this);
 
-    this.onAddGroup = this.onAddGroup.bind(this);
+    this.onShowGroupSelector = this.onShowGroupSelector.bind(this);
+    this.onCloseGroupSelector = this.onCloseGroupSelector.bind(this);
     this.onSearchGroups = this.onSearchGroups.bind(this);
     this.onSelectGroups = this.onSelectGroups.bind(this);
+    this.onRemoveGroup = this.onRemoveGroup.bind(this);
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -45,16 +46,41 @@ class CreateUserForm extends React.Component {
     }
   }
 
-  mapPropsToState = (props) => {
-    var groups = props.groups.map(item => {
+  mapGroupsToGroupSelectorOptions = groups => {
+    return groups.map(group => {
       return {
-        key: item.id,
-        label: item.name,
-        manager: item.manager,
+        key: group.id,
+        label: group.name,
+        manager: group.manager,
         total: 0
       }
     });
-    
+  }
+
+  mapGroupSelectorOptionsToGroups = options => {
+    return options.map(option => {
+      return {
+        id: option.key,
+        name: option.label,
+        manager: option.manager
+      }
+    });
+  }
+
+  filterGroupSelectorOptions = (options, template) => { 
+      return options.filter(option => {
+        return template ? option.label.indexOf(template) > -1 : true;
+      })
+  }
+
+  mapPropsToState = (props) => {
+    var profile = toEmployeeWrapper({
+      isVisitor: props.match.params.type === "guest",
+      passwordType: "link"
+    });
+    var allOptions = this.mapGroupsToGroupSelectorOptions(props.groups);
+    var selected = this.mapGroupsToGroupSelectorOptions(profile.groups);
+
     return {
       isLoading: false,
       errors: {
@@ -63,14 +89,12 @@ class CreateUserForm extends React.Component {
         email: false,
         password: false,
       },
-      profile: toEmployeeWrapper({
-        isVisitor: props.match.params.type === "guest",
-        passwordType: "link"
-      }),
+      profile: profile,
       selector: {
         visible: false,
-        allGroups: groups,
-        groups: [...groups]
+        allOptions: allOptions,
+        options: [...allOptions],
+        selected: selected
       }
     };
   }
@@ -93,12 +117,6 @@ class CreateUserForm extends React.Component {
     this.setState(stateCopy)
   }
 
-  onGroupClose(id) {
-    var stateCopy = Object.assign({}, this.state);
-    stateCopy.profile.groups = this.state.profile.groups.filter((group) => group.id !== id);
-    this.setState(stateCopy)
-  }
-
   validate() {
     const { profile } = this.state;
     const emailRegex = /.+@.+\..+/;
@@ -164,35 +182,39 @@ class CreateUserForm extends React.Component {
     this.setState(stateCopy);
   }
 
-  onAddGroup() {
+  onShowGroupSelector() {
     var stateCopy = Object.assign({}, this.state);
     stateCopy.selector.visible = true;
     this.setState(stateCopy);
   }
 
-  onSearchGroups(value) {
+  onCloseGroupSelector() {
     var stateCopy = Object.assign({}, this.state);
-    stateCopy.selector.groups = stateCopy.selector.allGroups.filter(item => {
-      return value ? item.label.indexOf(value) > -1 : true;
-    })
+    stateCopy.selector.visible = false;
     this.setState(stateCopy);
   }
 
-  onSelectGroups(value) {
+  onSearchGroups(template) {
     var stateCopy = Object.assign({}, this.state);
-    var newGroups = value.map(item => {
-      return {
-        id: item.key,
-        name: item.label,
-        manager: item.manager
-      };
-    })
-    stateCopy.profile.groups = [...stateCopy.profile.groups, ...newGroups];
-    stateCopy.selector.groups = [...stateCopy.selector.allGroups];
+    stateCopy.selector.options = this.filterGroupSelectorOptions(stateCopy.selector.allOptions, template);
+    this.setState(stateCopy);
+  }
+
+  onSelectGroups(selected) {
+    var stateCopy = Object.assign({}, this.state);
+    stateCopy.profile.groups = this.mapGroupSelectorOptionsToGroups(selected);
+    stateCopy.selector.selected = selected;
     stateCopy.selector.visible = false;
     this.setState(stateCopy);
   }
 
+  onRemoveGroup(id) {
+    var stateCopy = Object.assign({}, this.state);
+    stateCopy.profile.groups = stateCopy.profile.groups.filter(group => group.id !== id);
+    stateCopy.selector.selected = stateCopy.selector.selected.filter(option => option.key !== id);
+    this.setState(stateCopy)
+  }
+
   render() {
     const { isLoading, errors, profile, selector } = this.state;
     const { t, settings } = this.props;
@@ -310,23 +332,18 @@ class CreateUserForm extends React.Component {
             <DepartmentField
               labelText={`${t("CustomDepartment", { department })}:`}
               isDisabled={isLoading}
-              departments={profile.groups}
-              addButtonTitle={t("AddButton")}
-              onAddDepartment={this.onAddGroup}
-              onRemoveDepartment={this.onGroupClose}
-            />
-            <AdvancedSelector
-              isDropDown={true}
-              isOpen={selector.visible}
-              maxHeight={336}
-              width={379}
-              placeholder={t("Search")}
-              onSearchChanged={this.onSearchGroups}
-              options={selector.groups}
-              isMultiSelect={true}
-              buttonLabel={t("Add departments")}
-              selectAllLabel={t("Select all")}
-              onSelect={this.onSelectGroups}
+              showGroupSelectorButtonTitle={t("AddButton")}
+              onShowGroupSelector={this.onShowGroupSelector}
+              onCloseGroupSelector={this.onCloseGroupSelector}
+              onRemoveGroup={this.onRemoveGroup}
+              selectorIsVisible={selector.visible}
+              selectorSearchPlaceholder={t("Search")}
+              selectorOptions={selector.options}
+              selectorSelectedOptions={selector.selected}
+              selectorAddButtonText={t("AddDepartments")}
+              selectorSelectAllText={t("SelectAll")}
+              selectorOnSearchGroups={this.onSearchGroups}
+              selectorOnSelectGroups={this.onSelectGroups}
             />
           </MainFieldsContainer>
         </MainContainer>