OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Make group profile editing mostly work 

apart from avatars
pull/21833/head
David Baker 2017-07-21 11:12:15 +01:00
parent 8a818d250f
commit 571fada77e
2 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/structures/GroupView.js
View File

@ -179,10 +179,12 @@ export default React.createClass({
summary: null,
error: null,
editing: false,
saving: false,
};
},
componentWillMount: function() {
this._changeAvatarComponent = null;
this._loadGroupFromServer(this.props.groupId);
},
@ -197,6 +199,10 @@ export default React.createClass({
}
},
_collectChangeAvatar: function(node) {
this._changeAvatarComponent = node;
},
_loadGroupFromServer: function(groupId) {
MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
this.setState({
@ -246,8 +252,36 @@ export default React.createClass({
});
},
_onAvatarSelected: function(e) {
},
_onAvatarChange: function(newAvatarUrl) {
const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: newAvatarUrl });
this.setState({
profileForm: newProfileForm,
});
},
_onSaveClick: function() {
// TODO: There's no API to edit group profile info yet.
this.setState({saving: true});
MatrixClientPeg.get().setGroupProfile(this.props.groupId, this.state.profileForm).then((result) => {
this.setState({
saving: false,
editing: false,
summary: false,
});
return this._loadGroupFromServer(this.props.groupId);
}).catch((e) => {
this.setState({
saving: false,
});
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
console.error("Failed to save group profile", e);
Modal.createDialog(ErrorDialog, {
title: _t('Error'),
description: _t('Failed to update group'),
});
}).done();
},
_getFeaturedRoomsNode() {
@ -330,8 +364,9 @@ export default React.createClass({
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
const Loader = sdk.getComponent("elements.Spinner");
const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
if (this.state.summary === null && this.state.error === null) {
if (this.state.summary === null && this.state.error === null || this.state.saving) {
return <Loader />;
} else if (this.state.summary) {
const summary = this.state.summary;
@ -345,16 +380,16 @@ export default React.createClass({
if (this.state.editing) {
avatarNode = (
<div className="mx_GroupView_avatarPicker">
<div onClick={this.onAvatarPickerClick}>
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
<ChangeAvatar ref={this._collectChangeAvatar}
groupId={this.props.groupId}
initialAvatarUrl={this.state.summary.profile.avatar_url}
setAvatar={false} onAvatar={this._onAvatarChange}
onUploadComplete={this._onAvatarChange}
showUploadSection={false} width={48} height={48}
/>
</div>
</label>
<div className="mx_GroupView_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label">
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
<img src="img/camera.svg"
alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
width="17" height="15" />
@ -421,9 +456,9 @@ export default React.createClass({
{this._getFeaturedUsersNode()}
</div>;
// disabled until editing works
rightButtons = null;/*<AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
rightButtons = <AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
</AccessibleButton>;*/
</AccessibleButton>;
}
return (

16
src/components/views/settings/ChangeAvatar.js
View File

@ -33,12 +33,10 @@ module.exports = React.createClass({
height: React.PropTypes.number,
className: React.PropTypes.string,
// If true, set the room / user avatar once the image is uploaded.
// Ignored for groups.
setAvatar: React.PropTypes.bool,
// Called after the avatar is uploaded
onAvatar: React.PropTypes.func,
// Called with the mxc URL of the uploaded image after the avatar is
// uploaded. If undefined, the room or user avatar if changed once the
// image has finished uploading. Must be set for groups.
onUploadComplete: React.PropTypes.func,
},
Phases: {
@ -53,7 +51,6 @@ module.exports = React.createClass({
className: "",
width: 80,
height: 80,
setAvatar: true,
};
},
@ -85,8 +82,7 @@ module.exports = React.createClass({
newUrl = url;
if (this.props.onAvatar) {
this.props.onAvatar(url);
}
if (this.props.setAvatar) {
} else {
if (self.props.room) {
return MatrixClientPeg.get().sendStateEvent(
self.props.room.roomId,
@ -94,7 +90,7 @@ module.exports = React.createClass({
{url: url},
''
);
} else {
} else if (!this.props.groupId) {
return MatrixClientPeg.get().setAvatarUrl(url);
}
}