Merge pull request #16 from hack4impact-upenn/organization-top-bar-task

Organization Creation and Edit Pages
hack4impact-upenn · Dec 2, 2024 · c1c8346 · c1c8346
2 parents 732f926 + ed876bb
commit c1c8346
Show file tree

Hide file tree

Showing 12 changed files with 502 additions and 54 deletions.
diff --git a/client/src/AddOrganization/AddOrganization.tsx b/client/src/AddOrganization/AddOrganization.tsx
@@ -7,6 +7,7 @@ import {
   Select,
   MenuItem,
   Grid,
+  Snackbar,
   Typography,
 } from '@mui/material';
 import { textAlign } from '@mui/system';
@@ -30,8 +31,69 @@ export default function AddOrganization() {
     state: '',
     zip: '',
   };
-
+  const states = [
+    { name: 'Alabama', abbreviation: 'AL' },
+    { name: 'Alaska', abbreviation: 'AK' },
+    { name: 'Arizona', abbreviation: 'AZ' },
+    { name: 'Arkansas', abbreviation: 'AR' },
+    { name: 'California', abbreviation: 'CA' },
+    { name: 'Colorado', abbreviation: 'CO' },
+    { name: 'Connecticut', abbreviation: 'CT' },
+    { name: 'Delaware', abbreviation: 'DE' },
+    { name: 'Florida', abbreviation: 'FL' },
+    { name: 'Georgia', abbreviation: 'GA' },
+    { name: 'Hawaii', abbreviation: 'HI' },
+    { name: 'Idaho', abbreviation: 'ID' },
+    { name: 'Illinois', abbreviation: 'IL' },
+    { name: 'Indiana', abbreviation: 'IN' },
+    { name: 'Iowa', abbreviation: 'IA' },
+    { name: 'Kansas', abbreviation: 'KS' },
+    { name: 'Kentucky', abbreviation: 'KY' },
+    { name: 'Louisiana', abbreviation: 'LA' },
+    { name: 'Maine', abbreviation: 'ME' },
+    { name: 'Maryland', abbreviation: 'MD' },
+    { name: 'Massachusetts', abbreviation: 'MA' },
+    { name: 'Michigan', abbreviation: 'MI' },
+    { name: 'Minnesota', abbreviation: 'MN' },
+    { name: 'Mississippi', abbreviation: 'MS' },
+    { name: 'Missouri', abbreviation: 'MO' },
+    { name: 'Montana', abbreviation: 'MT' },
+    { name: 'Nebraska', abbreviation: 'NE' },
+    { name: 'Nevada', abbreviation: 'NV' },
+    { name: 'New Hampshire', abbreviation: 'NH' },
+    { name: 'New Jersey', abbreviation: 'NJ' },
+    { name: 'New Mexico', abbreviation: 'NM' },
+    { name: 'New York', abbreviation: 'NY' },
+    { name: 'North Carolina', abbreviation: 'NC' },
+    { name: 'North Dakota', abbreviation: 'ND' },
+    { name: 'Ohio', abbreviation: 'OH' },
+    { name: 'Oklahoma', abbreviation: 'OK' },
+    { name: 'Oregon', abbreviation: 'OR' },
+    { name: 'Pennsylvania', abbreviation: 'PA' },
+    { name: 'Rhode Island', abbreviation: 'RI' },
+    { name: 'South Carolina', abbreviation: 'SC' },
+    { name: 'South Dakota', abbreviation: 'SD' },
+    { name: 'Tennessee', abbreviation: 'TN' },
+    { name: 'Texas', abbreviation: 'TX' },
+    { name: 'Utah', abbreviation: 'UT' },
+    { name: 'Vermont', abbreviation: 'VT' },
+    { name: 'Virginia', abbreviation: 'VA' },
+    { name: 'Washington', abbreviation: 'WA' },
+    { name: 'West Virginia', abbreviation: 'WV' },
+    { name: 'Wisconsin', abbreviation: 'WI' },
+    { name: 'Wyoming', abbreviation: 'WY' },
+  ];
   const [newOrg, setNewOrg] = useState<FormState>(defaultState);
+  type Notification = {
+    message: string;
+    open: boolean;
+  };
+  const defaultNotification: Notification = {
+    message: 'Organization has been successfully added',
+    open: false,
+  };
+  const [notificationEdit, setNotificationEdit] =
+    useState<Notification>(defaultNotification);
   const validateInputs = () => {
     return (
       newOrg.state.length > 0 &&
@@ -45,7 +107,10 @@ export default function AddOrganization() {
       try {
         console.log(newOrg);
         const response = await postData('organization/new', newOrg);
-        console.log('Organization Submitted Successfully: ', response);
+        if (response.data) {
+          console.log('Organization Submitted Successfully: ', response);
+          setNotificationEdit({ ...notificationEdit, open: true });
+        }
         setNewOrg(defaultState);
       } catch (error) {
         console.error('Error submitting program outcome:', error);
@@ -103,15 +168,25 @@ export default function AddOrganization() {
         </Grid>
 
         <Grid item xs={12} sm={6}>
-          <TextField
-            fullWidth
-            label="State"
-            name="state"
-            value={newOrg.state}
-            onChange={(e) => {
-              setNewOrg({ ...newOrg, state: e.target.value });
-            }}
-          />
+          <FormControl fullWidth>
+            <InputLabel>State</InputLabel>
+            <Select
+              label="State"
+              name="state"
+              value={newOrg.state}
+              onChange={(e) => {
+                // Update the state with the two-letter abbreviation
+                setNewOrg({ ...newOrg, state: e.target.value });
+                console.log(newOrg);
+              }}
+            >
+              {states.map((state) => (
+                <MenuItem key={state.abbreviation} value={state.abbreviation}>
+                  {state.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
         </Grid>
 
         <Grid item xs={12} sm={6}>
@@ -140,6 +215,14 @@ export default function AddOrganization() {
           </Button>
         </Grid>
       </Grid>
+      <Snackbar
+        open={notificationEdit.open}
+        autoHideDuration={3000}
+        onClose={() => {
+          setNotificationEdit({ ...notificationEdit, open: false });
+        }}
+        message={notificationEdit.message}
+      />
     </div>
   );
 }
diff --git a/client/src/AdminDashboard/OrgAdminPage.tsx b/client/src/AdminDashboard/OrgAdminPage.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Typography, Grid, Button } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
 import ScreenGrid from '../components/ScreenGrid.tsx';
 import OrgTable from './OrgTable.tsx';
 import InviteUserButton from '../components/buttons/InviteUserButton.tsx';
@@ -10,7 +9,6 @@ import InviteUserButton from '../components/buttons/InviteUserButton.tsx';
  * Admin to delete users from admin and promote users to admin.
  */
 function OrgAdminPage() {
-  const navigate = useNavigate();
   return (
     <ScreenGrid>
       <Grid item>
@@ -23,21 +21,6 @@ function OrgAdminPage() {
           <OrgTable />
         </div>
       </Grid>
-      <Grid item>
-        <Button
-          fullWidth
-          variant="contained"
-          onClick={() => {
-            navigate('/organizations-add');
-          }}
-          style={{
-            backgroundColor: 'black',
-            color: 'white',
-          }}
-        >
-          Add Organization
-        </Button>
-      </Grid>
     </ScreenGrid>
   );
 }

diff --git a/client/src/AdminDashboard/OrgTable.tsx b/client/src/AdminDashboard/OrgTable.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import React, { useEffect, useState } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import Snackbar from '@mui/material/Snackbar';
-import { Box, Button } from '@mui/material';
+import { Box, Button, Grid } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 import { deleteData, getData } from '../util/api.tsx';
 import { PaginationTable, TColumn } from '../components/PaginationTable.tsx';
 
@@ -34,6 +36,9 @@ function OrgTable() {
     { _id: string; organizationName: string }[]
   >([]);
   const [selectedOrgId, setSelectedOrgId] = useState<string>('No Org');
+  const [selectedOrgName, setSelectedOrgName] = useState<string | undefined>(
+    undefined,
+  );
   const [kitchenOutcomes, setKitchenOutcomes] = useState<IKitchenOutcomes[]>(
     [],
   );
@@ -47,6 +52,7 @@ function OrgTable() {
     message: '',
     open: false,
   });
+  const navigate = useNavigate();
 
   const columns: TColumn[] = [
     { id: 'date', label: 'Date' },
@@ -74,7 +80,10 @@ function OrgTable() {
       return;
     }
     setSelectedOrgId(organizationId);
-
+    setSelectedOrgName(
+      // eslint-disable-next-line no-underscore-dangle
+      organizations.find((org) => org._id === organizationId)?.organizationName,
+    );
     try {
       const [kitchenRes, programRes] = await Promise.all([
         getData(`kitchen_outcomes/get/all/${organizationId}`),
@@ -196,8 +205,45 @@ function OrgTable() {
           </MenuItem>
         ))}
       </Select>
+      {selectedOrgId !== 'No Org' ? (
+        <Grid item>
+          <Button
+            fullWidth
+            variant="contained"
+            onClick={() => {
+              navigate(`/organizations-update/${selectedOrgId}`);
+            }}
+            style={{
+              backgroundColor: 'black',
+              color: 'white',
+              marginTop: '20px',
+              marginBottom: '20px',
+            }}
+          >
+            View and Update {selectedOrgName} Organization Information
+          </Button>
+        </Grid>
+      ) : (
+        <></>
+      )}
       {/* Outcomes Table */}
       <PaginationTable rows={createOutcomeRows()} columns={columns} />
+      <Grid item>
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={() => {
+            navigate('/organizations-add');
+          }}
+          style={{
+            backgroundColor: 'black',
+            color: 'white',
+            marginTop: '20px',
+          }}
+        >
+          Add Organization
+        </Button>
+      </Grid>
       {/* Notification Snackbar */}
       <Snackbar
         open={notification.open}

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -31,6 +31,7 @@ import ProgramOutcomesVisualization from './Visualizations/ProgramOutcomesViz.ts
 import SubmissionsHome from './Intermediate/Submissions.tsx';
 import VisualizationHome from './Intermediate/Visualizations.tsx';
 import AddOrganization from './AddOrganization/AddOrganization.tsx';
+import EditOrganization from './EditOrganization/EditOrganization.tsx';
 
 // Router Configuration
 const router = createBrowserRouter([
@@ -72,6 +73,7 @@ const router = createBrowserRouter([
       { path: 'users', element: <AdminDashboardPage /> },
       { path: 'organizations', element: <OrgAdminPage /> },
       { path: 'organizations-add', element: <AddOrganization /> },
+      { path: 'organizations-update/:orgId', element: <EditOrganization /> },
     ],
   },
   {