summaryrefslogtreecommitdiffstats
path: root/stepped-solutions/FINISHED/frontend/components/Permissions.js
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-09-14 12:18:12 -0400
committerWes Bos <wesbos@gmail.com>2018-09-14 12:18:12 -0400
commit2d145b026cfdf54a63bef0b9d6324b6785390307 (patch)
treef6c1d8f987437803a5c026e70535bf9ff244e885 /stepped-solutions/FINISHED/frontend/components/Permissions.js
parent8a5825d52271d712ec7c8348447d433067e13ef2 (diff)
move finished folder
Diffstat (limited to 'stepped-solutions/FINISHED/frontend/components/Permissions.js')
-rw-r--r--stepped-solutions/FINISHED/frontend/components/Permissions.js131
1 files changed, 0 insertions, 131 deletions
diff --git a/stepped-solutions/FINISHED/frontend/components/Permissions.js b/stepped-solutions/FINISHED/frontend/components/Permissions.js
deleted file mode 100644
index 4b08c39..0000000
--- a/stepped-solutions/FINISHED/frontend/components/Permissions.js
+++ /dev/null
@@ -1,131 +0,0 @@
-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;