Table row checkboxes

api/src/api/members.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const router = express.Router();
-const Member = require('../models/members');
+const { Member, chapterEnum } = require('../models/members');
 const errorWrap = require('../middleware/errorWrap');
 const { requireRegistered, requireDirector } = require('../middleware/auth');
 const {
@@ -261,4 +261,31 @@ router.get(
   }),
 );
 
+router.get(
+  '/role/:role/:chapter?',
+  requireRegistered,
+  errorWrap(async (req, res) => {
+    let members = await Member.find({ role: req.params.role });
+    if (req.params.chapter) {
+      if (!Object.values(chapterEnum).includes(req.params.chapter)){
+        return res.status(404).json({
+          success: false,
+          message: req.params.chapter + ' is not a valid chapter.',
+        })
+      }
+      members = await Member.find({ role: req.params.role, chapter: req.params.chapter });
+    }
+    if (!members) {
+      return res.status(404).json({
+        success: false,
+        message: req.params.role + ' is not a valid role.',
+      })
+    }
+    res.json({
+      success: true,
+      result: members,
+    });
+  }),
+);
+
 module.exports = router;

api/src/models/projects.js

@@ -46,6 +46,7 @@ const Project = new Schema({
   github: String,
   figma: String,
   notes: String,
+  notion: String,
 });
 
 module.exports = model('Project', Project);

client/src/components/table/Table.jsx

@@ -11,10 +11,17 @@ type TableProp = {
   data: Array<Object>,
   columns: Array<Object>,
   onRowClick: Function,
+  onRowDoubleClick: Function,
   sizeToFit?: boolean,
 };
 
-const Table = ({ data, columns, onRowClick, sizeToFit }: TableProp): Node => {
+const Table = ({
+  data,
+  columns,
+  onRowClick,
+  onRowDoubleClick,
+  sizeToFit,
+}: TableProp): Node => {
   const [entries, setEntries] = useState([]);
   const [gridApi, setGridApi] = useState(null);
 
@@ -32,7 +39,9 @@ const Table = ({ data, columns, onRowClick, sizeToFit }: TableProp): Node => {
   return (
     <div className="ag-theme-alpine table-wrapper">
       <div className="action-container">
-        <Button size="medium" onClick={() => gridApi?.exportDataAsCsv()}>
+        <Button
+          size="medium"
+          onClick={() => gridApi?.exportDataAsCsv({ onlySelected: gridApi.getSelectedNodes().length != 0 }) }>
           {' '}
           Export as CSV
         </Button>
@@ -49,6 +58,7 @@ const Table = ({ data, columns, onRowClick, sizeToFit }: TableProp): Node => {
           ensureDomOrder: true,
         }}
         onRowClicked={(e) => onRowClick?.(e)}
+        onRowDoubleClicked={(e) => onRowDoubleClick?.(e)}
         columnDefs={columns}
         floatingFilter
         enableCellTextSelection

client/src/css/Project.css

@@ -0,0 +1,7 @@
+.ui.form .disabled.field,
+field.disabled > label,
+.ui.disabled.dropdown,
+.ui.form .field.disabled > label {
+  pointer-events: none;
+  opacity: 1;
+}

client/src/pages/Projects.jsx

@@ -2,16 +2,33 @@
 import React, { useState, useEffect } from 'react';
 import type { Node } from 'react';
 import { useHistory } from 'react-router-dom';
+import { isEqual, findKey, partial } from 'lodash';
+import { Sidebar, Segment, Form, Icon, Modal } from 'semantic-ui-react';
 
 import Page from '../components/layout/Page';
 import Table from '../components/table/Table';
 import { projectColumnDefs } from '../utils/tableHelpers';
-import { getProjects } from '../utils/apiWrapper';
+import {
+  getProjects,
+  getMembers,
+  getUserAuth,
+  updateProject,
+} from '../utils/apiWrapper';
+import { chapterOptions, possibleStatuses } from '../utils/consts';
 
 import '../css/Home.css';
+import '../css/Project.css';
 
 const Projects = (): Node => {
   const [projects, setProjects] = useState([]);
+  const [teamMembers, setTeamMembers] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [currProj, setCurrProj] = useState({ projectName: '' });
+  const [unmodProj, setUnmodProj] = useState({});
+  const [editable, setEditable] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [teamEmails, setTeamEmails] = useState({});
 
   const history = useHistory();
 
@@ -22,17 +39,219 @@ const Projects = (): Node => {
         setProjects(allProjects.data.result);
       }
     };
+    const getAllMembers = async () => {
+      const allMembers = await getMembers();
+      if (allMembers.data) {
+        const teamMemberList = [];
+        let teamEmail = {};
+        allMembers.data.result.forEach((e) => {
+          teamEmail = { ...teamEmail, [e.email]: e.firstName + e.lastName };
+          teamMemberList.push({
+            key: e.firstName + e.lastName,
+            value: e.firstName + e.lastName,
+            text: `${e.firstName} ${e.lastName}`,
+          });
+        });
+        setTeamMembers(teamMemberList);
+        setTeamEmails(teamEmail);
+      }
+    };
+    const getCurrMember = async () => {
+      const member = await getUserAuth();
+      setEditable(
+        member.data &&
+          (member.data.result.level === 'ADMIN' ||
+            member.data.result.level === 'DIRECTOR'),
+      );
+    };
     getAllProjects();
+    getAllMembers();
+    getCurrMember();
   }, []);
 
+  const filterObj = (raw, allowed) => {
+    const filtered = Object.values(
+      Object.fromEntries(
+        Object.entries(raw).filter(([key]) => allowed.includes(key)),
+      ),
+    );
+    return filtered;
+  };
+
   return (
-    <Page title="Projects">
-      <Table
-        data={projects}
-        columns={projectColumnDefs}
-        onRowClick={(e) => history.push(`/projects/${e.data._id}`)}
+    <Sidebar.Pushable as={Segment} style={{ height: '100vh' }}>
+      <Modal
+        open={showModal}
+        header="You have unsaved changes"
+        size="mini"
+        content="Save your changes before going back?"
+        actions={[
+          {
+            key: 'no',
+            content: 'No',
+            negative: true,
+            onClick: () => setShowModal(false),
+          },
+          {
+            key: 'Save',
+            content: 'Save',
+            positive: true,
+            icon: 'check',
+            labelPosition: 'right',
+            onClick: () => {
+              setUnmodProj(currProj);
+              updateProject(currProj, currProj._id);
+              setShowModal(false);
+              window.location.reload();
+            },
+          },
+        ]}
       />
-    </Page>
+      <Sidebar
+        as="form"
+        animation="overlay"
+        onHide={() => {
+          setVisible(false);
+          setEditMode(false);
+          if (!isEqual(currProj, unmodProj)) setShowModal(true);
+        }}
+        visible={visible}
+        width="wide"
+        direction="right"
+      >
+        <Icon
+          name="arrow left"
+          onClick={() => {
+            setVisible(false);
+            setEditMode(false);
+          }}
+          style={{ cursor: 'pointer' }}
+        />
+        {editable && (
+          <Icon
+            name="edit outline"
+            style={{ cursor: 'pointer' }}
+            onClick={() => setEditMode(true)}
+          />
+        )}
+        <Form.Group>
+          <Form.Input
+            label="Project Name"
+            value={currProj.projectName}
+            onChange={(e, { value }) => {
+              setCurrProj({ ...currProj, projectName: value });
+            }}
+            readOnly={!editMode}
+          />
+          <Form.Dropdown
+            label="Chapter"
+            search
+            fluid
+            selection
+            options={chapterOptions}
+            value={currProj.chapter}
+            onChange={(e, { value }) => {
+              setCurrProj({ ...currProj, chapter: value });
+            }}
+            disabled={!editMode}
+          />
+          <Form.TextArea
+            label="Description"
+            placeholder="Write project description here"
+            defaultValue={currProj.description}
+            readOnly={!editMode}
+            onChange={(e, { value }) => {
+              setCurrProj({ ...currProj, description: value });
+            }}
+          />
+          <Form.Dropdown
+            label="Status"
+            search
+            fluid
+            selection
+            options={possibleStatuses}
+            value={currProj.status}
+            onChange={(e, { value }) => {
+              setCurrProj({ ...currProj, status: value });
+            }}
+            disabled={!editMode}
+          />
+          <Form.Input
+            label="Years in Development"
+            value={
+              currProj.duration
+                ? `${currProj.duration.amount} ${currProj.duration.unit}`
+                : {}
+            }
+            readOnly={!editMode}
+            onChange={(e, { value }) => {
+              setCurrProj({ ...currProj, duration: value });
+            }}
+          />
+          <Form.Dropdown
+            label="Team Members"
+            multiple
+            fluid
+            selection
+            options={teamMembers}
+            value={
+              currProj.teamMembersEmail
+                ? filterObj(teamEmails, currProj.teamMembersEmail)
+                : []
+            }
+            disabled={!editMode}
+            onChange={(_, { value }) => {
+              const newTeam = [];
+              value.forEach((e) =>
+                newTeam.push(findKey(teamEmails, partial(isEqual, e))),
+              );
+              setCurrProj({ ...currProj, teamMembersEmail: newTeam });
+            }}
+          />
+          <Form.Input
+            label="Github (Optional)"
+            value={currProj.github}
+            readOnly={!editMode}
+            onChange={(e, { value }) => {
+              setCurrProj({ ...currProj, github: value });
+            }}
+          />
+          <Form.Input
+            label="Notion (Optional)"
+            value={currProj.notion}
+            readOnly={!editMode}
+            onChange={(e, { value }) => {
+              setCurrProj({ ...currProj, notion: value });
+            }}
+          />
+          <Form.Button
+            type="submit"
+            content="Save Changes"
+            disabled={isEqual(currProj, unmodProj)}
+            onClick={() => {
+              setUnmodProj(currProj);
+              updateProject(currProj, currProj._id);
+              window.location.reload();
+            }}
+          />
+        </Form.Group>
+      </Sidebar>
+
+      <Sidebar.Pusher dimmed={visible}>
+        <Page title="Projects">
+          <Table
+            data={projects}
+            columns={projectColumnDefs}
+            onRowClick={(e) => history.push(`/projects/${e.data._id}`)}
+            onRowDoubleClick={(e) => {
+              setCurrProj(e.data);
+              setVisible(true);
+              setUnmodProj(e.data);
+            }}
+          />
+        </Page>
+      </Sidebar.Pusher>
+    </Sidebar.Pushable>
   );
 };
 

client/src/utils/apiWrapper.js

@@ -230,3 +230,33 @@ export const getProjects = () => {
       error,
     }));
 };
+
+// Updates a project
+export const updateProject = (project, projectID) => {
+  const requestString = `${BACKEND_BASE_URL}/projects/${projectID}`;
+  return axios
+    .put(requestString, {
+      ...project,
+    })
+    .catch((error) => ({
+      type: 'UPDATE_PROJECT_FAIL',
+      error,
+    }));
+};
+
+export const getRoleCount = (role, chapter) => {
+  let requestString = `${BACKEND_BASE_URL}/members/role/${role}`;
+  if (chapter) {
+    requestString = `${BACKEND_BASE_URL}/members/role/${role}/${chapter}`;
+  }
+  return axios
+    .get(requestString, {
+      headers: {
+        'Content-Type': 'application/JSON',
+      },
+    })
+    .catch((error) => ({
+      type: 'GET_ROLE_FAIL',
+      error,
+    }));
+};