refactor: entry actions in cuesheet

fix: insert entry before
fix: avoid double submit on enter
fix: move events in the rundown
fix: clone groups

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenu.tsx

@@ -1,10 +1,9 @@
 import { memo } from 'react';
 import { IoAdd, IoArrowDown, IoArrowUp, IoDuplicateOutline, IoOptions, IoTrash } from 'react-icons/io5';
 import { Menu, MenuButton, MenuDivider, MenuItem, MenuList, Portal } from '@chakra-ui/react';
-import { isOntimeEvent, SupportedEntry } from 'ontime-types';
+import { SupportedEntry } from 'ontime-types';
 
 import { useEntryActions } from '../../../../common/hooks/useEntryAction';
-import { cloneEvent } from '../../../../common/utils/clone';
 import { useCuesheetEditModal } from '../../cuesheet-edit-modal/useCuesheetEditModal';
 
 import { useCuesheetTableMenu } from './useCuesheetTableMenu';
@@ -12,28 +11,10 @@ import { useCuesheetTableMenu } from './useCuesheetTableMenu';
 export default memo(CuesheetTableMenu);
 
 function CuesheetTableMenu() {
-  const { isOpen, eventId, entryIndex, position, closeMenu } = useCuesheetTableMenu();
-  const { addEntry, getEntryById, move, deleteEntry } = useEntryActions();
+  const { isOpen, entryId, entryIndex, parentId, position, closeMenu } = useCuesheetTableMenu();
+  const { addEntry, clone, deleteEntry, move } = useEntryActions();
   const showModal = useCuesheetEditModal((state) => state.setEditableEntry);
 
-  const handleCloneEvent = () => {
-    if (!eventId) {
-      return;
-    }
-
-    const currentEvent = getEntryById(eventId);
-    if (!currentEvent || !isOntimeEvent(currentEvent)) {
-      return;
-    }
-
-    const newEvent = cloneEvent(currentEvent);
-    try {
-      addEntry(newEvent, { after: eventId });
-    } catch (_error) {
-      // we do not handle errors here
-    }
-  };
-
   return (
     <Portal>
       {isOpen && (
@@ -48,27 +29,33 @@ function CuesheetTableMenu() {
             h={1}
           />
           <MenuList>
-            <MenuItem icon={<IoOptions />} onClick={() => showModal(eventId)}>
+            <MenuItem icon={<IoOptions />} onClick={() => showModal(entryId)}>
               Edit ...
             </MenuItem>
             <MenuDivider />
-            <MenuItem icon={<IoAdd />} onClick={() => addEntry({ type: SupportedEntry.Event }, { before: eventId })}>
+            <MenuItem
+              icon={<IoAdd />}
+              onClick={() => addEntry({ type: SupportedEntry.Event, parent: parentId }, { before: entryId })}
+            >
               Add event above
             </MenuItem>
-            <MenuItem icon={<IoAdd />} onClick={() => addEntry({ type: SupportedEntry.Event }, { after: eventId })}>
+            <MenuItem
+              icon={<IoAdd />}
+              onClick={() => addEntry({ type: SupportedEntry.Event, parent: parentId }, { after: entryId })}
+            >
               Add event below
             </MenuItem>
-            <MenuItem icon={<IoDuplicateOutline />} onClick={handleCloneEvent}>
+            <MenuItem icon={<IoDuplicateOutline />} onClick={() => clone(entryId)}>
               Clone event
             </MenuItem>
             <MenuDivider />
-            <MenuItem isDisabled={entryIndex < 1} icon={<IoArrowUp />} onClick={() => move(eventId, 'up')}>
+            <MenuItem isDisabled={entryIndex < 1} icon={<IoArrowUp />} onClick={() => move(entryId, 'up')}>
               Move up
             </MenuItem>
-            <MenuItem icon={<IoArrowDown />} onClick={() => move(eventId, 'down')}>
+            <MenuItem icon={<IoArrowDown />} onClick={() => move(entryId, 'down')}>
               Move down
             </MenuItem>
-            <MenuItem icon={<IoTrash />} onClick={() => deleteEntry([eventId])}>
+            <MenuItem icon={<IoTrash />} onClick={() => deleteEntry([entryId])}>
               Delete
             </MenuItem>
           </MenuList>

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/useCuesheetTableMenu.tsx

@@ -1,31 +1,35 @@
+import { EntryId } from 'ontime-types';
 import { create } from 'zustand';
 
 type Anchor = { x: number; y: number };
 
 type OpenMenu = {
   isOpen: true;
-  eventId: string;
+  entryId: EntryId;
   entryIndex: number;
+  parentId: EntryId | null;
 };
 
 type ClosedMenu = {
   isOpen: false;
-  eventId: null;
+  entryId: null;
   entryIndex: null;
+  parentId: null;
 };
 
 type CuesheetTableMenuStore = (OpenMenu | ClosedMenu) & {
   position: Anchor;
-  openMenu: (position: Anchor, eventId: string, entryIndex: number) => void;
+  openMenu: (position: Anchor, entryId: EntryId, entryIndex: number, parentId: EntryId | null) => void;
   closeMenu: () => void;
 };
 
 export const useCuesheetTableMenu = create<CuesheetTableMenuStore>((set) => ({
   isOpen: false,
-  eventId: null,
+  entryId: null,
   entryIndex: null,
+  parentId: null,
   position: { x: 0, y: 0 },
-  openMenu: (position: Anchor, eventId: string, entryIndex: number) =>
-    set({ isOpen: true, position, eventId, entryIndex }),
+  openMenu: (position: Anchor, entryId: EntryId, entryIndex: number, parentId: EntryId | null) =>
+    set({ isOpen: true, position, entryId, entryIndex, parentId }),
   closeMenu: () => set({ isOpen: false }),
 }));