add Schedule UI for Club Pages, complete Schedule Component for App.

software-community · Jun 27, 2024 · dc67f8e · dc67f8e
1 parent 038d6f4
commit dc67f8e
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 34 deletions.
diff --git a/src/app/[clubname]/page.jsx b/src/app/[clubname]/page.jsx
@@ -1,19 +1,21 @@
-import React from 'react'
-import OurProjects from '@/components/ClubPageComponents/OurProjects'
-import OurTeam from '@/components/ClubPageComponents/OurTeam'
-import OurBlogs from '@/components/ClubPageComponents/OurBlogs'
-import Gallery from '@/components/ClubPageComponents/Gallery'
+import React from "react";
+import OurProjects from "@/components/ClubPageComponents/OurProjects";
+import OurTeam from "@/components/ClubPageComponents/OurTeam";
+import OurBlogs from "@/components/ClubPageComponents/OurBlogs";
+import Gallery from "@/components/ClubPageComponents/Gallery";
+import OurSchedule from "@/components/ClubPageComponents/OurSchedule";
 
-const page = ({params}) => {
-  const club=params.clubname
+const page = ({ params }) => {
+  const club = params.clubname;
   return (
     <>
-    <Gallery club={club}/>
-    <OurTeam club={club}/>
-    <OurProjects club={club}/>
-    <OurBlogs club={club}/>
+      <Gallery club={club} />
+      <OurSchedule club={club} />
+      <OurTeam club={club} />
+      <OurProjects club={club} />
+      <OurBlogs club={club} />
     </>
-  )
-}
+  );
+};
 
-export default page
+export default page;
diff --git a/src/app/dashboard/events/page.jsx b/src/app/dashboard/events/page.jsx
@@ -28,9 +28,16 @@ const Page = async () => {
   return (
     <>
       <div className="w-full h-full flex items-center justify-center flex-col">
-        <h1 className="w-full text-center font-bold">
-          {monthName} {year} 
-        </h1>
+      <div className="flex flex-col items-center justify-center space-y-4 text-center">
+        <div className="space-y-2 mb-0">
+          <h2 className="text-4xl font-bold tracking-tighter sm:text-5xl">
+            {monthName} {year} Schedule
+          </h2>
+          <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+            Click on a coloured cell to view, edit, delete event. Click on uncoloured cell to create event.
+          </p>
+        </div>
+      </div>
         <MonthCalendar serializedEvents={JSON.stringify(events)}/>
       </div>
     </>

diff --git a/src/components/ClubPageComponents/OurSchedule.jsx b/src/components/ClubPageComponents/OurSchedule.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { getEventsForClub } from "@/app/actions/EventData";
+import Calendar from "../ui/MonthCalendar";
+
+const OurSchedule = async ({club}) => {
+  const fetchedEvents = await getEventsForClub(club);
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const month = new Date().getMonth(); // Call the function to get the month
+  const year = new Date().getFullYear();
+  const monthName = monthNames[month];
+  return (
+    <div className="w-full min-h-[50vh] py-12 flex items-center flex-col justify-center">
+      <div className="flex flex-col items-center justify-center space-y-4 text-center">
+        <div className="space-y-2 mb-12">
+          <h2 className="text-4xl font-bold tracking-tighter sm:text-5xl">
+            {monthName} {year} Schedule
+          </h2>
+          <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+            Click on a coloured cell to  see event details
+          </p>
+        </div>
+      </div>
+      <Calendar serializedEvents={JSON.stringify(fetchedEvents)}/>
+    </div>
+  );
+};
+
+export default OurSchedule;
diff --git a/src/components/Events/Calendar.jsx b/src/components/Events/Calendar.jsx
@@ -12,7 +12,7 @@ function CustomDayContent({ date, eventDates }) {
     <span style={{ position: "relative", overflow: "visible" }}>
       {isEventDay ? (
         <div>
-          <span className="bg-primary text-white p-1 ">{date.getDate()}</span>
+          <span className="bg-primary text-white rounded-full px-2 ">{date.getDate()}</span>
         </div>
       ) : (
         date.getDate()

diff --git a/src/components/Events/create-modal.jsx b/src/components/Events/create-modal.jsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import React from "react";
 import {
   AlertDialog,
@@ -26,7 +26,7 @@ export function CreateEventModal({ Date, open, onOpenChange }) {
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Create Event on {Date}</AlertDialogTitle>
+          <AlertDialogTitle>Create Event </AlertDialogTitle>
 
           <form onSubmit={handleSubmit}>
             {/* Title */}
@@ -147,7 +147,12 @@ export function CreateEventModal({ Date, open, onOpenChange }) {
 
             <AlertDialogFooter>
               <AlertDialogCancel>Close</AlertDialogCancel>
-              <button type="submit" className="bg-primary text-white p-2">Create Event</button>
+              <button
+                type="submit"
+                className="bg-primary text-white rounded-md p-2"
+              >
+                Create Event
+              </button>
             </AlertDialogFooter>
           </form>
         </AlertDialogHeader>

diff --git a/src/components/Events/view-update-modal.jsx b/src/components/Events/view-update-modal.jsx
@@ -43,7 +43,7 @@ export function ViewUpdateEventModal({
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Update Event on {Date}</AlertDialogTitle>
+          <AlertDialogTitle>Update Event</AlertDialogTitle>
 
           <form onSubmit={handleSubmit}>
             {/* Title */}
@@ -166,7 +166,7 @@ export function ViewUpdateEventModal({
               </div>
             </div>
 
-            <AlertDialogFooter className="flex flex-col gap-2 flex-col-reverse" >
+            <AlertDialogFooter className="flex flex-col gap-2 flex-col-reverse">
               <AlertDialogCancel>Close</AlertDialogCancel>
               <button
                 type="button"
@@ -175,7 +175,10 @@ export function ViewUpdateEventModal({
               >
                 Delete Event
               </button>
-              <button type="submit" className="bg-primary  text-white p-2 rounded-md">
+              <button
+                type="submit"
+                className="bg-primary  text-white p-2 rounded-md"
+              >
                 Update Event
               </button>
             </AlertDialogFooter>

diff --git a/src/components/Home/Achievements.jsx b/src/components/Home/Achievements.jsx
@@ -3,7 +3,7 @@ import ListItem from '../ui/listItem';
 import { getAllAchievements } from '@/app/actions/AchievementData';
 
 
-// const achievementsData = [
+
 //   {
 //     title: "First",
 //     description: "This is the first description",

diff --git a/src/components/Home/OurSchedule.jsx b/src/components/Home/OurSchedule.jsx
@@ -22,11 +22,18 @@ const OurSchedule = async () => {
   const year = new Date().getFullYear();
   const monthName = monthNames[month];
   return (
-    <div className="w-full min-h-[50vh] pb-12 flex items-center flex-col justify-center">
-      <h1 className="w-full text-center text-3xl mb-8 font-bold">
-          {monthName} {year} Schedule
-        </h1>
-      <Calendar serializedEvents={JSON.stringify(fetchedEvents)}/>
+    <div className="w-full min-h-[60vh] pb-12 flex items-center flex-col justify-start">
+      <div className="flex flex-col items-center justify-center space-y-4 text-center">
+        <div className="space-y-2 mb-12">
+          <h2 className="text-4xl font-bold tracking-tighter sm:text-5xl">
+            {monthName} {year} Schedule
+          </h2>
+          <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+            Click on a coloured cell to  see event details
+          </p>
+        </div>
+      </div>
+      <Calendar serializedEvents={JSON.stringify(fetchedEvents)} />
     </div>
   );
 };

diff --git a/src/components/ui/DashboardHome.jsx b/src/components/ui/DashboardHome.jsx
@@ -102,7 +102,7 @@ const AboutBlock = ({ isSuperAdmin }) => (
         </span>
       </p>
     </Link>
-    <Link href="/dashboard/gallery">
+    <Link href="/dashboard/events">
       <p className="cursor-pointer">
         /Events{" "}
         <span className="text-zinc-400">

diff --git a/src/components/ui/MonthCalendar.jsx b/src/components/ui/MonthCalendar.jsx
@@ -12,7 +12,9 @@ function CustomDayContent({ date, eventDates }) {
     <span style={{ position: "relative", overflow: "visible" }}>
       {isEventDay ? (
         <div>
-          <span className="bg-primary text-white p-1 ">{date.getDate()}</span>
+          <span className="bg-primary text-white px-2 rounded-full ">
+            {date.getDate()}
+          </span>
         </div>
       ) : (
         date.getDate()
@@ -62,7 +64,7 @@ export default function Calendar({ serializedEvents }) {
           ),
           Caption: CustomCaptionComponent,
         }}
-        className="text-lg sm:text-xl"
+        className="text-lg  sm:text-xl"
       />
       {eventDaySelected && open && (
         <EventDetailDialog
@@ -72,7 +74,6 @@ export default function Calendar({ serializedEvents }) {
           onOpenChange={setOpen}
         />
       )}
-
     </>
   );
 }