Spaces:
Sleeping
Sleeping
File size: 3,272 Bytes
7d51e81 | 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 | "use client";
import { useState } from "react";
import { FiPlus, FiEye, FiEyeOff } from "react-icons/fi";
import "./styles/AddSubjectForm.css";
export default function AddSubjectForm({ allUsers, isLoading, onAddSubject }) {
const [newSubject, setNewSubject] = useState("");
const [selectedSubject, setSelectedSubject] = useState("");
const [isCustomSubject, setIsCustomSubject] = useState(true);
const [isPublic, setIsPublic] = useState(true);
const getAllSubjects = () => {
const subjectSet = new Set();
allUsers.forEach(user => {
if (user.subjects && Array.isArray(user.subjects)) {
user.subjects.forEach(subjectObj => {
if (subjectObj.subject && subjectObj.subject.trim()) {
subjectSet.add(subjectObj.subject.trim());
}
});
}
});
return Array.from(subjectSet).sort();
};
const handleSubjectSelect = (e) => {
const value = e.target.value;
if (value === "custom") {
setIsCustomSubject(true);
setSelectedSubject("");
setNewSubject("");
} else {
setIsCustomSubject(false);
setSelectedSubject(value);
setNewSubject(value);
}
};
const handleSubmit = async () => {
const subjectToAdd = isCustomSubject ? newSubject : selectedSubject;
if (!subjectToAdd.trim()) return;
await onAddSubject(subjectToAdd, isPublic);
setNewSubject("");
setSelectedSubject("");
setIsCustomSubject(true);
setIsPublic(true);
};
const uniqueSubjects = getAllSubjects();
return (
<div className="asf-compact-form">
<div className="asf-form-row">
{/* System Dropdown */}
<select
value={isCustomSubject ? "custom" : selectedSubject}
onChange={handleSubjectSelect}
className="asf-select"
disabled={isLoading}
>
<option value="custom">+ Custom Subject</option>
{uniqueSubjects.length > 0 && <option disabled>──────────</option>}
{uniqueSubjects.map(subject => (
<option key={subject} value={subject}>{subject}</option>
))}
</select>
{/* Toggle Button */}
<button
type="button"
onClick={() => setIsPublic(!isPublic)}
disabled={isLoading}
className={`asf-toggle-btn ${isPublic ? 'asf-public' : 'asf-private'}`}
title={isPublic ? 'Public' : 'Private'}
>
{isPublic ? <FiEye /> : <FiEyeOff />}
</button>
{/* Add Button */}
<button
onClick={handleSubmit}
className="asf-add-btn"
disabled={isLoading || (!isCustomSubject && !selectedSubject) || (isCustomSubject && !newSubject.trim())}
title="Add Subject"
>
<FiPlus />
</button>
</div>
{/* Input Field */}
{isCustomSubject && (
<input
type="text"
placeholder="Enter subject name..."
value={newSubject}
onChange={(e) => setNewSubject(e.target.value)}
className="asf-input"
disabled={isLoading}
autoFocus
/>
)}
</div>
);
} |