assignment functionalities added and scss updated
This commit is contained in:
Jae Young Ahn
parent
eb9e055287
commit
bd9237f81a
2 changed files with 207 additions and 141 deletions
|
|
@ -12,6 +12,9 @@ const AssignmentPage = () => {
|
|||
const [projects, setProjects] = useState([]);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingIndex, setEditingIndex] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Assignment";
|
||||
|
|
@ -20,15 +23,10 @@ const AssignmentPage = () => {
|
|||
|
||||
const fetchAssignments = async () => {
|
||||
try {
|
||||
const res = await fetch("http://localhost:8082/instructor/list/9", {
|
||||
// credentials: "include",
|
||||
});
|
||||
const res = await fetch("http://localhost:8082/instructor/list/9");
|
||||
if (!res.ok) throw new Error("Failed to fetch");
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
|
||||
// Optional: Remove duplicate assignment IDs if needed
|
||||
const unique = Array.from(
|
||||
new Map(data.map((item) => [item.assignmentid, item])).values()
|
||||
);
|
||||
|
|
@ -52,6 +50,7 @@ const AssignmentPage = () => {
|
|||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
const newProject = {
|
||||
studentname: studentName,
|
||||
|
|
@ -62,17 +61,20 @@ const AssignmentPage = () => {
|
|||
fileName: file ? file.name : null,
|
||||
};
|
||||
|
||||
if (editingIndex !== null) {
|
||||
const updatedProjects = [...projects];
|
||||
updatedProjects[editingIndex] = newProject;
|
||||
setProjects(updatedProjects);
|
||||
} else {
|
||||
setProjects([...projects, newProject]);
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (editingIndex !== null) {
|
||||
const updatedProjects = [...projects];
|
||||
updatedProjects[editingIndex] = newProject;
|
||||
setProjects(updatedProjects);
|
||||
} else {
|
||||
setProjects([...projects, newProject]);
|
||||
}
|
||||
|
||||
alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!");
|
||||
resetForm();
|
||||
setShowModal(false);
|
||||
alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!");
|
||||
resetForm();
|
||||
setShowModal(false);
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const handleEdit = (index) => {
|
||||
|
|
@ -99,6 +101,15 @@ const AssignmentPage = () => {
|
|||
<button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
|
||||
</div>
|
||||
|
||||
<div className="assignment-search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="🔍︎ Search"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showModal && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal">
|
||||
|
|
@ -119,9 +130,22 @@ const AssignmentPage = () => {
|
|||
<input type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="password-field">
|
||||
<label>Password</label>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||||
<div className="input-wrapper">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<span
|
||||
className="eye-icon"
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
>
|
||||
{showPassword ? "Hide" : "Show"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -139,9 +163,20 @@ const AssignmentPage = () => {
|
|||
<input type="file" onChange={(e) => setFile(e.target.files[0])} />
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="spinner-container">
|
||||
<div className="spinner"></div>
|
||||
<p>Uploading...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="modal-buttons">
|
||||
<button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
|
||||
<button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
|
||||
<button type="submit" disabled={loading}>
|
||||
{editingIndex !== null ? "Update" : "Submit"}
|
||||
</button>
|
||||
<button type="button" onClick={() => { resetForm(); setShowModal(false); }} disabled={loading}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -150,37 +185,56 @@ const AssignmentPage = () => {
|
|||
|
||||
{projects.length > 0 && (
|
||||
<div className="project-list">
|
||||
{projects.map((project, index) => (
|
||||
<div key={index} className="project-item">
|
||||
<div className="project-meta">
|
||||
<strong>Student Name:</strong> {project.studentname || project.studentName} |{" "}
|
||||
<strong>CampID:</strong> {project.campid || project.campID} |{" "}
|
||||
<strong>ProgramID:</strong> {project.programid || project.programID}
|
||||
{projects
|
||||
.filter((project) => {
|
||||
if (!searchTerm.trim()) return true;
|
||||
const regex = new RegExp(searchTerm, "i");
|
||||
return (
|
||||
regex.test(project.studentname || project.studentName || "") ||
|
||||
regex.test(project.campid || project.campID || "") ||
|
||||
regex.test(project.programid || project.programID || "") ||
|
||||
regex.test(project.title || "") ||
|
||||
regex.test(project.description || "") ||
|
||||
regex.test(project.fileName || "") ||
|
||||
regex.test(project.assignmenturl || "") ||
|
||||
regex.test(project.originalfile || "") ||
|
||||
regex.test(project.editablefile || "")
|
||||
);
|
||||
})
|
||||
.map((project, index) => (
|
||||
<div key={index} className="project-item">
|
||||
<div className="project-meta">
|
||||
<p><strong>Student Name:</strong> {project.studentname || project.studentName}</p>
|
||||
<p><strong>CampID:</strong> {project.campid || project.campID}</p>
|
||||
<p><strong>ProgramID:</strong> {project.programid || project.programID}</p>
|
||||
</div>
|
||||
|
||||
{project.title && <h4>{project.title}</h4>}
|
||||
{project.description && <p>{project.description}</p>}
|
||||
|
||||
{project.fileName && (
|
||||
<p><strong>Uploaded File:</strong> {project.fileName}</p>
|
||||
)}
|
||||
|
||||
{project.assignmenturl && (
|
||||
<p className="assignment-links">
|
||||
<a href={project.assignmenturl} target="_blank" rel="noopener noreferrer">View Assignment</a>
|
||||
</p>
|
||||
)}
|
||||
{project.originalfile && (
|
||||
<p className="assignment-links">
|
||||
<a href={project.originalfile} target="_blank" rel="noopener noreferrer">Original File</a>{" "}
|
||||
<a href={project.editablefile} target="_blank" rel="noopener noreferrer">Editable File</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="action-buttons">
|
||||
<button onClick={() => handleEdit(index)}>✏️ View Edit</button>
|
||||
<button onClick={() => handleDelete(index)}>🗑️ Delete</button>
|
||||
<button onClick={() => alert("QR feature coming soon!")}>🧮 Editor</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{project.title && <h4>{project.title}</h4>}
|
||||
{project.description && <p>{project.description}</p>}
|
||||
{project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
|
||||
|
||||
{project.assignmenturl && (
|
||||
<p>
|
||||
<a href={project.assignmenturl} target="_blank" rel="noopener noreferrer">View Assignment</a>
|
||||
</p>
|
||||
)}
|
||||
{project.originalfile && (
|
||||
<p>
|
||||
<a href={project.originalfile} target="_blank" rel="noopener noreferrer">Original File</a> |{" "}
|
||||
<a href={project.editablefile} target="_blank" rel="noopener noreferrer">Editable File</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="action-buttons">
|
||||
<button onClick={() => handleEdit(index)}>✏️ Edit</button>
|
||||
<button onClick={() => handleDelete(index)}>🗑️ Delete</button>
|
||||
<button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue