feat: allow editing field from operator (#609)

* feat: allow editing field from operator Co-authored-by: arc-alex <ac@omnivox.dk> * style: functional and presentation tweaks --------- Co-authored-by: arc-alex <ac@omnivox.dk>
2026-08-14 03:43:50 +00:00 · 2023-11-24 12:04:22 +01:00
parent bdd216d881
commit bf8ebe942e
6 changed files with 234 additions and 9 deletions
@@ -0,0 +1,30 @@
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/ontimeColours' as *;
+
+.editModal {
+  position: absolute;
+  z-index: 2;
+  margin: 0 auto;
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  padding: 1rem;
+  background-color: $gray-1250;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: min(400px, 90vw);
+  box-shadow: $box-shadow-l1;
+
+  .buttonRow {
+    margin-top: auto;
+    display: flex;
+    justify-content: space-between; 
+    gap: 1rem;
+
+    button {
+     width: 100%;
+    }
+  }
+}
@@ -0,0 +1,57 @@
+import { useRef, useState } from 'react';
+import { Button, Textarea } from '@chakra-ui/react';
+import { OntimeEvent } from 'ontime-types';
+
+import { useEventAction } from '../../../common/hooks/useEventAction';
+import type { PartialEdit } from '../Operator';
+
+import style from './EditModal.module.scss';
+
+interface EditModalProps {
+  event: PartialEdit;
+  onClose: () => void;
+}
+
+export default function EditModal(props: EditModalProps) {
+  const { event, onClose } = props;
+
+  const { updateEvent } = useEventAction();
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleSave = async () => {
+    setLoading(true);
+    const newValue = inputRef.current?.value;
+
+    const partialEvent: Partial<OntimeEvent> = {
+      id: event.id,
+      [event.field]: newValue,
+    };
+    await updateEvent(partialEvent);
+    setLoading(false);
+    onClose();
+  };
+
+  const fieldLabel = event?.fieldLabel ?? event.field;
+
+  return (
+    <div className={style.editModal}>
+      <div>{`Editing field ${fieldLabel} in cue ${event.cue}`}</div>
+      <Textarea
+        ref={inputRef}
+        variant='ontime-filled'
+        placeholder={`Add value for ${fieldLabel} field`}
+        defaultValue={event.fieldValue}
+        isDisabled={loading}
+      />
+      <div className={style.buttonRow}>
+        <Button variant='ontime-subtle' onClick={onClose} isDisabled={loading}>
+          Cancel
+        </Button>
+        <Button variant='ontime-filled' onClick={handleSave} isDisabled={loading}>
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}