ASC.People: ProfileAction: added GroupSelector

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

@@ -3,7 +3,7 @@ import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 import { Avatar, Button, Textarea, toastr } from 'asc-web-components'
 import { withTranslation } from 'react-i18next';
-import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts } from "../../../../../store/people/selectors";
+import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts, mapGroupsToGroupSelectorOptions, mapGroupSelectorOptionsToGroups, filterGroupSelectorOptions } from "../../../../../store/people/selectors";
 import { createProfile } from '../../../../../store/profile/actions';
 import { MainContainer, AvatarContainer, MainFieldsContainer } from './FormFields/Form'
 import TextField from './FormFields/TextField'
@@ -46,40 +46,13 @@ class CreateUserForm extends React.Component {
     }
   }
 
-  mapGroupsToGroupSelectorOptions = groups => {
-    return groups.map(group => {
-      return {
-        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);
+    var allOptions = mapGroupsToGroupSelectorOptions(props.groups);
+    var selected = mapGroupsToGroupSelectorOptions(profile.groups);
 
     return {
       isLoading: false,
@@ -196,13 +169,13 @@ class CreateUserForm extends React.Component {
 
   onSearchGroups(template) {
     var stateCopy = Object.assign({}, this.state);
-    stateCopy.selector.options = this.filterGroupSelectorOptions(stateCopy.selector.allOptions, template);
+    stateCopy.selector.options = filterGroupSelectorOptions(stateCopy.selector.allOptions, template);
     this.setState(stateCopy);
   }
 
   onSelectGroups(selected) {
     var stateCopy = Object.assign({}, this.state);
-    stateCopy.profile.groups = this.mapGroupSelectorOptionsToGroups(selected);
+    stateCopy.profile.groups = mapGroupSelectorOptionsToGroups(selected);
     stateCopy.selector.selected = selected;
     stateCopy.selector.visible = false;
     this.setState(stateCopy);
@@ -384,7 +357,7 @@ class CreateUserForm extends React.Component {
 const mapStateToProps = (state) => {
   return {
     settings: state.auth.settings,
-    groups: state.people.groups,
+    groups: state.people.groups
   }
 };
 

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

@@ -3,7 +3,7 @@ import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 import { Avatar, Button, Textarea, Text, toastr, ModalDialog, TextInput } from 'asc-web-components'
 import { withTranslation } from 'react-i18next';
-import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts } from "../../../../../store/people/selectors";
+import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts, mapGroupsToGroupSelectorOptions, mapGroupSelectorOptionsToGroups, filterGroupSelectorOptions } from "../../../../../store/people/selectors";
 import { updateProfile } from '../../../../../store/profile/actions';
 import { MainContainer, AvatarContainer, MainFieldsContainer } from './FormFields/Form'
 import TextField from './FormFields/TextField'
@@ -13,7 +13,7 @@ import RadioField from './FormFields/RadioField'
 import DepartmentField from './FormFields/DepartmentField'
 import ContactsField from './FormFields/ContactsField'
 import InfoFieldContainer from './FormFields/InfoFieldContainer'
-import { department, position, employedSinceDate, typeGuest, typeUser } from '../../../../../helpers/customNames';
+import { departments, department, position, employedSinceDate, typeGuest, typeUser } from '../../../../../helpers/customNames';
 
 class UpdateUserForm extends React.Component {
 
@@ -28,8 +28,6 @@ class UpdateUserForm extends React.Component {
     this.onUserTypeChange = this.onUserTypeChange.bind(this);
     this.onBirthdayDateChange = this.onBirthdayDateChange.bind(this);
     this.onWorkFromDateChange = this.onWorkFromDateChange.bind(this);
-    this.onAddGroup = this.onAddGroup.bind(this);
-    this.onGroupClose = this.onGroupClose.bind(this);
     this.onCancel = this.onCancel.bind(this);
 
     this.onEmailChange = this.onEmailChange.bind(this);
@@ -43,6 +41,12 @@ class UpdateUserForm extends React.Component {
     this.onContactsItemAdd = this.onContactsItemAdd.bind(this);
     this.onContactsItemTypeChange = this.onContactsItemTypeChange.bind(this);
     this.onContactsItemTextChange = this.onContactsItemTextChange.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) {
@@ -52,19 +56,29 @@ class UpdateUserForm extends React.Component {
   }
 
   mapPropsToState = (props) => {
-     const newState = {
+    var profile = toEmployeeWrapper(props.profile);
+    var allOptions = mapGroupsToGroupSelectorOptions(props.groups);
+    var selected = mapGroupsToGroupSelectorOptions(profile.groups); 
+
+    const newState = {
       isLoading: false,
       errors: {
         firstName: false,
         lastName: false,
       },
-      profile: toEmployeeWrapper(props.profile),
+      profile: profile,
       dialog: {
         visible: false,
         header: "",
         body: "",
         buttons: [],
         newEmail: "",
+      },
+      selector: {
+        visible: false,
+        allOptions: allOptions,
+        options: [...allOptions],
+        selected: selected
       }
     };
 
@@ -102,16 +116,6 @@ class UpdateUserForm extends React.Component {
     this.setState(stateCopy)
   }
 
-  onAddGroup() {
-    console.log("onAddGroup")
-  }
-
-  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 errors = {
@@ -268,8 +272,41 @@ class UpdateUserForm extends React.Component {
     this.setState(stateCopy);
   }
 
+  onShowGroupSelector() {
+    var stateCopy = Object.assign({}, this.state);
+    stateCopy.selector.visible = true;
+    this.setState(stateCopy);
+  }
+
+  onCloseGroupSelector() {
+    var stateCopy = Object.assign({}, this.state);
+    stateCopy.selector.visible = false;
+    this.setState(stateCopy);
+  }
+
+  onSearchGroups(template) {
+    var stateCopy = Object.assign({}, this.state);
+    stateCopy.selector.options = filterGroupSelectorOptions(stateCopy.selector.allOptions, template);
+    this.setState(stateCopy);
+  }
+
+  onSelectGroups(selected) {
+    var stateCopy = Object.assign({}, this.state);
+    stateCopy.profile.groups = 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, dialog } = this.state;
+    const { isLoading, errors, profile, dialog, selector } = this.state;
     const { t } = this.props;
 
     const pattern = getUserContactsPattern();
@@ -394,10 +431,18 @@ class UpdateUserForm extends React.Component {
             <DepartmentField
               labelText={`${t("CustomDepartment", { department })}:`}
               isDisabled={isLoading}
-              departments={profile.groups}
-              addButtonTitle={t("AddButton")}
-              onAddDepartment={this.onAddGroup}
-              onRemoveDepartment={this.onGroupClose}
+              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("CustomAddDepartments", { departments })}
+              selectorSelectAllText={t("SelectAll")}
+              selectorOnSearchGroups={this.onSearchGroups}
+              selectorOnSelectGroups={this.onSelectGroups}
             />
           </MainFieldsContainer>
         </MainContainer>
@@ -445,7 +490,8 @@ class UpdateUserForm extends React.Component {
 const mapStateToProps = (state) => {
   return {
     profile: state.profile.targetUser,
-    settings: state.auth.settings
+    settings: state.auth.settings,
+    groups: state.people.groups
   }
 };
 

products/ASC.People/Client/src/store/people/selectors.js

@@ -143,3 +143,30 @@ export function toEmployeeWrapper(profile) {
 
     return cloneDeep({ ...emptyData, ...profile });
 }
+
+export function mapGroupsToGroupSelectorOptions(groups) {
+    return groups.map(group => {
+        return {
+            key: group.id,
+            label: group.name,
+            manager: group.manager,
+            total: 0
+        }
+    });
+}
+
+export function mapGroupSelectorOptionsToGroups(options) {
+    return options.map(option => {
+        return {
+            id: option.key,
+            name: option.label,
+            manager: option.manager
+        }
+    });
+}
+
+export function filterGroupSelectorOptions(options, template) { 
+    return options.filter(option => {
+        return template ? option.label.indexOf(template) > -1 : true;
+    })
+}