pages updated

venom-2 · Aug 5, 2024 · b42bc2f · b42bc2f
1 parent 3c48723
commit b42bc2f
Show file tree

Hide file tree

Showing 14 changed files with 614 additions and 165 deletions.
diff --git a/Frontend/DMS-IMS/index.html b/Frontend/DMS-IMS/index.html
@@ -16,6 +16,7 @@
 
   <script type="module" src="/src/main.jsx"></script>
   <!-- Bootstrap links -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
     integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
     crossorigin="anonymous"></script>

diff --git a/Frontend/DMS-IMS/src/App.jsx b/Frontend/DMS-IMS/src/App.jsx
@@ -97,6 +97,7 @@ function App() {
                 <Route path="assign-faculty" element={<DashboardHOD />} />
                 <Route path="add-faculty" element={<DashboardHOD />} />
                 <Route path="home" element={<DashboardHOD />} />
+                <Route path="add-subject" element={<DashboardHOD />} />
               </Route>
 
               <Route path="/dashboardfaculty" element={<ProtectedWrapper expectedRole="faculty" />}>

diff --git a/Frontend/DMS-IMS/src/Components/HodDashboard_components/HodDashboard_addFaculty.jsx b/Frontend/DMS-IMS/src/Components/HodDashboard_components/HodDashboard_addFaculty.jsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react'
-import './HodDashboard_addFaculty.css'
-import { jwtDecode } from 'jwt-decode';
+import React, { useEffect, useState } from 'react';
+import './HodDashboard_addFaculty.css';
+import {jwtDecode} from 'jwt-decode';
 import { toast } from 'react-hot-toast';
+import Modal from '../Modal';
 
 const HodDashboard_addFaculty = () => {
-
   const [faculties, setFaculties] = useState([]);
   const [dept, setDept] = useState("");
   const [faculty, setFaculty] = useState({
@@ -13,15 +13,17 @@ const HodDashboard_addFaculty = () => {
     email: "",
     password: "",
   });
+  const [showModal, setShowModal] = useState(false);
+  const [selectedFacultyId, setSelectedFacultyId] = useState(null);
 
   const handleChange = (e) => {
     setFaculty({ ...faculty, [e.target.name]: e.target.value });
-  }
+  };
 
   useEffect(() => {
     const payload = jwtDecode(localStorage.getItem('authToken'));
     setDept(payload.user.department);
-    console.log(payload.user.department);
+    fetchFaculties(payload.user.department); // Fetch faculties when department is set
   }, []);
 
   const handleSubmit = async (e) => {
@@ -36,111 +38,147 @@ const HodDashboard_addFaculty = () => {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'authToken': `${localStorage.getItem('authToken')}`
+          'authToken': `${localStorage.getItem('authToken')}`,
         },
-        body: JSON.stringify(faculty)
+        body: JSON.stringify(faculty),
       });
       const data = await response.json();
-      console.log(data);
       if (data.success) {
         toast.success('Faculty added successfully');
         setFaculties([...faculties, faculty]);
         setFaculty({
           name: "",
           role: "faculty",
           email: "",
-          password: ""
+          password: "",
         });
-      }
-      else {
+        fetchFaculties(dept); // Refetch faculties after adding a new one
+      } else {
         toast.error(data.message);
       }
-    }
-    catch (err) {
+    } catch (err) {
       console.log(err);
     }
-  }
-
+  };
 
-useEffect(() => {
-  const arr = [
-    { name: 'John Doe', department: 'Computer Science', email: '[email protected]' },
-    { name: 'Jane Doe', department: 'Electronics', email: '[email protected]' },
-    { name: 'John Doe', department: 'Computer Science', email: '[email protected]' },
-    { name: 'John Doe', department: 'Computer Science', email: '[email protected]' },
-    { name: 'John Doe', department: 'Computer Science', email: '[email protected]' },
-    { name: 'John Doe', department: 'Computer Science', email: '[email protected]' }
-  ];
-
-  setFaculties(arr);
-}, []);
+  const fetchFaculties = async (department) => {
+    try {
+      const response = await fetch('https://dms-backend-eight.vercel.app/fetch/faculty', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'authToken': `${localStorage.getItem('authToken')}`,
+        },
+        body: JSON.stringify({ department }),
+      });
+      const data = await response.json();
+      setFaculties(data.faculty);
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
+  const handleRemove = async () => {
+    try {
+      const response = await fetch(`https://dms-backend-eight.vercel.app/delete/user/${selectedFacultyId}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          'authToken': `${localStorage.getItem('authToken')}`,
+        },
+      });
+      const data = await response.json();
+      if (data.success) {
+        toast.success('Faculty removed successfully');
+        fetchFaculties(dept); // Refetch faculties after removing one
+      } else {
+        toast.error(data.message);
+      }
+    } catch (err) {
+      console.log(err);
+    } finally {
+      setShowModal(false);
+      setSelectedFacultyId(null);
+    }
+  };
 
+  const openModal = (facultyId) => {
+    setSelectedFacultyId(facultyId);
+    setShowModal(true);
+  };
 
-return (
-  <div className='add-faculty-container d-flex flex-column align-items-center'>
-    <div className="heading-faculty h-20 d-flex justify-content-center mt-2">
-      <h2>Add Faculty</h2>
-    </div>
-    <div className="form-faculty d-flex justify-content-center mt-2">
-      <form className="d-flex flex-column gap-3">
-        <div className="first-row d-flex gap-5 flex-wrap">
-          <div className="name d-flex flex-column flex-fill">
-            <label htmlFor="name">Name</label>
-            <input className='form-control' onChange={handleChange} value={faculty.name} type="text" id="name" name="name" placeholder="Enter name" required />
+  return (
+    <div className='add-faculty-container d-flex flex-column align-items-center'>
+      <div className="heading-faculty h-20 d-flex justify-content-center mt-2">
+        <h2>Add Faculty</h2>
+      </div>
+      <div className="form-faculty d-flex justify-content-center mt-2">
+        <form className="d-flex flex-column gap-3">
+          <div className="first-row d-flex gap-5 flex-wrap">
+            <div className="name d-flex flex-column col md-6 ">
+              <label htmlFor="name">Name</label>
+              <input className='form-control' onChange={handleChange} value={faculty.name} type="text" id="name" name="name" placeholder="Enter name" required />
+            </div>
+            <div className="department d-flex flex-column col md-6">
+              <label htmlFor="department">Department</label>
+              <input className='form-control' type="text" value={dept} id="department" name="department" readOnly />
+            </div>
           </div>
-          <div className="department d-flex flex-column flex-fill">
-            <label htmlFor="department">Department</label>
-            <input className='form-control' type="text" value={dept} id="department" name="department" required />
+          <div className="email d-flex flex-column flex-wrap">
+            <label htmlFor="email">Email</label>
+            <input className='form-control' type="email" onChange={handleChange} value={faculty.email} id="email" name="email" placeholder="Enter email" required />
           </div>
-        </div>
-        <div className="email d-flex flex-column flex-wrap">
-          <label htmlFor="email">Email</label>
-          <input className='form-control' type="email" onChange={handleChange} value={faculty.email} id="email" name="email" placeholder="Enter email" required />
-        </div>
-        <div className="third-row d-flex gap-5 flex-wrap">
-          <div className="password d-flex flex-column flex-fill">
-            <label htmlFor="password">Password</label>
-            <input className='form-control' type="password" onChange={handleChange} value={faculty.password} id="password" name="password" placeholder="Enter password" required />
+          <div className="third-row d-flex gap-5 flex-wrap">
+            <div className="password d-flex flex-column col md-6">
+              <label htmlFor="password">Password</label>
+              <input className='form-control' type="password" onChange={handleChange} value={faculty.password} id="password" name="password" placeholder="Enter password" required />
+            </div>
+            <div className="confirm-password d-flex flex-column col md-6">
+              <label htmlFor="confirm-password">Confirm Password</label>
+              <input className='form-control' type="password" id="confirm-password" name="confirmPassword" placeholder="Confirm password" required />
+            </div>
           </div>
-          <div className="confirm-password d-flex flex-column flex-fill">
-            <label htmlFor="confirm-password">Confirm Password</label>
-            <input className='form-control' type="password" id="confirm-password" name="confirmPassword" placeholder="Confirm password" required />
+          <div className="submit d-flex justify-content-center">
+            <input className='submit-btn' type="submit" onClick={handleSubmit} value="Add Faculty" />
           </div>
-        </div>
-        <div className="submit d-flex justify-content-center">
-          <input className='submit-btn' type="submit" onClick={handleSubmit} value="Add Faculty" />
-        </div>
-      </form>
-    </div>
-    <div className="faculty-table mt-2">
-      <table className="table table-striped table-hover">
-        <thead>
-          <tr>
-            <th scope="col">Sr. No.</th>
-            <th scope="col">Name</th>
-            <th scope="col">Department</th>
-            <th scope="col">Email</th>
-            <th scope="col">Edit</th>
-            <th scope="col">Remove</th>
-          </tr>
-        </thead>
-        <tbody>
-          {faculties.map((faculty, index) => (
-            <tr key={index}>
-              <th scope="row">{index + 1}</th>
-              <td>{faculty.name}</td>
-              <td>{faculty.department}</td>
-              <td>{faculty.email}</td>
-              <td><button className='btn btn-primary'>Edit</button></td>
-              <td><button className='btn btn-danger'>Remove</button></td>
+        </form>
+      </div>
+      <div className="faculty-table mt-2">
+        <table className="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th scope="col">Sr. No.</th>
+              <th scope="col">Name</th>
+              <th scope="col">Department</th>
+              <th scope="col">Email</th>
+              <th scope="col">Edit</th>
+              <th scope="col">Remove</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {faculties.map((faculty, index) => (
+              <tr key={index}>
+                <th scope="row">{index + 1}</th>
+                <td>{faculty.name}</td>
+                <td>{faculty.department}</td>
+                <td>{faculty.email}</td>
+                <td><button className='btn btn-primary'>Edit</button></td>
+                <td><button className='btn btn-danger' onClick={() => openModal(faculty._id)}>Remove</button></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {showModal && (
+        <Modal 
+          onClose={() => setShowModal(false)}
+          onConfirm={handleRemove}
+          userId = {faculty._id}
+          body={`Are you sure you want to remove this faculty member?`}
+        />
+      )}
     </div>
-  </div>
-)
-}
+  );
+};
 
-export default HodDashboard_addFaculty
+export default HodDashboard_addFaculty;
diff --git a/Frontend/DMS-IMS/src/Components/HodDashboard_components/HodDashboard_addStudent.jsx b/Frontend/DMS-IMS/src/Components/HodDashboard_components/HodDashboard_addStudent.jsx
@@ -106,11 +106,11 @@ const HodDashboard_addStudent = () => {
       <div className="form-faculty d-flex justify-content-center mt-2">
         <form className="d-flex flex-column gap-3">
           <div className="first-row d-flex gap-5 flex-wrap">
-            <div className="name d-flex flex-column ">
+            <div className="name d-flex flex-column col md-6">
               <label htmlFor="name">Name</label>
               <input className='form-control' onChange={handleChange} value={students.name} type="text" id="name" name="name" placeholder="Enter name" required />
             </div>
-            <div className="roll-no d-flex flex-column flex-fill">
+            <div className="roll-no d-flex flex-column col md-6">
               <label htmlFor="rollNumber">Roll No</label>
               <input className='form-control' onChange={handleChange} value={students.rollNumber} type="text" id="rollNumber" name="rollNumber" placeholder="Enter roll no" required />
             </div>
@@ -120,7 +120,7 @@ const HodDashboard_addStudent = () => {
             <input className='form-control' type="email" onChange={handleChange} value={students.email} id="email" name="email" placeholder="Enter email" required />
           </div>
           <div className="third-row d-flex gap-5 flex-wrap">
-            <div className="year d-flex flex-column flex-fill">
+            <div className="year d-flex flex-column col md-6">
               <label htmlFor="year">Year</label>
               <select className='form-control' id="year" name="year" onChange={handleChange} value={students.year} required>
                 <option value="" disabled>Select year</option>
@@ -130,7 +130,7 @@ const HodDashboard_addStudent = () => {
                 <option value="4th year">4th year</option>
               </select>
             </div>
-            <div className="section d-flex flex-column flex-fill">
+            <div className="section d-flex flex-column col md-6">
               <label htmlFor="section">Section</label>
               <select className='form-control' id="section" name="section" onChange={handleChange} value={students.section} required>
                 <option value="" disabled>Select section</option>