123 lines
3.2 KiB
JavaScript
123 lines
3.2 KiB
JavaScript
import React, { Component } from "react";
|
|
import { GithubPicker } from "react-color";
|
|
import { connect } from "react-redux";
|
|
import { Redirect } from "react-router-dom";
|
|
import { Container, Form, Header, Label, Message } from "semantic-ui-react";
|
|
|
|
import {
|
|
setFormWorktypeColor,
|
|
setFormWorktypeLabel,
|
|
clearWorktypeRequestSuccess,
|
|
clearWorktypeRequestError,
|
|
} from "../../actions/worktype/reducer.actions";
|
|
import {
|
|
updateWorktypeRequest,
|
|
readWorktypeRequest
|
|
} from "../../actions/worktype/saga.actions";
|
|
import Error from "../Shared/Error";
|
|
|
|
class UpdateWorkTypeForm extends Component {
|
|
componentWillMount = () => {
|
|
const uuid = this.props.match.params.uuid;
|
|
this.props.dispatch(readWorktypeRequest(uuid));
|
|
};
|
|
|
|
componentWillUnmount = () => {
|
|
this.props.dispatch(setFormWorktypeColor(""));
|
|
this.props.dispatch(setFormWorktypeLabel(""));
|
|
this.props.dispatch(clearWorktypeRequestSuccess());
|
|
this.props.dispatch(clearWorktypeRequestError());
|
|
};
|
|
|
|
changeColor = color => {
|
|
this.props.dispatch(setFormWorktypeColor(color.hex));
|
|
};
|
|
|
|
onSubmitWorktype = event => {
|
|
event.preventDefault();
|
|
const { uuid, color } = this.props;
|
|
this.props.dispatch(updateWorktypeRequest({ uuid, color }));
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
isSendingWorktypeRequest,
|
|
worktypeRequestError,
|
|
worktypeRequestSuccess,
|
|
uuid,
|
|
label,
|
|
color,
|
|
selfUser
|
|
} = this.props;
|
|
|
|
if (!selfUser.client) {
|
|
return <Redirect to="/" />;
|
|
}
|
|
|
|
return (
|
|
<UpdateWorkTypeFormView
|
|
isSendingWorktypeRequest={isSendingWorktypeRequest}
|
|
worktypeRequestError={worktypeRequestError}
|
|
worktypeRequestSuccess={worktypeRequestSuccess}
|
|
uuid={uuid}
|
|
label={label}
|
|
color={color}
|
|
changeColor={this.changeColor}
|
|
onSubmitWorktype={this.onSubmitWorktype}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return { ...state.worktype, selfUser: state.user.selfUser };
|
|
}
|
|
|
|
const UpdateWorkTypeFormView = ({
|
|
isSendingWorktypeRequest,
|
|
worktypeRequestError,
|
|
worktypeRequestSuccess,
|
|
label,
|
|
color,
|
|
changeColor,
|
|
onSubmitWorktype
|
|
}) => (
|
|
<Container>
|
|
<Header>Update Worktype</Header>
|
|
<Form
|
|
loading={isSendingWorktypeRequest}
|
|
onSubmit={onSubmitWorktype}
|
|
error={!!worktypeRequestError}
|
|
success={!!worktypeRequestSuccess}
|
|
>
|
|
<Form.Field>
|
|
<label>Label</label>
|
|
<input type="text" disabled value={label} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<label>Color</label>
|
|
<Label
|
|
circular
|
|
empty
|
|
size="massive"
|
|
style={{
|
|
backgroundColor: color,
|
|
borderColor: color
|
|
}}
|
|
/>
|
|
<GithubPicker color={color} onChangeComplete={changeColor} />
|
|
</Form.Field>
|
|
<Error header="Update Worktype failed!" error={worktypeRequestError} />
|
|
<Message success>
|
|
<Message.Header>Update Worktype successful!</Message.Header>
|
|
<p>Worktype successfully updated.</p>
|
|
{!!worktypeRequestSuccess &&
|
|
<Redirect to="/user/profile/client/worktypes" />}
|
|
</Message>
|
|
<Form.Button>Update Worktype</Form.Button>
|
|
</Form>
|
|
</Container>
|
|
);
|
|
|
|
export default connect(mapStateToProps)(UpdateWorkTypeForm);
|