Admin is mostly working

admin/src/Permission/AddPermissionModal.js

@@ -0,0 +1,150 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import {
+  Container,
+  Checkbox,
+  Header,
+  Form,
+  Grid,
+  Modal,
+  Rail,
+  Segment,
+  List,
+  Input,
+  Button,
+  Message,
+  Icon,
+  Table
+} from "semantic-ui-react";
+
+// ----------------------------------------------------
+const requestMessageStyle = {
+  color: "red"
+};
+
+// ----------------------------------------------------
+class AddPermissionModal extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    // Set initial state
+    this.state = {
+      role: 5,
+      email: "",
+      error: ""
+    };
+  }
+
+  componentDidMount() {
+
+  }
+
+  componentWillReceiveProps(nextProps) {
+
+  }
+
+  handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
+  handleChange = (e, { newRole }) => this.setState({ newRole })
+
+
+
+
+  handleClose = () => {
+    this.setState({
+      error: ""
+    });
+    this.props.onClose(false);
+  }
+  handleSubmit() {
+    //if (this.props.updatePermissionId) {
+      const data = {email: this.state.email, shortName: this.props.shortName, role: this.state.role }
+
+      this.props.permissionActions.addPermission(data).then(requestMessage => {
+        if (requestMessage) {
+          // report to the user is there was a problem during registration
+          this.setState({
+            error: requestMessage
+          });
+          //this.props.onClose(false);
+        } else {
+          this.setState({
+            error: ""
+          });
+          this.props.onClose(true);
+        }
+      });
+
+
+    //}
+  }
+
+  render() {
+
+    const railStyle = {
+      top: "15px",
+      minHeight: "200px"
+    };
+    var errorMessage = "";
+
+    if (this.state.error) {
+      errorMessage = (
+      <Message negative>
+        <Message.Header>That didn't work...</Message.Header>
+        <p>{this.state.error}</p>
+      </Message>
+      )
+    }
+
+    return (
+      <Modal size='tiny' open={this.props.open} onClose={this.handleClose} centered={false}>
+        <Modal.Header>Select Role</Modal.Header>
+        <Modal.Content >
+          <Modal.Description>
+          <Form>
+       <Form.Field>
+         Add User Access to System: {this.props.shortName}
+       </Form.Field>
+       <Form.Field>
+         <Input label="User's email" placeholder='user@domain.com' name='email' onChange={this.handleInputChange} />
+       </Form.Field>
+       <Form.Field>
+         <Checkbox
+           radio
+           label='User'
+           name='role'
+           value={5}
+           checked={(this.state.role >= 0) && (this.state.role < 10)}
+           onChange={this.handleInputChange}
+         />
+       </Form.Field>
+       <Form.Field>
+         <Checkbox
+           radio
+           label='Admin'
+           name='role'
+           value={15}
+           checked={(this.state.role >= 10) && (this.state.role < 20)}
+           onChange={this.handleInputChange}
+         />
+       </Form.Field>
+     </Form>
+     {errorMessage}
+    </Modal.Description>
+  </Modal.Content>
+  <Modal.Actions>
+    <Button onClick={this.handleClose} >
+      <Icon name='remove' /> Cancel
+    </Button>
+    <Button onClick={this.handleSubmit} >
+      <Icon name='plus' /> Add
+    </Button>
+  </Modal.Actions>
+</Modal>
+
+    );
+  }
+}
+
+export default AddPermissionModal;

admin/src/Permission/AddPermissionModalContainer.js

@@ -0,0 +1,23 @@
+import { connect } from "react-redux"
+import * as permissionActionCreators from "./permission-actions"
+import { bindActionCreators } from 'redux'
+import AddPermissionModal from "./AddPermissionModal"
+
+//groups: state.group.items[props.match.params.shortName],
+function mapStateToProps(state,props) {
+  return {
+    permissions: state.permission.items,
+    shortName: props.shortName
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    permissionActions: bindActionCreators(permissionActionCreators,dispatch)
+  }
+}
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(AddPermissionModal)

admin/src/Permission/ListPermissions.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import { Link } from 'react-router-dom'
+import {
+  Container,
+  Header,
+  Form,
+  Grid,
+  Segment,
+  Input,
+  Button,
+  Message,
+  Icon,
+  Table
+} from "semantic-ui-react";
+
+// ----------------------------------------------------
+
+
+
+// ----------------------------------------------------
+class ListPermissions extends Component {
+  constructor(props) {
+    super(props);
+
+  }
+
+
+//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
+//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
+  render() {
+    const permissions = this.props.permissions;
+    if (permissions) {
+    return (
+
+      <Table >
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>Name</Table.HeaderCell>
+      <Table.HeaderCell>Email</Table.HeaderCell>
+      <Table.HeaderCell>Role</Table.HeaderCell>
+      <Table.HeaderCell></Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {permissions.map((permission, i) => (
+      <Table.Row key={ "Group-" + i}>
+        <Table.Cell>{permission.firstName} {permission.lastName}</Table.Cell>
+        <Table.Cell>{permission.email}</Table.Cell>
+        <Table.Cell>{permission.role}</Table.Cell>
+        <Table.Cell><Icon
+        name="pencil alternate"
+        link={true}
+        onClick={e => this.props.updatePermission(permission._id)}
+      />
+      <Icon
+        name="remove"
+        link={true}
+        onClick={e => this.props.deletePermission(permission)}
+      />
+  </Table.Cell>
+      </Table.Row>
+    ))}
+  </Table.Body>
+</Table>
+
+    );
+  } else {
+    return (
+      <div/>
+    );
+  }
+}
+}
+
+export default ListPermissions;

admin/src/Permission/UpdatePermissionModal.js

@@ -0,0 +1,134 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import {
+  Container,
+  Checkbox,
+  Header,
+  Form,
+  Grid,
+  Modal,
+  Rail,
+  Segment,
+  List,
+  Input,
+  Button,
+  Message,
+  Icon,
+  Table
+} from "semantic-ui-react";
+
+// ----------------------------------------------------
+const requestMessageStyle = {
+  color: "red"
+};
+
+// ----------------------------------------------------
+class UpdatePermissionModal extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    // Set initial state
+    this.state = {
+      newRole: false,
+      permission: false
+    };
+  }
+
+  componentDidMount() {
+
+  }
+
+  componentWillReceiveProps(nextProps) {
+
+    if (nextProps.permissions && nextProps.updatePermissionId) {
+      var updatePermission = nextProps.permissions.find(permission=> permission._id === nextProps.updatePermissionId);
+
+      if (updatePermission) {
+        this.setState({permission: updatePermission, newRole: updatePermission.role});
+      }
+    }
+  }
+
+  handleChange = (e, { name, value }) => this.setState({ newRole: value })
+
+
+
+
+  handleClose = () => this.props.onClose(false);
+  handleSubmit() {
+    if (this.props.updatePermissionId) {
+      const data = {permissionId: this.props.updatePermissionId, shortName: this.props.shortName, role: this.state.newRole }
+
+      this.props.permissionActions.update(data).then(requestMessage => {
+        if (requestMessage) {
+          // report to the user is there was a problem during registration
+          this.setState({
+            requestMessage
+          });
+          this.props.onClose(false);
+        } else {
+          this.props.onClose(true);
+        }
+      });
+
+
+    }
+  }
+
+  render() {
+
+    const railStyle = {
+      top: "15px",
+      minHeight: "200px"
+    };
+    var user = ""
+    if (this.state.permission) {
+      user = this.state.permission.email
+    }
+    return (
+      <Modal size='tiny' open={this.props.open} onClose={this.handleClose} centered={false}>
+        <Modal.Header>Select Role</Modal.Header>
+        <Modal.Content >
+          <Modal.Description>
+          <Form>
+       <Form.Field>
+         Set role for <b>{user}</b>:
+       </Form.Field>
+       <Form.Field>
+         <Checkbox
+           radio
+           label='User'
+           name='checkboxRadioGroup'
+           value={5}
+           checked={(this.state.newRole >= 0) && (this.state.newRole < 10)}
+           onChange={this.handleChange}
+         />
+       </Form.Field>
+       <Form.Field>
+         <Checkbox
+           radio
+           label='Admin'
+           name='checkboxRadioGroup'
+           value={15}
+           checked={(this.state.newRole >= 10) && (this.state.newRole < 20)}
+           onChange={this.handleChange}
+         />
+       </Form.Field>
+     </Form>
+
+    </Modal.Description>
+  </Modal.Content>
+  <Modal.Actions>
+    <Button onClick={this.handleSubmit} >
+      <Icon name='checkmark' /> Update
+    </Button>
+  </Modal.Actions>
+</Modal>
+
+    );
+  }
+}
+
+export default UpdatePermissionModal;

admin/src/Permission/UpdatePermissionModalContainer.js

@@ -0,0 +1,23 @@
+import { connect } from "react-redux"
+import * as permissionActionCreators from "./permission-actions"
+import { bindActionCreators } from 'redux'
+import UpdatePermissionModal from "./UpdatePermissionModal"
+
+//groups: state.group.items[props.match.params.shortName],
+function mapStateToProps(state,props) {
+  return {
+    permissions: state.permission.items,
+    shortName: props.shortName
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    permissionActions: bindActionCreators(permissionActionCreators,dispatch)
+  }
+}
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(UpdatePermissionModal)

admin/src/Permission/permission-actions.js

@@ -0,0 +1,166 @@
+import axios from "axios";
+//import { browserHistory } from "react-router"
+import * as types from "./permission-constants";
+
+function beginAddPermission() {
+  return { type: types.ADD_PERMISSION };
+}
+
+function addPermissionSuccess(data) {
+  return { type: types.ADD_PERMISSION_SUCCESS, data };
+}
+
+function addPermissionError() {
+  return { type: types.ADD_PERMISSION_ERROR };
+}
+
+function beginDeletePermission() {
+  return { type: types.DELETE_PERMISSION };
+}
+
+function deletePermissionSuccess(data) {
+  return { type: types.DELETE_PERMISSION_SUCCESS, data };
+}
+
+function deletePermissionError() {
+  return { type: types.DELETE_PERMISSION_ERROR };
+}
+
+
+function beginUpdateRole() {
+  return { type: types.UPDATE_ROLE };
+}
+
+function updateRoleSuccess(data) {
+  return { type: types.UPDATE_ROLE_SUCCESS, data };
+}
+
+function updateRoleError() {
+  return { type: types.UPDATE_ROLE_ERROR };
+}
+
+// "Log In" action creators
+function beginFetchPermission() {
+  return { type: types.FETCH_PERMISSION };
+}
+
+function fetchPermissionError(data) {
+  return { type: types.FETCH_ERROR_PERMISSION,
+  data };
+}
+
+function fetchPermissionSuccess(data) {
+  return { type: types.FETCH_SUCCESS_PERMISSION,
+  data };
+}
+
+function shouldFetch(state) {
+  if ((!state.permission.items) || (state.permission.items.length <1)) {
+    return true
+  } else if (state.permission.isWaiting) {
+    return false
+  } else {
+    return false
+  }
+}
+
+export function fetch(shortName) {
+  return (dispatch, getState) => {
+    if (shouldFetch(getState())) {
+    dispatch(beginFetchPermission());
+
+    return axios
+      .get("/permissions/"+shortName)
+      .then(response => {
+        if (response.data.success) {
+          dispatch(fetchPermissionSuccess(response.data.permissions));
+        } else {
+          dispatch(fetchPermissionError());
+          let registerMessage = response.data.message;
+          return registerMessage;
+        }
+      })
+      .catch(response => {
+        if (response instanceof Error) {
+          // Something happened in setting up the request that triggered an Error
+          console.log("Error", response.message);
+        }
+      });
+  };
+};
+}
+
+export function update(data) {
+  return (dispatch, getState) => {
+
+    dispatch(beginUpdateRole());
+    var url = "/permissions/" + data.shortName + "/" + data.permissionId;
+    return axios.post( url, data)
+      .then(response => {
+        if (response.data.success) {
+          dispatch(updateRoleSuccess(response.data.permission));
+        } else {
+          dispatch(updateRoleError());
+          let registerMessage = response.data.message;
+          return registerMessage;
+        }
+      })
+      .catch(response => {
+        if (response instanceof Error) {
+          // Something happened in setting up the request that triggered an Error
+          console.log("Error", response.message);
+        }
+      });
+
+};
+}
+
+export function addPermission(data) {
+  return (dispatch, getState) => {
+    dispatch(beginAddPermission());
+    var url = "/permissions/" + data.shortName;
+    return axios.post( url, data)
+      .then(response => {
+        if (response.data.success) {
+          dispatch(addPermissionSuccess(response.data.permission));
+        } else {
+          dispatch(addPermissionError());
+          let registerMessage = response.data.message;
+          return registerMessage;
+        }
+      })
+      .catch(response => {
+        if (response instanceof Error) {
+          // Something happened in setting up the request that triggered an Error
+          console.log("Error", response.message);
+        }
+      });
+
+};
+}
+
+
+export function deletePermission(data) {
+  return (dispatch, getState) => {
+
+    dispatch(beginDeletePermission());
+    var url = "/permissions/" + data.shortName + "/" + data.permissionId;
+    return axios.delete( url)
+      .then(response => {
+        if (response.data.success) {
+          dispatch(deletePermissionSuccess(data.permissionId));
+        } else {
+          dispatch(deletePermissionError());
+          let registerMessage = response.data.message;
+          return registerMessage;
+        }
+      })
+      .catch(response => {
+        if (response instanceof Error) {
+          // Something happened in setting up the request that triggered an Error
+          console.log("Error", response.message);
+        }
+      });
+
+};
+}

admin/src/Permission/permission-constants.js

@@ -0,0 +1,12 @@
+export const ADD_PERMISSION = "ADD_PERMISSION"
+export const ADD_PERMISSION_ERROR = "ADD_PERMISSION_ERROR"
+export const ADD_PERMISSION_SUCCESS = "ADD_PERMISSION_SUCCESS"
+export const FETCH_PERMISSION = "FETCH_PERMISSION"
+export const FETCH_ERROR_PERMISSION = "FETCH_ERROR_PERMISSION"
+export const FETCH_SUCCESS_PERMISSION = "FETCH_SUCCESS_PERMISSION"
+export const UPDATE_ROLE = "UPDATE_ROLE"
+export const UPDATE_ROLE_ERROR = "UPDATE_ROLE_ERROR"
+export const UPDATE_ROLE_SUCCESS = "UPDATE_ROLE SUCCESS"
+export const DELETE_PERMISSION = "DELETE_PERMISSION"
+export const DELETE_PERMISSION_ERROR = "DELETE_PERMISSION_ERROR"
+export const DELETE_PERMISSION_SUCCESS = "DELETE_PERMISSION_SUCCESS"

admin/src/Permission/permission-reducer.js

@@ -0,0 +1,87 @@
+import {
+  ADD_PERMISSION,
+  ADD_PERMISSION_SUCCESS,
+  ADD_PERMISSION_ERROR,
+  DELETE_PERMISSION,
+  DELETE_PERMISSION_SUCCESS,
+  DELETE_PERMISSION_ERROR,
+  FETCH_PERMISSION,
+  FETCH_SUCCESS_PERMISSION,
+  FETCH_ERROR_PERMISSION,
+  UPDATE_ROLE,
+  UPDATE_ROLE_ERROR,
+  UPDATE_ROLE_SUCCESS
+} from "./permission-constants";
+
+function updateRoleInArray(array, updatedItem) {
+    const updatedItems = array.map(item => {
+        if(item._id !== updatedItem._id) {
+            // Since we only want to update one item, preserve all others as they are now
+            return item;
+        }
+        item.role = updatedItem.role;
+        return item;
+    });
+
+    return updatedItems;
+}
+
+function deleteItemInArray(array, _id) {
+    const updatedItems = array.filter(function (item) {
+      return item._id !== _id;
+    });
+
+    return updatedItems;
+}
+
+const permission = (
+  state = {
+    isWaiting: false,
+    items: []
+  },
+  action
+) => {
+  switch (action.type) {
+
+
+    case ADD_PERMISSION_SUCCESS:
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: [...state.items, action.data]
+      });
+    case DELETE_PERMISSION_SUCCESS:
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: deleteItemInArray(state.items, action.data)
+      });
+    case UPDATE_ROLE_SUCCESS:
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: updateRoleInArray(state.items, action.data)
+      });
+    case FETCH_SUCCESS_PERMISSION:
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: action.data
+      });
+
+      case DELETE_PERMISSION_ERROR:
+      case ADD_PERMISSION_ERROR:
+      case UPDATE_ROLE_ERROR:
+      case FETCH_ERROR_PERMISSION:
+        return Object.assign({}, state, {
+          isWaiting: false
+        });
+
+      case DELETE_PERMISSION:
+      case ADD_PERMISSION:
+      case UPDATE_ROLE:
+      case FETCH_PERMISSION:
+        return Object.assign({}, state, { isWaiting: true});
+
+    default:
+      return state;
+  }
+};
+
+export default permission;