-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI Update, Courses and Classrooms Pages Addition (#39)
* Changed Ui, add courses and classrooms * Add classroom page --------- Co-authored-by: Dragodui <[email protected]>
- Loading branch information
1 parent
3f2c410
commit 8ccf38c
Showing
22 changed files
with
575 additions
and
315 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
...ersity/ClientApp/src/components/Layout.js → ...rsity/ClientApp/src/components/Layout.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import LoginMenu from "./api-authorization/LoginMenu.js"; | ||
| import '../styles/NavMenu.css'; | ||
| import authService from "./api-authorization/AuthorizeService"; | ||
| import {ADMINISTRATOR_ROLE} from "./api-authorization/Roles"; | ||
| import { useAppDispatch, useAppSelector } from '../store/store'; | ||
| import { setIsAdmin } from '../store/features/isAdminSlice'; | ||
|
|
||
|
|
||
| const NavMenu = () => { | ||
|
|
||
| const [collapsed, setCollapsed] = useState(false); | ||
| const [isAuthenticated, setIsAuthenticated] = useState(false); | ||
| const dispatch = useAppDispatch(); | ||
| const isAdmin = useAppSelector(state => state.isAdmin.isAdmin); | ||
|
|
||
| const authNavList = [ | ||
| { | ||
| to: "/change-password", | ||
| title: "Change password" | ||
| }, | ||
| ]; | ||
|
|
||
| const adminNavList = [ | ||
| { | ||
| to: "/users", | ||
| title: "Users" | ||
| }, | ||
| { | ||
| to: "/register-users", | ||
| title: "Register users" | ||
| }, | ||
| { | ||
| to: "/groups", | ||
| title: "Groups" | ||
| }, | ||
| { | ||
| to: "/courses", | ||
| title: "Courses" | ||
| }, | ||
| { | ||
| to: "/classrooms", | ||
| title: "Classrooms" | ||
| }, | ||
| ]; | ||
|
|
||
| const AuthNav = () => { | ||
| return ( | ||
| <ul> | ||
| <li onClick = {() => setCollapsed(false)}> | ||
| <Link className="text-sky-500 text-2xl font-medium" to="/">Home</Link> | ||
| </li> | ||
| { | ||
| authNavList.map(link => <li key={link.title} onClick = {() => setCollapsed(false)}><Link className="text-black text-2xl font-medium" to={link.to}>{link.title}</Link></li>) | ||
| } | ||
| </ul> | ||
| ) | ||
| }; | ||
| const AdminNav = () => { | ||
| return ( | ||
| <ul className =" flex flex-col justify-end gap-3"> | ||
| <li onClick = {() => setCollapsed(false)}> | ||
| <Link className="text-sky-500 text-2xl font-medium" to="/">Home</Link> | ||
| </li> | ||
| { | ||
| adminNavList.map(link => <li key={link.title} onClick = {() => setCollapsed(false)}><Link className="text-black text-2xl font-medium" to={link.to}>{link.title}</Link></li>) | ||
| } | ||
| </ul> | ||
| ) | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const checkAuthentication = async () => { | ||
| const isAuthenticated = await authService.isAuthenticated(); | ||
| setIsAuthenticated(isAuthenticated); | ||
| const isAdmin = await authService.isInRole(ADMINISTRATOR_ROLE); | ||
| dispatch(setIsAdmin(isAdmin)); | ||
| }; | ||
| checkAuthentication(); | ||
| const subscriptionId = authService.subscribe(checkAuthentication); | ||
|
|
||
| return () => { | ||
| authService.unsubscribe(subscriptionId); | ||
| }; | ||
| }, []); | ||
|
|
||
| const toggleNavbar = () => { | ||
| setCollapsed(!collapsed); | ||
| }; | ||
|
|
||
| return ( | ||
| <header className="py-3 shadow-md bg-white"> | ||
| <div className="container max-w-[1100px] flex items-center gap-4 justify-between"> | ||
| <Link className="text-2xl font-bold" to="/">EUniversity</Link> | ||
| <nav className={`shadow-lg flex flex-col justify-center px-4 bg-white w-[300px] h-full fixed transition-all top-0 duration-300 ${collapsed ? "right-0" : "right-[-100%]"}`}> | ||
| { | ||
| isAuthenticated | ||
| ? isAdmin | ||
| ? <AdminNav /> | ||
| : <AuthNav /> | ||
| : "" | ||
| } | ||
| </nav> | ||
| <div className="flex items-center gap-4"> | ||
| <LoginMenu /> | ||
| { | ||
| isAuthenticated | ||
| ? <div className="flex items-center justify-between w-10 h-6 flex-col cursor-pointer z-20 " onClick={toggleNavbar}> | ||
| <div className="w-full h-1 bg-black rounded-full"></div> | ||
| <div className="w-full h-1 bg-sky-500 rounded-full"></div> | ||
| <div className="w-full h-1 bg-black rounded-full"></div> | ||
| </div> | ||
| : "" | ||
| } | ||
| </div> | ||
| </div> | ||
| </header> | ||
| ); | ||
| } | ||
|
|
||
| export default NavMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import PaginatedList from './PaginatedList'; | ||
|
|
||
| const PageOfItems = ({ | ||
| title, | ||
| fetchFunction, | ||
| isLoading, | ||
| itemsPerPage, | ||
| setItemsPerPage, | ||
| totalItems, | ||
| tableHead, | ||
| tableBody, | ||
| additionalItems, | ||
| usersType | ||
| }) => { | ||
| return ( | ||
| <div className="students container max-w-[1100px] pt-10"> | ||
| <h1 className="students__title form__title"> | ||
| {title} | ||
| </h1> | ||
| {additionalItems} | ||
| <PaginatedList | ||
| itemsPerPage={itemsPerPage} | ||
| setItemsPerPage={setItemsPerPage} | ||
| isLoading={isLoading} | ||
| totalItems={totalItems} | ||
| fetchItems={fetchFunction} | ||
| tableHead={tableHead} | ||
| tableBody={tableBody} | ||
| usersType = {usersType} | ||
| /> | ||
| </div> | ||
|
|
||
| ); | ||
| }; | ||
|
|
||
| export default PageOfItems; |
Oops, something went wrong.