Spaces:
Sleeping
Sleeping
File size: 5,417 Bytes
01d5a5d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
'use client';
import { useState } from 'react';
interface UploadParticipant {
name: string;
apiEndpoint: string;
apiKey: string;
}
interface CreateTaskModalProps {
onClose: () => void;
onSubmit: (taskData: { description: string; participants: UploadParticipant[] }) => void;
currentUploadName: string;
}
export default function CreateTaskModal({
onClose,
onSubmit,
currentUploadName
}: CreateTaskModalProps) {
const [description, setDescription] = useState('');
const [participants, setParticipants] = useState<UploadParticipant[]>([
{ name: currentUploadName, apiEndpoint: '', apiKey: '' } // Current upload is default
]);
const handleAddParticipant = () => {
setParticipants([...participants, { name: '', apiEndpoint: '', apiKey: '' }]);
};
const handleParticipantChange = (
index: number,
field: keyof UploadParticipant,
value: string
) => {
const newParticipants = [...participants];
newParticipants[index] = { ...newParticipants[index], [field]: value };
setParticipants(newParticipants);
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
onSubmit({ description, participants });
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<h2 className="text-2xl font-bold mb-4">Create New Multi-Upload Task</h2>
<form className="space-y-6" onSubmit={handleSubmit}>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Task Description</label>
<textarea
className="w-full rounded-md border border-gray-300 p-3 min-h-[100px]"
onChange={(e) => setDescription(e.target.value)}
placeholder="Describe the task that the uploads should complete..."
required
value={description}
/>
</div>
<div>
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-medium">Participating Uploads</h3>
<button
className="text-blue-600 hover:text-blue-700"
onClick={handleAddParticipant}
type="button"
>
+ Add Upload
</button>
</div>
<div className="space-y-4">
{participants.map((participant, index) => (
<div key={index} className="border rounded-lg p-4">
<div className="grid gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Upload Name
</label>
<input
className="w-full rounded-md border border-gray-300 p-2"
disabled={index === 0} // Current upload can't be changed
onChange={(e) => handleParticipantChange(index, 'name', e.target.value)}
required
type="text"
value={participant.name}
/>
</div>
{index !== 0 && ( // Only show API fields for other uploads
<>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
API Endpoint
</label>
<input
className="w-full rounded-md border border-gray-300 p-2"
onChange={(e) =>
handleParticipantChange(index, 'apiEndpoint', e.target.value)
}
required
type="url"
value={participant.apiEndpoint}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
API Key
</label>
<input
className="w-full rounded-md border border-gray-300 p-2"
onChange={(e) =>
handleParticipantChange(index, 'apiKey', e.target.value)
}
required
type="password"
value={participant.apiKey}
/>
</div>
</>
)}
</div>
</div>
))}
</div>
</div>
<div className="flex justify-end gap-4">
<button
className="px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50"
onClick={onClose}
type="button"
>
Cancel
</button>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
type="submit"
>
Create Task
</button>
</div>
</form>
</div>
</div>
);
}
|