display multiple custom fields in operator view (#1001)

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/features/operator/edit-modal/EditModal.tsx

@@ -1,48 +1,69 @@
 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 type { EditEvent } from '../Operator';
 
 import style from './EditModal.module.scss';
 
 interface EditModalProps {
-  event: PartialEdit;
+  event: EditEvent;
   onClose: () => void;
 }
 
 export default function EditModal(props: EditModalProps) {
   const { event, onClose } = props;
 
-  const { updateCustomField } = useEventAction();
+  const { updateEvent } = useEventAction();
   const [loading, setLoading] = useState(false);
-  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement[]>(new Array<HTMLTextAreaElement>());
 
   const handleSave = async () => {
+    if (!inputRef.current) return;
     setLoading(true);
-    const newValue = inputRef.current?.value;
-    if (newValue === undefined) {
-      return;
+
+    const patchObject: Partial<OntimeEvent> = { id: event.id };
+
+    inputRef.current.forEach((element) => {
+      if (element.dataset.field && element.defaultValue != element.value) {
+        if (patchObject.custom) {
+          patchObject.custom[element.dataset.field] = element.value;
+        } else {
+          Object.assign(patchObject, { custom: { [element.dataset.field]: element.value } });
+        }
+      }
+    });
+
+    if (patchObject.custom) {
+      await updateEvent(patchObject);
     }
 
-    await updateCustomField(event.id, event.field, newValue);
     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}
-        resize='none'
-      />
+      <div>{`Editing fields in cue ${event.cue}`}</div>
+      {event.subscriptions.map((field) => {
+        return (
+          <div key={field.label}>
+            <label>{field.label}</label>
+            <Textarea
+              ref={(element) => {
+                if (element) inputRef.current.push(element);
+              }}
+              variant='ontime-filled'
+              placeholder={`Add value for ${field.label} field`}
+              defaultValue={field.value}
+              data-field={field.id}
+              isDisabled={loading}
+              resize='none'
+            />
+          </div>
+        );
+      })}
       <div className={style.buttonRow}>
         <Button variant='ontime-subtle' onClick={onClose} isDisabled={loading}>
           Cancel