scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-12 16:14:58 +08:00
Code Issues Projects Releases Packages Wiki Activity

Change edit team name & description modals to use new validation

Browse source
This commit is contained in:
Luka Murn 2017-10-23 12:55:32 +02:00
parent 463d17ace1
commit ceb11c143f
2 changed files with 98 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx
View file

@ -3,55 +3,40 @@ import PropTypes, { bool, number, string, func } from "prop-types";
import { import {
Modal, Modal,
Button, Button,
FormGroup,
ControlLabel, ControlLabel,
FormControl, FormControl,
HelpBlock
} from "react-bootstrap"; } from "react-bootstrap";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import _ from "lodash";
import styled from "styled-components";
import axios from "../../../../../config/axios"; import axios from "../../../../../config/axios";
import {
ValidatedForm,
ValidatedFormGroup,
ValidatedFormControl,
ValidatedErrorHelpBlock,
ValidatedSubmitButton
} from "../../../../../components/validation";
import {
textMaxLengthValidator
} from "../../../../../components/validation/validators/text_validators";
import { TEXT_MAX_LENGTH } from "../../../../../config/constants/numeric";
import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints"; import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
class UpdateTeamDescriptionModal extends Component { class UpdateTeamDescriptionModal extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { errorMessage: "", description: "" }; this.state = { description: "" };
this.onCloseModal = this.onCloseModal.bind(this); this.onCloseModal = this.onCloseModal.bind(this);
this.updateDescription = this.updateDescription.bind(this); this.updateDescription = this.updateDescription.bind(this);
this.handleDescription = this.handleDescription.bind(this); this.handleDescription = this.handleDescription.bind(this);
this.getValidationState = this.getValidationState.bind(this);
} }
onCloseModal() { onCloseModal() {
this.setState({ errorMessage: "", description: "" }); this.setState({ description: "" });
this.props.hideModal(); this.props.hideModal();
} }
getValidationState() {
return this.state.errorMessage.length > 0 ? "error" : null;
}
handleDescription(el) { handleDescription(el) {
const { value } = el.target; this.setState({ description: el.target.value });
if (value.length > TEXT_MAX_LENGTH) {
this.setState({
errorMessage: (
<FormattedMessage
id="error_messages.text_too_long"
values={{ max_length: TEXT_MAX_LENGTH }}
/>
)
});
} else {
this.setState({ errorMessage: "", description: value });
}
} }
updateDescription() { updateDescription() {
@ -74,40 +59,40 @@ class UpdateTeamDescriptionModal extends Component {
render() { render() {
return ( return (
<Modal show={this.props.showModal} onHide={this.onCloseModal}> <Modal show={this.props.showModal} onHide={this.onCloseModal}>
<Modal.Header closeButton> <ValidatedForm ref={(f) => { this.form = f; }}>
<Modal.Title> <Modal.Header closeButton>
<FormattedMessage id="settings_page.update_team_description_modal.title" /> <Modal.Title>
</Modal.Title> <FormattedMessage id="settings_page.update_team_description_modal.title" />
</Modal.Header> </Modal.Title>
<Modal.Body> </Modal.Header>
<FormGroup <Modal.Body>
controlId="teamDescription" <ValidatedFormGroup tag="description">
validationState={this.getValidationState()} <ControlLabel>
> <FormattedMessage id="settings_page.update_team_description_modal.label" />
<ControlLabel> </ControlLabel>
<FormattedMessage id="settings_page.update_team_description_modal.label" /> <ValidatedFormControl
</ControlLabel> componentClass="textarea"
<FormControl tag="description"
componentClass="textarea" defaultValue={this.props.team.description}
defaultValue={this.props.team.description} onChange={this.handleDescription}
onChange={this.handleDescription} validatorsOnChange={[textMaxLengthValidator]}
/> />
<FormControl.Feedback /> <FormControl.Feedback />
<StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock> <ValidatedErrorHelpBlock tag="description" />
</FormGroup> </ValidatedFormGroup>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button <ValidatedSubmitButton
bsStyle="primary" bsStyle="primary"
onClick={this.updateDescription} onClick={this.updateDescription}
disabled={!_.isEmpty(this.state.errorMessage)} >
> <FormattedMessage id="general.update" />
<FormattedMessage id="general.update" /> </ValidatedSubmitButton>
</Button> <Button onClick={this.onCloseModal}>
<Button onClick={this.onCloseModal}> <FormattedMessage id="general.close" />
<FormattedMessage id="general.close" /> </Button>
</Button> </Modal.Footer>
</Modal.Footer> </ValidatedForm>
</Modal> </Modal>
); );
} }

115
app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
View file

@ -3,55 +3,40 @@ import PropTypes, { bool, number, string, func } from "prop-types";
import { import {
Modal, Modal,
Button, Button,
FormGroup,
ControlLabel, ControlLabel,
FormControl, FormControl,
HelpBlock
} from "react-bootstrap"; } from "react-bootstrap";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import _ from "lodash";
import styled from "styled-components";
import axios from "../../../../../config/axios"; import axios from "../../../../../config/axios";
import {
ValidatedForm,
ValidatedFormGroup,
ValidatedFormControl,
ValidatedErrorHelpBlock,
ValidatedSubmitButton
} from "../../../../../components/validation";
import {
nameLengthValidator
} from "../../../../../components/validation/validators/text_validators";
import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric";
import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints"; import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
class UpdateTeamNameModal extends Component { class UpdateTeamNameModal extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { errorMessage: "", name: props.team.name }; this.state = { 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);
} }
onCloseModal() { onCloseModal() {
this.setState({ errorMessage: "", name: "" }); this.setState({ name: "" });
this.props.hideModal(); this.props.hideModal();
} }
getValidationState() { handleName(e) {
return this.state.errorMessage.length > 0 ? "error" : null; this.setState({ name: e.target.value });
}
handleName(el) {
const { value } = el.target;
if (value.length > NAME_MAX_LENGTH) {
this.setState({
errorMessage: (
<FormattedMessage
id="error_messages.text_too_long"
values={{ max_length: NAME_MAX_LENGTH }}
/>
)
});
} else {
this.setState({ errorMessage: "", name: value });
}
} }
updateName() { updateName() {
@ -68,46 +53,48 @@ class UpdateTeamNameModal extends Component {
this.props.updateTeamCallback(response.data.team); this.props.updateTeamCallback(response.data.team);
this.onCloseModal(); this.onCloseModal();
}) })
.catch(error => this.setState({ errorMessage: error.message })); .catch(error => {
this.form.setErrorsForTag("name", [error.message]);
});
} }
render() { render() {
return ( return (
<Modal show={this.props.showModal} onHide={this.onCloseModal}> <Modal show={this.props.showModal} onHide={this.onCloseModal}>
<Modal.Header closeButton> <ValidatedForm ref={(f) => { this.form = f; }}>
<Modal.Title> <Modal.Header closeButton>
<FormattedMessage id="settings_page.update_team_name_modal.title" /> <Modal.Title>
</Modal.Title> <FormattedMessage id="settings_page.update_team_name_modal.title" />
</Modal.Header> </Modal.Title>
<Modal.Body> </Modal.Header>
<FormGroup <Modal.Body>
controlId="teamName" <ValidatedFormGroup tag="name">
validationState={this.getValidationState()} <ControlLabel>
> <FormattedMessage id="settings_page.update_team_name_modal.label" />
<ControlLabel> </ControlLabel>
<FormattedMessage id="settings_page.update_team_name_modal.label" /> <ValidatedFormControl
</ControlLabel> type="text"
<FormControl tag="name"
type="text" validatorsOnChange={[nameLengthValidator]}
onChange={this.handleName} onChange={this.handleName}
value={this.state.name} value={this.state.name}
/> />
<FormControl.Feedback /> <FormControl.Feedback />
<StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock> <ValidatedErrorHelpBlock tag="name" />
</FormGroup> </ValidatedFormGroup>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button <ValidatedSubmitButton
bsStyle="primary" onClick={this.updateName}
onClick={this.updateName} bsStyle="primary"
disabled={!_.isEmpty(this.state.errorMessage)} >
> <FormattedMessage id="general.update" />
<FormattedMessage id="general.update" /> </ValidatedSubmitButton>
</Button> <Button onClick={this.onCloseModal}>
<Button onClick={this.onCloseModal}> <FormattedMessage id="general.close" />
<FormattedMessage id="general.close" /> </Button>
</Button> </Modal.Footer>
</Modal.Footer> </ValidatedForm>
</Modal> </Modal>
); );
} }