functionality for client users to add providers

2018-01-21 15:23:50 -07:00
parent 95d86161ec
commit bc0628bcb7
14 changed files with 596 additions and 16 deletions
@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Redirect, Link } from "react-router-dom";
+import {
+  Button,
+  Card,
+  Container,
+  Header,
+  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>
+                <Card.Header as="h4">{employee.provider}</Card.Header>
+                <Card.Description>{employee.note}</Card.Description>
+                <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);