Swap Event Data (#446)

* use zustand store in `ContextMenuContext`

* add `withDivider` prop to context menu `Option`

* add `isDisabled` prop to `Option`

* create `eventIdSwapping` store

* create swapping context menu options

* fix `key` in ContextMenu

* address `tanstack-eslint` errors

* create initial `requestEventSwap` event

* create initial `swapEvents` action

* use `swapEvents` in `EventBlock`

* move from `emitError` to `logAxiosError`

* remove extra curly brace from Copy ID

* add `clearEventId` func

* finalize context menu swapping logic

* write optimistic swapping logic

* remove unused import and type out handler in `rundownController`

* create `rundownSwapValidator`

* move index increase to `EventBlock`

* move swapping logic from `id` to `index`

* create `swapEvents` endpoint

* move `useEventIdSwapping` hook into its own file

* revert to using event `id`

* logic now uses indexes to swap events

* add `todo` to `swapEvents`

* revert index increment

* create `swapOntimeEvents` and export in `index.ts`

* use `swapOntimeEvents` in frontend & server

* update import path

* remove extra `setCached`

apps/client/src/features/rundown/RundownEntry.tsx

@@ -12,7 +12,7 @@ import BlockBlock from './block-block/BlockBlock';
 import DelayBlock from './delay-block/DelayBlock';
 import EventBlock from './event-block/EventBlock';
 
-export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'delete' | 'clone' | 'update';
+export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'delete' | 'clone' | 'update' | 'swap';
 
 interface RundownEntryProps {
   type: SupportedEvent;
@@ -44,7 +44,7 @@ export default function RundownEntry(props: RundownEntryProps) {
     disableEdit,
   } = props;
   const { emitError } = useEmitLog();
-  const { addEvent, updateEvent, deleteEvent } = useEventAction();
+  const { addEvent, updateEvent, deleteEvent, swapEvents } = useEventAction();
 
   const cursor = useAppMode((state) => state.cursor);
   const setCursor = useAppMode((state) => state.setCursor);
@@ -95,6 +95,12 @@ export default function RundownEntry(props: RundownEntryProps) {
           addEvent({ type: SupportedEvent.Block }, { after: data.id });
           break;
         }
+        case 'swap': {
+          const { value } = payload as FieldValue;
+          swapEvents({ from: value as string, to: data.id });
+
+          break;
+        }
         case 'delete': {
           if (openId === data.id) {
             removeOpenEvent();
@@ -149,6 +155,7 @@ export default function RundownEntry(props: RundownEntryProps) {
       removeOpenEvent,
       startTimeIsLastEnd,
       updateEvent,
+      swapEvents,
     ],
   );
 

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -1,17 +1,19 @@
 import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoCopyOutline } from '@react-icons/all-files/io5/IoCopyOutline';
 import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 import { EndAction, OntimeEvent, Playback, TimerType } from 'ontime-types';
 
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
-import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useAppMode } from '../../../common/stores/appModeStore';
 import copyToClipboard from '../../../common/utils/copyToClipboard';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import type { EventItemActions } from '../RundownEntry';
+import { useEventIdSwapping } from '../useEventIdSwapping';
 
 import EventBlockInner from './EventBlockInner';
 
@@ -75,22 +77,37 @@ export default function EventBlock(props: EventBlockProps) {
     actionHandler,
     disableEdit,
   } = props;
-  const { updateEvent } = useEventAction();
+  const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
   const moveCursorTo = useAppMode((state) => state.setCursor);
   const handleRef = useRef<null | HTMLSpanElement>(null);
   const [isVisible, setIsVisible] = useState(false);
   const openId = useAppMode((state) => state.editId);
   const [onContextMenu] = useContextMenu<HTMLDivElement>([
-    { label: `Copy ID: ${eventId}}`, icon: IoCopyOutline, onClick: () => copyToClipboard(eventId) },
+    { label: `Copy ID: ${eventId}`, icon: IoCopyOutline, onClick: () => copyToClipboard(eventId) },
     {
       label: 'Toggle public',
       icon: IoPeopleOutline,
       onClick: () =>
-        updateEvent({
-          id: eventId,
-          isPublic: !isPublic,
+        actionHandler('update', {
+          field: 'isPublic',
+          value: !isPublic,
         }),
     },
+    {
+      label: 'Add to swap',
+      icon: IoAdd,
+      onClick: () => setSelectedEventId(eventId),
+      withDivider: true,
+    },
+    {
+      label: `Swap this event with ${selectedEventId ?? ''}`,
+      icon: IoSwapVertical,
+      onClick: () => {
+        actionHandler('swap', { field: 'id', value: selectedEventId });
+        clearSelectedEventId();
+      },
+      isDisabled: selectedEventId == null || selectedEventId === eventId,
+    },
   ]);
 
   const {

apps/client/src/features/rundown/useEventIdSwapping.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface EventIdSwappingStore {
+  selectedEventId: string | null;
+  setSelectedEventId: (newEventId: string | null) => void;
+  clearSelectedEventId: () => void;
+}
+
+export const useEventIdSwapping = create<EventIdSwappingStore>((set) => ({
+  selectedEventId: null,
+  setSelectedEventId: (newEventId) => set(() => ({ selectedEventId: newEventId })),
+  clearSelectedEventId: () => set(() => ({ selectedEventId: null })),
+}));