From 9b1abe8739a3a5d5e30bf9cb15cb359fbf48465d Mon Sep 17 00:00:00 2001 From: JieShi1678 Date: Mon, 16 Jun 2025 15:45:51 -0400 Subject: [PATCH 1/2] E-7-Admin-Save-Edit --- code/frontend/src/pages/Home.jsx | 240 +++++++++++++++--- code/frontend/src/services/activityService.js | 4 + 2 files changed, 214 insertions(+), 30 deletions(-) diff --git a/code/frontend/src/pages/Home.jsx b/code/frontend/src/pages/Home.jsx index 617e315..43c9006 100644 --- a/code/frontend/src/pages/Home.jsx +++ b/code/frontend/src/pages/Home.jsx @@ -1,9 +1,12 @@ import { useAuth } from "../contexts/AuthContext"; import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { Tabs, Tab, Snackbar, Alert, IconButton, Button } from "@mui/material"; +import { Tabs, Tab, Snackbar, Alert, IconButton, Button, TextField } from "@mui/material"; import { styled } from "@mui/material/styles"; import LogoutIcon from "@mui/icons-material/Logout"; +import EditIcon from "@mui/icons-material/Edit"; +import SaveIcon from "@mui/icons-material/Save"; +import CancelIcon from "@mui/icons-material/Cancel"; import { activityService } from "../services/activityService"; import AvatarUpload from "../components/Avator"; @@ -38,6 +41,14 @@ export default function Home() { const [value, setValue] = useState(0); const [participantActivities, setParticipantActivities] = useState([]); const [recentActivities, setRecentActivities] = useState([]); + const [editingActivityId, setEditingActivityId] = useState(null); + const [editFormData, setEditFormData] = useState({ + name: "", + description: "", + location: "", + startDateTime: "", + endDateTime: "", + }); const [notification, setNotification] = useState({ open: false, message: "", @@ -255,6 +266,75 @@ export default function Home() { navigate("/create-activity"); }; + const handleEditClick = (activity) => { + setEditingActivityId(activity.activityId); + setEditFormData({ + name: activity.name, + description: activity.description, + location: activity.location, + startDateTime: activity.startDateTime.replace(" ", "T"), + endDateTime: activity.endDateTime.replace(" ", "T"), + }); + }; + + const handleCancelEdit = () => { + setEditingActivityId(null); + setEditFormData({ + name: "", + description: "", + location: "", + startDateTime: "", + endDateTime: "", + }); + }; + + const handleEditInputChange = (e) => { + const { name, value } = e.target; + setEditFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleSaveEdit = async (activityId) => { + try { + // Convert datetime-local format to the required format (YYYY-MM-DD HH:MM) + const formatDateTime = (dateTimeStr) => { + const date = new Date(dateTimeStr); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + return `${year}-${month}-${day} ${hours}:${minutes}`; + }; + + const activityData = { + ...editFormData, + startDateTime: formatDateTime(editFormData.startDateTime), + endDateTime: formatDateTime(editFormData.endDateTime), + }; + + await activityService.updateActivity(activityId, activityData); + setEditingActivityId(null); + // Refresh activities + const activities = await activityService.getParticipantActivities(); + setParticipantActivities(activities); + setNotification({ + open: true, + message: "Activity updated successfully", + severity: "success", + }); + } catch (error) { + console.error("Error updating activity:", error); + setNotification({ + open: true, + message: error.response?.data?.message || "Failed to update activity", + severity: "error", + }); + } + }; + return (
{participantActivities.map((activity, index) => { - console.log("participantActivities", activity); const isAdmin = activity.role === "ADMIN"; + const isEditing = editingActivityId === activity.activityId; const startDate = new Date(activity.startDateTime); const endDate = new Date(activity.endDateTime); const formatDateTime = (date) => @@ -368,34 +448,118 @@ export default function Home() { return (
-

{activity.name}

-

{activity.description}

-
-
- 🕐 - - Start: {formatDateTime(startDate)} - -
-
- 🕕 - - End: {formatDateTime(endDate)} - -
-
- 📍 - {activity.location} -
-
- + {isEditing ? ( + <> + + + + + +
+ + +
+ + ) : ( + <> +

{activity.name}

+

{activity.description}

+
+
+ 🕐 + + Start: {formatDateTime(startDate)} + +
+
+ 🕕 + + End: {formatDateTime(endDate)} + +
+
+ 📍 + {activity.location} +
+
+
+ {isAdmin && ( + + )} + +
+ + )}
); })} @@ -657,4 +821,20 @@ const styles = { alignSelf: "center", marginTop: "auto", }, + editInput: { + marginBottom: "1rem", + }, + editButtons: { + display: "flex", + gap: "1rem", + marginTop: "1rem", + }, + editButton: { + flex: 1, + }, + cardButtons: { + display: "flex", + gap: "1rem", + marginTop: "auto", + }, }; diff --git a/code/frontend/src/services/activityService.js b/code/frontend/src/services/activityService.js index 4562ac8..958ff5a 100644 --- a/code/frontend/src/services/activityService.js +++ b/code/frontend/src/services/activityService.js @@ -52,4 +52,8 @@ export const activityService = { const response = await api.post("/activity", activityData); return response.data; }, + updateActivity: async (activityId, activityData) => { + const response = await api.put(`/activity/${activityId}`, activityData); + return response.data; + }, }; From c36ba6541f4501f3496e3ce76f409d7588d031e0 Mon Sep 17 00:00:00 2001 From: JieShi1678 Date: Mon, 16 Jun 2025 22:11:58 -0400 Subject: [PATCH 2/2] bug --- code/frontend/src/pages/Home.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/frontend/src/pages/Home.jsx b/code/frontend/src/pages/Home.jsx index 43c9006..3108c91 100644 --- a/code/frontend/src/pages/Home.jsx +++ b/code/frontend/src/pages/Home.jsx @@ -302,10 +302,10 @@ export default function Home() { const formatDateTime = (dateTimeStr) => { const date = new Date(dateTimeStr); const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - const hours = String(date.getHours()).padStart(2, '0'); - const minutes = String(date.getMinutes()).padStart(2, '0'); + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + const hours = String(date.getHours()).padStart(2, "0"); + const minutes = String(date.getMinutes()).padStart(2, "0"); return `${year}-${month}-${day} ${hours}:${minutes}`; };