scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-29 03:35:25 +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

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