admin dashboard student and teacher info added

kazirafi71 · May 7, 2021 · 678f0f9 · 678f0f9
1 parent 73ce7f4
commit 678f0f9
Show file tree

Hide file tree

Showing 19 changed files with 607 additions and 123 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -23,6 +23,8 @@ import StudentRoute from "./components/PrivateRoute/StudentRoute";
 import TeacherRoute from "./components/PrivateRoute/TeacherRoute";
 import AdminRoute from "./components/PrivateRoute/AdminRoute";
 import AdminCourseInfo from "./pages/Admin/Course/AdminCourseInfo";
+import StudentInfo from "./pages/Admin/Student/StudentInfo";
+import TeacherInfo from "./pages/Admin/Teacher/TeacherInfo";
 
 const Routing = () => {
   const history = useHistory();
@@ -50,6 +52,12 @@ const Routing = () => {
       <AdminRoute exact path="/admin/course-info">
         <AdminCourseInfo />
       </AdminRoute>
+      <AdminRoute exact path="/admin/student-info">
+        <StudentInfo />
+      </AdminRoute>
+      <AdminRoute exact path="/admin/teacher-info">
+        <TeacherInfo />
+      </AdminRoute>
       <StudentRoute exact path="/messages">
         <Messages />
       </StudentRoute>

diff --git a/client/src/components/Header/Header.css b/client/src/components/Header/Header.css
@@ -13,6 +13,10 @@
 
 }
 
+.admin__toggle__menu{
+    display: none;
+}
+
 .left__header>a{
     display: flex;
     align-items: center;
@@ -74,6 +78,9 @@
         display: none;
 
     }
+    .admin__toggle__menu{
+        display: block;
+    }
     .logout__button{
         display: block;
     }

diff --git a/client/src/components/Header/Header.js b/client/src/components/Header/Header.js
@@ -16,6 +16,10 @@ const Header = () => {
   const dispatch = useDispatch();
   const [toggle, setToggle] = useState(false);
   const user = JSON.parse(localStorage.getItem("user"));
+  const toggleClose=()=>{
+    setToggle(false)
+
+  }
   return (
     <div className="header">
       <div className="left__header">
@@ -36,33 +40,45 @@ const Header = () => {
           <ul>
             {
               user.role==="Teacher" && <li>
-              <NavLink to="/teacher-dashboard">Dashboard</NavLink>
+              <NavLink onClick={toggleClose} to="/teacher-dashboard">Dashboard</NavLink>
             </li>
             }
             {
-              user.role==="Admin" && <li>
-              <NavLink to="/admin-dashboard">Dashboard</NavLink>
+              user.role==="Admin" && <> <li >
+              <NavLink onClick={toggleClose} to="/admin-dashboard">Dashboard</NavLink>
             </li>
+            <li className="admin__toggle__menu">
+              <NavLink onClick={toggleClose} to="/admin/course-info">Course-Info</NavLink>
+            </li>
+            <li className="admin__toggle__menu">
+              <NavLink onClick={toggleClose} to="/admin/student-info">Student-Info</NavLink>
+            </li>
+            <li className="admin__toggle__menu">
+              <NavLink onClick={toggleClose} to="/admin/teacher-info">Teacher-Info</NavLink>
+            </li>
+
+            </>
             }
             {
-              user.role==="Student" && <li>
-              <NavLink to="/">Dashboard</NavLink>
+              user.role==="Student" &&<><li>
+              <NavLink onClick={toggleClose} to="/">Dashboard</NavLink>
             </li>
-            }
-
             <li>
-              <Link to="/profile">Profile</Link>
+              <NavLink onClick={toggleClose} to="/ucam">UCAM</NavLink>
             </li>
+
             <li>
-              <NavLink to="/all-courses">All Courses</NavLink>
-            </li>
+              <NavLink onClick={toggleClose} to="/library">LIBRARY</NavLink>
+            </li> </> 
+            }
+
             <li>
-              <NavLink to="/ucam">UCAM</NavLink>
+              <Link onClick={toggleClose} to="/profile">Profile</Link>
             </li>
-
             <li>
-              <NavLink to="/library">LIBRARY</NavLink>
+              <NavLink onClick={toggleClose} to="/all-courses">All Courses</NavLink>
             </li>
+
 
             <li className="logout__button">
               <Button

diff --git a/client/src/components/Sidebar/Sidebar.js b/client/src/components/Sidebar/Sidebar.js
@@ -11,9 +11,10 @@ const Sidebar = ({ title, link, Icon ,admin }) => {
   return (
     <div className="sidebar__dashboard__row">
       {title === "Logout" ? (
-        <div className='d-flex' >
+        <div className='d-flex align-items-center' >
           <Icon style={{ color: "gray", marginRight:"10px"}} />
           <Button
+          style={{ color: "gray"}}
             onClick={() => {
               localStorage.clear("user");
               localStorage.clear("auth_token");

diff --git a/client/src/pages/Admin/AdminDashboard/MainSidebar/MainSidebar.js b/client/src/pages/Admin/AdminDashboard/MainSidebar/MainSidebar.js
@@ -1,15 +1,19 @@
-import React from 'react';
-import SidebarAdmin from '../SidebarAdmin/SidebarAdmin';
-import Styles from './MainSidebar.module.css'
+import { Paper } from "@material-ui/core";
+import React from "react";
+import SidebarAdmin from "../SidebarAdmin/SidebarAdmin";
+import Styles from "./MainSidebar.module.css";
 
 const MainSidebar = () => {
-    return (
-        <div className={Styles.sideBar}>
-            <div className={Styles.adminSidebar}>
-         <SidebarAdmin/>
-          </div>
-        </div>
-    );
+  return (
+    <div className={Styles.sideBar}>
+      <div className={Styles.adminSidebar}>
+          <Paper className="py-5 px-4 h-100 shadow ">
+          <SidebarAdmin />
+          </Paper>
+
+      </div>
+    </div>
+  );
 };
 
-export default MainSidebar;
+export default MainSidebar;
diff --git a/client/src/pages/Admin/AdminDashboard/MainSidebar/MainSidebar.module.css b/client/src/pages/Admin/AdminDashboard/MainSidebar/MainSidebar.module.css
@@ -1,11 +1,12 @@
 .adminSidebar {
-    box-shadow: 0px 0px 10px 2px rgba(173, 216, 230, 0.425);
+
     position: fixed;
     top: 80px;
     z-index: 100;
-    background-color: white;
+
     height: 100vh;
-    padding-right: 100px;
+
+
 
   }
   .sideBar{
@@ -15,7 +16,7 @@
   @media screen and (max-width: 768px) {
     .adminSidebar {
 
-      padding-right: 0px;
+      padding: 0px;
 
     }
   }
diff --git a/client/src/pages/Admin/AdminDashboard/SidebarAdmin/SidebarAdmin.js b/client/src/pages/Admin/AdminDashboard/SidebarAdmin/SidebarAdmin.js
@@ -1,17 +1,33 @@
-import React from 'react';
-import Styles from './SidebarAdmin.module.css'
-import Sidebar  from '../../../../components/Sidebar/Sidebar'
-import LocalLibraryIcon from '@material-ui/icons/LocalLibrary';
-import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
+import React from "react";
+import Styles from "./SidebarAdmin.module.css";
+import Sidebar from "../../../../components/Sidebar/Sidebar";
+import LocalLibraryIcon from "@material-ui/icons/LocalLibrary";
+import SupervisorAccountIcon from "@material-ui/icons/SupervisorAccount";
+import ExitToAppIcon from "@material-ui/icons/ExitToApp";
+import DashboardIcon from "@material-ui/icons/Dashboard";
 
 const SidebarAdmin = () => {
-    return (
-        <div className={Styles.sidebarAdmin}>
-            <Sidebar  title="Course" link="/admin/course-info" Icon={LocalLibraryIcon}/>
-            <Sidebar  title="Student" link="/admin/student-info" Icon={LocalLibraryIcon}/>
-            <Sidebar  title="Teacher" link="/admin/teacher-info" Icon={LocalLibraryIcon}/>
-        </div>
-    );
+  return (
+    <div className={Styles.sidebarAdmin}>
+      <Sidebar title="Dashboard" link="/admin-dashboard" Icon={DashboardIcon} />
+      <Sidebar
+        title="Course"
+        link="/admin/course-info"
+        Icon={LocalLibraryIcon}
+      />
+      <Sidebar
+        title="Student"
+        link="/admin/student-info"
+        Icon={LocalLibraryIcon}
+      />
+      <Sidebar
+        title="Teacher"
+        link="/admin/teacher-info"
+        Icon={LocalLibraryIcon}
+      />
+      <Sidebar title="Logout" link="/admin/teacher-info" Icon={ExitToAppIcon} />
+    </div>
+  );
 };
 
-export default SidebarAdmin;
+export default SidebarAdmin;
diff --git a/client/src/pages/Admin/Course/AddCourse/AddCourse.js b/client/src/pages/Admin/Course/AddCourse/AddCourse.js
@@ -5,7 +5,10 @@ import ImportContactsIcon from "@material-ui/icons/ImportContacts";
 import NoteAddIcon from '@material-ui/icons/NoteAdd';
 import AddCourseModal from "./AddCourseModal/AddCourseModal";
 
-const AddCourse = () => {
+const AddCourse = ({setCourse,course}) => {
+  const showCourses=()=>{
+    setCourse(!course)
+  }
   return (
     <>
       <div className={Styles.child__div}>
@@ -18,13 +21,13 @@ const AddCourse = () => {
             <AddCourseModal/>
           </div>
         </Paper>
-        <Paper className='p-3 px-5 rounded shadow my-3'>
+        <Paper  className='p-3 px-5 rounded shadow my-3'>
           <IconButton style={{ backgroundColor: "green", textAlign: "center" }}>
             <ImportContactsIcon className={Styles.icon__style} />
           </IconButton>
 
           <div className="text-center my-3">
-            <Button variant='contained' color='primary' className="text-center">View Course</Button>
+            <Button onClick={showCourses} variant='contained' color='primary' className="text-center">View Course</Button>
           </div>
         </Paper>