tanner
/
caremyway-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added worktype menu option, usertype check, deletion confirmation, redirect

Browse Source
master
Alexander Wong 7 years ago
parent 0ae0a92187
commit 0486a7fe64
8 changed files with 184 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/components/App.jsx
  2. 9
      src/components/Navbar.jsx
  3. 88
      src/components/User/Client/ClientProfile.jsx
  4. 12
      src/components/User/Profile.jsx
  5. 8
      src/components/User/Provider/ProviderProfile.jsx
  6. 21
      src/components/Worktype/CreateWorkTypeForm.jsx
  7. 31
      src/components/Worktype/UpdateWorkTypeForm.jsx
  8. 115
      src/components/Worktype/Worktypes.jsx

9
src/components/App.jsx
Unescape View File

@ -7,8 +7,9 @@ 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 CreateWorkTypeForm from "./Worktype/CreateWorkTypeForm";
import UpdateWorkTypeForm from "./Worktype/UpdateWorkTypeForm";
import Worktypes from "./Worktype/Worktypes";
import CompleteRegistration from "./User/CompleteRegistration";
import EditProfile from "./User/EditProfile";
import Profile from "./User/Profile";
@ -48,6 +49,10 @@ class App extends Component {
path="/auth/reset-password/:uid/:token"
component={ResetPassword}
/>
<PrivateRoute
path="/user/profile/client/worktypes"
component={Worktypes}
/>
<PrivateRoute
path="/user/profile/client/update-worktype/:uuid"
component={UpdateWorkTypeForm}

9
src/components/Navbar.jsx
Unescape View File

@ -20,11 +20,12 @@ class Navbar extends Component {
};
render() {
const { userToken } = this.props;
const { userToken, selfUser } = this.props;
return (
<NavbarView
isAuthenticated={!!userToken}
dispatchLogoutRequest={this.dispatchLogoutRequest}
selfUser={selfUser}
/>
);
}
@ -37,7 +38,7 @@ function mapStateToProps(state) {
};
}
const NavbarView = ({ isAuthenticated, dispatchLogoutRequest }) => (
const NavbarView = ({ isAuthenticated, dispatchLogoutRequest, selfUser }) => (
<Menu>
<Menu.Item as={Link} to="/">
Caremyway
@ -61,6 +62,10 @@ const NavbarView = ({ isAuthenticated, dispatchLogoutRequest }) => (
<Dropdown.Item as={Link} to="/user/profile">
My Profile
</Dropdown.Item>
{selfUser.client &&
<Dropdown.Item as={Link} to="/user/profile/client/worktypes">
Work Types
</Dropdown.Item>}
<Dropdown.Item as={Link} to="/auth/settings">
Settings
</Dropdown.Item>

88
src/components/User/Client/ClientProfile.jsx
Unescape View File

@ -1,20 +1,11 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Card, Button, Label } from "semantic-ui-react";
import { deleteWorktypeRequest } from "../../../actions/worktype/saga.actions";
import { Card } from "semantic-ui-react";
class ClientProfile extends Component {
deleteWorkType = uuid => {
this.props.dispatch(deleteWorktypeRequest(uuid));
};
render() {
const { selfUser } = this.props;
return (
<ClientProfileView user={selfUser} deleteWorkType={this.deleteWorkType} />
);
return <ClientProfileView user={selfUser} />;
}
}
@ -22,72 +13,15 @@ function mapStateToProps(state) {
return { ...state.user };
}
const ClientProfileView = ({ user, deleteWorkType }) => (
<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 || []).filter(worktype => !worktype.deleted)
.length > 0 &&
<Card.Group>
{user.client.work_types
.filter(worktype => !worktype.deleted)
.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"
onClick={() => deleteWorkType(worktype.uuid)}
>
Delete
</Button>
</Button.Group>
</Card.Content>
</Card>
))}
</Card.Group>}
</div>
const ClientProfileView = ({ user }) => (
<Card fluid={true}>
<Card.Content>
<Card.Header>Client Information</Card.Header>
{user.client &&
user.client.business_number &&
<Card.Meta>Business Number: {user.client.business_number}</Card.Meta>}
</Card.Content>
</Card>
);
export default connect(mapStateToProps)(ClientProfile);

12
src/components/User/Profile.jsx
Unescape View File

@ -38,11 +38,13 @@ const ProfileView = ({ user }) => (
"User Registration Not Completed"}
</span>
{user.first_name} {user.last_name}
<List>
<List.Item>
Phone Number: {user.userinfo.phone_number}
</List.Item>
</List>
{user.userinfo &&
<List>
{user.userinfo.phone_number &&
<List.Item>
Phone Number: {user.userinfo.phone_number}
</List.Item>}
</List>}
</Card.Description>
</Card.Content>
<Card.Content extra>

8
src/components/User/Provider/ProviderProfile.jsx
Unescape View File

@ -5,9 +5,7 @@ import { Card } from "semantic-ui-react";
class ProviderProfile extends Component {
render() {
const { selfUser } = this.props;
return (
<ProviderProfileView user={selfUser} />
);
return <ProviderProfileView user={selfUser} />;
}
}
@ -20,7 +18,9 @@ const ProviderProfileView = ({ user }) => (
<Card fluid={true}>
<Card.Content>
<Card.Header>Provider Information</Card.Header>
<Card.Meta>Social Insurance Number: {user.provider.sin}</Card.Meta>
{user.provider &&
user.provider.sin &&
<Card.Meta>Social Insurance Number: {user.provider.sin}</Card.Meta>}
</Card.Content>
</Card>
</div>

21
src/components/User/Client/CreateWorkTypeForm.jsx → src/components/Worktype/CreateWorkTypeForm.jsx
Unescape View File

@ -1,6 +1,7 @@
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 {
@ -8,12 +9,12 @@ import {
clearWorktypeRequestSuccess,
setFormWorktypeColor,
setFormWorktypeLabel
} from "../../../actions/worktype/reducer.actions";
import { createWorktypeRequest } from "../../../actions/worktype/saga.actions";
import Error from "../../Shared/Error";
} from "../../actions/worktype/reducer.actions";
import { createWorktypeRequest } from "../../actions/worktype/saga.actions";
import Error from "../Shared/Error";
class CreateWorkTypeForm extends Component {
componentWillUnmount = () => {
componentWillMount = () => {
this.props.dispatch(clearWorktypeRequestError());
this.props.dispatch(clearWorktypeRequestSuccess());
this.props.dispatch(setFormWorktypeColor(""));
@ -40,9 +41,14 @@ class CreateWorkTypeForm extends Component {
worktypeRequestError,
worktypeRequestSuccess,
label,
color
color,
selfUser
} = this.props;
if (!selfUser.client) {
return <Redirect to="/" />;
}
return (
<CreateWorkTypeFormView
isSendingWorktypeRequest={isSendingWorktypeRequest}
@ -59,7 +65,7 @@ class CreateWorkTypeForm extends Component {
}
function mapStateToProps(state) {
return { ...state.worktype };
return { ...state.worktype, selfUser: state.user.selfUser };
}
const CreateWorkTypeFormView = ({
@ -105,7 +111,8 @@ const CreateWorkTypeFormView = ({
<Error header="Create Worktype failed!" error={worktypeRequestError} />
<Message success>
<Message.Header>Create Worktype successful!</Message.Header>
<p>Set worktype successfully.</p>
<p>Worktype successfully created.</p>
{!!worktypeRequestSuccess && <Redirect to="/user/profile/client/worktypes" />}
</Message>
<Form.Button>Submit Worktype</Form.Button>
</Form>

31
src/components/User/Client/UpdateWorkTypeForm.jsx → src/components/Worktype/UpdateWorkTypeForm.jsx
Unescape View File

@ -1,26 +1,26 @@
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 {
clearWorktypeRequestError,
clearWorktypeRequestSuccess,
setFormWorktypeColor,
setFormWorktypeLabel
} from "../../../actions/worktype/reducer.actions";
import { updateWorktypeRequest, readWorktypeRequest } from "../../../actions/worktype/saga.actions";
import Error from "../../Shared/Error";
} 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());
this.props.dispatch(setFormWorktypeColor(""));
this.props.dispatch(setFormWorktypeLabel(""));
};
@ -42,9 +42,14 @@ class UpdateWorkTypeForm extends Component {
worktypeRequestSuccess,
uuid,
label,
color
color,
selfUser
} = this.props;
if (!selfUser.client) {
return <Redirect to="/" />;
}
return (
<UpdateWorkTypeFormView
isSendingWorktypeRequest={isSendingWorktypeRequest}
@ -61,7 +66,7 @@ class UpdateWorkTypeForm extends Component {
}
function mapStateToProps(state) {
return { ...state.worktype };
return { ...state.worktype, selfUser: state.user.selfUser };
}
const UpdateWorkTypeFormView = ({
@ -83,7 +88,7 @@ const UpdateWorkTypeFormView = ({
>
<Form.Field>
<label>Label</label>
<input type="text" disabled value={label}/>
<input type="text" disabled value={label} />
</Form.Field>
<Form.Field>
<label>Color</label>
@ -101,7 +106,9 @@ const UpdateWorkTypeFormView = ({
<Error header="Update Worktype failed!" error={worktypeRequestError} />
<Message success>
<Message.Header>Update Worktype successful!</Message.Header>
<p>Update worktype successfully.</p>
<p>Worktype successfully updated.</p>
{!!worktypeRequestSuccess &&
<Redirect to="/user/profile/client/worktypes" />}
</Message>
<Form.Button>Update Worktype</Form.Button>
</Form>

115
src/components/Worktype/Worktypes.jsx
Unescape View File

@ -0,0 +1,115 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";
import {
Button,
Card,
Container,
Header,
Label,
Popup,
Segment
} from "semantic-ui-react";
import { deleteWorktypeRequest } from "../../actions/worktype/saga.actions";
class Worktypes extends Component {
deleteWorkType = uuid => {
this.props.dispatch(deleteWorktypeRequest(uuid));
};
render() {
const { selfUser } = this.props;
if (selfUser.client) {
return (
<WorktypesView
user={selfUser}
deleteWorkType={this.deleteWorkType}
/>
);
} else {
return <Redirect to="/" />;
}
}
}
function mapStateToProps(state) {
return { selfUser: state.user.selfUser };
}
const WorktypesView = ({ user, deleteWorkType, worktypeSuccess }) => (
<Container>
<Header>Worktypes</Header>
<Segment>
<Button
basic
color="green"
size="small"
as={Link}
to="/user/profile/client/create-worktype"
>
Create Worktype
</Button>
</Segment>
{(user.client.work_types || []).filter(worktype => !worktype.deleted)
.length > 0 &&
<Card.Group>
{user.client.work_types
.filter(worktype => !worktype.deleted)
.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>
<Popup
content={
<div>
Are you sure you want to delete this work type?<br />
<Button
basic
color="red"
size="small"
onClick={() => deleteWorkType(worktype.uuid)}
>
Confirm Deletion
</Button>
</div>
}
trigger={
<Button basic color="red" size="small">Delete</Button>
}
on="click"
position="top right"
/>
</Button.Group>
</Card.Content>
</Card>
))}
</Card.Group>}
</Container>
);
export default connect(mapStateToProps)(Worktypes);
Write Preview
Loading…
Cancel
Save