From 8cb711d36195892d586b02f60f98c7a9c82d1425 Mon Sep 17 00:00:00 2001 From: chark1es Date: Sat, 1 Mar 2025 17:54:06 -0800 Subject: [PATCH] better modal and toast --- .../EventRequestManagementTable.tsx | 526 +++++++++++------- 1 file changed, 316 insertions(+), 210 deletions(-) diff --git a/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx b/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx index 889f6ae..5046ed2 100644 --- a/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx +++ b/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx @@ -44,6 +44,9 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev const [sortField, setSortField] = useState('created'); const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc'); const dataSync = DataSyncService.getInstance(); + // Add state for update modal + const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false); + const [requestToUpdate, setRequestToUpdate] = useState(null); // Refresh event requests const refreshEventRequests = async () => { @@ -130,11 +133,15 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev }; // Update event request status - const updateEventRequestStatus = async (id: string, status: "submitted" | "pending" | "completed" | "declined") => { + const updateEventRequestStatus = async (id: string, status: "submitted" | "pending" | "completed" | "declined"): Promise => { try { const update = Update.getInstance(); const result = await update.updateField('event_request', id, 'status', status); + // Find the event request to get its name + const eventRequest = eventRequests.find(req => req.id === id); + const eventName = eventRequest?.name || 'Event'; + // Update local state setEventRequests(prev => prev.map(request => @@ -156,10 +163,16 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev // Force sync to update IndexedDB await dataSync.syncCollection(Collections.EVENT_REQUESTS); - // Remove success toast for updating status + // Show success toast with event name + toast.success(`"${eventName}" status updated to ${status}`); } catch (error) { + // Find the event request to get its name + const eventRequest = eventRequests.find(req => req.id === id); + const eventName = eventRequest?.name || 'Event'; + console.error('Error updating status:', error); - toast.error('Failed to update status'); + toast.error(`Failed to update status for "${eventName}"`); + throw error; // Re-throw the error to be caught by the caller } }; @@ -241,6 +254,33 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev setSelectedRequest(null); }; + // Open update modal + const openUpdateModal = (request: ExtendedEventRequest) => { + setRequestToUpdate(request); + setIsUpdateModalOpen(true); + }; + + // Close update modal + const closeUpdateModal = () => { + setIsUpdateModalOpen(false); + setRequestToUpdate(null); + }; + + // Update status and close modal + const handleUpdateStatus = async (status: "submitted" | "pending" | "completed" | "declined") => { + if (requestToUpdate) { + try { + await updateEventRequestStatus(requestToUpdate.id, status); + // Toast is now shown in updateEventRequestStatus + closeUpdateModal(); + } catch (error) { + console.error('Error in handleUpdateStatus:', error); + // Toast is now shown in updateEventRequestStatus + // Keep modal open so user can try again + } + } + }; + // Handle sort change const handleSortChange = (field: string) => { if (sortField === field) { @@ -368,221 +408,287 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev } return ( - - {/* Filters and controls */} -
-
-
-
- setSearchTerm(e.target.value)} - /> - -
-
- -
-
- - {filteredRequests.length} {filteredRequests.length === 1 ? 'request' : 'requests'} found - - -
-
- - {/* Event requests table */} -
+ - - - - - - - - - - - - - - - {filteredRequests.map((request) => ( - - - - - - - - - - - ))} - -
handleSortChange('name')} - > -
- Event Name - {sortField === 'name' && ( - - - - )} -
- 		handleSortChange('start_date_time')} - > -
- Date - {sortField === 'start_date_time' && ( - - - - )} -
- 		handleSortChange('requested_user')} - > -
- Requested By - {sortField === 'requested_user' && ( - - - - )} -
- 		PR MaterialsAS Funding handleSortChange('created')} - > -
- Submitted - {sortField === 'created' && ( - - - - )} -
- 		handleSortChange('status')} - > -
- Status - {sortField === 'status' && ( - - - - )} -
- 		Actions
{request.name}{formatDate(request.start_date_time)} -
- {request.expand?.requested_user?.name || 'Unknown'} - {request.expand?.requested_user?.email} -
- 		- {request.flyers_needed ? ( - Yes - ) : ( - No - )} - - {request.as_funding_required ? ( - Yes - ) : ( - No - )} - {formatDate(request.created)} - - {request.status || 'Pending'} - - - -
-
+ {/* Filters and controls */} +
+
+
+
+ setSearchTerm(e.target.value)} + /> + +
+
+ +
+
+ + {filteredRequests.length} {filteredRequests.length === 1 ? 'request' : 'requests'} found + + +
+
- {/* Event request details modal */} - - {isModalOpen && selectedRequest && ( + {/* Event requests table */} +
+ + + + + + + + + + + + + + + {filteredRequests.map((request) => ( + + + + + + + + + + + ))} + +
handleSortChange('name')} + > +
+ Event Name + {sortField === 'name' && ( + + + + )} +
+ 		handleSortChange('start_date_time')} + > +
+ Date + {sortField === 'start_date_time' && ( + + + + )} +
+ 		handleSortChange('requested_user')} + > +
+ Requested By + {sortField === 'requested_user' && ( + + + + )} +
+ 		PR MaterialsAS Funding handleSortChange('created')} + > +
+ Submitted + {sortField === 'created' && ( + + + + )} +
+ 		handleSortChange('status')} + > +
+ Status + {sortField === 'status' && ( + + + + )} +
+ 		Actions
{request.name}{formatDate(request.start_date_time)} +
+ {request.expand?.requested_user?.name || 'Unknown'} + {request.expand?.requested_user?.email} +
+ 		+ {request.flyers_needed ? ( + Yes + ) : ( + No + )} + + {request.as_funding_required ? ( + Yes + ) : ( + No + )} + {formatDate(request.created)} + + {request.status || 'Pending'} + + +
+ + +
+
+
+ + + {/* Event request details modal - Now outside the main component div */} + {isModalOpen && selectedRequest && ( + - )} - - + + )} + + {/* Update status modal */} + {isUpdateModalOpen && requestToUpdate && ( + +
+ + {/* Header */} +
+

Update Status

+ +
+ + {/* Content */} +
+

+ Update status for event: {requestToUpdate.name} +

+
+ + + +
+
+ + {/* Footer */} +
+ +
+ +
+ + )} + ); };