forked from CSI-KJSCE/appointment_to_examiner
search bar
This commit is contained in:
@@ -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 (
|
||||||
|
|||||||
@@ -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,11 +195,9 @@ 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
|
||||||
@@ -214,6 +220,23 @@ const ConsolidatedTable = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</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}>
|
<div style={styles.tableContainer}>
|
||||||
{currentTeachers.map((teacher, index) => {
|
{currentTeachers.map((teacher, index) => {
|
||||||
const teacherData = data.filter((row) => row.Name === teacher);
|
const teacherData = data.filter((row) => row.Name === teacher);
|
||||||
@@ -228,11 +251,19 @@ const ConsolidatedTable = () => {
|
|||||||
padding: "10px",
|
padding: "10px",
|
||||||
borderRadius: "5px",
|
borderRadius: "5px",
|
||||||
backgroundColor: "#ffffff",
|
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>
|
<div>
|
||||||
<button
|
<button
|
||||||
onClick={() => createExcelFile(teacherData, teacher)}
|
onClick={() => createExcelFile(teacherData, teacher)}
|
||||||
@@ -242,7 +273,10 @@ const ConsolidatedTable = () => {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleSendEmail(teacher, teacherData)}
|
onClick={() => handleSendEmail(teacher, teacherData)}
|
||||||
style={{ ...styles.button, backgroundColor: "#6c757d" }}
|
style={{
|
||||||
|
...styles.button,
|
||||||
|
backgroundColor: "#6c757d",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Send {teacher}'s XSL via Email
|
Send {teacher}'s XSL via Email
|
||||||
</button>
|
</button>
|
||||||
@@ -305,7 +339,10 @@ const ConsolidatedTable = () => {
|
|||||||
<button
|
<button
|
||||||
onClick={handlePrevPage}
|
onClick={handlePrevPage}
|
||||||
disabled={currentPage === 1}
|
disabled={currentPage === 1}
|
||||||
style={{ ...styles.paginationButton, backgroundColor: currentPage === 1 ? "#ccc" : "#007bff" }}
|
style={{
|
||||||
|
...styles.paginationButton,
|
||||||
|
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Previous
|
Previous
|
||||||
</button>
|
</button>
|
||||||
@@ -315,7 +352,10 @@ const ConsolidatedTable = () => {
|
|||||||
<button
|
<button
|
||||||
onClick={handleNextPage}
|
onClick={handleNextPage}
|
||||||
disabled={currentPage === totalPages}
|
disabled={currentPage === totalPages}
|
||||||
style={{ ...styles.paginationButton, backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff" }}
|
style={{
|
||||||
|
...styles.paginationButton,
|
||||||
|
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Next
|
Next
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user