From ec625c5107e455ce245c2bec51b62e51047571c3 Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Thu, 26 Sep 2024 15:21:50 +0200 Subject: [PATCH 1/7] Allow input of either end time or total hours for registered work --- .../main/volunteering/logs/workLogInput.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/app/pages/main/volunteering/logs/workLogInput.js b/app/pages/main/volunteering/logs/workLogInput.js index 84abb73..da15b6e 100644 --- a/app/pages/main/volunteering/logs/workLogInput.js +++ b/app/pages/main/volunteering/logs/workLogInput.js @@ -7,6 +7,7 @@ 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 { set } from "sanity"; export default function workLogInput( session, @@ -17,6 +18,7 @@ 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(""); @@ -118,10 +120,25 @@ export default function workLogInput( onChange={(e) => setSelectedDateTime(e)} /> + + { + setEndDateTime(e); + setHours(Math.round(((e - selectedDateTime) / 3600000) * 10) / 10) // Update hours + }} + /> + { + setHours(value); + setEndDateTime(new Date(selectedDateTime.getTime() + value * 3600000)); // Update endDateTime + }} check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)} error={hoursError} /> From a17695416ab23a6986bd61b83834f6805a1e284b Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Tue, 8 Oct 2024 16:37:56 +0200 Subject: [PATCH 2/7] Better validation of work log input Prevent negative hours caused by end time before start time, and prevent hours from being NaN --- app/pages/main/volunteering/logs/workLogInput.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/pages/main/volunteering/logs/workLogInput.js b/app/pages/main/volunteering/logs/workLogInput.js index da15b6e..963467b 100644 --- a/app/pages/main/volunteering/logs/workLogInput.js +++ b/app/pages/main/volunteering/logs/workLogInput.js @@ -127,6 +127,7 @@ export default function workLogInput( 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 }} @@ -188,7 +189,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, }; From 1480672ffb0101811ff24dacd9f7da81e2da7495 Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Wed, 9 Oct 2024 11:28:55 +0200 Subject: [PATCH 3/7] Group end time and hours Make end time and hours part of the same stack, with the stack having a light grey border --- .../main/volunteering/logs/workLogInput.js | 50 +++++++++++-------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/app/pages/main/volunteering/logs/workLogInput.js b/app/pages/main/volunteering/logs/workLogInput.js index 963467b..87afb25 100644 --- a/app/pages/main/volunteering/logs/workLogInput.js +++ b/app/pages/main/volunteering/logs/workLogInput.js @@ -120,29 +120,37 @@ export default function workLogInput( onChange={(e) => setSelectedDateTime(e)} /> - - { - if (e < selectedDateTime) return; // Prevent endDateTime from being before startDateTime - setEndDateTime(e); - setHours(Math.round(((e - selectedDateTime) / 3600000) * 10) / 10) // Update hours + + + { + if (e < selectedDateTime) return; // Prevent endDateTime from being before startDateTime + setEndDateTime(e); + setHours(Math.round(((e - selectedDateTime) / 3600000) * 10) / 10) // Update hours + }} + /> + + { + setHours(value); + setEndDateTime(new Date(selectedDateTime.getTime() + value * 3600000)); // Update endDateTime }} + check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)} + error={hoursError} /> - - { - setHours(value); - setEndDateTime(new Date(selectedDateTime.getTime() + value * 3600000)); // Update endDateTime - }} - check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)} - error={hoursError} - /> + Date: Fri, 11 Oct 2024 10:37:20 +0200 Subject: [PATCH 4/7] Allow open picker for start and end time --- .../main/volunteering/logs/workLogInput.js | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/app/pages/main/volunteering/logs/workLogInput.js b/app/pages/main/volunteering/logs/workLogInput.js index 87afb25..9af1acd 100644 --- a/app/pages/main/volunteering/logs/workLogInput.js +++ b/app/pages/main/volunteering/logs/workLogInput.js @@ -1,5 +1,11 @@ - -import { Box, Button, Skeleton, Stack, TextField, Typography } from "@mui/material"; +import { + Box, + Button, + Skeleton, + Stack, + TextField, + Typography, +} from "@mui/material"; import { useState } from "react"; import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers"; import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3"; @@ -9,12 +15,7 @@ import prismaRequest from "@/app/middleware/prisma/prismaRequest"; import locale from "date-fns/locale/en-GB"; import { set } from "sanity"; -export default function workLogInput( - session, - users, - workGroups, - setRefresh -) { +export default function workLogInput(session, users, workGroups, setRefresh) { const [registeredFor, setRegisteredFor] = useState(null); const [selectedGroup, setSelectedGroup] = useState(null); const [selectedDateTime, setSelectedDateTime] = useState(new Date()); @@ -83,7 +84,7 @@ export default function workLogInput( }, }, }); - + setRegisteredFor(null); setRequestResponse("Work registered."); setTimeout(() => { @@ -93,7 +94,7 @@ export default function workLogInput( return ( - + - + setSelectedDateTime(e)} + views={["year", "day", "hours", "minutes"]} /> - + { if (e < selectedDateTime) return; // Prevent endDateTime from being before startDateTime setEndDateTime(e); - setHours(Math.round(((e - selectedDateTime) / 3600000) * 10) / 10) // Update hours + setHours( + Math.round(((e - selectedDateTime) / 3600000) * 10) / 10 + ); // Update hours }} + views={["year", "day", "hours", "minutes"]} /> { setHours(value); - setEndDateTime(new Date(selectedDateTime.getTime() + value * 3600000)); // Update endDateTime + setEndDateTime( + new Date(selectedDateTime.getTime() + value * 3600000) + ); // Update endDateTime }} check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)} error={hoursError} @@ -191,7 +202,6 @@ function validateWorkLogRequest( setHoursError, setDescriptionError ) { - // Define an object to store the errors const errors = { registeredForError: registeredFor == null, From 4cc4301d42859e42f22de8f7c2490779dde2e761 Mon Sep 17 00:00:00 2001 From: Yrjar V Date: Fri, 11 Oct 2024 10:37:51 +0200 Subject: [PATCH 5/7] Revert "Allow open picker for start and end time" Didn't mean to push that --- .../main/volunteering/logs/workLogInput.js | 44 +++++++------------ 1 file changed, 17 insertions(+), 27 deletions(-) diff --git a/app/pages/main/volunteering/logs/workLogInput.js b/app/pages/main/volunteering/logs/workLogInput.js index 9af1acd..87afb25 100644 --- a/app/pages/main/volunteering/logs/workLogInput.js +++ b/app/pages/main/volunteering/logs/workLogInput.js @@ -1,11 +1,5 @@ -import { - Box, - Button, - Skeleton, - Stack, - TextField, - Typography, -} from "@mui/material"; + +import { Box, Button, Skeleton, Stack, TextField, Typography } from "@mui/material"; import { useState } from "react"; import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers"; import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3"; @@ -15,7 +9,12 @@ import prismaRequest from "@/app/middleware/prisma/prismaRequest"; import locale from "date-fns/locale/en-GB"; import { set } from "sanity"; -export default function workLogInput(session, users, workGroups, setRefresh) { +export default function workLogInput( + session, + users, + workGroups, + setRefresh +) { const [registeredFor, setRegisteredFor] = useState(null); const [selectedGroup, setSelectedGroup] = useState(null); const [selectedDateTime, setSelectedDateTime] = useState(new Date()); @@ -84,7 +83,7 @@ export default function workLogInput(session, users, workGroups, setRefresh) { }, }, }); - + setRegisteredFor(null); setRequestResponse("Work registered."); setTimeout(() => { @@ -94,7 +93,7 @@ export default function workLogInput(session, users, workGroups, setRefresh) { return ( - + - + setSelectedDateTime(e)} - views={["year", "day", "hours", "minutes"]} /> - + { if (e < selectedDateTime) return; // Prevent endDateTime from being before startDateTime setEndDateTime(e); - setHours( - Math.round(((e - selectedDateTime) / 3600000) * 10) / 10 - ); // Update hours + setHours(Math.round(((e - selectedDateTime) / 3600000) * 10) / 10) // Update hours }} - views={["year", "day", "hours", "minutes"]} /> { setHours(value); - setEndDateTime( - new Date(selectedDateTime.getTime() + value * 3600000) - ); // Update endDateTime + setEndDateTime(new Date(selectedDateTime.getTime() + value * 3600000)); // Update endDateTime }} check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)} error={hoursError} @@ -202,6 +191,7 @@ function validateWorkLogRequest( setHoursError, setDescriptionError ) { + // Define an object to store the errors const errors = { registeredForError: registeredFor == null, From f5fd3579f2fbd0a54cfb3c96fb4df560bfc5d9e2 Mon Sep 17 00:00:00 2001 From: Yrjar Vederhus Date: Fri, 18 Oct 2024 14:26:39 +0200 Subject: [PATCH 6/7] Update WorkLogInput end time input Add a button to allow switching between inputting hours worked and end time --- app/components/input/CustomNumberInput.js | 3 +- .../main/volunteering/logs/workLogInput.js | 52 ++++++++++++++----- 2 files changed, 42 insertions(+), 13 deletions(-) diff --git a/app/components/input/CustomNumberInput.js b/app/components/input/CustomNumberInput.js index d087566..2bafebb 100644 --- a/app/components/input/CustomNumberInput.js +++ b/app/components/input/CustomNumberInput.js @@ -4,10 +4,11 @@ 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 ( { + 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 ( @@ -118,17 +135,16 @@ export default function workLogInput( ampm={false} disableOpenPicker onChange={(e) => setSelectedDateTime(e)} - /> + /> { - setHours(value); - setEndDateTime(new Date(selectedDateTime.getTime() + value * 3600000)); // Update endDateTime - }} + setValue={(value) => {setHours(value);}} check={(data) => data.match(/[^0-9.]/) || data.match(/[.]{2,}/g)} error={hoursError} /> + + {switchEndInputMethod();}} + > + { shouldInputHours ? : } + + Date: Mon, 28 Oct 2024 09:41:16 +0100 Subject: [PATCH 7/7] Ensure components are full width --- app/components/input/CustomNumberInput.js | 1 + app/pages/main/volunteering/logs/workLogInput.js | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/input/CustomNumberInput.js b/app/components/input/CustomNumberInput.js index 2bafebb..2d745ff 100644 --- a/app/components/input/CustomNumberInput.js +++ b/app/components/input/CustomNumberInput.js @@ -15,6 +15,7 @@ export default class CustomNumberInput extends Component { 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; diff --git a/app/pages/main/volunteering/logs/workLogInput.js b/app/pages/main/volunteering/logs/workLogInput.js index 7305ccd..f048786 100644 --- a/app/pages/main/volunteering/logs/workLogInput.js +++ b/app/pages/main/volunteering/logs/workLogInput.js @@ -145,6 +145,7 @@ export default function workLogInput( {switchEndInputMethod();}} > { shouldInputHours ? : }