forked from CSI-KJSCE/appointment_to_examiner
search bar
This commit is contained in:
Harikrishnan Gopal
@@ -14,7 +14,7 @@ import "react-toastify/dist/ReactToastify.css";
|
||||
import CourseTable from "./Pages/CourseTable";
|
||||
import GenerateCSV from "./Pages/GenerateCSV";
|
||||
import ConsolidatedTable from "./Pages/ConsolidatedTable";
|
||||
import CourseConsolidated from "./Pages/CourseConsolidated";
|
||||
import CourseConsolidated from "./Pages/courseConsolidated";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
||||
@@ -80,7 +80,10 @@ const styles = {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const ConsolidatedTable = () => {
|
||||
const [searchQuery, setSearchQuery] = useState(""); // State for search input
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@@ -108,15 +111,21 @@ const ConsolidatedTable = () => {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
// Extract unique faculty names
|
||||
const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
|
||||
// Extract unique faculty names and filter based on the search query
|
||||
const filteredTeachers = [...new Set(data.map((row) => row.Name))].filter(
|
||||
(teacher) =>
|
||||
teacher.toLowerCase().includes(searchQuery.toLowerCase()) // Filter by search query
|
||||
);
|
||||
|
||||
// Pagination
|
||||
// Pagination logic applied to filtered teachers
|
||||
const indexOfLastTable = currentPage * tablesPerPage;
|
||||
const indexOfFirstTable = indexOfLastTable - tablesPerPage;
|
||||
const currentTeachers = uniqueTeachers.slice(indexOfFirstTable, indexOfLastTable);
|
||||
const currentTeachers = filteredTeachers.slice(
|
||||
indexOfFirstTable,
|
||||
indexOfLastTable
|
||||
);
|
||||
|
||||
const totalPages = Math.ceil(uniqueTeachers.length / tablesPerPage);
|
||||
const totalPages = Math.ceil(filteredTeachers.length / tablesPerPage);
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
|
||||
@@ -132,14 +141,14 @@ const ConsolidatedTable = () => {
|
||||
};
|
||||
|
||||
const bulkDownload = () => {
|
||||
uniqueTeachers.forEach((teacher) => {
|
||||
filteredTeachers.forEach((teacher) => {
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
createExcelFile(teacherData, teacher);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSendEmail = async (teacher, teacherData) => {
|
||||
const facultyId = teacherData[0].facultyId;
|
||||
const facultyId = teacherData[0].facultyId;
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`http://localhost:8080/api/faculty/${facultyId}`
|
||||
@@ -176,9 +185,8 @@ const ConsolidatedTable = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Send emails to all teachers
|
||||
const sendEmailsToAllTeachers = async () => {
|
||||
for (let teacher of uniqueTeachers) {
|
||||
for (let teacher of filteredTeachers) {
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
await handleSendEmail(teacher, teacherData); // Wait for each email to be sent before proceeding to the next
|
||||
}
|
||||
@@ -187,140 +195,172 @@ const ConsolidatedTable = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar/>
|
||||
<div style={styles.main}>
|
||||
<h1 style={styles.header}>
|
||||
Faculty Tables with Download Options
|
||||
</h1>
|
||||
|
||||
<div style={styles.buttonRow}>
|
||||
<button
|
||||
onClick={bulkDownload}
|
||||
style={{ ...styles.button, ...styles.bulkDownloadButton }}
|
||||
>
|
||||
Bulk Download All Tables
|
||||
</button>
|
||||
<button
|
||||
onClick={() => createExcelFile(data, "Consolidated Table")}
|
||||
style={{ ...styles.button, ...styles.downloadButton }}
|
||||
>
|
||||
Download Consolidated Table
|
||||
</button>
|
||||
<button
|
||||
onClick={sendEmailsToAllTeachers}
|
||||
style={{ ...styles.button, ...styles.emailButton }}
|
||||
>
|
||||
Send Emails to All Teachers
|
||||
</button>
|
||||
</div>
|
||||
<Navbar />
|
||||
<div style={styles.main}>
|
||||
<h1 style={styles.header}>Faculty Tables with Download Options</h1>
|
||||
|
||||
<div style={styles.tableContainer}>
|
||||
{currentTeachers.map((teacher, index) => {
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
return (
|
||||
<div key={index} style={{ marginBottom: "20px" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#ffffff",
|
||||
boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
|
||||
}}
|
||||
onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
|
||||
>
|
||||
<h2 style={{ color: "black", margin: 0, fontSize: "1.5rem", }}>{teacher}'s Table</h2>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => createExcelFile(teacherData, teacher)}
|
||||
style={{ ...styles.button, backgroundColor: "#007bff" }}
|
||||
<div style={styles.buttonRow}>
|
||||
<button
|
||||
onClick={bulkDownload}
|
||||
style={{ ...styles.button, ...styles.bulkDownloadButton }}
|
||||
>
|
||||
Bulk Download All Tables
|
||||
</button>
|
||||
<button
|
||||
onClick={() => createExcelFile(data, "Consolidated Table")}
|
||||
style={{ ...styles.button, ...styles.downloadButton }}
|
||||
>
|
||||
Download Consolidated Table
|
||||
</button>
|
||||
<button
|
||||
onClick={sendEmailsToAllTeachers}
|
||||
style={{ ...styles.button, ...styles.emailButton }}
|
||||
>
|
||||
Send Emails to All Teachers
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div style={{ padding: "10px", marginBottom: "20px" }}>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search for a faculty..."
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
border: "1px solid #ccc",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={styles.tableContainer}>
|
||||
{currentTeachers.map((teacher, index) => {
|
||||
const teacherData = data.filter((row) => row.Name === teacher);
|
||||
return (
|
||||
<div key={index} style={{ marginBottom: "20px" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#ffffff",
|
||||
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
|
||||
}}
|
||||
onClick={() =>
|
||||
setExpandedTeacher(
|
||||
expandedTeacher === teacher ? null : teacher
|
||||
)
|
||||
}
|
||||
>
|
||||
<h2
|
||||
style={{ color: "black", margin: 0, fontSize: "1.5rem" }}
|
||||
>
|
||||
Download {teacher}'s Table
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSendEmail(teacher, teacherData)}
|
||||
style={{ ...styles.button, backgroundColor: "#6c757d" }}
|
||||
>
|
||||
Send {teacher}'s XSL via Email
|
||||
</button>
|
||||
{teacher}'s Table
|
||||
</h2>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => createExcelFile(teacherData, teacher)}
|
||||
style={{ ...styles.button, backgroundColor: "#007bff" }}
|
||||
>
|
||||
Download {teacher}'s Table
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSendEmail(teacher, teacherData)}
|
||||
style={{
|
||||
...styles.button,
|
||||
backgroundColor: "#6c757d",
|
||||
}}
|
||||
>
|
||||
Send {teacher}'s XSL via Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedTeacher === teacher && (
|
||||
<table style={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={styles.th}>Semester</th>
|
||||
<th style={styles.th}>Course Code</th>
|
||||
<th style={styles.th}>Course Name</th>
|
||||
<th style={styles.th}>Exam Type</th>
|
||||
<th style={styles.th}>Year</th>
|
||||
<th style={styles.th}>Marks</th>
|
||||
<th style={styles.th}>Name</th>
|
||||
<th style={styles.th}>Affiliation/College</th>
|
||||
<th style={styles.th}>Highest Qualification</th>
|
||||
<th style={styles.th}>Career Experience</th>
|
||||
<th style={styles.th}>Oral/Practical</th>
|
||||
<th style={styles.th}>Assessment</th>
|
||||
<th style={styles.th}>Reassessment</th>
|
||||
<th style={styles.th}>Paper Setting</th>
|
||||
<th style={styles.th}>Moderation</th>
|
||||
<th style={styles.th}>PwD Paper Setting</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teacherData.map((row, idx) => (
|
||||
<tr key={idx}>
|
||||
<td style={styles.td}>{row.semester}</td>
|
||||
<td style={styles.td}>{row.courseCode}</td>
|
||||
<td style={styles.td}>{row.courseName}</td>
|
||||
<td style={styles.td}>{row.examType}</td>
|
||||
<td style={styles.td}>{row.year}</td>
|
||||
<td style={styles.td}>{row.marks}</td>
|
||||
<td style={styles.td}>{row.Name}</td>
|
||||
<td style={styles.td}>{row.affiliation}</td>
|
||||
<td style={styles.td}>{row.qualification}</td>
|
||||
<td style={styles.td}>{row.experience}</td>
|
||||
<td style={styles.td}>{row.oralPractical}</td>
|
||||
<td style={styles.td}>{row.assessment}</td>
|
||||
<td style={styles.td}>{row.reassessment}</td>
|
||||
<td style={styles.td}>{row.paperSetting}</td>
|
||||
<td style={styles.td}>{row.moderation}</td>
|
||||
<td style={styles.td}>{row.pwdPaperSetting}</td>
|
||||
{expandedTeacher === teacher && (
|
||||
<table style={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={styles.th}>Semester</th>
|
||||
<th style={styles.th}>Course Code</th>
|
||||
<th style={styles.th}>Course Name</th>
|
||||
<th style={styles.th}>Exam Type</th>
|
||||
<th style={styles.th}>Year</th>
|
||||
<th style={styles.th}>Marks</th>
|
||||
<th style={styles.th}>Name</th>
|
||||
<th style={styles.th}>Affiliation/College</th>
|
||||
<th style={styles.th}>Highest Qualification</th>
|
||||
<th style={styles.th}>Career Experience</th>
|
||||
<th style={styles.th}>Oral/Practical</th>
|
||||
<th style={styles.th}>Assessment</th>
|
||||
<th style={styles.th}>Reassessment</th>
|
||||
<th style={styles.th}>Paper Setting</th>
|
||||
<th style={styles.th}>Moderation</th>
|
||||
<th style={styles.th}>PwD Paper Setting</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teacherData.map((row, idx) => (
|
||||
<tr key={idx}>
|
||||
<td style={styles.td}>{row.semester}</td>
|
||||
<td style={styles.td}>{row.courseCode}</td>
|
||||
<td style={styles.td}>{row.courseName}</td>
|
||||
<td style={styles.td}>{row.examType}</td>
|
||||
<td style={styles.td}>{row.year}</td>
|
||||
<td style={styles.td}>{row.marks}</td>
|
||||
<td style={styles.td}>{row.Name}</td>
|
||||
<td style={styles.td}>{row.affiliation}</td>
|
||||
<td style={styles.td}>{row.qualification}</td>
|
||||
<td style={styles.td}>{row.experience}</td>
|
||||
<td style={styles.td}>{row.oralPractical}</td>
|
||||
<td style={styles.td}>{row.assessment}</td>
|
||||
<td style={styles.td}>{row.reassessment}</td>
|
||||
<td style={styles.td}>{row.paperSetting}</td>
|
||||
<td style={styles.td}>{row.moderation}</td>
|
||||
<td style={styles.td}>{row.pwdPaperSetting}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Pagination controls */}
|
||||
<div style={styles.paginationContainer}>
|
||||
<button
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
style={{ ...styles.paginationButton, backgroundColor: currentPage === 1 ? "#ccc" : "#007bff" }}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span>
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
style={{ ...styles.paginationButton, backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff" }}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
{/* Pagination controls */}
|
||||
<div style={styles.paginationContainer}>
|
||||
<button
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
style={{
|
||||
...styles.paginationButton,
|
||||
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span>
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
style={{
|
||||
...styles.paginationButton,
|
||||
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user