search bar

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

View File

@@ -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 (

View File

@@ -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,7 +141,7 @@ const ConsolidatedTable = () => {
};
const bulkDownload = () => {
uniqueTeachers.forEach((teacher) => {
filteredTeachers.forEach((teacher) => {
const teacherData = data.filter((row) => row.Name === teacher);
createExcelFile(teacherData, teacher);
});
@@ -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
}
@@ -189,9 +197,7 @@ const ConsolidatedTable = () => {
<>
<Navbar />
<div style={styles.main}>
<h1 style={styles.header}>
Faculty Tables with Download Options
</h1>
<h1 style={styles.header}>Faculty Tables with Download Options</h1>
<div style={styles.buttonRow}>
<button
@@ -214,6 +220,23 @@ const ConsolidatedTable = () => {
</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);
@@ -228,11 +251,19 @@ const ConsolidatedTable = () => {
padding: "10px",
borderRadius: "5px",
backgroundColor: "#ffffff",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
}}
onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
onClick={() =>
setExpandedTeacher(
expandedTeacher === teacher ? null : teacher
)
}
>
<h2 style={{ color: "black", margin: 0, fontSize: "1.5rem", }}>{teacher}'s Table</h2>
<h2
style={{ color: "black", margin: 0, fontSize: "1.5rem" }}
>
{teacher}'s Table
</h2>
<div>
<button
onClick={() => createExcelFile(teacherData, teacher)}
@@ -242,7 +273,10 @@ const ConsolidatedTable = () => {
</button>
<button
onClick={() => handleSendEmail(teacher, teacherData)}
style={{ ...styles.button, backgroundColor: "#6c757d" }}
style={{
...styles.button,
backgroundColor: "#6c757d",
}}
>
Send {teacher}'s XSL via Email
</button>
@@ -305,7 +339,10 @@ const ConsolidatedTable = () => {
<button
onClick={handlePrevPage}
disabled={currentPage === 1}
style={{ ...styles.paginationButton, backgroundColor: currentPage === 1 ? "#ccc" : "#007bff" }}
style={{
...styles.paginationButton,
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
}}
>
Previous
</button>
@@ -315,7 +352,10 @@ const ConsolidatedTable = () => {
<button
onClick={handleNextPage}
disabled={currentPage === totalPages}
style={{ ...styles.paginationButton, backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff" }}
style={{
...styles.paginationButton,
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
}}
>
Next
</button>