validation for existing appname and qrcode
This commit is contained in:
JBB0807
parent
8a62bbfa1e
commit
4ee194f102
2 changed files with 267 additions and 71 deletions
|
|
@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
|
|||
import "../scss/components/_assignment.scss";
|
||||
|
||||
const AssignmentPage = () => {
|
||||
const [assignmentId, setAssignmentId] = useState("");
|
||||
const [studentName, setStudentName] = useState("");
|
||||
const [campID, setCampID] = useState("");
|
||||
const [programID, setProgramID] = useState("");
|
||||
|
|
@ -10,27 +11,97 @@ const AssignmentPage = () => {
|
|||
const [password, setPassword] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [file, setFile] = useState(null);
|
||||
|
||||
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingIndex, setEditingIndex] = useState(null);
|
||||
|
||||
const [user, setUser] = useState([]);
|
||||
|
||||
const VITE_ASSIGNMENT_URL = import.meta.env.VITE_ASSIGNMENT_URL;
|
||||
const authUrl = import.meta.env.VITE_AUTH_URL;
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Assignment";
|
||||
getCurrentUser();
|
||||
fetchAssignments();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!appName) return; // Don't alert for empty name
|
||||
const timer = setTimeout(() => {
|
||||
fetch(`${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByAppName/${appName}`)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch assignment by app name");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.exists) {
|
||||
alert("This app name already exists. Please choose a different one.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching assignment by app name:", error);
|
||||
});
|
||||
}, 1000); // 1 second delay
|
||||
|
||||
return () => clearTimeout(timer); // Clear timeout on name change
|
||||
}, [appName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!qrCodeNumber) return; // Don't alert for empty QR code number
|
||||
console.log("Checking QR code number:", qrCodeNumber); // Added console log
|
||||
const timer = setTimeout(() => {
|
||||
fetch(`${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByQRCode/${qrCodeNumber}`)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch assignment by QR code number");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("QR code fetch result:", data); // Added console log
|
||||
if (data.exists) {
|
||||
alert("This QR code number already exists. Please choose a different one.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching assignment by QR code number:", error);
|
||||
});
|
||||
}, 1000); // 1 second delay
|
||||
|
||||
return () => clearTimeout(timer); // Clear timeout on QR code number change
|
||||
}, [qrCodeNumber]);
|
||||
|
||||
const getCurrentUser = async () => {
|
||||
try {
|
||||
const authResponse = await fetch(`${authUrl}/auth/current_user`, {
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
const user = await authResponse.json();
|
||||
setUser(user);
|
||||
} catch (error) {
|
||||
console.error("Error fetching current user:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAssignments = async () => {
|
||||
try {
|
||||
// if (user) {
|
||||
// console.log("Current user:", user, `${VITE_ASSIGNMENT_URL}/instructor/list/${user.userId}`);
|
||||
// const res = await fetch(`${VITE_ASSIGNMENT_URL}/instructor/list/${user.userId}`, {
|
||||
// // credentials: "include",
|
||||
// });
|
||||
//replace this with commented code above to get the instructor id from the auth service
|
||||
const res = await fetch(`${VITE_ASSIGNMENT_URL}/instructor/list/9`, {
|
||||
// credentials: "include",
|
||||
});
|
||||
if (!res.ok) throw new Error("Failed to fetch");
|
||||
|
||||
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(
|
||||
|
|
@ -38,6 +109,7 @@ const AssignmentPage = () => {
|
|||
);
|
||||
|
||||
setProjects(unique);
|
||||
// }
|
||||
} catch (error) {
|
||||
console.error("Error fetching assignments:", error);
|
||||
}
|
||||
|
|
@ -53,69 +125,87 @@ const AssignmentPage = () => {
|
|||
setEditingIndex(null);
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const newProject = {
|
||||
studentname: studentName,
|
||||
campid: campID,
|
||||
appname: appName,
|
||||
qrcodenumber: qrCodeNumber,
|
||||
passwordhash: password,
|
||||
programid: programID,
|
||||
description,
|
||||
file: file,
|
||||
intructorid: 9,
|
||||
};
|
||||
if (!user.userId) return alert("Please login to submit an assignment.");
|
||||
|
||||
//callt the api to upload a new assignment
|
||||
//Create the form data needed for both create and edit
|
||||
const formData = new FormData();
|
||||
formData.append("studentname", studentName);
|
||||
formData.append("campid", campID);
|
||||
formData.append("programid", programID);
|
||||
formData.append("appname", appName);
|
||||
formData.append("qrcodenumber", qrCodeNumber);
|
||||
formData.append("password", password);
|
||||
formData.append("description", description);
|
||||
formData.append("instructorid", 9);
|
||||
if (file) {
|
||||
formData.append("file", file, file.name);
|
||||
}
|
||||
|
||||
fetch(`${VITE_ASSIGNMENT_URL}/instructor/create`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to submit assignment");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Assignment submitted successfully:", data);
|
||||
fetchAssignments(); // Refresh the assignments list
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error submitting assignment:", error);
|
||||
alert("Failed to submit assignment. Please try again.");
|
||||
});
|
||||
|
||||
if (editingIndex !== null) {
|
||||
const updatedProjects = [...projects];
|
||||
updatedProjects[editingIndex] = newProject;
|
||||
setProjects(updatedProjects);
|
||||
//edit mode
|
||||
await fetch(`${VITE_ASSIGNMENT_URL}/instructor/update/${assignmentId}`, {
|
||||
method: "PUT",
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => {
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Failed to edit assignment:", response.statusText);
|
||||
throw new Error("Failed to edit assignment");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Assignment edited successfully:", data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error submitting assignment:", error);
|
||||
alert(`Failed to submit assignment. ${error.message}`);
|
||||
});
|
||||
} else {
|
||||
setProjects([...projects, newProject]);
|
||||
//create mode
|
||||
formData.append("instructorid", 9);
|
||||
formData.append("appname", appName);
|
||||
|
||||
if (file) {
|
||||
formData.append("file", file, file.name);
|
||||
} else {
|
||||
throw new Error("Failed to submit assignment: file not found.");
|
||||
}
|
||||
|
||||
await fetch(`${VITE_ASSIGNMENT_URL}/instructor/create`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
console.error("Failed to submit assignment:", response.statusText);
|
||||
throw new Error("Failed to submit assignment");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Assignment submitted successfully:", data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error submitting assignment:", error);
|
||||
alert(`Failed to submit assignment. ${error.message}`);
|
||||
});
|
||||
}
|
||||
|
||||
alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!");
|
||||
alert(
|
||||
editingIndex !== null ? "Assignment updated!" : "Assignment submitted!"
|
||||
);
|
||||
|
||||
fetchAssignments(); // Refresh the assignments list
|
||||
resetForm();
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
const handleEdit = (index) => {
|
||||
const project = projects[index];
|
||||
setAssignmentId(project.assignmentid || project.assignmentId || "");
|
||||
setAppName(project.appname || project.appName || "");
|
||||
setQrCodeNumber(project.qrcodenumber || project.qrCodeNumber || "");
|
||||
setPassword(project.passwordhash || project.password || "");
|
||||
setStudentName(project.studentname || project.studentName || "");
|
||||
setCampID(project.campid || project.campID || "");
|
||||
setProgramID(project.programid || project.programID || "");
|
||||
|
|
@ -126,66 +216,145 @@ const AssignmentPage = () => {
|
|||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
const updated = projects.filter((_, i) => i !== index);
|
||||
setProjects(updated);
|
||||
const project = projects[index];
|
||||
if (window.confirm("Are you sure you want to delete this assignment?")) {
|
||||
fetch(`${VITE_ASSIGNMENT_URL}/instructor/delete/${project.assignmentid}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
console.error("Failed to delete assignment:", response.statusText);
|
||||
throw new Error("Failed to delete assignment");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Assignment deleted successfully:", data);
|
||||
alert("Assignment deleted successfully!");
|
||||
fetchAssignments(); // Refresh the assignments list
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error deleting assignment:", error);
|
||||
alert(`Failed to delete assignment. ${error.message}`);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="assignment-page">
|
||||
<div className="assignment-header-box">
|
||||
<h2>Assignments</h2>
|
||||
<button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setShowModal(true);
|
||||
}}
|
||||
>
|
||||
➕ Add New
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showModal && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal">
|
||||
<h3>{editingIndex !== null ? "Edit Assignment" : "New Assignment"}</h3>
|
||||
<h3>
|
||||
{editingIndex !== null ? "Edit Assignment" : "New Assignment"}
|
||||
</h3>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label>Student Name</label>
|
||||
<input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} required />
|
||||
<input
|
||||
type="text"
|
||||
value={studentName}
|
||||
onChange={(e) => setStudentName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Camp ID</label>
|
||||
<input type="number" value={campID} onChange={(e) => setCampID(e.target.value)} required />
|
||||
<input
|
||||
type="number"
|
||||
value={campID}
|
||||
onChange={(e) => setCampID(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Program ID</label>
|
||||
<input type="number" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
|
||||
<input
|
||||
type="number"
|
||||
value={programID}
|
||||
onChange={(e) => setProgramID(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>App Name</label>
|
||||
<input type="text" value={appName} onChange={(e) => setAppName(e.target.value)} required />
|
||||
<input
|
||||
type="text"
|
||||
value={appName}
|
||||
onChange={(e) => setAppName(e.target.value)}
|
||||
required
|
||||
disabled={editingIndex !== null}
|
||||
s
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<label>QR Code Number</label>
|
||||
<input type="text" value={qrCodeNumber} onChange={(e) => setQrCodeNumber(e.target.value)} required />
|
||||
<input
|
||||
type="text"
|
||||
value={qrCodeNumber}
|
||||
onChange={(e) => setQrCodeNumber(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Password</label>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Description</label>
|
||||
<textarea value={description} onChange={(e) => setDescription(e.target.value)} required></textarea>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>File Upload (optional)</label>
|
||||
<input type="file" onChange={(e) => setFile(e.target.files[0])} />
|
||||
</div>
|
||||
{editingIndex === null && (
|
||||
<div>
|
||||
<label>File Upload (optional)</label>
|
||||
<input
|
||||
type="file"
|
||||
onChange={(e) => setFile(e.target.files[0])}
|
||||
/>
|
||||
</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">
|
||||
{editingIndex !== null ? "Update" : "Submit"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setShowModal(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -197,31 +366,58 @@ const AssignmentPage = () => {
|
|||
{projects.map((project, index) => (
|
||||
<div key={index} className="project-item">
|
||||
<div className="project-meta">
|
||||
<strong>Student Name:</strong> {project.studentname || project.studentName} |{" "}
|
||||
<strong>Student Name:</strong>{" "}
|
||||
{project.studentname || project.studentName} |{" "}
|
||||
<strong>CampID:</strong> {project.campid || project.campID} |{" "}
|
||||
<strong>ProgramID:</strong> {project.programid || project.programID}
|
||||
<strong>ProgramID:</strong>{" "}
|
||||
{project.programid || project.programID}
|
||||
</div>
|
||||
|
||||
{project.title && <h4>{project.title}</h4>}
|
||||
{project.description && <p>{project.description}</p>}
|
||||
{project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</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>
|
||||
<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>
|
||||
<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>
|
||||
<button onClick={() => alert("QR feature coming soon!")}>
|
||||
📎 QR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue