events page, manage events page, create events page

2024-07-19 10:53:31 +08:00
parent e6d913aa10
commit 65b0f59a3d
7 changed files with 358 additions and 95 deletions
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -10,6 +10,8 @@ import CreatePostPage from "./pages/CreatePostPage";
 import EditPostPage from "./pages/EditPostPage";
 import SchedulePage from "./pages/SchedulePage";
 import EventsPage from "./pages/EventsPage";
+import CreateEventsPage from "./pages/CreateEventsPage";
+import ManageEventsPage from "./pages/ManageEventsPage";
 import AdministratorSpringboard from "./pages/AdministratorSpringboard";

 function App() {
@@ -27,6 +29,8 @@ function App() {
      <Route element={<EditPostPage />} path="/editPost/:id" />
      <Route element={<SchedulePage />} path="/schedule" />
      <Route element={<EventsPage />} path="/events" />
+      <Route element={<CreateEventsPage />} path="/createEvent" />
+      <Route element={<ManageEventsPage />} path="/manageEvent" />
    </Routes>
  );
 }
--- a/client/src/icons.tsx
+++ b/client/src/icons.tsx
@@ -425,3 +425,22 @@ export const BarsThreeIcon = () => {
    </svg>
  );
 };
+
+export const TrashIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+};
--- a/client/src/pages/CreateEventsPage.tsx
+++ b/client/src/pages/CreateEventsPage.tsx
@@ -0,0 +1,170 @@
+import DefaultLayout from "../layouts/default";
+import { Button } from "@nextui-org/react";
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import NextUIFormikInput from "../components/NextUIFormikInput";
+import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
+import config from "../config";
+import { ArrowUTurnLeftIcon } from "../icons";
+
+const validationSchema = Yup.object({
+  title: Yup.string()
+    .trim()
+    .min(3, "Title must be at least 3 characters")
+    .max(200, "Title must be at most 200 characters")
+    .matches(
+      /^[a-zA-Z0-9\s]+$/,
+      "Title can only contain letters, numbers, and spaces"
+    )
+    .required("Title is required"),
+  description: Yup.string()
+    .trim()
+    .min(3, "Description must be at least 3 characters")
+    .max(500, "Description must be at most 500 characters")
+    .matches(
+      /^[a-zA-Z0-9,\s!"'-]*$/,
+      "Only letters, numbers, commas, spaces, exclamation marks, quotations, and common symbols are allowed"
+    )
+    .required("Description is required"),
+  date: Yup.date().required("Date is required"),
+  time: Yup.string().required("Time is required"),
+  location: Yup.string().required("Location is required"),
+  category: Yup.string().required("Category is required"),
+  slotsAvailable: Yup.number().integer().required("Slots Available is required"),
+  imageUrl: Yup.string().url("Invalid URL format").required("Image URL is required")
+});
+
+const CreateEventsPage = () => {
+  const navigate = useNavigate();
+
+  const initialValues = {
+    title: "",
+    description: "",
+    date: "",
+    time: "",
+    location: "",
+    category: "",
+    slotsAvailable: "",
+    imageUrl: ""
+  };
+
+  const handleSubmit = async (
+    values: any,
+    { setSubmitting, resetForm, setFieldError }: any
+  ) => {
+    console.log("Submitting form with values:", values); // Debug log
+    try {
+      const response = await axios.post(config.serverAddress + "/events", values);
+      console.log("Server response:", response); // Debug log
+      if (response.status === 200 || response.status === 201) {
+        console.log("Event created successfully:", response.data);
+        resetForm(); // Clear form after successful submit
+        navigate("/manageEvent");
+      } else {
+        console.error("Error creating event:", response.statusText);
+      }
+    } catch (error: any) {
+      if (error.response && error.response.data && error.response.data.field) {
+        setFieldError(error.response.data.field, error.response.data.error);
+      } else {
+        console.error("Unexpected error:", error);
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <DefaultLayout>
+      <section className="w-8/12 mx-auto">
+        <Button
+          variant="light"
+          onPress={() => {
+            navigate(-1);
+          }}
+        >
+          <ArrowUTurnLeftIcon />
+        </Button>
+      </section>
+      <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={handleSubmit}
+        >
+          {({ isValid, dirty, isSubmitting }) => (
+            <Form className="flex flex-col gap-5">
+              <NextUIFormikInput
+                label="Title"
+                name="title"
+                type="text"
+                placeholder="Enter your event title"
+                labelPlacement="inside"
+              />
+              <NextUIFormikTextarea
+                label="Description"
+                name="description"
+                placeholder="Enter event description"
+              />
+              <NextUIFormikInput
+                label="Date"
+                name="date"
+                type="date"
+                placeholder="Enter event date"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Time"
+                name="time"
+                type="time"
+                placeholder="Enter event time"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Location"
+                name="location"
+                type="text"
+                placeholder="Enter event location"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Category"
+                name="category"
+                type="text"
+                placeholder="Enter event category"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Slots Available"
+                name="slotsAvailable"
+                type="number"
+                placeholder="Enter slots available"
+                labelPlacement="inside"
+              />
+              <NextUIFormikInput
+                label="Image URL"
+                name="imageUrl"
+                type="text"
+                placeholder="Enter image URL"
+                labelPlacement="inside"
+              />
+              <div className="flex flex-row-reverse border">
+                <Button
+                  type="submit"
+                  className="bg-red-600 text-white text-xl w-1/6"
+                  disabled={!isValid || !dirty || isSubmitting}
+                >
+                  <p>Create Event</p>
+                </Button>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      </section>
+    </DefaultLayout>
+  );
+};
+
+export default CreateEventsPage;
--- a/client/src/pages/EventsPage.tsx
+++ b/client/src/pages/EventsPage.tsx
@@ -1,17 +1,26 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import DefaultLayout from "../layouts/default";
 import { useNavigate } from "react-router-dom";
 import instance from "../security/http";
 import config from "../config";
+import { Card, CardHeader, CardBody, CardFooter, Image, Button } from "@nextui-org/react";

 const EventsPage = () => {
  const [events, setEvents] = useState<any[]>([]);
  const navigate = useNavigate();

  useEffect(() => {
-    instance.get(config.serverAddress + "/events").then((res) => {
-      setEvents(res.data);
-    });
+    const fetchEvents = async () => {
+      try {
+        const res = await instance.get(config.serverAddress + "/events");
+        console.log("Fetched events data:", res.data); // Log the fetched data
+        setEvents(res.data);
+      } catch (error) {
+        console.error("Failed to fetch events:", error);
+      }
+    };
+
+    fetchEvents();
  }, []);

  return (
@@ -21,28 +30,36 @@ const EventsPage = () => {
          <h2 className="text-3xl font-semibold text-primary-600">Events</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {events.map((event) => (
-            <div
-              key={event.id}
-              className="bg-white rounded-lg shadow-lg overflow-hidden"
-            >
-              <img
-                src={`${config.serverAddress}${event.imageUrl}`}
-                alt={event.title}
-                className="w-full h-48 object-cover"
-              />
-              <div className="p-4">
-                <h3 className="text-xl font-semibold mb-2">{event.title}</h3>
-                <p className="text-gray-600 mb-4">{event.description}</p>
-                <button
-                  className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
-                  onClick={() => navigate(`/event/${event.id}`)}
-                >
-                  View event details
-                </button>
-              </div>
-            </div>
-          ))}
+          {events.length === 0 ? (
+            <p className="text-gray-600">No events available.</p>
+          ) : (
+            events.map((event) => (
+              <Card key={event.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
+                <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
+                  <h4 className="font-bold text-large">{event.title}</h4>
+                </CardHeader>
+                <CardBody className="pb-0 pt-2 px-4 flex-col items-start">
+                  <Image
+                    alt={event.title}
+                    className="object-cover rounded-xl"
+                    src={event.imageUrl}
+                    width="100%"
+                    height={180}
+                    data-disableanimation={true} // Use custom data attribute
+                  />
+                </CardBody>
+                <CardFooter className="flex flex-col items-start p-4">
+                  <p className="text-gray-600 mb-4">{event.description}</p>
+                  <Button 
+                    className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
+                    onClick={() => navigate(`/event/${event.id}`)}
+                  >
+                    View event details
+                  </Button>
+                </CardFooter>
+              </Card>
+            ))
+          )}
        </div>
      </div>
    </DefaultLayout>
--- a/client/src/pages/ManageEventsPage.tsx
+++ b/client/src/pages/ManageEventsPage.tsx
@@ -0,0 +1,101 @@
+import DefaultLayout from "../layouts/default";
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Avatar, Button } from "@nextui-org/react";
+import { useNavigate } from "react-router-dom";
+import { PencilSquareIcon, TrashIcon } from "../icons";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import config from "../config";
+
+const ManageEventsPage = () => {
+  const [events, setEvents] = useState<any[]>([]);
+  const navigate = useNavigate();
+
+  const fetchEvents = async () => {
+    try {
+      const res = await axios.get(config.serverAddress + "/events");
+      console.log("Fetched events data:", res.data); // Debug log
+      setEvents(res.data);
+    } catch (error) {
+      console.error("Failed to fetch events:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  const handleEdit = (id: string) => {
+    navigate(`/edit-event/${id}`);
+  };
+
+  const handleDelete = (id: string) => {
+    // Add delete functionality here
+    axios.delete(`${config.serverAddress}/events/${id}`).then((res) => {
+      setEvents(events.filter((event) => event.id !== id));
+    });
+  };
+
+  return (
+    <DefaultLayout>
+      <div className="mb-6">
+        <h2 className="text-3xl font-semibold text-red-600">Manage Events</h2>
+      </div>
+      <Table aria-label="Manage Events Table">
+        <TableHeader>
+          <TableColumn>Event Name and Picture</TableColumn>
+          <TableColumn>Date</TableColumn>
+          <TableColumn>Time</TableColumn>
+          <TableColumn>Location</TableColumn>
+          <TableColumn>Description</TableColumn>
+          <TableColumn>Event Category</TableColumn>
+          <TableColumn>Actions</TableColumn>
+        </TableHeader>
+        <TableBody>
+          {events.map((event) => (
+            <TableRow key={event.id}>
+              <TableCell>
+                <div className="flex items-center">
+                  <Avatar src={`${config.serverAddress}${event.imageUrl}`} className="mr-4" />
+                  {event.title}
+                </div>
+              </TableCell>
+              <TableCell>{new Date(event.date).toLocaleDateString()}</TableCell>
+              <TableCell>{event.time}</TableCell>
+              <TableCell>{event.location}</TableCell>
+              <TableCell>{event.description}</TableCell>
+              <TableCell>{event.category}</TableCell>
+              <TableCell>
+                <div className="flex space-x-2">
+                  <Button
+                    size="sm"
+                    variant="flat"
+                    color="primary"
+                    onPress={() => handleEdit(event.id)}
+                  >
+                    <PencilSquareIcon />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="flat"
+                    color="danger"
+                    onPress={() => handleDelete(event.id)}
+                  >
+                    <TrashIcon />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Button
+        className="mt-6 bg-red-600 text-white"
+        onPress={() => navigate("/CreateEvent")}
+      >
+        Add events
+      </Button>
+    </DefaultLayout>
+  );
+};
+
+export default ManageEventsPage;
--- a/server/models/Events.js
+++ b/server/models/Events.js
@@ -1,4 +1,7 @@
-module.exports = (sequelize, DataTypes) => {
+const { DataTypes } = require('sequelize');
+
+
+module.exports = (sequelize)  => {
  const Events = sequelize.define("Events", {
    title: {
      type: DataTypes.STRING,
@@ -25,8 +28,8 @@ module.exports = (sequelize, DataTypes) => {
      allowNull: false,
    },
    Events: {
-        type: DataTypes.BLOB("long"),
-        allowNull: true,
+      type: DataTypes.BLOB("long"),
+      allowNull: true,
    },
    slotsAvailable: {
      type: DataTypes.INTEGER,
@@ -36,6 +39,5 @@ module.exports = (sequelize, DataTypes) => {
    tableName: "events",
    timestamps: true,
  });
-
  return Events;
-};
+}
--- a/server/routes/events.js
+++ b/server/routes/events.js
@@ -15,8 +15,8 @@ router.post("/", async (req, res) => {
        time: yup.string().required(),
        location: yup.string().required(),
        category: yup.string().required(),
-        imageUrl: yup.string().matches(/(\/uploads\/.+)/, 'Image URL must be a valid path').required(),
-        slotsAvailable: yup.number().integer().required()
+        imageUrl: yup.string(),
+        slotsAvailable: yup.number().integer().required(),
    });

    try {
@@ -33,67 +33,17 @@ router.post("/", async (req, res) => {

 const upload = multer({ storage: multer.memoryStorage() });
  
-router.put(
-    "/:id",
-    upload.single("image"),
-    async (req, res) => {
-      const id = req.params.id;
-  
-      // Check if file is uploaded
-      if (!req.file) {
-        return res.status(400).json({ message: "No file uploaded" });
-      }
-  
-      try {
-        const { buffer, mimetype, size } = req.file;
-  
-        // Validate file type and size (example: max 5MB, only images)
-        const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
-        const maxSize = 5 * 1024 * 1024; // 5MB
-  
-        if (!allowedTypes.includes(mimetype)) {
-          return res.status(400).json({
-            message:
-              "Invalid file type\nSupported: jpeg, png, gif\nUploaded: " +
-              mimetype.substring(6),
-          });
-        }
-  
-        if (size > maxSize) {
-          return res.status(400).json({
-            message:
-              "File too large!\nMaximum: 5MB, Uploaded: " +
-              (size / 1000000).toFixed(2) +
-              "MB",
-          });
-        }
-  
-        // Crop the image to a square
-        const croppedBuffer = await sharp(buffer)
-          .resize({ width: 512, height: 512, fit: sharp.fit.cover }) // Adjust size as necessary
-          .toBuffer();
-  
-        await User.update(
-          { Events: croppedBuffer },
-          { where: { id: id } }
-        );
-  
-        res.json({ message: "Event image successfully uploaded." });
-      } catch (err) {
-        res
-          .status(500)
-          .json({ message: "Internal server error", errors: err.errors });
-      }
-    }
-  );
-  
-
-router.get("/", async (req, res) => {
-    const list = await Events.findAll({
+  router.get("/", async (req, res) => {
+    try {
+      const list = await Events.findAll({
        order: [['createdAt', 'DESC']],
-    });
-    res.json(list);
-});
+      });
+      res.json(list);
+    } catch (error) {
+      console.error("Error fetching events:", error);
+      res.status(500).json({ message: "Internal Server Error" });
+    }
+  });

 router.get("/:id", async (req, res) => {
    const id = req.params.id;
@@ -115,8 +65,8 @@ router.put("/:id", async (req, res) => {
        time: yup.string(),
        location: yup.string(),
        category: yup.string(),
-        imageUrl: yup.string().matches(/(\/uploads\/.+)/, 'Image URL must be a valid path'),
-        slotsAvailable: yup.number().integer()
+        imageUrl: yup.string(),
+        slotsAvailable: yup.number().integer(),
    });

    try {