From 124f227a8235e08bddf8376e0b3d01d33c4414f3 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 15 Aug 2018 14:47:25 -0400
Subject: Permissions is doneeee

---
 .../37/frontend/components/Permissions.js          | 131 +++++++++++++++++++++
 .../37/frontend/components/styles/Table.js         |  35 ++++++
 2 files changed, 166 insertions(+)
 create mode 100755 stepped-solutions/37/frontend/components/Permissions.js
 create mode 100755 stepped-solutions/37/frontend/components/styles/Table.js

(limited to 'stepped-solutions/37/frontend/components')

diff --git a/stepped-solutions/37/frontend/components/Permissions.js b/stepped-solutions/37/frontend/components/Permissions.js
new file mode 100755
index 0000000..4b08c39
--- /dev/null
+++ b/stepped-solutions/37/frontend/components/Permissions.js
@@ -0,0 +1,131 @@
+import { Query, Mutation } from 'react-apollo';
+import Error from './ErrorMessage';
+import gql from 'graphql-tag';
+import Table from './styles/Table';
+import SickButton from './styles/SickButton';
+import PropTypes from 'prop-types';
+
+const possiblePermissions = [
+  'ADMIN',
+  'USER',
+  'ITEMCREATE',
+  'ITEMUPDATE',
+  'ITEMDELETE',
+  'PERMISSIONUPDATE',
+];
+
+const UPDATE_PERMISSIONS_MUTATION = gql`
+  mutation updatePermissions($permissions: [Permission], $userId: ID!) {
+    updatePermissions(permissions: $permissions, userId: $userId) {
+      id
+      permissions
+      name
+      email
+    }
+  }
+`;
+
+const ALL_USERS_QUERY = gql`
+  query {
+    users {
+      id
+      name
+      email
+      permissions
+    }
+  }
+`;
+
+const Permissions = props => (
+  <Query query={ALL_USERS_QUERY}>
+    {({ data, loading, error }) => (
+      <div>
+        <Error error={error} />
+        <div>
+          <h2>Manage Permissions</h2>
+          <Table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Email</th>
+                {possiblePermissions.map(permission => <th key={permission}>{permission}</th>)}
+                <th>👇🏻</th>
+              </tr>
+            </thead>
+            <tbody>{data.users.map(user => <UserPermissions user={user} key={user.id} />)}</tbody>
+          </Table>
+        </div>
+      </div>
+    )}
+  </Query>
+);
+
+class UserPermissions extends React.Component {
+  static propTypes = {
+    user: PropTypes.shape({
+      name: PropTypes.string,
+      email: PropTypes.string,
+      id: PropTypes.string,
+      permissions: PropTypes.array,
+    }).isRequired,
+  };
+  state = {
+    permissions: this.props.user.permissions,
+  };
+  handlePermissionChange = (e) => {
+    const checkbox = e.target;
+    // take a copy of the current permissions
+    let updatedPermissions = [...this.state.permissions];
+    // figure out if we need to remove or add this permission
+    if (checkbox.checked) {
+      // add it in!
+      updatedPermissions.push(checkbox.value);
+    } else {
+      updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value);
+    }
+    this.setState({ permissions: updatedPermissions });
+  };
+  render() {
+    const user = this.props.user;
+    return (
+      <Mutation
+        mutation={UPDATE_PERMISSIONS_MUTATION}
+        variables={{
+          permissions: this.state.permissions,
+          userId: this.props.user.id,
+        }}
+      >
+        {(updatePermissions, { loading, error }) => (
+          <>
+            {error && <tr><td colspan="8"><Error error={error} /></td></tr>}
+            < tr >
+              <td>{user.name}</td>
+              <td>{user.email}</td>
+              {possiblePermissions.map(permission => (
+                <td key={permission}>
+                  <label htmlFor={`${user.id}-permission-${permission}`}>
+                    <input
+                      id={`${user.id}-permission-${permission}`}
+                      type="checkbox"
+                      checked={this.state.permissions.includes(permission)}
+                      value={permission}
+                      onChange={this.handlePermissionChange}
+                    />
+                  </label>
+                </td>
+              ))}
+              <td>
+                <SickButton type="button" disabled={loading} onClick={updatePermissions}>
+                  Updat{loading ? 'ing' : 'e'}
+                </SickButton>
+              </td>
+            </tr>
+          </>
+        )
+        }
+      </Mutation>
+    );
+  }
+}
+
+export default Permissions;
diff --git a/stepped-solutions/37/frontend/components/styles/Table.js b/stepped-solutions/37/frontend/components/styles/Table.js
new file mode 100755
index 0000000..b2cd6c4
--- /dev/null
+++ b/stepped-solutions/37/frontend/components/styles/Table.js
@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+const Table = styled.table`
+  border-spacing: 0;
+  width: 100%;
+  border: 1px solid ${props => props.theme.offWhite};
+  thead {
+    font-size: 10px;
+  }
+  td,
+  th {
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    border-right: 1px solid ${props => props.theme.offWhite};
+    padding: 5px;
+    position: relative;
+    &:last-child {
+      border-right: none;
+      width: 150px;
+      button {
+        width: 100%;
+      }
+    }
+    label {
+      padding: 10px 5px;
+      display: block;
+    }
+  }
+  tr {
+    &:hover {
+      background: ${props => props.theme.offWhite};
+    }
+  }
+`;
+
+export default Table;
-- 
cgit v1.3