search bar

client/src/App.js

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

client/src/Pages/ConsolidatedTable.jsx

@@ -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>
     </>
   );
 };