also timers

cpvalente · Nov 20, 2024 · a388961 · a388961
1 parent 8f4bb19
commit a388961
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 41 deletions.
diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
@@ -11,7 +11,9 @@ import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward'
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { EndAction, MaybeString, Playback, TimerType, TimeStrategy } from 'ontime-types';
+import { parseUserTime } from 'ontime-utils';
 
+import { useEventAction } from '../../../common/hooks/useEventAction';
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import EditableBlockTitle from '../common/EditableBlockTitle';
@@ -80,18 +82,33 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
     playBtnStyles._hover = {};
   }
 
+  const { updateEvent } = useEventAction();
+
+  const handleSubmit = useCallback(
+    (field: string, value: string | null) => {
+      if (field === 'timeStart' || field === 'timeEnd' || field === 'duration') {
+        //FIXME: loss of th  `p` and `+`  smart entry
+        const newTime = parseUserTime(value as string);
+        updateEvent({ id: eventId, [field]: newTime });
+      } else {
+        updateEvent({ id: eventId, [field]: value });
+      }
+    },
+    [eventId, updateEvent],
+  );
+
   return !renderInner ? null : (
     <>
       <div className={style.eventTimers}>
         <TimeInputFlow
-          eventId={eventId}
           timeStart={timeStart}
           timeEnd={timeEnd}
           duration={duration}
           delay={delay}
           timeStrategy={timeStrategy}
           linkStart={linkStart}
           timerType={timerType}
+          handleSubmit={handleSubmit}
         />
       </div>
       <div className={style.titleSection}>

diff --git a/apps/client/src/features/rundown/event-editor/EventEditor.tsx b/apps/client/src/features/rundown/event-editor/EventEditor.tsx
@@ -64,23 +64,6 @@ export default function EventEditor() {
 
   const multiSelect = selectedEvents.size > 1;
 
-  // const handleSubmit = useCallback(
-  //   //TODO: the value type
-  //   (field: EditorUpdateFields, value: string | boolean | number) => {
-  //     if (field.startsWith('custom-')) {
-  //       const fieldLabel = field.split('custom-')[1];
-  //       multiSelect
-  //         ? batchUpdateEvents({ custom: { [fieldLabel]: value as string } }, Array.from(selectedEvents))
-  //         : updateEvent({ id: event?.id, custom: { [fieldLabel]: value as string } });
-  //     } else {
-  //       multiSelect
-  //         ? batchUpdateEvents({ [field]: value }, Array.from(selectedEvents))
-  //         : updateEvent({ id: event?.id, [field]: value });
-  //     }
-  //   },
-  //   [multiSelect, batchUpdateEvents, selectedEvents, updateEvent, event?.id],
-  // );
-
   const handleSubmit = useCallback(
     (patch: EditorUpdateFields) => {
       multiSelect ? batchUpdateEvents(patch, Array.from(selectedEvents)) : updateEvent({ id: event?.id, ...patch });
@@ -100,7 +83,6 @@ export default function EventEditor() {
     <div className={`${style.eventEditor} ${multiSelect ? style.multi : ''}`} data-testid='editor-container'>
       <div className={style.content}>
         <EventEditorTimes
-          isMulti={multiSelect}
           key={`${event.id}-times`}
           eventId={event.id}
           timeStart={event.timeStart}

diff --git a/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx b/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx
@@ -27,12 +27,20 @@ interface EventEditorTimesProps {
   handleSubmit: EditorSubmitHandler;
 }
 
-type HandledActions = 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
+type HandledActions =
+  | 'timerType'
+  | 'endAction'
+  | 'isPublic'
+  | 'timeWarning'
+  | 'timeDanger'
+  | 'timeStart'
+  | 'timeEnd'
+  | 'duration'
+  | 'timeStrategy'
+  | 'linkStart';
 
 const EventEditorTimes = (props: EventEditorTimesProps) => {
   const {
-    isMulti,
-    eventId,
     timeStart,
     timeEnd,
     duration,
@@ -47,19 +55,26 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
     handleSubmit,
   } = props;
 
-  const handleSubmitWrapper = (field: HandledActions, value: string | boolean) => {
+  const handleSubmitWrapper = (field: HandledActions, value: string | boolean | null) => {
     if (field === 'isPublic') {
       handleSubmit({ isPublic: !(value as boolean) });
       return;
     }
 
-    if (field === 'timeWarning' || field === 'timeDanger') {
+    if (
+      field === 'timeWarning' ||
+      field === 'timeDanger' ||
+      field === 'timeStart' ||
+      field === 'timeEnd' ||
+      field === 'duration'
+    ) {
+      //FIXME: loss of th  `p` and `+`  smart entry
       const newTime = parseUserTime(value as string);
       handleSubmit({ [field]: newTime });
       return;
     }
 
-    if (field === 'timerType' || field === 'endAction') {
+    if (field === 'timerType' || field === 'endAction' || field === 'timeStrategy' || field === 'linkStart') {
       handleSubmit({ [field]: value });
       return;
     }
@@ -78,15 +93,14 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
         <div className={style.inputLabel}>Event schedule</div>
         <div className={style.inline}>
           <TimeInputFlow
-            eventId={eventId}
             timeStart={timeStart}
             timeEnd={timeEnd}
             duration={duration}
             timeStrategy={timeStrategy}
             linkStart={linkStart}
             delay={delay}
             timerType={timerType}
-            disableStartend={isMulti}
+            handleSubmit={handleSubmitWrapper}
           />
         </div>
         <div className={style.delayLabel}>{delayLabel}</div>

diff --git a/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx b/apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx
@@ -8,14 +8,13 @@ import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink';
 import { MaybeString, TimerType, TimeStrategy } from 'ontime-types';
 
 import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton';
-import { useEventAction } from '../../../common/hooks/useEventAction';
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayFast, tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './TimeInputFlow.module.scss';
+type TimeActions = 'timeStart' | 'timeEnd' | 'duration' | 'timeStrategy' | 'linkStart';
 
 interface EventBlockTimerProps {
-  eventId: string;
   timeStart: number;
   timeEnd: number;
   duration: number;
@@ -24,25 +23,19 @@ interface EventBlockTimerProps {
   delay: number;
   timerType: TimerType;
   disableStartend?: boolean;
+  handleSubmit: (field: TimeActions, value: string | null) => void;
 }
 
-type TimeActions = 'timeStart' | 'timeEnd' | 'duration';
-
 const TimeInputFlow = (props: EventBlockTimerProps) => {
-  const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay, timerType, disableStartend } = props;
-  const { updateEvent, updateTimer } = useEventAction();
-
-  // In sync with EventEditorTimes
-  const handleSubmit = (field: TimeActions, value: string) => {
-    updateTimer(eventId, field, value);
-  };
+  const { timeStart, timeEnd, duration, timeStrategy, linkStart, delay, timerType, disableStartend, handleSubmit } =
+    props;
 
   const handleChangeStrategy = (timeStrategy: TimeStrategy) => {
-    updateEvent({ id: eventId, timeStrategy });
+    handleSubmit('timeStrategy', timeStrategy);
   };
 
   const handleLink = (doLink: boolean) => {
-    updateEvent({ id: eventId, linkStart: doLink ? 'true' : null });
+    handleSubmit('linkStart', doLink ? 'true' : null);
   };
 
   const warnings = [];