arav/appointment_to_examiner
1
0
Fork 0
forked from CSI-KJSCE/appointment_to_examiner
Code Pull Requests Activity

search bar

Browse Source
This commit is contained in:
Harikrishnan Gopal
2025-01-28 00:40:29 +05:30
parent 4466b33dff
commit 984bf65664
2 changed files with 177 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.js
View File

@@ -14,7 +14,7 @@ import "react-toastify/dist/ReactToastify.css";
import CourseTable from "./Pages/CourseTable"; import CourseTable from "./Pages/CourseTable";
import GenerateCSV from "./Pages/GenerateCSV"; import GenerateCSV from "./Pages/GenerateCSV";
import ConsolidatedTable from "./Pages/ConsolidatedTable"; import ConsolidatedTable from "./Pages/ConsolidatedTable";
import CourseConsolidated from "./Pages/CourseConsolidated"; import CourseConsolidated from "./Pages/courseConsolidated";
function App() { function App() {
return ( return (

308
client/src/Pages/ConsolidatedTable.jsx
View File

@@ -80,7 +80,10 @@ const styles = {
} }
}; };
const ConsolidatedTable = () => { const ConsolidatedTable = () => {
const [searchQuery, setSearchQuery] = useState(""); // State for search input
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
@@ -108,15 +111,21 @@ const ConsolidatedTable = () => {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
// Extract unique faculty names // Extract unique faculty names and filter based on the search query
const uniqueTeachers = [...new Set(data.map((row) => row.Name))]; 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 indexOfLastTable = currentPage * tablesPerPage;
const indexOfFirstTable = indexOfLastTable - 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 = () => { const handleNextPage = () => {
if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1); if (currentPage < totalPages) setCurrentPage((prevPage) => prevPage + 1);
@@ -132,7 +141,7 @@ const ConsolidatedTable = () => {
}; };
const bulkDownload = () => { const bulkDownload = () => {
uniqueTeachers.forEach((teacher) => { filteredTeachers.forEach((teacher) => {
const teacherData = data.filter((row) => row.Name === teacher); const teacherData = data.filter((row) => row.Name === teacher);
createExcelFile(teacherData, teacher); createExcelFile(teacherData, teacher);
}); });
@@ -176,9 +185,8 @@ const ConsolidatedTable = () => {
} }
}; };
// Send emails to all teachers
const sendEmailsToAllTeachers = async () => { const sendEmailsToAllTeachers = async () => {
for (let teacher of uniqueTeachers) { for (let teacher of filteredTeachers) {
const teacherData = data.filter((row) => row.Name === teacher); const teacherData = data.filter((row) => row.Name === teacher);
await handleSendEmail(teacher, teacherData); // Wait for each email to be sent before proceeding to the next await handleSendEmail(teacher, teacherData); // Wait for each email to be sent before proceeding to the next
} }
@@ -187,140 +195,172 @@ const ConsolidatedTable = () => {
return ( return (
<> <>
<Navbar/> <Navbar />
<div style={styles.main}> <div style={styles.main}>
<h1 style={styles.header}> <h1 style={styles.header}>Faculty Tables with Download Options</h1>
Faculty Tables with Download Options
</h1>
<div style={styles.buttonRow}> <div style={styles.buttonRow}>
<button <button
onClick={bulkDownload} onClick={bulkDownload}
style={{ ...styles.button, ...styles.bulkDownloadButton }} style={{ ...styles.button, ...styles.bulkDownloadButton }}
> >
Bulk Download All Tables Bulk Download All Tables
</button> </button>
<button <button
onClick={() => createExcelFile(data, "Consolidated Table")} onClick={() => createExcelFile(data, "Consolidated Table")}
style={{ ...styles.button, ...styles.downloadButton }} style={{ ...styles.button, ...styles.downloadButton }}
> >
Download Consolidated Table Download Consolidated Table
</button> </button>
<button <button
onClick={sendEmailsToAllTeachers} onClick={sendEmailsToAllTeachers}
style={{ ...styles.button, ...styles.emailButton }} style={{ ...styles.button, ...styles.emailButton }}
> >
Send Emails to All Teachers Send Emails to All Teachers
</button> </button>
</div> </div>
<div style={styles.tableContainer}> {/* Search Bar */}
{currentTeachers.map((teacher, index) => { <div style={{ padding: "10px", marginBottom: "20px" }}>
const teacherData = data.filter((row) => row.Name === teacher); <input
return ( type="text"
<div key={index} style={{ marginBottom: "20px" }}> value={searchQuery}
<div onChange={(e) => setSearchQuery(e.target.value)}
style={{ placeholder="Search for a faculty..."
display: "flex", style={{
justifyContent: "space-between", width: "100%",
alignItems: "center", padding: "10px",
cursor: "pointer", borderRadius: "5px",
padding: "10px", border: "1px solid #ccc",
borderRadius: "5px", fontSize: "16px",
backgroundColor: "#ffffff", }}
boxShadow: "0 2px 4px rgba(0,0,0,0.1)" />
}} </div>
onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
> <div style={styles.tableContainer}>
<h2 style={{ color: "black", margin: 0, fontSize: "1.5rem", }}>{teacher}'s Table</h2> {currentTeachers.map((teacher, index) => {
<div> const teacherData = data.filter((row) => row.Name === teacher);
<button return (
onClick={() => createExcelFile(teacherData, teacher)} <div key={index} style={{ marginBottom: "20px" }}>
style={{ ...styles.button, backgroundColor: "#007bff" }} <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 {teacher}'s Table
</button> </h2>
<button <div>
onClick={() => handleSendEmail(teacher, teacherData)} <button
style={{ ...styles.button, backgroundColor: "#6c757d" }} onClick={() => createExcelFile(teacherData, teacher)}
> style={{ ...styles.button, backgroundColor: "#007bff" }}
Send {teacher}'s XSL via Email >
</button> 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>
</div>
{expandedTeacher === teacher && ( {expandedTeacher === teacher && (
<table style={styles.table}> <table style={styles.table}>
<thead> <thead>
<tr> <tr>
<th style={styles.th}>Semester</th> <th style={styles.th}>Semester</th>
<th style={styles.th}>Course Code</th> <th style={styles.th}>Course Code</th>
<th style={styles.th}>Course Name</th> <th style={styles.th}>Course Name</th>
<th style={styles.th}>Exam Type</th> <th style={styles.th}>Exam Type</th>
<th style={styles.th}>Year</th> <th style={styles.th}>Year</th>
<th style={styles.th}>Marks</th> <th style={styles.th}>Marks</th>
<th style={styles.th}>Name</th> <th style={styles.th}>Name</th>
<th style={styles.th}>Affiliation/College</th> <th style={styles.th}>Affiliation/College</th>
<th style={styles.th}>Highest Qualification</th> <th style={styles.th}>Highest Qualification</th>
<th style={styles.th}>Career Experience</th> <th style={styles.th}>Career Experience</th>
<th style={styles.th}>Oral/Practical</th> <th style={styles.th}>Oral/Practical</th>
<th style={styles.th}>Assessment</th> <th style={styles.th}>Assessment</th>
<th style={styles.th}>Reassessment</th> <th style={styles.th}>Reassessment</th>
<th style={styles.th}>Paper Setting</th> <th style={styles.th}>Paper Setting</th>
<th style={styles.th}>Moderation</th> <th style={styles.th}>Moderation</th>
<th style={styles.th}>PwD Paper Setting</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>
</tr> </tr>
))} </thead>
</tbody> <tbody>
</table> {teacherData.map((row, idx) => (
)} <tr key={idx}>
</div> <td style={styles.td}>{row.semester}</td>
); <td style={styles.td}>{row.courseCode}</td>
})} <td style={styles.td}>{row.courseName}</td>
</div> <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 */} {/* Pagination controls */}
<div style={styles.paginationContainer}> <div style={styles.paginationContainer}>
<button <button
onClick={handlePrevPage} onClick={handlePrevPage}
disabled={currentPage === 1} disabled={currentPage === 1}
style={{ ...styles.paginationButton, backgroundColor: currentPage === 1 ? "#ccc" : "#007bff" }} style={{
> ...styles.paginationButton,
Previous backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
</button> }}
<span> >
Page {currentPage} of {totalPages} Previous
</span> </button>
<button <span>
onClick={handleNextPage} Page {currentPage} of {totalPages}
disabled={currentPage === totalPages} </span>
style={{ ...styles.paginationButton, backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff" }} <button
> onClick={handleNextPage}
Next disabled={currentPage === totalPages}
</button> style={{
...styles.paginationButton,
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
}}
>
Next
</button>
</div>
</div> </div>
</div>
</> </>
); );
}; };