Merge branch 'pr/54' into development

Author: EricSvebakk

app/(pages)/(main)/volunteering/logs/workLogInput.js

@@ -1,12 +1,13 @@
 
-import { Box, Button, Skeleton, Stack, TextField, Typography } from "@mui/material";
+import { Button, Fab, Skeleton, Stack, TextField, Tooltip, Typography } from "@mui/material";
 import { useState } from "react";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import CustomAutoComplete from "@/app/components/input/CustomAutocomplete";
 import CustomNumberInput from "@/app/components/input/CustomNumberInput";
 import prismaRequest from "@/app/middleware/prisma/prismaRequest";
 import locale from "date-fns/locale/en-GB";
+import { CalendarToday, PunchClock } from "@mui/icons-material";
 
 export default function workLogInput(
   session,
@@ -17,8 +18,11 @@ export default function workLogInput(
   const [registeredFor, setRegisteredFor] = useState(null);
   const [selectedGroup, setSelectedGroup] = useState(null);
   const [selectedDateTime, setSelectedDateTime] = useState(new Date());
+  const [endDateTime, setEndDateTime] = useState(new Date());
   const [hours, setHours] = useState(0);
   const [description, setDescription] = useState("");
+  const [shouldInputHours, setShouldInputHours] = useState(false);
+  const [endInputMethodTooltip, setEndInputMethodTooltip] = useState("Change to 'End of work'");
 
   const [registeredForError, setRegisteredForError] = useState(false);
   const [selectedGroupError, setSelectedGroupError] = useState(false);
@@ -89,6 +93,21 @@ export default function workLogInput(
     }, 5000);
   };
 
+  const switchEndInputMethod = () => {
+    if (!shouldInputHours) {
+      setShouldInputHours(true);
+      document.querySelector(".endDateTime").setAttribute("style", "display: inline");
+      document.querySelector(".hours").setAttribute("style", "display: none");
+      setEndInputMethodTooltip("Change to 'Hours worked'");
+
+    } else {
+      setShouldInputHours(false);
+      document.querySelector(".endDateTime").setAttribute("style", "display: none");
+      document.querySelector(".hours").setAttribute("style", "display: inline");
+      setEndInputMethodTooltip("Change to 'End of work'");
+    }
+  };
+
   return (
     <Stack direction="column" spacing={1}>
       <Stack  direction="column" spacing={2}>
@@ -116,15 +135,54 @@ export default function workLogInput(
             ampm={false}
             disableOpenPicker
             onChange={(e) => setSelectedDateTime(e)}
-          />
+            />
         </LocalizationProvider>
-        <CustomNumberInput
-          label="Hours worked"
-          value={hours}
-          setValue={setHours}
-          check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)}
-          error={hoursError}
-        />
+        <Stack
+          direction="row"
+          alignItems={"stretch"}
+        >
+          <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={locale}>
+            <DateTimePicker
+              className="endDateTime"
+              sx={{ display: "none" }}
+              slotProps={{ textField: { fullWidth: true } }}
+              label="End of work"
+              value={endDateTime} // Replacing defaultValue to make it synced with the actual value
+              ampm={false}
+              disableOpenPicker
+              onChange={(e) => {
+                if (e < selectedDateTime) return; // Prevent endDateTime from being before startDateTime
+                setEndDateTime(e);
+                setHours(Math.round(((e - selectedDateTime) / 3600000) * 10) / 10) // Update hours
+              }}
+            />
+          </LocalizationProvider>
+          <CustomNumberInput
+            className="hours"
+            label="Hours worked"
+            value={hours}
+            setValue={(value) => {setHours(value);}}
+            check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)}
+            error={hoursError}
+          />
+          <Tooltip
+            className="endInputMethodTooltip"
+            title={ endInputMethodTooltip }
+          >
+            <Fab
+              className="endInputMethodChangeButton"
+              size="small"
+              color="primary"
+              style={{
+                marginLeft: "10px",
+                padding: "10px",
+               }}
+              onClick={() => {switchEndInputMethod();}}
+            >
+              { shouldInputHours ? <PunchClock /> : <CalendarToday /> }
+            </Fab>
+          </Tooltip>
+        </Stack>
         <TextField
           label="Description"
           size="small"
@@ -171,7 +229,7 @@ function validateWorkLogRequest(
     registeredForError: registeredFor == null,
     selectedGroupError: selectedGroup == null,
     selectedDateTimeError: false, // TODO: add semester validation
-    hoursError: hours <= 0 || hours > 24,
+    hoursError: Number.isNaN(hours) || hours <= 0 || hours > 24,
     descriptionError: description.length == 0,
   };
 

app/components/input/CustomNumberInput.js

@@ -4,16 +4,18 @@ import { Component } from "react";
 
 export default class CustomNumberInput extends Component {
   render() {
-    const { label, value, setValue, check, error } = this.props;
+    const { label, value, setValue, check, error, className } = this.props;
 
     return (
       <TextField
+        className={className}
         label={label}
         size="small"
         InputLabelProps={{ shrink: true }}
         value={value}
         error={error}
         onFocus={(e) => e.target.select()}
+        fullWidth
         onBlur={(e) => {
           let value = check(e.target.value) ? 0 : e.target.value;
           if (value === "") value = 0;