126 lines
4.3 KiB
TypeScript
126 lines
4.3 KiB
TypeScript
/**
|
|
* Form node config - draggable fields, types, required toggle
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { FaGripVertical, FaTimes } from 'react-icons/fa';
|
|
import type { FormField, NodeConfigRendererProps } from './types';
|
|
import styles from '../Automation2FlowEditor.module.css';
|
|
|
|
export const FormNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
|
|
const fields = (params.fields as FormField[]) ?? [];
|
|
|
|
const moveField = (fromIndex: number, toIndex: number) => {
|
|
if (fromIndex < 0 || toIndex < 0 || fromIndex >= fields.length || toIndex >= fields.length) return;
|
|
const next = [...fields];
|
|
const [removed] = next.splice(fromIndex, 1);
|
|
next.splice(toIndex, 0, removed);
|
|
updateParam('fields', next);
|
|
};
|
|
|
|
const removeField = (index: number) => {
|
|
const next = fields.filter((_, i) => i !== index);
|
|
updateParam('fields', next);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<label>Felder</label>
|
|
<div className={styles.formFieldsList}>
|
|
{fields.map((f, i) => (
|
|
<div
|
|
key={i}
|
|
className={styles.formFieldRow}
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
}}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
const from = parseInt(e.dataTransfer.getData('text/plain'), 10);
|
|
if (!Number.isNaN(from) && from !== i) moveField(from, i);
|
|
}}
|
|
>
|
|
<div className={styles.formFieldRowHeader}>
|
|
<span
|
|
className={styles.formFieldDragHandle}
|
|
title="Zum Verschieben ziehen"
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.dataTransfer.setData('text/plain', String(i));
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
}}
|
|
>
|
|
<FaGripVertical />
|
|
</span>
|
|
<div className={styles.formFieldInputs}>
|
|
<input
|
|
placeholder="name"
|
|
value={f.name ?? ''}
|
|
onChange={(e) => {
|
|
const next = [...fields];
|
|
next[i] = { ...next[i], name: e.target.value };
|
|
updateParam('fields', next);
|
|
}}
|
|
/>
|
|
<input
|
|
placeholder="label"
|
|
value={f.label ?? ''}
|
|
onChange={(e) => {
|
|
const next = [...fields];
|
|
next[i] = { ...next[i], label: e.target.value };
|
|
updateParam('fields', next);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={styles.formFieldRowFooter}>
|
|
<select
|
|
value={f.type ?? 'string'}
|
|
onChange={(e) => {
|
|
const next = [...fields];
|
|
next[i] = { ...next[i], type: e.target.value };
|
|
updateParam('fields', next);
|
|
}}
|
|
style={{ width: 'auto', minWidth: 90 }}
|
|
>
|
|
<option value="string">Text</option>
|
|
<option value="number">Number</option>
|
|
<option value="date">Date</option>
|
|
<option value="boolean">Checkbox</option>
|
|
</select>
|
|
<label className={styles.formFieldRequiredLabel}>
|
|
<input
|
|
type="checkbox"
|
|
checked={f.required ?? false}
|
|
onChange={(e) => {
|
|
const next = [...fields];
|
|
next[i] = { ...next[i], required: e.target.checked };
|
|
updateParam('fields', next);
|
|
}}
|
|
/>
|
|
Pflichtfeld
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeField(i)}
|
|
title="Feld entfernen"
|
|
className={styles.formFieldRemoveButton}
|
|
>
|
|
<FaTimes />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
updateParam('fields', [...fields, { name: '', type: 'string', label: '', required: false }])
|
|
}
|
|
>
|
|
+ Feld
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|