From c8186d569b1dadc91b7a8e072544061acb781d0d Mon Sep 17 00:00:00 2001 From: Bhav Beri Date: Sun, 31 Mar 2024 16:43:50 +0530 Subject: [PATCH] Add responsiveness to the datagrid tables and other UI changes --- src/app/manage/clubs/page.jsx | 2 +- src/app/manage/members/[id]/page.jsx | 8 +- src/components/clubs/ClubsTable.jsx | 155 +++++++----- src/components/events/EventForm.jsx | 9 +- src/components/events/EventsTable.jsx | 260 ++++++++++++--------- src/components/members/MemberForm.jsx | 2 +- src/components/members/MemberPositions.jsx | 33 ++- src/components/members/MembersTable.jsx | 154 ++++++------ src/components/profile/UserMemberships.jsx | 58 ++++- 9 files changed, 420 insertions(+), 261 deletions(-) diff --git a/src/app/manage/clubs/page.jsx b/src/app/manage/clubs/page.jsx index 576f1951..8bc9a367 100644 --- a/src/app/manage/clubs/page.jsx +++ b/src/app/manage/clubs/page.jsx @@ -34,7 +34,7 @@ export default async function ManageClubs() { variant="contained" startIcon={} > - New Club + New Club/Body diff --git a/src/app/manage/members/[id]/page.jsx b/src/app/manage/members/[id]/page.jsx index 760bf618..a584a86d 100644 --- a/src/app/manage/members/[id]/page.jsx +++ b/src/app/manage/members/[id]/page.jsx @@ -44,7 +44,11 @@ export default async function ManageMember({ params }) { - + - Club + Club/Body diff --git a/src/components/clubs/ClubsTable.jsx b/src/components/clubs/ClubsTable.jsx index fdb182b1..995a2703 100644 --- a/src/components/clubs/ClubsTable.jsx +++ b/src/components/clubs/ClubsTable.jsx @@ -2,7 +2,9 @@ import { useRouter } from "next/navigation"; -import { Box } from "@mui/material"; +import { Box, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; +import useMediaQuery from "@mui/material/useMediaQuery"; import { DataGrid, GridLogicOperator } from "@mui/x-data-grid"; import Tag from "components/Tag"; @@ -10,69 +12,108 @@ import QuickSearchToolbar from "components/QuickSearchToolbar"; import ClubLogo from "components/clubs/ClubLogo"; -const columns = [ - { - field: "img", - headerName: "", - flex: 1, - valueGetter: ({ row }) => ({ name: row.name, logo: row.logo }), - renderCell: ({ value }) => ( - - ), - }, - { - field: "code", - headerName: "Code", - flex: 3, - }, - { - field: "name", - headerName: "Name", - flex: 6, - }, - { - field: "email", - headerName: "Email", - flex: 6, - renderCell: ({ value }) => ( - - {value} - - ), - }, - { - field: "category", - headerName: "Category", - flex: 2, - valueGetter: ({ row }) => ({ - category: row.category, - studentBody: row.studentBody, - }), - renderCell: ({ value }) => ( - - {value.studentBody ? "Student Body" : value.category} - - ), - }, - { - field: "state", - headerName: "State", - align: "center", - headerAlign: "center", - flex: 2, - renderCell: ({ value }) => ( - - ), - }, -]; - export default function ClubsTable({ clubs }) { const router = useRouter(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + + const columns = [ + { + field: "img", + headerName: "", + flex: 1, + valueGetter: ({ row }) => ({ name: row.name, logo: row.logo }), + renderCell: ({ value }) => ( + + ), + }, + ...(isMobile + ? [] + : [ + { + field: "code", + headerName: "Code", + flex: 3, + }, + ]), + { + field: "name", + headerName: "Name", + flex: isMobile ? null : 6, + renderCell: (p) => + p.value ? ( + + {p.value} + + ) : ( + p.value + ), + }, + ...(isMobile + ? [] + : [ + { + field: "email", + headerName: "Email", + flex: 6, + renderCell: ({ value }) => ( + + {value} + + ), + }, + ]), + { + field: "category", + headerName: "Category", + flex: isMobile ? null : 2, + valueGetter: ({ row }) => ({ + category: row.category, + studentBody: row.studentBody, + }), + renderCell: ({ value }) => ( + + {value.studentBody ? "Student Body" : value.category} + + ), + }, + { + field: "state", + headerName: "State", + align: "center", + headerAlign: "center", + flex: isMobile ? null : 2, + renderCell: ({ value }) => ( + + ), + }, + ]; if (!clubs) return null; return ( (isMobile ? "auto" : "none")} rows={clubs} columns={columns} getRowId={(r) => r.cid} diff --git a/src/components/events/EventForm.jsx b/src/components/events/EventForm.jsx index 83dcf77d..08d0d19e 100644 --- a/src/components/events/EventForm.jsx +++ b/src/components/events/EventForm.jsx @@ -222,12 +222,12 @@ export default function EventForm({ typeof formData.poster === "string" ? formData.poster : Array.isArray(formData.poster) && formData.poster.length > 0 - ? await uploadFile(formData.poster[0], "image") - : null; + ? await uploadFile(formData.poster[0], "image") + : null; // convert dates to ISO strings data.datetimeperiod = formData.datetimeperiod.map((d) => - new Date(d).toISOString(), + new Date(d).toISOString() ); // convert budget to array of objects with only required attributes @@ -488,7 +488,7 @@ export default function EventForm({ fullWidth onClick={() => handleSubmit((data) => - onSubmit(data, { shouldSubmit: true }), + onSubmit(data, { shouldSubmit: true }) )() } disabled={budgetEditing} @@ -735,6 +735,7 @@ function EventAudienceSelect({ control }) { {...field} color="primary" onChange={(u, v) => handleChange(u, v)} + sx={{ display: "flex", flexWrap: "wrap" }} > {Object.keys(audienceMap).map((key) => ( diff --git a/src/components/events/EventsTable.jsx b/src/components/events/EventsTable.jsx index cdaa6b74..893c2362 100644 --- a/src/components/events/EventsTable.jsx +++ b/src/components/events/EventsTable.jsx @@ -3,6 +3,8 @@ import { useRouter } from "next/navigation"; import { Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; +import useMediaQuery from "@mui/material/useMediaQuery"; import { DataGrid, GridLogicOperator } from "@mui/x-data-grid"; import { ISOtoHuman } from "utils/formatTime"; @@ -12,131 +14,163 @@ import Tag from "components/Tag"; import Icon from "components/Icon"; import QuickSearchToolbar from "components/QuickSearchToolbar"; -const columns = [ - { - field: "code", - headerName: "", - flex: 3, - renderCell: ({ value }) => ( - - {value} - - ), - }, - { - field: "name", - headerName: "Name", - flex: 5, - }, - { - field: "club", - headerName: "Club", - flex: 3, - valueGetter: ({ row }) => row.clubid, - }, - { - field: "scheduled", - headerName: "Scheduled", - flex: 3, - align: "center", - headerAlign: "center", - valueGetter: ({ row }) => row.datetimeperiod[0], - valueFormatter: ({ value }) => ISOtoHuman(value), - }, - // { - // field: "budget", - // headerName: "Budget/SLC", - // flex: 2, - // align: "center", - // headerAlign: "center", - // valueGetter: ({ row }) => ({ - // requested: row.budget.length > 0, - // approved: row.status.budget, - // }), - // renderCell: ({ value }) => ( - // - // ), - // }, - { - field: "venue", - headerName: "Venue/SLO", - flex: 2, - align: "center", - headerAlign: "center", - valueGetter: ({ row }) => ({ - requested: row.location.length > 0, - approved: row.status.room, - }), - renderCell: ({ value }) => ( - ( + + {value} + + ), + }, + ]), + { + field: "name", + headerName: "Name", + flex: isMobile ? null : 5, + renderCell: (p) => + p.value ? ( + + {p.value} + + ) : ( + p.value + ), + }, + ...(isMobile + ? [] + : [ + { + field: "club", + headerName: "Club", + flex: 3, + valueGetter: ({ row }) => row.clubid, + }, + { + field: "scheduled", + headerName: "Scheduled", + flex: 3, + align: "center", + headerAlign: "center", + valueGetter: ({ row }) => row.datetimeperiod[0], + valueFormatter: ({ value }) => ISOtoHuman(value), + }, + ]), + // { + // field: "budget", + // headerName: "Budget/SLC", + // flex: isMobile ? null : 2, + // align: "center", + // headerAlign: "center", + // valueGetter: ({ row }) => ({ + // requested: row.budget.length > 0, + // approved: row.status.budget, + // }), + // renderCell: ({ value }) => ( + // + // ), + // }, + { + field: "venue", + headerName: "Venue/SLO", + flex: isMobile ? null : 2, + align: "center", + headerAlign: "center", + valueGetter: ({ row }) => ({ + requested: row.location.length > 0, + approved: row.status.room, + }), + renderCell: ({ value }) => ( + - ), - }, - { - field: "status", - headerName: "Status", - flex: 3, - align: "center", - headerAlign: "center", - valueGetter: ({ row }) => ({ - state: row.status.state, - start: row.datetimeperiod[0], - }), - renderCell: ({ value }) => { - // change state to 'completed' if it has been approved and is in the past - if (value.state === "approved" && new Date(value.start) < new Date()) - value.state = "completed"; - - return ( - - ); + ), }, - }, -]; + { + field: "status", + headerName: "Status", + flex: isMobile ? null : 3, + align: "center", + headerAlign: "center", + valueGetter: ({ row }) => ({ + state: row.status.state, + start: row.datetimeperiod[0], + }), + renderCell: ({ value }) => { + // change state to 'completed' if it has been approved and is in the past + if (value.state === "approved" && new Date(value.start) < new Date()) + value.state = "completed"; -export default function EventsTable({ - events, - scheduleSort = "asc", - hideClub = false, -}) { - const router = useRouter(); + return ( + + ); + }, + }, + ]; if (!events) return null; return ( (isMobile ? "auto" : "none")} rows={events} columns={hideClub ? columns.filter((c) => c.field !== "club") : columns} getRowId={(r) => r._id} diff --git a/src/components/members/MemberForm.jsx b/src/components/members/MemberForm.jsx index 9a34bbb3..db94002d 100644 --- a/src/components/members/MemberForm.jsx +++ b/src/components/members/MemberForm.jsx @@ -382,7 +382,7 @@ function MemberClubSelect({ control, edit }) { Club *