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,73 @@
+import { useState } from 'react';
+import { IoPencil, IoTrash } from 'react-icons/io5';
+import { CustomField, CustomFieldKey } from 'ontime-types';
+
+import IconButton from '../../../../../common/components/buttons/IconButton';
+import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
+import Swatch from '../../../../../common/components/input/colour-input/Swatch';
+import Tag from '../../../../../common/components/tag/Tag';
+import * as Panel from '../../../panel-utils/PanelUtils';
+
+import CustomFieldForm from './CustomFieldForm';
+
+import style from '../ManagePanel.module.scss';
+
+interface CustomFieldEntryProps {
+  colour: string;
+  label: string;
+  fieldKey: string;
+  type: 'string' | 'image';
+  onEdit: (key: CustomFieldKey, patch: CustomField) => Promise<void>;
+  onDelete: (key: CustomFieldKey) => Promise<void>;
+}
+
+export default function CustomFieldEntry(props: CustomFieldEntryProps) {
+  const { colour, label, fieldKey, type, onEdit, onDelete } = props;
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleEdit = async (patch: CustomField) => {
+    await onEdit(fieldKey, patch);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <tr>
+        <td colSpan={99}>
+          <CustomFieldForm
+            onCancel={() => setIsEditing(false)}
+            onSubmit={handleEdit}
+            initialColour={colour}
+            initialLabel={label}
+            initialKey={fieldKey}
+          />
+        </td>
+      </tr>
+    );
+  }
+
+  return (
+    <tr>
+      <td>
+        <Swatch color={colour} />
+      </td>
+      <td>
+        <Tag>{type}</Tag>
+      </td>
+      <td className={style.halfWidth}>{label}</td>
+      <td className={style.fullWidth}>
+        <CopyTag label='Copy key to use in integrations' copyValue={fieldKey}>
+          {fieldKey}
+        </CopyTag>
+      </td>
+      <Panel.InlineElements relation='inner' as='td'>
+        <IconButton variant='ghosted-white' aria-label='Edit entry' onClick={() => setIsEditing(true)}>
+          <IoPencil />
+        </IconButton>
+        <IconButton variant='ghosted-destructive' aria-label='Delete entry' onClick={() => onDelete(fieldKey)}>
+          <IoTrash />
+        </IconButton>
+      </Panel.InlineElements>
+    </tr>
+  );
+}