135 lines
3.9 KiB
JavaScript
135 lines
3.9 KiB
JavaScript
import React, { Component } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Redirect, Link } from "react-router-dom";
|
|
import {
|
|
Button,
|
|
Card,
|
|
Container,
|
|
Header,
|
|
Label,
|
|
List,
|
|
Popup,
|
|
Segment
|
|
} from "semantic-ui-react";
|
|
import { deleteEmployeeRequest } from "../../../actions/employee/saga.actions";
|
|
|
|
class ClientProviders extends Component {
|
|
deleteEmployee = uuid => {
|
|
this.props.dispatch(deleteEmployeeRequest(uuid));
|
|
};
|
|
|
|
render() {
|
|
const { selfUser } = this.props;
|
|
if (selfUser.client) {
|
|
return (
|
|
<ClientProvidersView
|
|
user={selfUser}
|
|
deleteEmployee={this.deleteEmployee}
|
|
/>
|
|
);
|
|
} else {
|
|
return <Redirect to="/" />;
|
|
}
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return { selfUser: state.user.selfUser };
|
|
}
|
|
|
|
const ClientProvidersView = ({ user, deleteEmployee }) => (
|
|
<Container>
|
|
<Header>Providers</Header>
|
|
<Segment>
|
|
<Button
|
|
basic
|
|
color="green"
|
|
size="small"
|
|
as={Link}
|
|
to="/user/profile/client/add-provider"
|
|
>
|
|
Add a Provider
|
|
</Button>
|
|
</Segment>
|
|
{(user.client.employees || []).filter(employee => !employee.deleted)
|
|
.length > 0 && (
|
|
<Card.Group>
|
|
{user.client.employees
|
|
.filter(employee => !employee.deleted)
|
|
.map((employee, index) => (
|
|
<Card key={index}>
|
|
<Card.Content>
|
|
{(employee.approved === null ||
|
|
employee.approved === false) && (
|
|
<div>
|
|
<Card.Header as="h4">{employee.provider}</Card.Header>
|
|
<Card.Description>{employee.note}</Card.Description>
|
|
</div>
|
|
)}
|
|
{employee.approved && (
|
|
<div>
|
|
<Card.Header as="h4">
|
|
{`${employee.provider.first_name} ${
|
|
employee.provider.last_name
|
|
}`.trim() || "No Name!"}
|
|
</Card.Header>
|
|
<Card.Description>
|
|
{employee.provider.userinfo && (
|
|
<List>
|
|
{employee.provider.userinfo.phone_number && (
|
|
<List.Item>
|
|
Phone Number:{" "}
|
|
{employee.provider.userinfo.phone_number}
|
|
</List.Item>
|
|
)}
|
|
</List>
|
|
)}
|
|
</Card.Description>
|
|
</div>
|
|
)}
|
|
<Label
|
|
attached="bottom right"
|
|
color={
|
|
employee.approved === null
|
|
? "grey"
|
|
: !!employee.approved ? "green" : "red"
|
|
}
|
|
>
|
|
{employee.approved === null
|
|
? "Pending"
|
|
: !!employee.approved ? "Approved" : "Ended"}
|
|
</Label>
|
|
</Card.Content>
|
|
<Card.Content extra>
|
|
<Popup
|
|
content={
|
|
<div>
|
|
Are you sure you want to delete this employee?<br />
|
|
<Button
|
|
basic
|
|
color="red"
|
|
size="small"
|
|
onClick={() => deleteEmployee(employee.uuid)}
|
|
>
|
|
Confirm Deletion
|
|
</Button>
|
|
</div>
|
|
}
|
|
trigger={
|
|
<Button basic color="red" size="small">
|
|
Delete
|
|
</Button>
|
|
}
|
|
on="click"
|
|
position="top right"
|
|
/>
|
|
</Card.Content>
|
|
</Card>
|
|
))}
|
|
</Card.Group>
|
|
)}
|
|
</Container>
|
|
);
|
|
|
|
export default connect(mapStateToProps)(ClientProviders);
|