feat: edit groups

2026-08-21 06:59:09 +00:00 · 2025-06-25 06:10:12 +02:00
parent 4c08482258
commit 473f50b493
75 changed files with 916 additions and 511 deletions
@@ -0,0 +1,83 @@
+import { useCallback } from 'react';
+import { OntimeEvent } from 'ontime-types';
+
+import * as Editor from '../../../common/components/editor-utils/EditorUtils';
+import AppLink from '../../../common/components/link/app-link/AppLink';
+import { useEntryActions } from '../../../common/hooks/useEntryAction';
+import useCustomFields from '../../../common/hooks-query/useCustomFields';
+
+import EntryEditorCustomFields from './composite/EventEditorCustomFields';
+import EventEditorTimes from './composite/EventEditorTimes';
+import EventEditorTitles from './composite/EventEditorTitles';
+import EventEditorTriggers from './composite/EventEditorTriggers';
+
+import style from './EntryEditor.module.scss';
+
+// any of the titles + colour + custom field labels
+export type EventEditorUpdateFields = 'cue' | 'title' | 'note' | 'colour' | string;
+
+interface EventEditorProps {
+  event: OntimeEvent;
+}
+
+export default function EventEditor({ event }: EventEditorProps) {
+  const { data: customFields } = useCustomFields();
+  const { updateEntry } = useEntryActions();
+
+  const isEditor = window.location.pathname.includes('editor');
+
+  const handleSubmit = useCallback(
+    (field: EventEditorUpdateFields, value: string) => {
+      if (field.startsWith('custom-')) {
+        const fieldLabel = field.split('custom-')[1];
+        updateEntry({ id: event.id, custom: { [fieldLabel]: value } });
+      } else {
+        updateEntry({ id: event.id, [field]: value });
+      }
+    },
+    [event.id, updateEntry],
+  );
+
+  return (
+    <div className={style.content}>
+      <EventEditorTimes
+        key={`${event.id}-times`}
+        eventId={event.id}
+        timeStart={event.timeStart}
+        timeEnd={event.timeEnd}
+        duration={event.duration}
+        timeStrategy={event.timeStrategy}
+        linkStart={event.linkStart}
+        countToEnd={event.countToEnd}
+        delay={event.delay}
+        endAction={event.endAction}
+        timerType={event.timerType}
+        timeWarning={event.timeWarning}
+        timeDanger={event.timeDanger}
+      />
+      <EventEditorTitles
+        key={`${event.id}-titles`}
+        eventId={event.id}
+        cue={event.cue}
+        title={event.title}
+        note={event.note}
+        colour={event.colour}
+        handleSubmit={handleSubmit}
+      />
+      <div className={style.column}>
+        <Editor.Title>
+          Custom Fields
+          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage Custom Fields</AppLink>}
+        </Editor.Title>
+        <EntryEditorCustomFields fields={customFields} handleSubmit={handleSubmit} event={event} />
+      </div>
+      <div className={style.column}>
+        <Editor.Title>
+          Automations
+          {isEditor && <AppLink search='settings=automation__automations'>Manage Automations</AppLink>}
+        </Editor.Title>
+        <EventEditorTriggers triggers={event.triggers} eventId={event.id} />
+      </div>
+    </div>
+  );
+}