76 lines
2.1 KiB
React
76 lines
2.1 KiB
React
|
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);
|