fix: fix weekly time slot editing and display (#970)

chrisbenincasa · Nov 19, 2024 · 9280a7c · 9280a7c
1 parent 86cdb72
commit 9280a7c
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 35 deletions.
diff --git a/web/src/components/slot_scheduler/EditSlotDialogContent.tsx b/web/src/components/slot_scheduler/EditSlotDialogContent.tsx
@@ -1,4 +1,4 @@
-import { ProgramOption } from '@/helpers/slotSchedulerUtil';
+import { OneDayMillis, ProgramOption } from '@/helpers/slotSchedulerUtil';
 import { showOrderOptions } from '@/helpers/slotSchedulerUtil.ts';
 import {
   Box,
@@ -20,12 +20,23 @@ import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTimeSlotFormContext } from '../../hooks/useTimeSlotFormContext.ts';
 import { EditSlotProgrammingForm } from './EditSlotProgrammingForm.tsx';
 
+const DaysOfWeekMenuItems = [
+  { value: 0, name: 'Sunday' },
+  { value: 1, name: 'Monday' },
+  { value: 2, name: 'Tuesday' },
+  { value: 3, name: 'Wednesday' },
+  { value: 4, name: 'Thursday' },
+  { value: 5, name: 'Friday' },
+  { value: 6, name: 'Saturday' },
+];
+
 type EditSlotDialogContentProps = {
   slot: TimeSlot;
   index: number;
   programOptions: ProgramOption[];
   onClose: () => void;
 };
+
 export const EditSlotDialogContent = ({
   slot,
   index,
@@ -38,15 +49,18 @@ export const EditSlotDialogContent = ({
   const formMethods = useForm({
     defaultValues: slot,
   });
-  const {
-    control,
-    watch,
-    formState: { isValid, isDirty },
-    getValues,
-  } = formMethods;
+  const { control, watch, getValues } = formMethods;
 
   const slotType = watch(`programming.type`);
   const isShowType = slotType === 'custom-show' || slotType === 'show';
+  const updateSlotDay = useCallback(
+    (newDayOfWeek: number, originalOnChange: (...args: unknown[]) => void) => {
+      const startTimeOfDay = slot.startTime % OneDayMillis;
+      const newStartTime = startTimeOfDay + newDayOfWeek * OneDayMillis;
+      originalOnChange(newStartTime);
+    },
+    [slot.startTime],
+  );
 
   const updateSlotTime = useCallback(
     (fieldValue: Dayjs, originalOnChange: (...args: unknown[]) => void) => {
@@ -75,30 +89,61 @@ export const EditSlotDialogContent = ({
           }}
         >
           <Stack gap={2} useFlexGap>
-            <Controller
-              control={control}
-              name={`startTime`}
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <TimePicker
-                    disabled
-                    reduceAnimations
-                    {...field}
-                    value={dayjs().startOf(currentPeriod).add(field.value)}
-                    onChange={(value) => {
-                      value ? updateSlotTime(value, field.onChange) : void 0;
-                    }}
-                    label="Start Time"
-                    closeOnSelect={false}
-                    slotProps={{
-                      textField: {
-                        error: !isNil(error),
-                      },
-                    }}
+            <Stack direction="row" gap={1}>
+              {currentPeriod === 'week' && (
+                <FormControl fullWidth>
+                  <InputLabel>Day</InputLabel>
+                  <Controller
+                    control={control}
+                    name={`startTime`}
+                    render={({ field }) => (
+                      <Select
+                        {...field}
+                        fullWidth
+                        value={Math.floor(field.value / OneDayMillis)}
+                        label="Day"
+                        onChange={(e) =>
+                          updateSlotDay(
+                            e.target.value as number,
+                            field.onChange,
+                          )
+                        }
+                      >
+                        {map(DaysOfWeekMenuItems, ({ value, name }) => (
+                          <MenuItem key={value} value={value}>
+                            {name}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    )}
                   />
-                );
-              }}
-            />
+                </FormControl>
+              )}
+              <Controller
+                control={control}
+                name={`startTime`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <TimePicker
+                      disabled
+                      reduceAnimations
+                      {...field}
+                      value={dayjs().startOf(currentPeriod).add(field.value)}
+                      onChange={(value) => {
+                        value ? updateSlotTime(value, field.onChange) : void 0;
+                      }}
+                      label="Start Time"
+                      closeOnSelect={false}
+                      slotProps={{
+                        textField: {
+                          error: !isNil(error),
+                        },
+                      }}
+                    />
+                  );
+                }}
+              />
+            </Stack>
             <FormProvider {...formMethods}>
               <EditSlotProgrammingForm programOptions={programOptions} />
             </FormProvider>
@@ -125,11 +170,7 @@ export const EditSlotDialogContent = ({
       </DialogContent>
       <DialogActions>
         <Button onClick={() => onClose()}>Cancel</Button>
-        <Button
-          onClick={() => commit()}
-          disabled={!isValid || !isDirty}
-          variant="contained"
-        >
+        <Button onClick={() => commit()} variant="contained">
           Save
         </Button>
       </DialogActions>

diff --git a/web/src/components/slot_scheduler/TimeSlotTable.tsx b/web/src/components/slot_scheduler/TimeSlotTable.tsx
@@ -110,6 +110,7 @@ export const TimeSlotTable = () => {
   const [currentPeriod, latenessMs] = watch(['period', 'latenessMs']);
   const programOptions = useSlotProgramOptions();
   const startOfPeriod = dayjs().startOf(currentPeriod);
+  console.log(startOfPeriod.format());
   const {
     channelEditor: { programLookup, originalProgramList },
   } = useChannelEditorLazy();
@@ -290,6 +291,7 @@ export const TimeSlotTable = () => {
         Cell: ({ cell }) => {
           const value = cell.getValue<number>();
           const dateTime = startOfPeriod.add(value);
+          console.log(dateTime.format(), value);
           return currentPeriod === 'day'
             ? dateTime.format('hh:mm A')
             : dateTime.format('dddd hh:mm A');