fix: add event (#499)

* refactor: remove guards on event creation

* style: minimum safe block size

* fix: insert after finds previous valid cue

apps/client/src/features/rundown/block-block/BlockBlock.module.scss

@@ -6,11 +6,12 @@
 
   background-color: $block-bg2;
 
+  min-width: 34rem;
   display: grid;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 2rem 1fr auto;
   align-items: center;
   height: $secondary-block-height;
-  gap: 8px;
+  gap: 0.5rem;
 
   &.hasCursor {
     outline: 1px solid $block-cursor-color;

apps/client/src/features/rundown/block-block/BlockBlock.tsx

@@ -59,7 +59,7 @@ export default function BlockBlock(props: BlockBlockProps) {
         <IoReorderTwo />
       </span>
       <EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
-      <BlockActionMenu className={style.actionMenu} showAdd showDelay enableDelete actionHandler={actionHandler} />
+      <BlockActionMenu className={style.actionMenu} enableDelete actionHandler={actionHandler} />
     </div>
   );
 }

apps/client/src/features/rundown/delay-block/DelayBlock.module.scss

@@ -6,12 +6,13 @@
 
   background-color: $block-bg2;
 
+  min-width: 34rem;
   display: grid;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 2rem 1fr auto;
   grid-template-areas: 'drag inpt btns';
   align-items: center;
   height: $secondary-block-height;
-  gap: 8px;
+  gap: 0.5rem;
 
   &.hasCursor {
     outline: 1px solid $block-cursor-color;

apps/client/src/features/rundown/delay-block/DelayBlock.tsx

@@ -79,7 +79,7 @@ export default function DelayBlock(props: DelayBlockProps) {
         <Button onClick={cancelDelayHandler} size='sm' leftIcon={<IoClose />} variant='ontime-subtle-white'>
           Cancel
         </Button>
-        <BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
+        <BlockActionMenu enableDelete actionHandler={actionHandler} />
       </HStack>
     </div>
   );

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

@@ -144,7 +144,10 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           </Tooltip>
           <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
             <span>
-              <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
+              <IoPeople
+                className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`}
+                data-isPublic={isPublic}
+              />
             </span>
           </Tooltip>
         </div>
@@ -163,7 +166,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           color={isOpen ? 'white' : '#f6f6f6'}
           isDisabled={disableEdit}
         />
-        <BlockActionMenu showAdd showDelay showBlock showClone enableDelete={!selected} actionHandler={actionHandler} />
+        <BlockActionMenu showClone enableDelete={!selected} actionHandler={actionHandler} />
       </div>
     </>
   );

apps/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx

@@ -11,9 +11,6 @@ import { tooltipDelayMid } from '../../../../ontimeConfig';
 import { EventItemActions } from '../../RundownEntry';
 
 interface BlockActionMenuProps {
-  showAdd?: boolean;
-  showDelay?: boolean;
-  showBlock?: boolean;
   enableDelete?: boolean;
   showClone?: boolean;
   actionHandler: (action: EventItemActions, payload?: any) => void;
@@ -21,7 +18,7 @@ interface BlockActionMenuProps {
 }
 
 export default function BlockActionMenu(props: BlockActionMenuProps) {
-  const { showAdd, showDelay, showBlock, enableDelete, showClone, actionHandler, className } = props;
+  const { enableDelete, showClone, actionHandler, className } = props;
 
   const handleAddEvent = useCallback(() => actionHandler('event'), [actionHandler]);
   const handleAddDelay = useCallback(() => actionHandler('delay'), [actionHandler]);
@@ -43,17 +40,17 @@ export default function BlockActionMenu(props: BlockActionMenuProps) {
         />
       </Tooltip>
       <MenuList>
-        <MenuItem icon={<IoAdd />} onClick={handleAddEvent} isDisabled={!showAdd}>
+        <MenuItem icon={<IoAdd />} onClick={handleAddEvent}>
           Add Event after
         </MenuItem>
-        <MenuItem icon={<IoTimerOutline />} onClick={handleAddDelay} isDisabled={!showDelay}>
+        <MenuItem icon={<IoTimerOutline />} onClick={handleAddDelay}>
           Add Delay after
         </MenuItem>
-        <MenuItem icon={<IoRemoveCircleOutline />} onClick={handleAddBlock} isDisabled={!showBlock}>
+        <MenuItem icon={<IoRemoveCircleOutline />} onClick={handleAddBlock}>
           Add Block after
         </MenuItem>
         {showClone && (
-          <MenuItem icon={<IoDuplicateOutline />} onClick={handleClone} isDisabled={!showBlock}>
+          <MenuItem icon={<IoDuplicateOutline />} onClick={handleClone}>
             Clone event
           </MenuItem>
         )}

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx

@@ -80,6 +80,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             size='xs'
             variant='ontime-subtle-white'
             className={style.quickBtn}
+            data-testId='quick-add-event'
           >
             Event {showKbd && <span className={style.keyboard}>Alt + E</span>}
           </Button>
@@ -91,6 +92,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             variant='ontime-subtle-white'
             disabled={disableAddDelay}
             className={style.quickBtn}
+            data-testId='quick-add-delay'
           >
             Delay {showKbd && <span className={style.keyboard}>Alt + D</span>}
           </Button>
@@ -102,6 +104,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             variant='ontime-subtle-white'
             disabled={disableAddBlock}
             className={style.quickBtn}
+            data-testId='quick-add-block'
           >
             Block {showKbd && <span className={style.keyboard}>Alt + B</span>}
           </Button>

e2e/tests/features/204-editor-crud.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+
+test('CRUD operations on the rundown', async ({ page }) => {
+  await page.goto('http://localhost:4001/editor');
+
+  // clear rundown
+  await page.getByRole('button', { name: 'Run mode' }).click();
+  await page.getByRole('button', { name: 'Event...' }).click();
+  await page.getByRole('menuitem', { name: 'Delete all events' }).click();
+
+  // create event from the rundown empty button
+  await page.getByRole('button', { name: 'Create Event' }).click();
+
+  // create blocks using the quick add buttons
+  await page.getByRole('button', { name: 'Block' }).click();
+  await page.getByRole('button', { name: 'Delay' }).click();
+  await page.getByTestId('quick-add-event').click();
+
+  // test quick add options - start is last end
+  await page
+    .locator('div')
+    .filter({ hasText: /^22SEDEvent title$/ })
+    .getByTestId('time-input-timeEnd')
+    .click();
+  await page
+    .locator('div')
+    .filter({ hasText: /^22SEDEvent title$/ })
+    .getByTestId('time-input-timeEnd')
+    .fill('20m');
+  await page
+    .locator('div')
+    .filter({ hasText: /^22SEDEvent title$/ })
+    .getByTestId('time-input-timeEnd')
+    .press('Enter');
+  await page.getByText('Start time is last end').click();
+  await page.getByTestId('quick-add-event').click();
+  await expect(
+    await page
+      .locator('div')
+      .filter({ hasText: /^33SEDEvent title$/ })
+      .getByTestId('time-input-timeStart')
+      .inputValue(),
+  ).toContain('00:20:00');
+
+  // test quick add options - event is public
+  await page.locator('label').filter({ hasText: 'Event is public' }).click();
+  await page.getByTestId('quick-add-event').click();
+
+  await expect(
+    await page
+      .locator('div')
+      .filter({ hasText: /^44SEDEvent title$/ })
+      .getByRole('img')
+      .nth(3),
+  ).toHaveAttribute('data-isPublic', 'true');
+});

packages/types/src/utils/guards.ts

@@ -1,14 +1,16 @@
 import { OntimeRundownEntry } from '../definitions/core/Rundown.type.js';
 import { OntimeBlock, OntimeDelay, OntimeEvent, SupportedEvent } from '../definitions/core/OntimeEvent.type.js';
 
-export function isOntimeEvent(event: OntimeRundownEntry | Partial<OntimeRundownEntry>): event is OntimeEvent {
+type MaybeEvent = OntimeRundownEntry | null | undefined;
+
+export function isOntimeEvent(event: MaybeEvent): event is OntimeEvent {
   return event?.type === SupportedEvent.Event;
 }
 
-export function isOntimeDelay(event: OntimeRundownEntry | Partial<OntimeRundownEntry>): event is OntimeDelay {
+export function isOntimeDelay(event: MaybeEvent): event is OntimeDelay {
   return event?.type === SupportedEvent.Delay;
 }
 
-export function isOntimeBlock(event: OntimeRundownEntry | Partial<OntimeRundownEntry>): event is OntimeBlock {
+export function isOntimeBlock(event: MaybeEvent): event is OntimeBlock {
   return event?.type === SupportedEvent.Block;
 }

packages/utils/src/cue-utils/cueUtils.test.ts

@@ -1,4 +1,4 @@
-import { OntimeRundown, SupportedEvent } from 'ontime-types';
+import { OntimeDelay, OntimeEvent, OntimeRundown, SupportedEvent } from 'ontime-types';
 
 import { getCueCandidate, getIncrement, sanitiseCue } from './cueUtils.js';
 
@@ -32,7 +32,7 @@ describe('getIncrement()', () => {
   });
 });
 
-describe('findCueName()', () => {
+describe('getCueCandidate()', () => {
   describe('in the beginning of the rundown', () => {
     it('names cue as 1 if next event does not collide', () => {
       const testRundown = [
@@ -89,6 +89,24 @@ describe('findCueName()', () => {
       expect(cue).toBe('Presenter1.1');
     });
   });
+  describe('considers edge cases', () => {
+    it('previousEvent might not be a cue', () => {
+      const testRundown = [
+        { id: '1', cue: '10', type: SupportedEvent.Event } as OntimeEvent,
+        { id: '2', type: SupportedEvent.Delay } as OntimeDelay,
+      ];
+      const cue = getCueCandidate(testRundown, '2');
+      expect(cue).toBe('11');
+    });
+  });
+  it('there might not be events before', () => {
+    const testRundown = [
+      { id: '1', type: SupportedEvent.Delay } as OntimeDelay,
+      { id: '2', type: SupportedEvent.Delay } as OntimeDelay,
+    ];
+    const cue = getCueCandidate(testRundown, '2');
+    expect(cue).toBe('1');
+  });
 });
 
 describe('findCueName() with mixed events', () => {

packages/utils/src/cue-utils/cueUtils.ts

@@ -1,6 +1,6 @@
-import { OntimeEvent, OntimeRundown } from 'ontime-types';
+import { isOntimeEvent, OntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
 
-import { getFirstEvent, getNextEvent } from '../rundown-utils/rundownUtils.js';
+import { getFirstEvent, getNextEvent, getPreviousEvent } from '../rundown-utils/rundownUtils.js';
 import { isNumeric } from '../types/types.js';
 
 /**
@@ -9,7 +9,7 @@ import { isNumeric } from '../types/types.js';
  */
 export function getIncrement(input: string): string {
   // Check if the input string contains a number at the end
-  const match = input.match(/^(\D*)(\d+)(\.\d+)?$/);
+  const match = input?.match(/^(\D*)(\d+)(\.\d+)?$/);
 
   if (match) {
     // If a number is found, extract the non-numeric prefix, integer part, and decimal part
@@ -61,15 +61,26 @@ export function getCueCandidate(rundown: OntimeRundown, insertAfterId?: string):
   }
 
   // get elements around
-  const previousEvent = rundown.at(afterIndex);
+  let previousEvent: OntimeRundownEntry | undefined | null | OntimeEvent = rundown.at(afterIndex);
+  if (!isOntimeEvent(previousEvent)) {
+    previousEvent = getPreviousEvent(rundown, insertAfterId) as null | OntimeEvent;
+  }
+
+  let cue = '1';
   const nextEvent = getNextEvent(rundown, insertAfterId);
 
   // try and increment the cue
-  let cue = getIncrement((previousEvent as OntimeEvent).cue);
+  if (isOntimeEvent(previousEvent)) {
+    cue = getIncrement(previousEvent.cue);
+  }
 
   // if increment is clashing with next, we add a decimal instead
   if (cue === nextEvent?.cue) {
-    cue = (previousEvent as OntimeEvent).cue + '.1';
+    if (previousEvent === null) {
+      cue = '0.1';
+    } else {
+      cue = previousEvent.cue + '.1';
+    }
   }
 
   return cue;