WildCam Lab Classrooms - 2018 Rebuild - part 3 (#124)

* Better design for WildCam Classrooms, and fixed glitch where Create classroom had a Delete option * Updated UI elements for ClassroomForm * Add comments for Create/Update/Delete Assignments * Add WIP AssignmentForm * WIP using routing path * Routing path works for Edit Classroom * Removed unused code and console.log * Added AssignmentForm * Update Refresh logic * Improve ClassroomForm render * Add 'View Only' state to Classroom Editor * Improve style of Classrooms details * WIP StudentsList * Students list done * Improved Students List * Fix issue with Delete Classrooms not redirecting * Prepping Assignment Form * Create Assignment Form ready-ish * Create Assignment in progress * Add ERROR Status message for Assignment Form * Create Assignment somehow works * WIP Assignments List * Create Assignment working * Submit Assignment fixed * View Assignment working * Delete Assignments working * Edit Assignment works * fix edit Assignment * Preparing for Select Subjects * Add ducks for WCC-WCM connection data * Transition to Map Explorer, done * Transition between WildCam Classroom and WildCam Map ready * Can fetch Subjects for Assignment from CartoDB * Fix issues with the fetching process * Improve messaging for Select for Assignment feature * Subject preview, ready * Can create Assignments with Subjects * WIP Edit Assignment with new Subjects list
zooniverse · Jun 5, 2018 · 51a4d88 · 51a4d88
1 parent 48b3dac
commit 51a4d88
Show file tree

Hide file tree

Showing 20 changed files with 2,374 additions and 250 deletions.
diff --git a/src/modules/wildcam-classrooms/components/AssignmentForm.jsx b/src/modules/wildcam-classrooms/components/AssignmentForm.jsx
diff --git a/src/modules/wildcam-classrooms/components/AssignmentsList.jsx b/src/modules/wildcam-classrooms/components/AssignmentsList.jsx
@@ -0,0 +1,146 @@
+/*
+Assignments List
+----------------
+
+Renders a list of assignments.
+
+--------------------------------------------------------------------------------
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Box from 'grommet/components/Box';
+import Button from 'grommet/components/Button';
+import CheckBox from 'grommet/components/CheckBox';
+import Footer from 'grommet/components/Footer';
+import Form from 'grommet/components/Form';
+import Heading from 'grommet/components/Heading';
+import Table from 'grommet/components/Table';
+import TableRow from 'grommet/components/TableRow';
+
+import LinkNextIcon from 'grommet/components/icons/base/LinkNext';
+
+import {
+  WILDCAMCLASSROOMS_COMPONENT_MODES as MODES,
+  WILDCAMCLASSROOMS_DATA_STATUS,
+  WILDCAMCLASSROOMS_INITIAL_STATE,
+  WILDCAMCLASSROOMS_PROPTYPES,
+  WILDCAMCLASSROOMS_MAP_STATE,
+} from '../ducks/index.js';
+
+/*
+--------------------------------------------------------------------------------
+ */
+
+const TEXT = {
+  HEADINGS: {
+    ASSIGNMENTS: 'Assignments',
+  },
+  ACTIONS: {
+    EDIT: 'Edit',
+    CREATE_NEW_ASSIGNMENT: 'Create new assignment',
+  },
+}
+
+/*
+--------------------------------------------------------------------------------
+ */
+
+class AssignmentsList extends React.Component {
+  constructor() {
+    super();
+  }
+
+  // ----------------------------------------------------------------
+
+  render() {
+    const props = this.props;
+    const state = this.state;
+
+    //Sanity check
+    if (!props.selectedClassroom) return null;
+
+    //const students = (props.selectedClassroom && props.selectedClassroom.students) ? props.selectedClassroom.students : [];
+    //const assignments = (props.selectedClassroom && props.assignments && props.assignments[props.selectedClassroom.id])
+    //  ? props.assignments[props.selectedClassroom.id]
+    //  : [];
+
+    const assignments = props.assignmentsList || [];
+
+    return (
+      <Box
+        className="assignments-list"
+        margin="small"
+        pad="small"
+      >
+        <Heading tag="h3">{TEXT.HEADINGS.ASSIGNMENTS}</Heading>
+        <Table className="table">
+          <tbody>
+            {assignments.map((assignment) => {
+              return (
+                <TableRow
+                  className="item"
+                  key={`assignments-list_${assignment.id}`}
+                >
+                  <td>
+                    <Heading tag="h4">{assignment.name}</Heading>
+                  </td>
+                  <td>
+                    <Box
+                      className="actions-panel"
+                      direction="row"
+                      justify="end"
+                    >
+                      <Button
+                        className="button"
+                        icon={<LinkNextIcon size="small" />}
+                        label={TEXT.ACTIONS.EDIT}
+                        onClick={() => {
+                          //Transition to: View One Assignment
+                          props.history && props.history.push(`${props.match.url.replace(/\/+$/,'')}/assignments/${assignment.id}`);
+                        }}
+                      />
+                    </Box>
+                  </td>
+                </TableRow>
+              );
+            })}
+          </tbody>
+        </Table>
+        <Footer>
+          <Button
+            className="button"
+            label={TEXT.ACTIONS.CREATE_NEW_ASSIGNMENT}
+            onClick={() => {
+              //Transition to: Create New Assignment
+              props.history && props.history.push(`${props.match.url.replace(/\/+$/,'')}/assignments/new`);
+            }}
+          />
+        </Footer>
+      </Box>
+    );
+  }
+};
+
+/*
+--------------------------------------------------------------------------------
+ */
+
+AssignmentsList.defaultProps = {
+  history: null,
+  location: null,
+  match: null,
+  // ----------------
+  selectedClassroom: WILDCAMCLASSROOMS_INITIAL_STATE.selectedClassroom,
+};
+
+AssignmentsList.propTypes = {
+  history: PropTypes.object,
+  location: PropTypes.object,
+  match: PropTypes.object,
+  // ----------------
+  selectedClassroom: WILDCAMCLASSROOMS_PROPTYPES.selectedClassroom,
+};
+
+export default AssignmentsList;