Admin is mostly working

admin/src/Group/GroupModal.js

@@ -0,0 +1,258 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import {
+  Container,
+  Header,
+  Form,
+  Grid,
+  Modal,
+  Rail,
+  Segment,
+  List,
+  Input,
+  Button,
+  Message,
+  Icon,
+  Table
+} from "semantic-ui-react";
+
+// ----------------------------------------------------
+const requestMessageStyle = {
+  color: "red"
+};
+
+// ----------------------------------------------------
+class GroupModal extends Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+
+    // Set initial state
+    this.state = {
+      editGroup: false,
+      groupName: "",
+      group: {
+        name: "",
+        items: []
+      },
+      talkgroups: this.props.talkgroups ? this.props.talkgroups : []
+    };
+  }
+
+  componentDidMount() {
+    //this.props.groupActions.fetchGroups(this.props.shortName);
+
+    this.props.talkgroupActions.fetchTalkgroups(this.props.shortName);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.talkgroups && nextProps.groups && nextProps.editGroupId) {
+      var editGroup = nextProps.groups.find(
+        group => group._id === nextProps.editGroupId
+      );
+      var items = [];
+
+      var talkgroups = nextProps.talkgroups;
+      for (var i = 0; i < editGroup.talkgroups.length; i++) {
+        const talkgroupId = editGroup.talkgroups[i];
+        const index = talkgroups.findIndex(tg => tg.num === talkgroupId);
+        if (index >= 0) {
+          const item = {
+            num: talkgroups[index].num,
+            description: talkgroups[index].description
+          };
+          items.push(item);
+          talkgroups = talkgroups
+            .slice(0, index)
+            .concat(talkgroups.slice(index + 1));
+        }
+      }
+    const group = {name: editGroup.groupName, items: items}
+    this.setState({group: group, talkgroups: talkgroups, groupName: editGroup.groupName});
+  } else {
+    this.setState({ talkgroups: nextProps.talkgroups })
+
+  }
+
+  if (!nextProps.editGroupId && (this.props.editGroupId != nextProps.editGroupId)) {
+    this.setState({ groupName: "", group: {
+      name: "",
+      items: []
+    }});
+  }
+  }
+
+  removeTalkgroup(event, index) {
+    const item = {
+      num: this.state.group.items[index].num,
+      description: this.state.group.items[index].description
+    };
+
+    const talkgroups = this.state.talkgroups.slice(0); // copy
+
+    for (var i = 0, len = talkgroups.length; i < len; i++) {
+      if (item.num < talkgroups[i].num) {
+        talkgroups.splice(i, 0, item);
+        break;
+      }
+    }
+    this.setState({
+      group: {
+        items: this.state.group.items
+          .slice(0, index)
+          .concat(this.state.group.items.slice(index + 1))
+      },
+      talkgroups: talkgroups
+    });
+  }
+
+  handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
+
+  addTalkgroup(event, index) {
+    const item = {
+      num: this.state.talkgroups[index].num,
+      description: this.state.talkgroups[index].description
+    };
+
+    this.setState({
+      group: { items: this.state.group.items.concat(item) },
+      talkgroups: this.state.talkgroups
+        .slice(0, index)
+        .concat(this.state.talkgroups.slice(index + 1))
+    });
+  }
+  handleClose = () => this.props.onClose(false);
+  handleSubmit() {
+    var talkgroupNums = this.state.group.items.map(a => a.num);
+    const data = {
+      shortName: this.props.shortName,
+      groupName: this.state.groupName,
+      talkgroups: JSON.stringify(talkgroupNums)
+    };
+    if (this.props.editGroupId) {
+      const data = {
+        _id: this.props.editGroupId,
+        shortName: this.props.shortName,
+        groupName: this.state.groupName,
+        talkgroups: JSON.stringify(talkgroupNums)
+      };
+
+      this.props.groupActions.updateGroup(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);
+        }
+      });
+    } else {
+      const data = {
+        shortName: this.props.shortName,
+        groupName: this.state.groupName,
+        talkgroups: JSON.stringify(talkgroupNums)
+      };
+
+      this.props.groupActions.createGroup(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 talkgroups = this.state.talkgroups;
+    const group = this.state.group.items;
+    const railStyle = {
+      top: "15px",
+      minHeight: "200px"
+    };
+    return (
+      <Modal open={this.props.open} onClose={this.handleClose} centered={false}>
+        <Modal.Header>
+          {this.props.editGroupId ? "Edit Group" : "Create Group"}
+        </Modal.Header>
+        <Modal.Content scrolling>
+          <Modal.Description>
+            <Grid container columns={2}>
+              <Grid.Column>
+                <Table>
+                  <Table.Header>
+                    <Table.Row>
+                      <Table.HeaderCell>Number</Table.HeaderCell>
+
+                      <Table.HeaderCell>Description</Table.HeaderCell>
+                      <Table.HeaderCell />
+                    </Table.Row>
+                  </Table.Header>
+                  <Table.Body>
+                    {talkgroups &&
+                      talkgroups.map((talkgroup, i) => (
+                        <Table.Row link="true" key={talkgroup.num + "-" + i}>
+                          <Table.Cell>{talkgroup.num}</Table.Cell>
+
+                          <Table.Cell>{talkgroup.description}</Table.Cell>
+                          <Table.Cell>
+                            <Icon
+                              link
+                              name="plus"
+                              onClick={e => this.addTalkgroup(e, i)}
+                            />
+                          </Table.Cell>
+                        </Table.Row>
+                      ))}
+                  </Table.Body>
+                </Table>
+                <Rail position="right">
+                  <Segment style={railStyle}>
+                    <Input
+                      name="groupName"
+                      onChange={this.handleInputChange}
+                      placeholder="Group Name"
+                      value={this.state.groupName}
+                    />
+                    <List divided relaxed>
+                      {group.map((talkgroup, i) => (
+                        <List.Item key={"Group-" + i}>
+                          <List.Icon
+                            name="remove"
+                            verticalAlign="middle"
+                            link={true}
+                            onClick={e => this.removeTalkgroup(e, i)}
+                          />
+                          <List.Content>{talkgroup.description}</List.Content>
+                        </List.Item>
+                      ))}
+                    </List>
+                    <Button onClick={this.handleSubmit}>
+                      <Icon name="checkmark" />{" "}
+                      {this.props.editGroupId ? "Update" : "Save"}
+                    </Button>
+                  </Segment>
+                </Rail>
+              </Grid.Column>
+            </Grid>
+          </Modal.Description>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={this.handleSubmit}>
+            <Icon name="checkmark" />{" "}
+            {this.props.editGroupId ? "Update" : "Save"}
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+export default GroupModal;

admin/src/Group/GroupModalContainer.js

@@ -0,0 +1,26 @@
+import { connect } from "react-redux"
+import * as groupActionCreators from "./group-actions"
+import * as talkgroupActionCreators from "../Talkgroups/talkgroup-actions"
+import { bindActionCreators } from 'redux'
+import GroupModal from "./GroupModal"
+
+//groups: state.group.items[props.match.params.shortName],
+function mapStateToProps(state,props) {
+  return {
+    talkgroups: state.talkgroup.items[props.shortName],
+    groups: state.group.items[props.shortName],
+    shortName: props.shortName
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    groupActions: bindActionCreators(groupActionCreators,dispatch),
+    talkgroupActions: bindActionCreators(talkgroupActionCreators, dispatch)
+  }
+}
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(GroupModal)

admin/src/Group/ListGroups.js

@@ -0,0 +1,82 @@
+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 ListGroups 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 groups = this.props.groups;
+    if (groups) {
+    return (
+
+      <Table >
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>Name</Table.HeaderCell>
+      <Table.HeaderCell>Talkgroup Count</Table.HeaderCell>
+      <Table.HeaderCell></Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {groups.map((group, i) => (
+      <Table.Row key={ "Group-" + i}>
+        <Table.Cell>{group.groupName}</Table.Cell>
+        <Table.Cell>{group.talkgroups.length}</Table.Cell>
+        <Table.Cell>
+          <Icon
+          name="pencil alternate"
+          link={true}
+          onClick={e => this.props.editGroup(group._id)}
+        /><Icon
+          name="up arrow"
+          link={true}
+          onClick={e => this.props.reorderGroup(i, i-1)}
+        /><Icon
+          name="down arrow"
+          link={true}
+          onClick={e => this.props.reorderGroup(i, i+1)}
+        /><Icon
+          name="remove"
+          link={true}
+          onClick={e => this.props.deleteGroup(group._id)}
+        />
+        </Table.Cell>
+      </Table.Row>
+    ))}
+  </Table.Body>
+</Table>
+
+    );
+  } else {
+    return (
+      <div/>
+    );
+  }
+}
+}
+
+export default ListGroups;

admin/src/Group/group-actions.js

@@ -0,0 +1,244 @@
+import axios from "axios";
+//import { browserHistory } from "react-router"
+import * as types from "./group-constants";
+import { push } from  'connected-react-router';
+
+// "Log In" action creators
+function beginCreateGroup() {
+  return { type: types.CREATE_GROUP };
+}
+
+function createGroupSuccess(data) {
+  return {
+    type: types.CREATE_SUCCESS_GROUP,
+    data
+  };
+}
+
+function createGroupError(data) {
+  return {
+    type: types.CREATE_ERROR_GROUP,
+    data
+  };
+}
+
+
+function beginUpdateGroup() {
+  return { type: types.UPDATE_GROUP };
+}
+
+function updateGroupSuccess(data) {
+  return { type: types.UPDATE_SUCCESS_GROUP, data };
+}
+
+function updateGroupError() {
+  return { type: types.UPDATE_ERROR_GROUP };
+}
+
+
+function beginDeleteGroup() {
+  return { type: types.DELETE_GROUP };
+}
+
+function deleteGroupSuccess(data) {
+  return { type: types.DELETE_SUCCESS_GROUP, data };
+}
+
+function deleteGroupError() {
+  return { type: types.DELETE_ERROR_GROUP };
+}
+
+function beginFetchGroup() {
+  return { type: types.FETCH_GROUP };
+}
+
+function fetchGroupSuccess(data) {
+  return {
+    type: types.FETCH_SUCCESS_GROUP,
+    data
+  };
+}
+
+function fetchGroupError(data) {
+  return {
+    type: types.FETCH_ERROR_GROUP,
+    data
+  };
+}
+
+function saveGroupOrderSuccess() {
+  return { type: types.SAVE_ORDER_SUCCESS_GROUP };
+}
+
+function saveGroupOrderError() {
+  return { type: types.SAVE_ORDER_ERROR_GROUP };
+}
+
+function makeUserRequest(method, data, api = "/login") {
+  // returns a Promise
+  return axios({
+    method: method,
+    url: api,
+    data: data
+  });
+}
+
+export function changeUrl(url) {
+  return dispatch => {
+    dispatch(push(url));
+  };
+}
+
+// Example of an Async Action Creator
+// http://redux.js.org/docs/advanced/AsyncActions.html
+
+export function updateGroup(data) {
+  return dispatch => {
+    dispatch(beginUpdateGroup());
+
+    return makeUserRequest("post", data, "/groups/" + data.shortName + "/" + data._id)
+      .then(response => {
+        if (response.data.success) {
+          dispatch(updateGroupSuccess(response.data.group));
+        } else {
+          dispatch(updateGroupError());
+          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);
+        }
+      });
+  };
+}
+
+function shouldFetchGroups(state,shortName) {
+  if (!state.group.items || !state.group.items[shortName]) {
+    return true;
+  } else if (state.group.isWaiting) {
+    return false;
+  } else {
+    return false;
+  }
+}
+
+export function reorderGroup(shortName, oldIndex, newIndex) {
+  return (dispatch, getState) => {
+    const data = {
+      shortName: shortName,
+      oldIndex: oldIndex,
+      newIndex: newIndex
+    };
+    dispatch({
+      type: types.REORDER_GROUP,
+      data
+    });
+  };
+}
+
+export function fetchGroups(shortName) {
+  return (dispatch, getState) => {
+    if (shouldFetchGroups(getState(), shortName)) {
+      dispatch(beginFetchGroup());
+      return axios
+        .get("/groups/" + shortName)
+        .then(response => {
+          if (response.data.success) {
+            const data = { shortName: shortName, groups: response.data.groups };
+            dispatch(fetchGroupSuccess(data));
+          } else {
+            dispatch(fetchGroupError());
+            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 saveGroupOrder(shortName, data) {
+  return dispatch => {
+    dispatch({
+      type: types.SAVE_ORDER_GROUP,
+      data
+    });
+
+    return makeUserRequest(
+      "post",
+      data,
+      "/groups/" + shortName + "/reorder"
+    )
+      .then(response => {
+        if (response.data.success) {
+          dispatch(saveGroupOrderSuccess());
+        } else {
+          dispatch(saveGroupOrderError());
+          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 deleteGroup(shortName, groupId) {
+  return dispatch => {
+    dispatch(beginDeleteGroup());
+
+    return makeUserRequest("delete", null, "/groups/" + shortName + "/" + groupId)
+      .then(response => {
+        if (response.data.success) {
+          const data = {shortName: shortName, groupId: groupId}
+          dispatch(deleteGroupSuccess(data));
+        } else {
+          dispatch(deleteGroupError());
+          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 createGroup(data) {
+  return dispatch => {
+    dispatch(beginCreateGroup());
+
+    return makeUserRequest("post", data, "/groups/" + data.shortName)
+      .then(response => {
+        if (response.data.success) {
+          dispatch(createGroupSuccess(response.data.group));
+        } else {
+          dispatch(createGroupError());
+          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/Group/group-constants.js

@@ -0,0 +1,16 @@
+export const CREATE_GROUP = "CREATE_GROUP"
+export const CREATE_SUCCESS_GROUP = "CREATE_SUCCESS_GROUP"
+export const CREATE_ERROR_GROUP = "CREATE_ERROR_GROUP"
+export const UPDATE_GROUP = "UPDATE_GROUP"
+export const UPDATE_SUCCESS_GROUP = "UPDATE_SUCCESS_GROUP"
+export const UPDATE_ERROR_GROUP = "UPDATE_ERROR_GROUP"
+export const DELETE_GROUP = "DELETE_GROUP"
+export const DELETE_SUCCESS_GROUP = "DELETE_SUCCESS_GROUP"
+export const DELETE_ERROR_GROUP = "DELETE_ERROR_GROUP"
+export const FETCH_GROUP = "FETCH_GROUP"
+export const FETCH_SUCCESS_GROUP = "FETCH_SUCCESS_GROUP"
+export const FETCH_ERROR_GROUP = "FETCH_ERROR_GROUP"
+export const REORDER_GROUP = "REORDER_GROUP"
+export const SAVE_ORDER_GROUP = "SAVE_ORDER_GROUP"
+export const SAVE_ORDER_SUCCESS_GROUP = "SAVE_ORDER_SUCCESS_GROUP"
+export const SAVE_ORDER_ERROR_GROUP = "SAVE_ORDER_ERROR_GROUP"

admin/src/Group/group-reducer.js

@@ -0,0 +1,123 @@
+import {
+  CREATE_GROUP,
+  CREATE_SUCCESS_GROUP,
+  CREATE_ERROR_GROUP,
+  DELETE_GROUP,
+  DELETE_SUCCESS_GROUP,
+  DELETE_ERROR_GROUP,
+  UPDATE_GROUP,
+  UPDATE_SUCCESS_GROUP,
+  UPDATE_ERROR_GROUP,
+  FETCH_GROUP,
+  FETCH_SUCCESS_GROUP,
+  FETCH_ERROR_GROUP,
+  REORDER_GROUP,
+  SAVE_ORDER_GROUP,
+  SAVE_ORDER_ERROR_GROUP,
+  SAVE_ORDER_SUCCESS_GROUP
+} from "./group-constants";
+
+
+function updateItemInArray(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;
+        }
+        return updatedItem;
+    });
+
+    return updatedItems;
+}
+
+const group = (
+  state = {
+    orderChange: false,
+    isWaiting: false,
+    items: {}},
+  action
+) => {
+  switch (action.type) {
+
+    case SAVE_ORDER_GROUP:
+    case CREATE_GROUP:
+    case FETCH_GROUP:
+    case DELETE_GROUP:
+    case UPDATE_GROUP:
+      return Object.assign({}, state, { isWaiting: true});
+
+    case UPDATE_SUCCESS_GROUP:
+    const updatedGroups = updateItemInArray(state.items[action.data.shortName], action.data);
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: {
+          ...state.items,
+          [action.data.shortName]: updatedGroups
+        }
+      });
+
+
+    case CREATE_SUCCESS_GROUP:
+    const newGroups = state.items[action.data.shortName].concat(action.data);
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: {
+          ...state.items,
+          [action.data.shortName]: newGroups
+        }
+      });
+
+      case DELETE_SUCCESS_GROUP:
+      const delGroups = state.items[action.data.shortName].filter(x => x._id !== action.data.groupId);
+      return Object.assign({}, state, {
+          isWaiting: false,
+          items: {
+            ...state.items,
+            [action.data.shortName]: delGroups
+          }
+        });
+
+    case FETCH_SUCCESS_GROUP:
+    return Object.assign({}, state, {
+        isWaiting: false,
+        items: {
+          ...state.items,
+          [action.data.shortName]: action.data.groups
+        }
+      });
+
+    case SAVE_ORDER_SUCCESS_GROUP:
+    return Object.assign({}, state, {
+      orderChange: false,
+      isWaiting: false
+    });
+
+    case SAVE_ORDER_ERROR_GROUP:
+    case FETCH_ERROR_GROUP:
+    case CREATE_ERROR_GROUP:
+    case DELETE_ERROR_GROUP:
+    case UPDATE_ERROR_GROUP:
+      return Object.assign({}, state, {
+        isWaiting: false
+      });
+
+    case REORDER_GROUP:
+    if ((action.data.newIndex<0)||(action.data.newIndex>(state.items[action.data.shortName].length-1))) {
+      return state
+    }
+    const moveGroups = state.items[action.data.shortName].slice();
+    moveGroups.splice(action.data.newIndex, 0, moveGroups.splice(action.data.oldIndex, 1)[0]);
+    return Object.assign({}, state, {
+      orderChange: true,
+      items: {
+        ...state.items,
+        [action.data.shortName]: moveGroups
+      }
+    });
+
+    default:
+      return state;
+  }
+};
+
+export default group;