added button for showing deleted events only (#177)

* added button for showing deleted events only

* slo-only view added to deletedEvents button

* fixed typo

Author: rithikreddypalla

src/app/manage/events/page.jsx

@@ -23,6 +23,7 @@ async function getalleventsquery(querystring) {
     clubid: querystring["targetClub"],
     public: false,
     pastEventsLimit: querystring["pastEventsLimit"],
+    deletedEvents: querystring["deletedEvents"],
   });
 
   if (error) {
@@ -86,6 +87,7 @@ export default async function ManageEvents() {
         clubid={userMeta?.role === "club" ? userMeta.uid : null}
         scheduleSort="desc"
         hideClub={userMeta?.role === "club"} // hide club column if accessed by a club
+        canViewDeletedEvents={userMeta?.role === "slo"}
       />
     </Container>
   );

src/components/events/EventsTable.jsx

@@ -55,12 +55,14 @@ export default function EventsTable({
   clubid,
   scheduleSort = "asc",
   hideClub = false,
+  canViewDeletedEvents = false,
 }) {
   const router = useRouter();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   // Toggle state for Last 4 Months
+  const [deleteToggle, setDeleteToggle] = useState([]);
   const [filterMonth, setFilterMonth] = useState(["pastEventsLimit"]);
   const [events, setEvents] = useState(initialEvents || []);
   const [dialog, setDialog] = useState(false);
@@ -77,12 +79,13 @@ export default function EventsTable({
       let params = {
         targetClub: clubid,
         pastEventsLimit: filterMonth.includes("pastEventsLimit") ? 4 : null,
+        deletedEvents: deleteToggle.includes("toggleDeletedEvents"),
       };
       const result = await query(params);
       setEvents(result || []);
     }
     fetchEvents();
-  }, [query, clubid, filterMonth, initialEvents]);
+  }, [query, clubid, filterMonth, deleteToggle, initialEvents]);
 
   const columns = [
     ...(isMobile
@@ -369,29 +372,48 @@ export default function EventsTable({
             {query ? "All Events" : "Pending Events"}
           </Typography>
           {query && (
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={filterMonth.includes("pastEventsLimit")}
-                  onChange={(e) => {
-                    // Only show dialog when switching from ON to OFF
-                    if (
-                      filterMonth.includes("pastEventsLimit") &&
-                      !e.target.checked
-                    ) {
-                      setDialog(true);
-                    } else {
-                      setFilterMonth(
-                        e.target.checked ? ["pastEventsLimit"] : [],
-                      );
-                    }
-                  }}
-                  color="primary"
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={filterMonth.includes("pastEventsLimit")}
+                    onChange={(e) => {
+                      // Only show dialog when switching from ON to OFF
+                      if (
+                        filterMonth.includes("pastEventsLimit") &&
+                        !e.target.checked
+                      ) {
+                        setDialog(true);
+                      } else {
+                        setFilterMonth(
+                          e.target.checked ? ["pastEventsLimit"] : [],
+                        );
+                      }
+                    }}
+                    color="primary"
+                  />
+                }
+                label="Last 4 Months"
+                sx={{ marginLeft: 1 }}
+              />
+              {canViewDeletedEvents && (
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={deleteToggle.includes("toggleDeletedEvents")}
+                      onChange={(e) => {
+                        setDeleteToggle(
+                          e.target.checked ? ["toggleDeletedEvents"] : [],
+                        );
+                      }}
+                      color="primary"
+                    />
+                  }
+                  label="Show Only Deleted Events"
+                  sx={{ marginLeft: 1 }}
                 />
-              }
-              label="Last 4 Months"
-              sx={{ marginLeft: 1 }}
-            />
+              )}
+            </Box>
           )}
           <ConfirmDialog
             open={dialog}

src/gql/queries/events.jsx

@@ -41,6 +41,7 @@ export const GET_ALL_EVENTS = gql`
     $public: Boolean
     $timings: [DateTime!]
     $pastEventsLimit: Int
+    $deletedEvents: Boolean
   ) {
     events(
       clubid: $clubid
@@ -51,6 +52,7 @@ export const GET_ALL_EVENTS = gql`
       public: $public
       timings: $timings
       pastEventsLimit: $pastEventsLimit
+      deletedEvents: $deletedEvents
     ) {
       _id
       name