Merge pull request #2623 from objectcomputing/feature-2608/adjustments-to-volunteer-tracking

Complete Functionality for Volunteer Tracking

Author: mkimberlin

web-ui/src/components/volunteer/VolunteerEvents.jsx

@@ -17,6 +17,7 @@ import {
 import { resolve } from '../../api/api.js';
 import DatePickerField from '../date-picker-field/DatePickerField';
 import ConfirmationDialog from '../dialogs/ConfirmationDialog';
+import OrganizationDialog from '../dialogs/OrganizationDialog'; // Include OrganizationDialog
 import { AppContext } from '../../context/AppContext';
 import { selectCsrfToken, selectCurrentUser, selectProfileMap } from '../../context/selectors';
 import { formatDate } from '../../helpers/datetime';
@@ -30,11 +31,13 @@ const propTypes = { forceUpdate: PropTypes.func, onlyMe: PropTypes.bool };
 const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
   const [eventDialogOpen, setEventDialogOpen] = useState(false);
+  const [organizationDialogOpen, setOrganizationDialogOpen] = useState(false); // Organization dialog state
   const [events, setEvents] = useState([]);
   const [organizationMap, setOrganizationMap] = useState({});
   const [relationshipMap, setRelationshipMap] = useState({});
   const [relationships, setRelationships] = useState([]);
   const [selectedEvent, setSelectedEvent] = useState(null);
+  const [newOrganization, setNewOrganization] = useState({ name: '', description: '', website: '' });
   const [sortAscending, setSortAscending] = useState(true);
   const [sortColumn, setSortColumn] = useState('Relationship');
 
@@ -63,7 +66,6 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
 
     let events = res.payload.data;
     if (onlyMe) {
-      // Only keep the events for my relationships.
       events = events.filter(e => Boolean(relationshipMap[e.relationshipId]));
     }
     events.sort((event1, event2) => event1.eventDate.localeCompare(event2.eventDate));
@@ -168,40 +170,113 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
     [relationshipMap]
   );
 
+  const openCreateOrganizationDialog = useCallback(() => {
+    setNewOrganization({ name: '', description: '', website: '' });
+    setOrganizationDialogOpen(true);
+  }, []);
+
+  const saveOrganizationAndRelationship = useCallback(async () => {
+    const { name, description, website } = newOrganization;
+    if (!name || !description) {
+        console.error('Missing organization name or description');
+        return;
+    }
+
+    try {
+        // Step 1: Create the organization
+        const res = await resolve({
+            method: 'POST',
+            url: organizationBaseUrl,
+            headers: {
+                'X-CSRF-Header': csrf,
+                Accept: 'application/json',
+                'Content-Type': 'application/json;charset=UTF-8'
+            },
+            data: { name, description, website }
+        });
+
+        if (res.error) {
+            console.error('Error creating organization', res.error);
+            return;
+        }
+
+        const createdOrg = res.payload.data;
+
+        // Step 2: Create a relationship between the current user and the newly created organization
+        const relationshipRes = await resolve({
+            method: 'POST',
+            url: relationshipBaseUrl, // Ensure the correct URL is used
+            headers: {
+                'X-CSRF-Header': csrf,
+                Accept: 'application/json',
+                'Content-Type': 'application/json;charset=UTF-8'
+            },
+            data: {
+                memberId: currentUser.id,
+                organizationId: createdOrg.id,
+                startDate: formatDate(new Date()), // Set the start date as the current date
+                endDate: null // Leave endDate as null for an active relationship
+            }
+        });
+
+        if (relationshipRes.error) {
+            console.error('Error creating relationship', relationshipRes.error);
+            return;
+        }
+
+        const createdRelationship = relationshipRes.payload.data;
+
+        // Step 3: Update the organization and relationship maps
+        setOrganizationMap(prev => ({ ...prev, [createdOrg.id]: createdOrg }));
+        setRelationshipMap(prev => ({ ...prev, [createdRelationship.id]: createdRelationship }));
+
+        // Step 4: Update selectedEvent with the new relationship
+        setSelectedEvent({
+            ...selectedEvent,
+            relationshipId: createdRelationship.id // Set the new relationship ID
+        });
+
+        // Step 5: Close organization dialog and open event dialog
+        setOrganizationDialogOpen(false);
+        setEventDialogOpen(true);
+
+    } catch (error) {
+        console.error('Failed to create organization and relationship', error);
+    }
+}, [newOrganization, csrf, currentUser.id, selectedEvent]);
+
   const eventDialog = useCallback(
     () => (
       <Dialog classes={{ root: 'volunteer-dialog' }} open={eventDialogOpen} onClose={cancelEvent}>
         <DialogTitle>{selectedEvent?.id ? 'Edit' : 'Add'} Event</DialogTitle>
         <DialogContent>
-          <Autocomplete
-            disableClearable
-            getOptionLabel={relationshipName}
-            isOptionEqualToValue={(option, value) => option.id === value.id}
-            onChange={(event, relationship) => {
+        <Autocomplete
+          disableClearable
+          getOptionLabel={(option) => 
+            option === 'new' ? 'Create a New Organization' : (relationshipMap[option]?.organizationId && organizationMap[relationshipMap[option].organizationId]?.name) || 'Unknown'
+          }
+          options={['new', ...relationships.filter((rel) => !rel.endDate).map((rel) => rel.id)]} // Use relationship IDs
+          onChange={(event, value) => {
+            if (value === 'new') {
+              openCreateOrganizationDialog(); // Open the organization creation dialog
+            } else {
               setSelectedEvent({
                 ...selectedEvent,
-                relationshipId: relationship.id
+                relationshipId: value // Set relationshipId correctly
               });
-            }}
-            options={relationships}
-            renderInput={params => (
-              <TextField {...params} className="fullWidth" label={onlyMe ? 'Organization' : 'Volunteer Relationship'} />
-            )}
-            value={selectedEvent?.relationshipId ? relationshipMap[selectedEvent.relationshipId] : null}
-          />
+            }
+          }}
+          renderInput={(params) => <TextField {...params} className="fullWidth" label="Organization" />}
+          value={selectedEvent?.relationshipId || ''} // Bind to the correct relationship ID
+        />
           <DatePickerField
             date={getDate(selectedEvent?.eventDate)}
             label="Date"
-            setDate={date => {
-              setSelectedEvent({
-                ...selectedEvent,
-                eventDate: formatDate(date)
-              });
-            }}
+            setDate={(date) => setSelectedEvent({ ...selectedEvent, eventDate: formatDate(date) })}
           />
           <TextField
-            label="Hours"
-            onChange={e => {
+            label="Hours You Volunteered"
+            onChange={(e) => {
               const hours = Number(e.target.value);
               if (hours >= 0) setSelectedEvent({ ...selectedEvent, hours });
             }}
@@ -210,29 +285,39 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
           />
           <TextField
             label="Notes"
-            onChange={e => setSelectedEvent({ ...selectedEvent, notes: e.target.value })}
+            onChange={(e) => setSelectedEvent({ ...selectedEvent, notes: e.target.value })}
             value={selectedEvent?.notes ?? ''}
           />
         </DialogContent>
         <DialogActions>
           <Button onClick={cancelEvent}>Cancel</Button>
-          <Button disabled={!validEvent()} onClick={saveEvent}>
-            Save
-          </Button>
+          <Button disabled={!validEvent()} onClick={saveEvent}>Save</Button>
         </DialogActions>
       </Dialog>
     ),
-    [eventDialogOpen, selectedEvent]
+    [eventDialogOpen, selectedEvent, relationships, relationshipMap]
   );
 
   const eventRow = useCallback(
-    event => {
+    (event) => {
       const relationship = relationshipMap[event.relationshipId];
-      const member = profileMap[relationship.memberId];
-      const org = organizationMap[relationship.organizationId];
+  
+      if (!relationship) {
+        console.error(`Relationship ${event.relationshipId} not found in relationshipMap.`);
+        return null;
+      }
+  
+      const member = profileMap[relationship?.memberId];
+      const org = organizationMap[relationship?.organizationId];
+  
+      if (!member || !org) {
+        console.error(`Member or Organization not found for relationship ${event.relationshipId}`);
+        return null;
+      }
+  
       return (
         <tr key={event.id}>
-          <td>{onlyMe ? org.name : member.name + ' - ' + org.name}</td>
+          <td>{onlyMe ? org.name : `${member.name} - ${org.name}`}</td>
           <td>{event.eventDate}</td>
           <td>{event.hours}</td>
           <td>{event.notes}</td>
@@ -317,33 +402,71 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
   };
 
   const saveEvent = useCallback(async () => {
-    const { id } = selectedEvent;
-    const res = await resolve({
-      method: id ? 'PUT' : 'POST',
-      url: id ? `${eventBaseUrl}/${id}` : eventBaseUrl,
-      headers: {
-        'X-CSRF-Header': csrf,
-        Accept: 'application/json',
-        'Content-Type': 'application/json;charset=UTF-8'
-      },
-      data: selectedEvent
-    });
-    if (res.error) return;
-
-    const newRel = res.payload.data;
-
-    if (id) {
-      const index = events.findIndex(rel => rel.id === id);
-      events[index] = newRel;
-    } else {
-      events.push(newRel);
+    const { id, relationshipId, eventDate, hours, notes } = selectedEvent;
+    
+    // Check if relationshipId is valid
+    if (!relationshipId) {
+      console.error('No relationship selected for the event.');
+      return;
     }
-    sortEvents(events);
-    setEvents(events);
-
-    setSelectedEvent(null);
-    setEventDialogOpen(false);
-  }, [relationshipMap, selectedEvent]);
+  
+    // Check that all required fields are filled in
+    if (!eventDate || hours <= 0) {
+      console.error("Missing required fields: date or hours.");
+      return;
+    }
+  
+    try {
+      // Ensure the relationship exists
+      const relationshipCheck = await resolve({
+        method: 'GET',
+        url: `${relationshipBaseUrl}/${relationshipId}`,
+        headers: {
+          'X-CSRF-Header': csrf,
+          Accept: 'application/json',
+          'Content-Type': 'application/json;charset=UTF-8'
+        }
+      });
+  
+      if (relationshipCheck.error || !relationshipCheck.payload) {
+        console.error(`Relationship ${relationshipId} doesn't exist.`);
+        return;
+      }
+  
+      // Proceed with saving the event
+      const res = await resolve({
+        method: id ? 'PUT' : 'POST',
+        url: id ? `${eventBaseUrl}/${id}` : eventBaseUrl,
+        headers: {
+          'X-CSRF-Header': csrf,
+          Accept: 'application/json',
+          'Content-Type': 'application/json;charset=UTF-8'
+        },
+        data: { relationshipId, eventDate, hours, notes }
+      });
+  
+      if (res.error) {
+        console.error('Error saving event:', res.error);
+        return;
+      }
+  
+      // Update event list and close dialog
+      const newEvent = res.payload.data;
+      if (id) {
+        const index = events.findIndex(e => e.id === id);
+        events[index] = newEvent;
+      } else {
+        events.push(newEvent);
+      }
+  
+      sortEvents(events);
+      setEvents(events);
+      setSelectedEvent(null);
+      setEventDialogOpen(false); // Close dialog after save
+    } catch (error) {
+      console.error('Failed to save event:', error);
+    }
+  }, [selectedEvent, events, csrf]);
 
   const sortEvents = useCallback(
     events => {
@@ -391,6 +514,15 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
 
       {eventDialog()}
 
+      {/* Dialog for creating a new organization */}
+      <OrganizationDialog
+        open={organizationDialogOpen}
+        onClose={() => setOrganizationDialogOpen(false)}
+        onSave={saveOrganizationAndRelationship}
+        organization={newOrganization}
+        setOrganization={setNewOrganization}
+      />
+
       <ConfirmationDialog
         open={confirmDeleteOpen}
         onYes={() => deleteEvent(selectedEvent)}