refactor: restructure settings

refactor: migrate react components
2026-08-20 14:39:06 +00:00 · 2025-07-04 12:13:06 +02:00
parent a8ea1080f3
commit 5600235ba1
93 changed files with 711 additions and 906 deletions
@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { IoAdd } from 'react-icons/io5';
+import { CustomField, CustomFieldKey } from 'ontime-types';
+
+import { deleteCustomField, editCustomField, postCustomField } from '../../../../common/api/customFields';
+import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
+import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import useCustomFields from '../../../../common/hooks-query/useCustomFields';
+import { customFieldsDocsUrl } from '../../../../externals';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import CustomFieldEntry from './composite/CustomFieldEntry';
+import CustomFieldForm from './composite/CustomFieldForm';
+
+export default function CustomFieldSettings() {
+  const { data, refetch } = useCustomFields();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const handleInitiateCreate = () => {
+    setIsAdding(true);
+  };
+
+  const handleCancel = () => {
+    setIsAdding(false);
+  };
+
+  const handleCreate = async (customField: CustomField) => {
+    await postCustomField(customField);
+    refetch();
+    setIsAdding(false);
+  };
+
+  const handleEditField = async (key: CustomFieldKey, customField: CustomField) => {
+    await editCustomField(key, customField);
+    refetch();
+  };
+
+  const handleDelete = async (key: CustomFieldKey) => {
+    try {
+      await deleteCustomField(key);
+      refetch();
+    } catch (_error) {
+      /** we do not handle errors here */
+    }
+  };
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>
+          Custom fields
+          <Button onClick={handleInitiateCreate}>
+            New <IoAdd />
+          </Button>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Panel.Section>
+          <Info>
+            Custom fields allow for additional information to be added to an event.
+            <br />
+            <br />
+            This data can be used in the Automation feature by using the generated key.
+            <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
+          </Info>
+        </Panel.Section>
+        <Panel.Section>
+          {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}
+          <Panel.Table>
+            <thead>
+              <tr>
+                <th>Colour</th>
+                <th>Type</th>
+                <th>Name</th>
+                <th>Key (used in Integrations)</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(data).map(([key, { colour, label, type }]) => {
+                return (
+                  <CustomFieldEntry
+                    key={key}
+                    fieldKey={key}
+                    colour={colour}
+                    label={label}
+                    type={type}
+                    onEdit={handleEditField}
+                    onDelete={handleDelete}
+                  />
+                );
+              })}
+            </tbody>
+          </Panel.Table>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}