You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
4.1 KiB
133 lines
4.1 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Redirect } from "react-router-dom"; |
|
import { |
|
Button, |
|
Card, |
|
Container, |
|
Header, |
|
Label, |
|
List |
|
} from "semantic-ui-react"; |
|
import { updateEmployerRequest } from "../../../actions/employer/saga.actions"; |
|
|
|
class ProviderClients extends Component { |
|
updateEmployer = (uuid, approved) => { |
|
this.props.dispatch(updateEmployerRequest({ uuid, approved })); |
|
}; |
|
|
|
render() { |
|
const { selfUser } = this.props; |
|
if (selfUser.provider) { |
|
return ( |
|
<ProviderClientsView |
|
user={selfUser} |
|
updateEmployer={this.updateEmployer} |
|
/> |
|
); |
|
} else { |
|
return <Redirect to="/" />; |
|
} |
|
} |
|
} |
|
|
|
function mapStateToProps(state) { |
|
return { selfUser: state.user.selfUser }; |
|
} |
|
|
|
const ProviderClientsView = ({ user, updateEmployer }) => ( |
|
<Container> |
|
<Header>Clients</Header> |
|
{(user.provider.employers || []).filter(employer => !employer.deleted) |
|
.length > 0 && ( |
|
<Card.Group> |
|
{user.provider.employers |
|
.filter(employer => !employer.deleted) |
|
.map((employer, index) => ( |
|
<Card key={index}> |
|
<Card.Content> |
|
{(employer.approved === null || |
|
employer.approved === false) && ( |
|
<div> |
|
<Card.Header as="h4"> |
|
{employer.client.trim() || "No Name!"} |
|
</Card.Header> |
|
<Card.Description>{employer.note}</Card.Description> |
|
</div> |
|
)} |
|
{employer.approved && ( |
|
<div> |
|
<Card.Header as="h4"> |
|
{`${employer.client.first_name} ${ |
|
employer.client.last_name |
|
}`.trim() || "No Name!"} |
|
</Card.Header> |
|
<Card.Description> |
|
{employer.client.userinfo && ( |
|
<List> |
|
{employer.client.userinfo.phone_number && ( |
|
<List.Item> |
|
Phone Number:{" "} |
|
{employer.client.userinfo.phone_number} |
|
</List.Item> |
|
)} |
|
</List> |
|
)} |
|
</Card.Description> |
|
</div> |
|
)} |
|
<Label |
|
attached="bottom right" |
|
color={ |
|
employer.approved === null |
|
? "grey" |
|
: !!employer.approved ? "green" : "red" |
|
} |
|
> |
|
{employer.approved === null |
|
? "Pending" |
|
: !!employer.approved ? "Approved" : "Ended"} |
|
</Label> |
|
</Card.Content> |
|
<Card.Content extra> |
|
<Button.Group> |
|
{!employer.approved && ( |
|
<Button |
|
basic |
|
color="green" |
|
size="small" |
|
onClick={() => updateEmployer(employer.uuid, true)} |
|
> |
|
Approve |
|
</Button> |
|
)} |
|
{employer.approved === null && ( |
|
<Button |
|
basic |
|
color="red" |
|
size="small" |
|
onClick={() => updateEmployer(employer.uuid, false)} |
|
> |
|
Reject |
|
</Button> |
|
)} |
|
{employer.approved && ( |
|
<Button |
|
basic |
|
color="red" |
|
size="small" |
|
onClick={() => updateEmployer(employer.uuid, false)} |
|
> |
|
End |
|
</Button> |
|
)} |
|
</Button.Group> |
|
</Card.Content> |
|
</Card> |
|
))} |
|
</Card.Group> |
|
)} |
|
</Container> |
|
); |
|
|
|
export default connect(mapStateToProps)(ProviderClients);
|
|
|