78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { useFieldArray, type Control, type UseFormRegister } from 'react-hook-form';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Plus, Trash2 } from 'lucide-react';
|
|
|
|
interface AttributeSchemaBuilderProps {
|
|
control: Control<any>;
|
|
register: UseFormRegister<any>;
|
|
}
|
|
|
|
export function AttributeSchemaBuilder({ control, register }: AttributeSchemaBuilderProps) {
|
|
const { fields, append, remove } = useFieldArray({
|
|
control,
|
|
name: 'attributes',
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-medium"></h3>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => append({ key: '', type: 'STRING', required: false })}
|
|
>
|
|
<Plus className="w-4 h-4 mr-2" /> Add Attribute
|
|
</Button>
|
|
</div>
|
|
|
|
{fields.length === 0 && (
|
|
<p className="text-sm text-gray-500">No attributes defined. Payload will be empty.</p>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
{fields.map((field, index) => (
|
|
<div key={field.id} className="flex items-center gap-3 bg-gray-50 p-3 rounded-md border">
|
|
<div className="flex-1">
|
|
<Input
|
|
placeholder="Attribute Key (e.g. userId)"
|
|
{...register(`attributes.${index}.key` as const, { required: true })}
|
|
/>
|
|
</div>
|
|
<div className="w-40">
|
|
<select
|
|
className="w-full h-10 px-3 py-2 border rounded-md bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
{...register(`attributes.${index}.type` as const)}
|
|
>
|
|
<option value="STRING">String</option>
|
|
<option value="NUMBER">Number</option>
|
|
<option value="BOOLEAN">Boolean</option>
|
|
<option value="DATETIME">DateTime</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex items-center gap-2 w-24">
|
|
<input
|
|
type="checkbox"
|
|
id={`req-${field.id}`}
|
|
className="w-4 h-4"
|
|
{...register(`attributes.${index}.required` as const)}
|
|
/>
|
|
<label htmlFor={`req-${field.id}`} className="text-sm">Required</label>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
size="icon"
|
|
onClick={() => remove(index)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|