mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +08:00
adds avatar and editable inputs
This commit is contained in:
parent
c52521b96f
commit
0de080485e
10
app/javascript/packs/src/settings/components/Avatar.jsx
Normal file
10
app/javascript/packs/src/settings/components/Avatar.jsx
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
import React from "react";
|
||||||
|
import { string } from "prop-types";
|
||||||
|
|
||||||
|
const Avatar = props => <img src={props.imgSource} alt="default avatar" />;
|
||||||
|
|
||||||
|
Avatar.propTypes = {
|
||||||
|
imgSource: string.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Avatar;
|
|
@ -0,0 +1,25 @@
|
||||||
|
import React from "react";
|
||||||
|
import { string, func } from "prop-types";
|
||||||
|
import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
|
||||||
|
|
||||||
|
const InputDisabled = props =>
|
||||||
|
<form>
|
||||||
|
<FormGroup>
|
||||||
|
<ControlLabel>
|
||||||
|
{props.labelValue}
|
||||||
|
</ControlLabel>
|
||||||
|
<FormControl type={props.inputType} value={props.inputValue} disabled />
|
||||||
|
<Button bsStyle="default" onClick={props.enableEdit}>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
</FormGroup>
|
||||||
|
</form>;
|
||||||
|
|
||||||
|
InputDisabled.propTypes = {
|
||||||
|
labelValue: string.isRequired,
|
||||||
|
inputType: string.isRequired,
|
||||||
|
inputValue: string.isRequired,
|
||||||
|
enableEdit: func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InputDisabled;
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
|
||||||
|
|
||||||
|
class InputEnabled extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
value: this.props.inputValue
|
||||||
|
};
|
||||||
|
|
||||||
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange(event) {
|
||||||
|
this.setState({ value: event.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<form>
|
||||||
|
<FormGroup>
|
||||||
|
<ControlLabel>
|
||||||
|
{this.props.labelValue}
|
||||||
|
</ControlLabel>
|
||||||
|
<FormControl
|
||||||
|
type={this.props.inputType}
|
||||||
|
value={this.state.value}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
/>
|
||||||
|
<Button bsStyle="primary" onClick={this.props.disableEdit}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button bsStyle="default">Update</Button>
|
||||||
|
</FormGroup>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
InputEnabled.propTypes = {
|
||||||
|
labelValue: PropTypes.string.isRequired,
|
||||||
|
inputType: PropTypes.string.isRequired,
|
||||||
|
inputValue: PropTypes.string.isRequired,
|
||||||
|
disableEdit: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InputEnabled;
|
90
app/javascript/packs/src/settings/components/MyProfile.jsx
Normal file
90
app/javascript/packs/src/settings/components/MyProfile.jsx
Normal file
|
@ -0,0 +1,90 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
import _ from "lodash";
|
||||||
|
|
||||||
|
import Avatar from "./Avatar";
|
||||||
|
import InputDisabled from "./InputDisabled";
|
||||||
|
import InputEnabled from "./InputEnabled";
|
||||||
|
|
||||||
|
import { CURRENT_USER_PATH } from "../../../app/routes";
|
||||||
|
|
||||||
|
class MyProfile extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
avatar: "",
|
||||||
|
inputs: {
|
||||||
|
fullName: {
|
||||||
|
label: "Full name",
|
||||||
|
value: "",
|
||||||
|
isEditable: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.toggleIsEditable = this.toggleIsEditable.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
axios.get(CURRENT_USER_PATH, { withCredentials: true }).then(data => {
|
||||||
|
const userData = data.data.user;
|
||||||
|
this.setState(previousState =>
|
||||||
|
_.merge({}, previousState, {
|
||||||
|
avatar: userData.avatarThumbPath,
|
||||||
|
inputs: {
|
||||||
|
fullName: {
|
||||||
|
value: userData.fullName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleIsEditable(e) {
|
||||||
|
const currEditableState = this.state.inputs.fullName.isEditable;
|
||||||
|
e.preventDefault();
|
||||||
|
this.setState(previousState =>
|
||||||
|
_.merge({}, previousState, {
|
||||||
|
inputs: { fullName: { isEditable: !currEditableState } }
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let fullNameField;
|
||||||
|
const fullNameState = this.state.inputs.fullName;
|
||||||
|
|
||||||
|
if (this.state.inputs.fullName.isEditable) {
|
||||||
|
fullNameField = (
|
||||||
|
<InputEnabled
|
||||||
|
labelValue={fullNameState.label}
|
||||||
|
inputValue={fullNameState.value}
|
||||||
|
inputType="text"
|
||||||
|
disableEdit={this.toggleIsEditable}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
fullNameField = (
|
||||||
|
<InputDisabled
|
||||||
|
labelValue={fullNameState.label}
|
||||||
|
inputValue={fullNameState.value}
|
||||||
|
inputType="text"
|
||||||
|
enableEdit={this.toggleIsEditable}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>My Profile</h2>
|
||||||
|
<h4>Avatar</h4>
|
||||||
|
<Avatar imgSource={this.state.avatar} />
|
||||||
|
{fullNameField}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MyProfile;
|
|
@ -2,4 +2,5 @@ json.user do
|
||||||
json.id user.id
|
json.id user.id
|
||||||
json.fullName user.full_name
|
json.fullName user.full_name
|
||||||
json.avatarPath avatar_path(user, :icon_small)
|
json.avatarPath avatar_path(user, :icon_small)
|
||||||
|
json.avatarThumbPath avatar_path(user, :thumb)
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue