scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-27 18:52:07 +08:00
Code Issues Projects Releases Packages Wiki Activity

fixed edit name modal

Browse source
This commit is contained in:
zmagod 2017-09-15 16:34:05 +02:00
parent 83647d81b4
commit 40359c5c73
2 changed files with 38 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/javascript/packs/src/settings/components/team/SettingsTeamPageContainer.jsx
View file

@ -9,10 +9,7 @@ import prettysize from "prettysize";
import axios from "../../../../app/axios";
import { TEAM_DETAILS_PATH, SETTINGS_TEAMS } from "../../../../app/routes";
import {
BORDER_LIGHT_COLOR,
COLOR_CONCRETE
} from "../../../../app/constants/colors";
import { BORDER_LIGHT_COLOR } from "../../../../app/constants/colors";
import TeamsMembers from "./components/TeamsMembers";
import UpdateTeamDescriptionModal from "./components/UpdateTeamDescriptionModal";
@ -38,6 +35,16 @@ const BadgeWrapper = styled.div`
`;
const StyledWell = styled(Well)`
padding: 9px;
& > span {
padding-left: 5px;
}`;
const StyledDescriptionWell = styled(Well)`
padding: 9px;
& > span {
padding-left: 5px;
}
&:hover {
text-decoration: underline;
cursor: pointer;
@ -77,6 +84,7 @@ class SettingsTeamPageContainer extends Component {
this.updateUsersCallback = this.updateUsersCallback.bind(this);
this.showNameModal = this.showNameModal.bind(this);
this.hideNameModalCallback = this.hideNameModalCallback.bind(this);
this.renderEditNameModel = this.renderEditNameModel.bind(this);
}
componentDidMount() {
@ -121,6 +129,19 @@ class SettingsTeamPageContainer extends Component {
);
}
renderEditNameModel() {
if (this.state.showNameModal) {
return(
<UpdateTeamNameModal
showModal={this.state.showNameModal}
hideModal={this.hideNameModalCallback}
team={this.state.team}
updateTeamCallback={this.updateTeamCallback}
/>
);
}
}
render() {
return (
<Wrapper>
@ -144,7 +165,7 @@ class SettingsTeamPageContainer extends Component {
<BadgeWrapper>
<Glyphicon glyph="calendar" />
</BadgeWrapper>
<Well>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.created_on"
values={{
@ -153,31 +174,31 @@ class SettingsTeamPageContainer extends Component {
)
}}
/>
</Well>
</StyledWell>
</Col>
<Col xs={10} sm={5}>
<BadgeWrapper>
<Glyphicon glyph="user" />
</BadgeWrapper>
<Well>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.created_by"
values={{ created_by: this.state.team.created_by }}
/>
</Well>
</StyledWell>
</Col>
<Col xs={8} sm={4}>
<BadgeWrapper>
<Glyphicon glyph="hdd" />
</BadgeWrapper>
<Well>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.space_usage"
values={{
space_usage: prettysize(this.state.team.space_taken)
}}
/>
</Well>
</StyledWell>
</Col>
</Row>
<Row>
@ -185,9 +206,11 @@ class SettingsTeamPageContainer extends Component {
<BadgeWrapper>
<Glyphicon glyph="info-sign" />
</BadgeWrapper>
<StyledWell>
{this.renderDescription()}
</StyledWell>
<StyledDescriptionWell>
<span>
{this.renderDescription()}
</span>
</StyledDescriptionWell>
</Col>
</Row>
<TeamsMembers
@ -201,12 +224,7 @@ class SettingsTeamPageContainer extends Component {
team={this.state.team}
updateTeamCallback={this.updateTeamCallback}
/>
<UpdateTeamNameModal
showModal={this.state.showNameModal}
hideModal={this.hideNameModalCallback}
team={this.state.team}
updateTeamCallback={this.updateTeamCallback}
/>
{this.renderEditNameModel()}
</Wrapper>
);
}

6
app/javascript/packs/src/settings/components/team/components/UpdateTeamNameModal.jsx
View file

@ -24,17 +24,13 @@ const StyledHelpBlock = styled(HelpBlock)`
class UpdateTeamNameModal extends Component {
constructor(props) {
super(props);
this.state = { errorMessage: "", name: "" };
this.state = { errorMessage: "", name: props.team.name};
this.onCloseModal = this.onCloseModal.bind(this);
this.updateName = this.updateName.bind(this);
this.handleName = this.handleName.bind(this);
this.getValidationState = this.getValidationState.bind(this);
}
componentDidMount() {
this.setState({ name: this.props.team.name });
}
onCloseModal() {
this.setState({ errorMessage: "", name: "" });
this.props.hideModal();