feat: milestones

apps/client/src/features/rundown/entry-editor/RundownEntryEditor.tsx

@@ -1,5 +1,13 @@
 import { useEffect, useState } from 'react';
-import { isOntimeBlock, isOntimeDelay, OntimeBlock, OntimeEvent } from 'ontime-types';
+import {
+  isOntimeBlock,
+  isOntimeDelay,
+  isOntimeEvent,
+  isOntimeMilestone,
+  OntimeBlock,
+  OntimeEvent,
+  OntimeMilestone,
+} from 'ontime-types';
 
 import useRundown from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../useEventSelection';
@@ -8,6 +16,7 @@ import EventEditorFooter from './composite/EventEditorFooter';
 import BlockEditor from './BlockEditor';
 import EventEditor from './EventEditor';
 import EventEditorEmpty from './EventEditorEmpty';
+import MilestoneEditor from './MilestoneEditor';
 
 import style from './EntryEditor.module.scss';
 
@@ -15,44 +24,56 @@ export default function RundownEntryEditor() {
   const selectedEvents = useEventSelection((state) => state.selectedEvents);
   const { data } = useRundown();
 
-  const [event, setEvent] = useState<OntimeEvent | OntimeBlock | null>(null);
+  const [entry, setEntry] = useState<OntimeEvent | OntimeBlock | OntimeMilestone | null>(null);
 
   useEffect(() => {
     if (data.order.length === 0) {
-      setEvent(null);
+      setEntry(null);
       return;
     }
 
     const selectedEventId = Array.from(selectedEvents).at(0);
     if (!selectedEventId) {
-      setEvent(null);
+      setEntry(null);
       return;
     }
     const event = data.entries[selectedEventId];
 
     if (event && !isOntimeDelay(event)) {
-      setEvent(event);
+      setEntry(event);
     } else {
-      setEvent(null);
+      setEntry(null);
     }
   }, [data.order, data.entries, selectedEvents]);
 
-  if (!event) {
+  if (!entry) {
     return <EventEditorEmpty />;
   }
 
-  if (isOntimeBlock(event)) {
+  if (isOntimeEvent(entry)) {
     return (
       <div className={style.entryEditor} data-testid='editor-container'>
-        <BlockEditor block={event} />
+        <EventEditor event={entry} />
+        <EventEditorFooter id={entry.id} cue={entry.cue} />
       </div>
     );
   }
 
-  return (
-    <div className={style.entryEditor} data-testid='editor-container'>
-      <EventEditor event={event} />
-      <EventEditorFooter id={event.id} cue={event.cue} />
-    </div>
-  );
+  if (isOntimeMilestone(entry)) {
+    return (
+      <div className={style.entryEditor} data-testid='editor-container'>
+        <MilestoneEditor milestone={entry} />
+      </div>
+    );
+  }
+
+  if (isOntimeBlock(entry)) {
+    return (
+      <div className={style.entryEditor} data-testid='editor-container'>
+        <BlockEditor block={entry} />
+      </div>
+    );
+  }
+
+  return null;
 }