Create/Update worktypes

src/components/App.jsx

@@ -7,6 +7,8 @@ import Register from "./Auth/Register";
 import ResetPassword from "./Auth/ResetPassword";
 import Settings from "./Auth/Settings";
 import VerifyEmail from "./Auth/VerifyEmail";
+import CreateWorkTypeForm from "./User/Client/CreateWorkTypeForm";
+import UpdateWorkTypeForm from "./User/Client/UpdateWorkTypeForm";
 import CompleteRegistration from "./User/CompleteRegistration";
 import EditProfile from "./User/EditProfile";
 import Profile from "./User/Profile";
@@ -46,12 +48,23 @@ class App extends Component {
                 path="/auth/reset-password/:uid/:token"
                 component={ResetPassword}
               />
+              <PrivateRoute
+                path="/user/profile/client/update-worktype/:uuid"
+                component={UpdateWorkTypeForm}
+              />
+              <PrivateRoute
+                path="/user/profile/client/create-worktype"
+                component={CreateWorkTypeForm}
+              />
               <PrivateRoute path="/user/profile/edit" component={EditProfile} />
               <PrivateRoute path="/user/profile" component={Profile} />
-              <Route path='/user/complete-registration' component={Profile} />
+              <Route path="/user/complete-registration" component={Profile} />
               <Route component={NoMatch} />
             </Switch>
-            <Route path='/user/complete-registration' component={CompleteRegistration} />
+            <Route
+              path="/user/complete-registration"
+              component={CompleteRegistration}
+            />
           </div>
           <Footer />
         </div>

src/components/User/Client/ClientProfile.jsx

@@ -0,0 +1,75 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { Card, Button, Label } from "semantic-ui-react";
+
+class ClientProfile extends Component {
+  render() {
+    const { selfUser } = this.props;
+    return <ClientProfileView user={selfUser} />;
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+const ClientProfileView = ({ user }) => (
+  <div>
+    <Card fluid={true}>
+      <Card.Content>
+        <Card.Header>Client Information</Card.Header>
+        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>
+        <Card.Description>
+          <Button
+            basic
+            color="green"
+            size="small"
+            as={Link}
+            to="/user/profile/client/create-worktype"
+          >
+            Create Worktype
+          </Button>
+        </Card.Description>
+      </Card.Content>
+    </Card>
+    {(user.client.work_types || []).length &&
+      <Card.Group>
+        {user.client.work_types.map((worktype, index) => (
+          <Card key={index}>
+            <Card.Content>
+              <Card.Header as="h4">
+                <Label
+                  circular
+                  empty
+                  style={{
+                    backgroundColor: worktype.color,
+                    borderColor: worktype.color
+                  }}
+                />{"  " + worktype.label}
+              </Card.Header>
+              <Card.Meta>
+                Worktype
+              </Card.Meta>
+            </Card.Content>
+            <Card.Content extra>
+              <Button.Group>
+                <Button
+                  basic
+                  color="yellow"
+                  size="small"
+                  as={Link}
+                  to={`/user/profile/client/update-worktype/${worktype.uuid}`}
+                >
+                  Edit
+                </Button>
+                <Button basic color="red" size="small">Delete</Button>
+              </Button.Group>
+            </Card.Content>
+          </Card>
+        ))}
+      </Card.Group>}
+  </div>
+);
+
+export default connect(mapStateToProps)(ClientProfile);

src/components/User/Client/CreateWorkTypeForm.jsx

@@ -0,0 +1,113 @@
+import React, { Component } from "react";
+import { GithubPicker } from "react-color";
+import { connect } from "react-redux";
+import { Container, Form, Header, Label, Message } from "semantic-ui-react";
+
+import {
+  clearWorktypeRequestError,
+  clearWorktypeRequestSuccess,
+  setFormWorktypeColor,
+  setFormWorktypeLabel
+} from "../../../actions/worktype/reducer.actions";
+import { createWorktypeRequest } from "../../../actions/worktype/saga.actions";
+import Error from "../../Shared/Error";
+
+class CreateWorkTypeForm extends Component {
+  componentWillUnmount = () => {
+    this.props.dispatch(clearWorktypeRequestError());
+    this.props.dispatch(clearWorktypeRequestSuccess());
+  };
+
+  changeLabel = event => {
+    this.props.dispatch(setFormWorktypeLabel(event.target.value));
+  };
+
+  changeColor = color => {
+    this.props.dispatch(setFormWorktypeColor(color.hex));
+  };
+
+  onSubmitWorktype = event => {
+    event.preventDefault();
+    const { label, color } = this.props;
+    this.props.dispatch(createWorktypeRequest({ label, color }));
+  };
+
+  render() {
+    const {
+      isSendingWorktypeRequest,
+      worktypeRequestError,
+      worktypeRequestSuccess,
+      label,
+      color
+    } = this.props;
+
+    return (
+      <CreateWorkTypeFormView
+        isSendingWorktypeRequest={isSendingWorktypeRequest}
+        worktypeRequestError={worktypeRequestError}
+        worktypeRequestSuccess={worktypeRequestSuccess}
+        label={label}
+        color={color}
+        changeLabel={this.changeLabel}
+        changeColor={this.changeColor}
+        onSubmitWorktype={this.onSubmitWorktype}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.worktype };
+}
+
+const CreateWorkTypeFormView = ({
+  isSendingWorktypeRequest,
+  worktypeRequestError,
+  worktypeRequestSuccess,
+  label,
+  color,
+  changeLabel,
+  changeColor,
+  onSubmitWorktype
+}) => (
+  <Container>
+    <Header>Create Worktype</Header>
+    <Form
+      loading={isSendingWorktypeRequest}
+      onSubmit={onSubmitWorktype}
+      error={!!worktypeRequestError}
+      success={!!worktypeRequestSuccess}
+    >
+      <Form.Field>
+        <label>Label</label>
+        <input
+          placeholder="My worktype"
+          type="text"
+          value={label}
+          onChange={changeLabel}
+        />
+      </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="Create Worktype failed!" error={worktypeRequestError} />
+      <Message success>
+        <Message.Header>Create Worktype successful!</Message.Header>
+        <p>Set worktype successfully.</p>
+      </Message>
+      <Form.Button>Submit Worktype</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default connect(mapStateToProps)(CreateWorkTypeForm);

src/components/User/Client/UpdateWorkTypeForm.jsx

@@ -0,0 +1,108 @@
+import React, { Component } from "react";
+import { GithubPicker } from "react-color";
+import { connect } from "react-redux";
+import { Container, Form, Header, Label, Message } from "semantic-ui-react";
+
+import {
+  clearWorktypeRequestError,
+  clearWorktypeRequestSuccess,
+  setFormWorktypeColor
+} 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(clearWorktypeRequestError());
+    this.props.dispatch(clearWorktypeRequestSuccess());
+  };
+
+  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
+    } = this.props;
+
+    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 };
+}
+
+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>Update worktype successfully.</p>
+      </Message>
+      <Form.Button>Update Worktype</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default connect(mapStateToProps)(UpdateWorkTypeForm);

src/components/User/Profile.jsx

@@ -3,6 +3,8 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { Card, Container, Header, Label, List } from "semantic-ui-react";
 
+import ClientProfile from "./Client/ClientProfile";
+
 class Profile extends Component {
   render() {
     const { selfUser } = this.props;
@@ -35,38 +37,24 @@ const ProfileView = ({ user }) => (
               "User Registration Not Completed"}
           </span>
           {user.first_name} {user.last_name}
-          <List>
-            {user.userinfo &&
-              Object.keys(user.userinfo).map(function(key) {
+          {user.userinfo &&
+            <List>
+              {Object.keys(user.userinfo).map(function(key) {
                 return (
                   <List.Item key={key}>
                     {key}: {user.userinfo[key]}
                   </List.Item>
                 );
               })}
-            {user.client &&
-              Object.keys(user.client).map(function(key) {
-                return (
-                  <List.Item key={key}>
-                    {key}: {user.client[key]}
-                  </List.Item>
-                );
-              })}
-            {user.provider &&
-              Object.keys(user.provider).map(function(key) {
-                return (
-                  <List.Item key={key}>
-                    {key}: {user.provider[key]}
-                  </List.Item>
-                );
-              })}
-          </List>
+            </List>}
         </Card.Description>
       </Card.Content>
       <Card.Content extra>
         <Link to="/user/profile/edit">Edit Profile</Link>
       </Card.Content>
     </Card>
+    {user.client && <ClientProfile />}
+    {user.provider && <div />}
   </Container>
 );