Frontend improvements for match rescheduling

frontend/public/locales/en/common.json

@@ -29,6 +29,8 @@
     "auto_create_matches_button": "Add new matches automatically",
     "back_home_nav": "Take me back to home page",
     "back_to_login_nav": "Back to login page",
+    "calculate_datetime_match_label": "Calculate date and time of the match",
+    "calculate_label": "Calculate",
     "checkbox_status_checked": "Checked",
     "checkbox_status_unchecked": "Unchecked",
     "club_choose_title": "Please choose a club",
@@ -141,6 +143,7 @@
     "negative_score_validation": "Score cannot be negative",
     "next_matches_badge": "Next matches",
     "next_stage_button": "Next Stage",
+    "next_match_time_label": "Next match time",
     "no_matches_description": "First, add matches by creating stages and stage items. Then, schedule them using the button in the topright corner.",
     "no_matches_title": "No matches scheduled yet",
     "no_players_title": "No players yet",

frontend/src/components/brackets/match.tsx

@@ -1,4 +1,4 @@
-import { Center, Grid, UnstyledButton, useMantineTheme } from '@mantine/core';
+import { Center, Grid, Text, UnstyledButton, useMantineTheme } from '@mantine/core';
 import assert from 'assert';
 import React, { useState } from 'react';
 import { SWRResponse } from 'swr';
@@ -13,7 +13,7 @@ import {
 import { TournamentMinimal } from '../../interfaces/tournament';
 import { getMatchLookup, getStageItemLookup } from '../../services/lookups';
 import MatchModal from '../modals/match_modal';
-import { Time } from '../utils/datetime';
+import { DateTime } from '../utils/datetime';
 import classes from './match.module.css';
 
 export function MatchBadge({ match, theme }: { match: MatchInterface; theme: any }) {
@@ -30,10 +30,14 @@ export function MatchBadge({ match, theme }: { match: MatchInterface; theme: any
         }}
       >
         <Center>
-          <b>
-            {match.court?.name} |{' '}
-            {match.start_time != null ? <Time datetime={match.start_time} /> : null}
-          </b>
+          <div>
+            <Text fw={700} ta="center">
+              {match.court?.name}
+            </Text>
+            <Text fw={700} ta="center">
+              {match.start_time != null ? <DateTime datetime={match.start_time} /> : null}
+            </Text>
+          </div>
         </Center>
       </div>
     </Center>
@@ -128,6 +132,7 @@ export default function Match({
         opened={opened}
         setOpened={setOpened}
         dynamicSchedule={dynamicSchedule}
+        priorMatch={null}
       />
     </>
   );

frontend/src/components/builder/builder.tsx

@@ -28,12 +28,10 @@ function StageItemInputSectionLast({
   lastInList,
 }: {
   input: StageItemInput;
-  team: TeamInterface | null;
-  teamStageItem: TeamInterface | null;
+  team: TeamInterface;
+  teamStageItem: StageItemWithRounds;
   lastInList: boolean;
 }) {
-  assert(team != null || teamStageItem != null);
-
   const content = team
     ? team.name
     : // @ts-ignore
@@ -53,7 +51,7 @@ function StageItemRow({
   stageItem,
   swrStagesResponse,
 }: {
-  teamsMap: any;
+  teamsMap: NonNullable<ReturnType<typeof getTeamsLookup>>;
   tournament: Tournament;
   stageItem: StageItemWithRounds;
   swrStagesResponse: SWRResponse;
@@ -70,12 +68,14 @@ function StageItemRow({
         ? stageItemsLookup[input.winner_from_stage_item_id]
         : null;
 
+      assert(team != null || teamStageItem != null);
+
       return (
         <StageItemInputSectionLast
           key={i}
-          team={team}
+          team={team!}
           input={input}
-          teamStageItem={teamStageItem}
+          teamStageItem={teamStageItem!}
           lastInList={i === stageItem.inputs.length - 1}
         />
       );

frontend/src/components/modals/match_modal.tsx

@@ -1,7 +1,20 @@
-import { Button, Center, Checkbox, Divider, Grid, Modal, NumberInput, Text } from '@mantine/core';
+import {
+  Button,
+  Center,
+  Checkbox,
+  Divider,
+  Grid,
+  Input,
+  Modal,
+  NumberInput,
+  Text,
+} from '@mantine/core';
+import { DateTimePicker } from '@mantine/dates';
 import { useForm } from '@mantine/form';
+import { showNotification } from '@mantine/notifications';
+import { format, fromUnixTime, getUnixTime, parseISO } from 'date-fns';
 import { useTranslation } from 'next-i18next';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { SWRResponse } from 'swr';
 
 import {
@@ -15,18 +28,33 @@ import { getMatchLookup, getStageItemLookup } from '../../services/lookups';
 import { deleteMatch, updateMatch } from '../../services/match';
 import DeleteButton from '../buttons/delete';
 
+interface MatchModalBaseProps {
+  tournamentData: TournamentMinimal;
+  swrUpcomingMatchesResponse: SWRResponse | null;
+  dynamicSchedule: boolean;
+}
+
+interface MatchModalProps extends MatchModalBaseProps {
+  match: MatchInterface | null;
+  swrStagesResponse: SWRResponse;
+  setOpened: (value: boolean) => void;
+  priorMatch: MatchInterface | null;
+}
+
+/**
+ * A typical implementation for opening a match modal. Useful for other components, especially in pages.
+ */
+export type OpenMatchModalFn = (match: MatchInterface, priorMatch: MatchInterface | null) => void;
+
 function MatchDeleteButton({
   tournamentData,
   match,
   swrRoundsResponse,
   swrUpcomingMatchesResponse,
   dynamicSchedule,
-}: {
-  tournamentData: TournamentMinimal;
+}: MatchModalBaseProps & {
   match: MatchInterface;
   swrRoundsResponse: SWRResponse;
-  swrUpcomingMatchesResponse: SWRResponse | null;
-  dynamicSchedule: boolean;
 }) {
   const { t } = useTranslation();
   if (!dynamicSchedule) return null;
@@ -52,14 +80,8 @@ function MatchModalForm({
   swrUpcomingMatchesResponse,
   setOpened,
   dynamicSchedule,
-}: {
-  tournamentData: TournamentMinimal;
-  match: MatchInterface | null;
-  swrStagesResponse: SWRResponse;
-  swrUpcomingMatchesResponse: SWRResponse | null;
-  setOpened: any;
-  dynamicSchedule: boolean;
-}) {
+  priorMatch,
+}: MatchModalProps) {
   if (match == null) {
     return null;
   }
@@ -90,6 +112,26 @@ function MatchModalForm({
     match.custom_margin_minutes != null
   );
 
+  const [date, setDate] = useState<Date | null>(null);
+
+  const matchDuration = useMemo(() => {
+    const value = customDurationEnabled
+      ? form.values.custom_duration_minutes
+      : match.duration_minutes;
+    return value ?? 0;
+  }, [customDurationEnabled, form.values.custom_duration_minutes, match.duration_minutes]);
+
+  const matchMargin = useMemo(() => {
+    const value = customMarginEnabled ? form.values.custom_margin_minutes : match.margin_minutes;
+    return value ?? 0;
+  }, [customMarginEnabled, form.values.custom_margin_minutes, match.margin_minutes]);
+
+  const endDatetime = useMemo(
+    () =>
+      fromUnixTime(getUnixTime(parseISO(match.start_time)) + matchDuration * 60 + matchMargin * 60),
+    [match.start_time, matchDuration, matchMargin]
+  );
+
   const stageItemsLookup = getStageItemLookup(swrStagesResponse);
   const matchesLookup = getMatchLookup(swrStagesResponse);
 
@@ -123,19 +165,18 @@ function MatchModalForm({
         />
         <NumberInput
           withAsterisk
-          mt="lg"
+          mt="xs"
           label={`${t('score_of_label')} ${team2Name}`}
           placeholder={`${t('score_of_label')} ${team2Name}`}
           {...form.getInputProps('team2_score')}
         />
-        <Divider mt="lg" />
 
-        <Text size="sm" mt="lg">
-          {t('custom_match_duration_label')}
-        </Text>
+        <Divider mt="lg" mb="xs" />
+
         <Grid align="center">
           <Grid.Col span={{ sm: 8 }}>
             <NumberInput
+              label={t('custom_match_duration_label')}
               disabled={!customDurationEnabled}
               rightSection={<Text>{t('minutes')}</Text>}
               placeholder={`${match.duration_minutes}`}
@@ -144,6 +185,7 @@ function MatchModalForm({
             />
           </Grid.Col>
           <Grid.Col span={{ sm: 4 }}>
+            <Input.Label />
             <Center>
               <Checkbox
                 checked={customDurationEnabled}
@@ -156,12 +198,10 @@ function MatchModalForm({
           </Grid.Col>
         </Grid>
 
-        <Text size="sm" mt="lg">
-          {t('custom_match_margin_label')}
-        </Text>
         <Grid align="center">
           <Grid.Col span={{ sm: 8 }}>
             <NumberInput
+              label={t('custom_match_margin_label')}
               disabled={!customMarginEnabled}
               placeholder={`${match.margin_minutes}`}
               rightSection={<Text>{t('minutes')}</Text>}
@@ -170,6 +210,7 @@ function MatchModalForm({
             />
           </Grid.Col>
           <Grid.Col span={{ sm: 4 }}>
+            <Input.Label />
             <Center>
               <Checkbox
                 checked={customMarginEnabled}
@@ -182,6 +223,70 @@ function MatchModalForm({
           </Grid.Col>
         </Grid>
 
+        <Input.Wrapper label={t('next_match_time_label')} mt="sm">
+          <Input component="time" dateTime={endDatetime.toISOString()}>
+            {format(endDatetime, 'd LLLL yyyy HH:mm')}
+          </Input>
+        </Input.Wrapper>
+
+        {priorMatch && (
+          <>
+            <Divider mt="lg" mb="xs" />
+
+            <Grid align="center">
+              <Grid.Col span={{ sm: 8 }}>
+                <DateTimePicker
+                  label={t('calculate_datetime_match_label')}
+                  clearable
+                  value={date}
+                  onChange={setDate}
+                />
+              </Grid.Col>
+              <Grid.Col span={{ sm: 4 }}>
+                <Input.Label />
+                <Button
+                  display="block"
+                  w="100%"
+                  disabled={date === null}
+                  onClick={async () => {
+                    const computedMargin = Math.floor(
+                      (date!.getTime() -
+                        parseISO(priorMatch.start_time).getTime() +
+                        (priorMatch.custom_duration_minutes === null
+                          ? priorMatch.duration_minutes
+                          : priorMatch.custom_duration_minutes) *
+                          60 *
+                          1000) /
+                        60 /
+                        1000
+                    );
+
+                    if (computedMargin < 0) {
+                      showNotification({
+                        message: '',
+                        title: t('negative_match_margin_validation'),
+                        color: 'red',
+                        // icon: <IconAlert />,
+                      });
+                      return;
+                    }
+
+                    const updatedMatch = {
+                      ...priorMatch,
+                      custom_margin_minutes: computedMargin,
+                    };
+
+                    await updateMatch(tournamentData.id, priorMatch.id, updatedMatch);
+                    await swrStagesResponse.mutate();
+                  }}
+                >
+                  {t('calculate_label')}
+                </Button>
+              </Grid.Col>
+            </Grid>
+          </>
+        )}
+
         <Button fullWidth style={{ marginTop: 20 }} color="green" type="submit">
           {t('save_button')}
         </Button>
@@ -205,14 +310,9 @@ export default function MatchModal({
   opened,
   setOpened,
   dynamicSchedule,
-}: {
-  tournamentData: TournamentMinimal;
-  match: MatchInterface | null;
-  swrStagesResponse: SWRResponse;
-  swrUpcomingMatchesResponse: SWRResponse | null;
+  priorMatch,
+}: MatchModalProps & {
   opened: boolean;
-  setOpened: any;
-  dynamicSchedule: boolean;
 }) {
   const { t } = useTranslation();
 
@@ -226,6 +326,7 @@ export default function MatchModal({
           match={match}
           setOpened={setOpened}
           dynamicSchedule={dynamicSchedule}
+          priorMatch={priorMatch}
         />
       </Modal>
     </>

frontend/src/components/utils/datetime.tsx

@@ -1,13 +1,25 @@
 import { format, parseISO } from 'date-fns';
 
+export function BareDateTime({
+  datetime,
+  formatStr,
+  datetimeAttr = datetime instanceof Date ? datetime.toISOString() : datetime.toString(),
+}: {
+  datetime: string | number | Date;
+  datetimeAttr?: string;
+  formatStr: string;
+}) {
+  return <time dateTime={datetimeAttr}>{format(datetime, formatStr)}</time>;
+}
+
 export function DateTime({ datetime }: { datetime: string }) {
   const date = parseISO(datetime);
-  return <time dateTime={datetime}>{format(date, 'd LLLL yyyy HH:mm')}</time>;
+  return <BareDateTime datetime={date} formatStr="d LLLL yyyy HH:mm" datetimeAttr={datetime} />;
 }
 
 export function Time({ datetime }: { datetime: string }) {
   const date = parseISO(datetime);
-  return <time dateTime={datetime}>{format(date, 'HH:mm')}</time>;
+  return <BareDateTime datetime={date} formatStr="HH:mm" datetimeAttr={datetime} />;
 }
 
 export function formatTime(datetime: string) {