diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js index c194b87778..e484579fbd 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js +++ b/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 } from 'asc-web-components' +import { Avatar, Button, Textarea, toastr, AdvancedSelector } 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,13 +27,16 @@ class CreateUserForm extends React.Component { this.onInputChange = this.onInputChange.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.onContactsItemAdd = this.onContactsItemAdd.bind(this); this.onContactsItemTypeChange = this.onContactsItemTypeChange.bind(this); this.onContactsItemTextChange = this.onContactsItemTextChange.bind(this); + + this.onAddGroup = this.onAddGroup.bind(this); + this.onSearchGroups = this.onSearchGroups.bind(this); + this.onSelectGroups = this.onSelectGroups.bind(this); } componentDidUpdate(prevProps, prevState) { @@ -43,6 +46,15 @@ class CreateUserForm extends React.Component { } mapPropsToState = (props) => { + var groups = props.groups.map(item => { + return { + key: item.id, + label: item.name, + manager: item.manager, + total: 0 + } + }); + return { isLoading: false, errors: { @@ -54,7 +66,12 @@ class CreateUserForm extends React.Component { profile: toEmployeeWrapper({ isVisitor: props.match.params.type === "guest", passwordType: "link" - }) + }), + selector: { + visible: false, + allGroups: groups, + groups: [...groups] + } }; } @@ -76,10 +93,6 @@ class CreateUserForm 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); @@ -151,8 +164,37 @@ class CreateUserForm extends React.Component { this.setState(stateCopy); } + onAddGroup() { + var stateCopy = Object.assign({}, this.state); + stateCopy.selector.visible = true; + this.setState(stateCopy); + } + + onSearchGroups(value) { + var stateCopy = Object.assign({}, this.state); + stateCopy.selector.groups = stateCopy.selector.allGroups.filter(item => { + return value ? item.label.indexOf(value) > -1 : true; + }) + this.setState(stateCopy); + } + + onSelectGroups(value) { + 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.visible = false; + this.setState(stateCopy); + } + render() { - const { isLoading, errors, profile } = this.state; + const { isLoading, errors, profile, selector } = this.state; const { t, settings } = this.props; const pattern = getUserContactsPattern(); @@ -273,6 +315,19 @@ class CreateUserForm extends React.Component { onAddDepartment={this.onAddGroup} onRemoveDepartment={this.onGroupClose} /> + @@ -311,7 +366,8 @@ class CreateUserForm extends React.Component { const mapStateToProps = (state) => { return { - settings: state.auth.settings + settings: state.auth.settings, + groups: state.people.groups, } };