Implement UserPickerDialog for adding users

Also, use AccessibleButtons.
pull/21833/head
Luke Barnard 2017-09-20 15:29:31 +01:00
parent 1c6cecbd43
commit 44c38652ab
3 changed files with 60 additions and 8 deletions

View File

@ -66,12 +66,12 @@ const CategoryRoomList = React.createClass({
return <div className="mx_GroupView_featuredThings_container">
{catHeader}
{roomNodes}
<div className="mx_GroupView_featuredThings_addButton">
<AccessibleButton className="mx_GroupView_featuredThings_addButton">
<TintableSvg src="img/icons-create-room.svg" width="64" height="64"/>
<div className="mx_GroupView_featuredThings_addButton_label">
{_t('Add a Room')}
</div>
</div>
</AccessibleButton>
</div>;
},
});
@ -130,6 +130,32 @@ const RoleUserList = React.createClass({
name: PropTypes.string,
}).isRequired,
}),
groupId: PropTypes.string.isRequired,
},
onUsersSelected: function(addrs) {
addrs.forEach((addr) => {
// const userId = addr.address;
// TODO: Add user to the group via API hit
});
},
onAddUsersClicked: function(ev) {
ev.preventDefault();
const UserPickerDialog = sdk.getComponent("dialogs.UserPickerDialog");
Modal.createTrackedDialog('Add Users to Group Summary', '', UserPickerDialog, {
title: _t('Add users to the group summary'),
description: _t("Who would you like to add to this summary?"),
placeholder: _t("Name or matrix ID"),
button: _t("Add to summary"),
validAddressTypes: ['mx'],
groupId: this.props.groupId,
onFinished: (success, addrs) => {
if (!success) return;
this.onUsersSelected(addrs);
},
});
},
render: function() {
@ -144,12 +170,12 @@ const RoleUserList = React.createClass({
return <div className="mx_GroupView_featuredThings_container">
{roleHeader}
{userNodes}
<div className="mx_GroupView_featuredThings_addButton">
<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
<TintableSvg src="img/icons-create-room.svg" width="64" height="64"/>
<div className="mx_GroupView_featuredThings_addButton_label">
{_t('Add a User')}
</div>
</div>
</AccessibleButton>
</div>;
},
});
@ -432,10 +458,10 @@ export default React.createClass({
}
});
const noRoleNode = <RoleUserList users={noRoleUsers} />;
const noRoleNode = <RoleUserList users={noRoleUsers} groupId={this.props.groupId}/>;
const roleUserNodes = Object.keys(roleUsers).map((roleId) => {
const role = summary.users_section.roles[roleId];
return <RoleUserList key={roleId} users={roleUsers[roleId]} role={role} />;
return <RoleUserList key={roleId} users={roleUsers[roleId]} role={role} groupId={this.props.groupId}/>;
});
return <div className="mx_GroupView_featuredThings">

View File

@ -40,6 +40,7 @@ module.exports = React.createClass({
focus: PropTypes.bool,
validAddressTypes: PropTypes.arrayOf(PropTypes.oneOf(addressTypes)),
onFinished: PropTypes.func.isRequired,
groupId: PropTypes.string,
},
getDefaultProps: function() {
@ -140,7 +141,9 @@ module.exports = React.createClass({
// Only do search if there is something to search
if (query.length > 0 && query != '@' && query.length >= 2) {
this.queryChangedDebouncer = setTimeout(() => {
if (this.state.serverSupportsUserDirectory) {
if (this.props.groupId) {
this._doNaiveGroupSearch(query);
} else if (this.state.serverSupportsUserDirectory) {
this._doUserDirectorySearch(query);
} else {
this._doLocalSearch(query);
@ -185,6 +188,26 @@ module.exports = React.createClass({
if (this._cancelThreepidLookup) this._cancelThreepidLookup();
},
_doNaiveGroupSearch: function(query) {
this.setState({
busy: true,
query,
searchError: null,
});
MatrixClientPeg.get().getGroupUsers(this.props.groupId).then((resp) => {
this._processResults(resp.chunk, query);
}).catch((err) => {
console.error('Error whilst searching user directory: ', err);
this.setState({
searchError: err.errcode ? err.message : _t('Something went wrong!'),
});
}).done(() => {
this.setState({
busy: false,
});
});
},
_doUserDirectorySearch: function(query) {
this.setState({
busy: true,

View File

@ -888,5 +888,8 @@
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
"Flair": "Flair",
"Add a Room": "Add a Room",
"Add a User": "Add a User"
"Add a User": "Add a User",
"Add users to the group summary": "Add users to the group summary",
"Who would you like to add to this summary?": "Who would you like to add to this summary?",
"Add to summary": "Add to summary"
}