Skip to content

Commit

Permalink
Display dates as a range
Browse files Browse the repository at this point in the history
  • Loading branch information
@ColinToft
ColinToft committed Sep 22, 2024
1 parent 5492996 commit 6442a87
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 118 deletions.
41 changes: 30 additions & 11 deletions frontend/src/components/asp/requests/SchedulingFormCalendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
Box,
Button,
Center,
Flex,
FormControl,
FormLabel,
Grid,
Expand All @@ -26,7 +27,9 @@ type SchedulingFormCalendarProps = {
handleNext: () => void;
};

const SchedulingFormCalendar: React.FunctionComponent<SchedulingFormCalendarProps> = ({
const SchedulingFormCalendar: React.FunctionComponent<
SchedulingFormCalendarProps
> = ({
scheduledDropOffTime,
setScheduledDropOffTime,
dates,
Expand Down Expand Up @@ -78,6 +81,12 @@ const SchedulingFormCalendar: React.FunctionComponent<SchedulingFormCalendarProp
);
};

// scheduledDropOffTimeEnd is 1 hour later than scheduledDropOffTime
const scheduledDropOffTimeEnd = new Date(
new Date().toDateString() + " " + scheduledDropOffTime,
);
scheduledDropOffTimeEnd.setHours(scheduledDropOffTimeEnd.getHours() + 1);

return (
<Grid
templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(3, 1fr)" }}
Expand Down Expand Up @@ -128,23 +137,33 @@ const SchedulingFormCalendar: React.FunctionComponent<SchedulingFormCalendarProp
</Center>
</GridItem>

<GridItem colSpan={1}>
<GridItem colSpan={{ base: 1, sm: 2 }}>
<FormControl
isInvalid={attemptedSubmit && scheduledDropOffTime === ""}
isRequired
>
<FormLabel variant="form-label-bold">
Scheduled drop-off time
</FormLabel>
<Input
required
height={{ base: "2rem", md: "3rem" }}
size="xs"
onChange={(e) => setScheduledDropOffTime(e.target.value)}
type="time"
placeholder="Select a time"
width={{ base: "100%", md: "100%" }}
/>
<Flex direction="row" align="center">
<Input
required
height={{ base: "2rem", md: "3rem" }}
size="xs"
onChange={(e) => setScheduledDropOffTime(e.target.value)}
type="time"
placeholder="Select a time"
flex="1"
/>
<Text marginLeft="1rem" flex="1">
{scheduledDropOffTime &&
" - " +
scheduledDropOffTimeEnd.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})}
</Text>
</Flex>
</FormControl>
</GridItem>
</SimpleGrid>
Expand Down
40 changes: 23 additions & 17 deletions frontend/src/components/asp/requests/SchedulingFormWeekly.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Box,
Button,
Flex,
Grid,
GridItem,
Input,
Expand Down Expand Up @@ -206,23 +207,28 @@ const SchedulingFormWeekly: React.FunctionComponent<
</Box>

<Box>
<Text
color={
scheduledDropOffTime === "" && attemptedSubmit ? "red" : "black"
}
as="b"
>
Scheduled drop-off time*
</Text>
<Input
required
height={{ base: "2rem", md: "3rem" }}
size="xs"
onChange={(e) => setScheduledDropOffTime(e.target.value)}
type="time"
placeholder="Select a time"
width={{ base: "100%", md: "100%" }}
/>
<Flex direction="row" justifyContent="space-between">
<Text
color={
scheduledDropOffTime === "" && attemptedSubmit
? "red"
: "black"
}
as="b"
>
Scheduled drop-off time*
</Text>
<Input
required
height={{ base: "2rem", md: "3rem" }}
size="xs"
onChange={(e) => setScheduledDropOffTime(e.target.value)}
type="time"
placeholder="Select a time"
width={{ base: "100%", md: "100%" }}
/>
<Text fontSize="xs">HH:MM AM/PM</Text>
</Flex>
</Box>
</SimpleGrid>

Expand Down
85 changes: 45 additions & 40 deletions frontend/src/components/meal_donor/donation_form/MealDeliveryDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,51 +32,56 @@ const MealDeliveryDetails: React.FunctionComponent<MealDeliveryDetailsProps> = (
</HStack>
</Stack>
<Stack overflowY="auto" maxHeight="260px" gap="0.8rem">
{mealRequestsInformation?.map((request: MealRequest) => (
<Box
bg="#F4F4F4E5"
maxW="350px"
borderRadius="md"
paddingX="15px"
paddingY="15px"
key={request.id}
>
<HStack>
<Stack w="50%">
<Text fontSize="xs" lineHeight="15px">
{new Date(request.dropOffDatetime + "Z").toLocaleDateString(
undefined,
{
{mealRequestsInformation?.map((request: MealRequest) => {
const startDate = new Date(request.dropOffDatetime + "Z");
const endDate = new Date(request.dropOffDatetime + "Z");
endDate.setHours(endDate.getHours() + 1);
return (
<Box
bg="#F4F4F4E5"
maxW="350px"
borderRadius="md"
paddingX="15px"
paddingY="15px"
key={request.id}
>
<HStack>
<Stack w="50%">
<Text fontSize="xs" lineHeight="15px">
{startDate.toLocaleDateString(undefined, {
month: "long",
day: "numeric",
},
)}
</Text>
<Text fontWeight="semibold" fontSize="s" lineHeight="15px">
{request.mealInfo.portions} Meals
</Text>
<Text lineHeight="20px" fontSize="xs">
{new Date(request.dropOffDatetime + "Z").toLocaleTimeString(
"en-US",
{
})}
</Text>
<Text fontWeight="semibold" fontSize="s" lineHeight="15px">
{request.mealInfo.portions} Meals
</Text>
<Text lineHeight="20px" fontSize="xs">
{startDate.toLocaleTimeString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true,
},
)}
</Text>
</Stack>
<Stack
w="50%"
fontSize={{ base: "2xs", md: "xs" }}
lineHeight="15px"
>
<Text>Acommodations:</Text>
<Text>{request.mealInfo.dietaryRestrictions}</Text>
</Stack>
</HStack>
</Box>
))}
}) +
" - " +
endDate.toLocaleTimeString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true,
})}
</Text>
</Stack>
<Stack
w="50%"
fontSize={{ base: "2xs", md: "xs" }}
lineHeight="15px"
>
<Text>Acommodations:</Text>
<Text>{request.mealInfo.dietaryRestrictions}</Text>
</Stack>
</HStack>
</Box>
);
})}
</Stack>
</Stack>
);
Expand Down
78 changes: 45 additions & 33 deletions frontend/src/components/mealrequest/ASPListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,46 +173,53 @@ const ASPListView = ({ authId, rowsPerPage = 10 }: ASPListViewProps) => {
GET_MEAL_REQUESTS_BY_ID,
{
onCompleted: (results) => {
setData({
// Get the time requested plus one hour
const newData = {
nodes: results.getMealRequestsByRequestorId?.map(
(
mealRequest: MealRequest,
index: number,
): TABLE_LIBRARY_TYPES.TableNode => ({
id: index,
meal_request_id: mealRequest.id,
date_requested: new Date(mealRequest.dropOffDatetime + "Z"),
time_requested: new Date(mealRequest.dropOffDatetime + "Z"),
donor_name:
mealRequest.donationInfo?.donor.info?.organizationName,
num_meals: mealRequest.mealInfo?.portions,
primary_contact:
mealRequest.donationInfo?.donor?.info?.primaryContact ?? null,
onsite_contacts: mealRequest.onsiteContacts,
donor_onsite_contacts:
mealRequest.donationInfo?.donorOnsiteContacts ?? [],
delivery_notes: mealRequest.deliveryInstructions,
dietary_restrictions:
mealRequest.mealInfo?.dietaryRestrictions ?? "",
): TABLE_LIBRARY_TYPES.TableNode => {
const startDate = new Date(mealRequest.dropOffDatetime + "Z");
const endDate = new Date(startDate);
endDate.setHours(endDate.getHours() + 1);

meal_description: mealRequest.donationInfo?.mealDescription,
meal_donor_notes: mealRequest.donationInfo?.additionalInfo,
delivery_instructions: mealRequest.deliveryInstructions,
pending: mealRequest.status === MealStatus.OPEN,
status: mealRequest.status,
_hasContent: false,
nodes: null,
}),
return {
id: index,
meal_request_id: mealRequest.id,
date_requested: new Date(mealRequest.dropOffDatetime + "Z"),
time_requested_start: startDate,
time_requested_end: endDate,
donor_name:
mealRequest.donationInfo?.donor.info?.organizationName,
num_meals: mealRequest.mealInfo?.portions,
primary_contact:
mealRequest.donationInfo?.donor?.info?.primaryContact ?? null,
onsite_contacts: mealRequest.onsiteContacts,
donor_onsite_contacts:
mealRequest.donationInfo?.donorOnsiteContacts ?? [],
delivery_notes: mealRequest.deliveryInstructions,
dietary_restrictions:
mealRequest.mealInfo?.dietaryRestrictions ?? "",

meal_description: mealRequest.donationInfo?.mealDescription,
meal_donor_notes: mealRequest.donationInfo?.additionalInfo,
delivery_instructions: mealRequest.deliveryInstructions,
pending: mealRequest.status === MealStatus.OPEN,
status: mealRequest.status,
_hasContent: false,
nodes: null,
};
},
),
});
};
setData(newData);
},
},
);

const [
itemToDelete,
setItemToDelete,
] = useState<TABLE_LIBRARY_TYPES.TableNode | null>(null);
const [itemToDelete, setItemToDelete] =
useState<TABLE_LIBRARY_TYPES.TableNode | null>(null);

function reloadMealRequests(
fetchPolicy: WatchQueryFetchPolicy = "cache-first",
Expand Down Expand Up @@ -297,10 +304,15 @@ const ASPListView = ({ authId, rowsPerPage = 10 }: ASPListViewProps) => {
label: "Time Requested",
renderCell: (item: TABLE_LIBRARY_TYPES.TableNode) => (
<Text variant="desktop-xs">
{item.time_requested.toLocaleTimeString("en-US", {
{item.time_requested_start.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})}
}) +
" - " +
item.time_requested_end.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})}
</Text>
),
},
Expand Down Expand Up @@ -524,7 +536,7 @@ const ASPListView = ({ authId, rowsPerPage = 10 }: ASPListViewProps) => {
onClose={(newMealRequest) => {
setIsEditModalOpen(false);
setCurrentlyEditingMealRequestId(undefined);
if(newMealRequest !== undefined) {
if (newMealRequest !== undefined) {
reloadMealRequests();
}
}}
Expand Down
27 changes: 18 additions & 9 deletions frontend/src/components/mealrequest/MealDonorListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,23 @@ const MealDonorListView = ({
},
{
label: "Time Requested",
renderCell: (item: TABLE_LIBRARY_TYPES.TableNode) => (
<Text variant="desktop-xs">
{item.time_requested.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})}
</Text>
),
renderCell: (item: TABLE_LIBRARY_TYPES.TableNode) => {
const endDate = new Date(item.time_requested);
endDate.setHours(endDate.getHours() + 1);
return (
<Text variant="desktop-xs">
{item.time_requested.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
}) +
" - " +
endDate.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})}
</Text>
);
},
},
{
label: "ASP Name",
Expand Down Expand Up @@ -185,7 +194,7 @@ const MealDonorListView = ({
</Text>
</Box>
) : null}
</Flex>
</Flex>
</Collapse>
),
};
Expand Down
Loading

0 comments on commit 6442a87

Please sign in to comment.