Merge pull request #106 from Clubs-Council-IIITH/fix_budget_description

Event Form: add budget description word wrap and error

src/components/ConfirmDialog.jsx

@@ -18,6 +18,7 @@ export default function ConfirmDialog({
   onClose,
   confirmProps = {},
   confirmText = "Confirm",
+  cancelText = "Cancel",
   addCancel = true,
 }) {
   return (
@@ -32,7 +33,7 @@ export default function ConfirmDialog({
         {addCancel ? (
           <Button onClick={onClose}>
             <Typography variant="button" color="text.disabled">
-              Cancel
+              {cancelText}
             </Typography>
           </Button>
         ) : null}

src/components/events/EventBudget.jsx

@@ -2,6 +2,8 @@
 
 import { DataGrid } from "@mui/x-data-grid";
 import { Button, IconButton, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import Icon from "components/Icon";
 import { fCurrency } from "utils/formatCurrency";
@@ -12,6 +14,9 @@ export default function EventBudget({
   setRows = console.log,
   setBudgetEditing = console.log,
 }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   // budget item template
   const emptyBudgetItem = { description: null, amount: 0, advance: false };
 
@@ -37,32 +42,69 @@ export default function EventBudget({
     {
       field: "description",
       headerName: "Description",
-      width: 250,
-      flex: 2,
+      width: 200,
+      flex: isMobile ? null : 4,
       editable: editable,
-      renderCell: (p) =>
-        p.value ? (
-          p.value
+      renderCell: (p) => {
+        return p.value ? (
+          <Typography
+            variant="body2"
+            sx={{
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              msHyphens: "auto",
+              MozHyphens: "auto",
+              WebkitHyphens: "auto",
+              hyphens: "auto",
+              px: "10px",
+              py: "10px",
+            }}
+          >
+            {p.value}
+          </Typography>
         ) : (
-          <Typography color="text.secondary">
+          <Typography
+            color="text.secondary"
+            sx={{
+              px: "10px",
+              py: "10px",
+            }}
+          >
             <i>Double click to edit</i>
           </Typography>
-        ),
+        );
+      },
       display: "flex",
     },
     {
       field: "amount",
       type: "number",
       headerName: "Amount",
-      flex: 1,
+      flex: isMobile ? null : 1,
       editable: editable,
-      valueFormatter: (value, row, column, apiRef) => fCurrency(value),
+      renderCell: (p) => (
+        <Typography
+          variant="body2"
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            px: "5px",
+            py: "10px",
+            justifyContent: "center",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+          }}
+        >
+          {fCurrency(p.value)}
+        </Typography>
+      ),
+      display: "flex",
     },
     {
       field: "advance",
       type: "boolean",
       headerName: "Advance",
-      width: 130,
+      width: isMobile ? 20 : 100,
       editable: editable,
       headerAlign: "center",
       align: "center",
@@ -81,7 +123,7 @@ export default function EventBudget({
             field: "action",
             align: "center",
             headerName: "",
-            width: 50,
+            width: isMobile ? 20 : 50,
             renderCell: (p) => (
               <IconButton onClick={() => onDelete(p)} size="small">
                 <Icon
@@ -108,6 +150,7 @@ export default function EventBudget({
 
       <DataGrid
         autoHeight
+        getRowHeight={() => "auto"}
         columns={columns}
         rows={rows}
         editMode="row"

src/components/events/EventForm.jsx

@@ -1,16 +1,10 @@
 "use client";
 
-import dayjs, { isDayjs } from "dayjs";
-
 import { useState, useEffect, useMemo } from "react";
 import { useRouter } from "next/navigation";
 
 import { useForm, Controller, useController } from "react-hook-form";
 
-import { LoadingButton } from "@mui/lab";
-import { DateTimePicker } from "@mui/x-date-pickers";
-import { renderTimeViewClock } from "@mui/x-date-pickers/timeViewRenderers";
-import InfoIcon from "@mui/icons-material/Info";
 import {
   Box,
   Button,
@@ -31,10 +25,18 @@ import {
   Switch,
   MenuItem,
 } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { renderTimeViewClock } from "@mui/x-date-pickers/timeViewRenderers";
+import InfoIcon from "@mui/icons-material/Info";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
 import {
   isValidPhoneNumber,
   parsePhoneNumberWithError,
 } from "libphonenumber-js";
+import dayjs, { isDayjs } from "dayjs";
 
 import { useAuth } from "components/AuthProvider";
 import { useToast } from "components/Toast";
@@ -67,9 +69,12 @@ export default function EventForm({
 }) {
   const router = useRouter();
   const { user } = useAuth();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const [loading, setLoading] = useState(false);
   const [cancelDialog, setCancelDialog] = useState(false);
+  const [mobileDialog, setMobileDialog] = useState(isMobile);
   const [budgetEditing, setBudgetEditing] = useState(false);
   const [hasPhone, setHasPhone] = useState(true);
 
@@ -262,6 +267,17 @@ export default function EventForm({
         advance: i.advance,
       }));
 
+    // Check if description increases the character limit
+    if (data.budget.some((i) => i.description.length > 250) ){
+        triggerToast({
+          title: "Character Limit Exceeded!",
+          messages: ["Please keep budget description below 250 characters"],
+          severity: "error",
+        });
+        setLoading(false);
+        return;
+    }
+
     // TODO: fix event link field
     data.link = null;
 
@@ -578,6 +594,16 @@ export default function EventForm({
           </Grid>
         </Grid>
       </Grid>
+      <ConfirmDialog
+        open={mobileDialog}
+        title="Mobile View"
+        description="This form is not optimized for mobile view. Please use a desktop device for better experience."
+        onConfirm={() => router.back()}
+        onClose={() => setMobileDialog(false)}
+        confirmProps={{ color: "primary" }}
+        confirmText="Go Back"
+        cancelText="Continue"
+      />
     </form>
   );
 }

src/components/members/MemberForm.jsx

@@ -9,7 +9,6 @@ import { useForm, Controller } from "react-hook-form";
 import { useToast } from "components/Toast";
 import { useAuth } from "components/AuthProvider";
 
-import { LoadingButton } from "@mui/lab";
 import {
   Button,
   Switch,
@@ -25,6 +24,9 @@ import {
   Select,
   MenuItem,
 } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import Icon from "components/Icon";
 import UserImage from "components/users/UserImage";
@@ -40,10 +42,13 @@ import { editMemberAction } from "actions/members/edit/server_action";
 export default function MemberForm({ defaultValues = {}, action = "log" }) {
   const router = useRouter();
   const { user } = useAuth();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const [userMember, setUserMember] = useState(null);
   const [loading, setLoading] = useState(false);
   const [cancelDialog, setCancelDialog] = useState(false);
+  const [mobileDialog, setMobileDialog] = useState(isMobile);
   const [positionEditing, setPositionEditing] = useState(false);
 
   const { control, watch, setValue, handleSubmit } = useForm({ defaultValues });
@@ -135,6 +140,18 @@ export default function MemberForm({ defaultValues = {}, action = "log" }) {
         endYear: i.endYear === "-" ? null : parseInt(i.endYear),
       }));
 
+    // // Check if roles increases the character limit of 99
+    if (data.roles.some((role) => role.name.length > 99)) {
+      setLoading(false);
+      return triggerToast({
+        title: "Error!",
+        messages: [
+          "One or more roles have a name that exceeds the character limit of 99.",
+        ],
+        severity: "error",
+      });
+    }
+
     // mutate
     await submitHandlers[action](data);
   }
@@ -259,13 +276,25 @@ export default function MemberForm({ defaultValues = {}, action = "log" }) {
           </Grid>
         </Grid>
       </Grid>
+      <ConfirmDialog
+        open={mobileDialog}
+        title="Mobile View"
+        description="This form is not optimized for mobile view. Please use a desktop device for better experience."
+        onConfirm={() => router.back()}
+        onClose={() => setMobileDialog(false)}
+        confirmProps={{ color: "primary" }}
+        confirmText="Go Back"
+        cancelText="Continue"
+      />
     </form>
   );
 }
 
 // find user by email
 function MemberUserInput({ control, watch, setValue, user, setUser }) {
   const { triggerToast } = useToast();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const uid = watch("uid");
   const emailInput = watch("userSelector");
@@ -291,13 +320,13 @@ function MemberUserInput({ control, watch, setValue, user, setUser }) {
   };
 
   return user ? (
-    <Stack direction="row" alignItems="center" spacing={4}>
+    <Stack direction="row" alignItems="center" spacing={isMobile ? 2 : 4}>
       <UserImage
         image={user.img}
         name={user.firstName}
         gender={user.gender}
-        width={80}
-        height={80}
+        width={isMobile ? 50 : 80}
+        height={isMobile ? 50 : 80}
       />
       <Stack direction="column" spacing={1}>
         <Typography variant="h4" sx={{ wordBreak: "break-word" }}>
@@ -307,6 +336,10 @@ function MemberUserInput({ control, watch, setValue, user, setUser }) {
           variant="body2"
           color="text.secondary"
           fontFamily="monospace"
+          sx={{
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+          }}
         >
           {user.email}
         </Typography>