format code
This commit is contained in:
parent
42c0ef8569
commit
56f8aca796
6 changed files with 201 additions and 212 deletions
|
|
@ -6,7 +6,7 @@ export const CatchAllRoute = () => {
|
||||||
|
|
||||||
// Redirect to the root ("/") when the catch-all route is matched
|
// Redirect to the root ("/") when the catch-all route is matched
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
navigate('/');
|
navigate("/");
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export default function Header() {
|
||||||
return (
|
return (
|
||||||
<div className="header-arrangement">
|
<div className="header-arrangement">
|
||||||
<div className="header-start-display">
|
<div className="header-start-display">
|
||||||
<Link to="/">
|
<Link to="/">
|
||||||
<span className="ml-4 text-2xl">⛓️</span>
|
<span className="ml-4 text-2xl">⛓️</span>
|
||||||
</Link>
|
</Link>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
||||||
|
|
@ -47,14 +47,11 @@ function ApiInterceptor() {
|
||||||
navigate("/login");
|
navigate("/login");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if(!refreshToken && error?.config?.url?.includes(
|
|
||||||
"login"
|
|
||||||
) ){
|
|
||||||
return Promise.reject(error);
|
|
||||||
}
|
}
|
||||||
else{
|
|
||||||
|
if (!refreshToken && error?.config?.url?.includes("login")) {
|
||||||
|
return Promise.reject(error);
|
||||||
|
} else {
|
||||||
logout();
|
logout();
|
||||||
navigate("/login");
|
navigate("/login");
|
||||||
}
|
}
|
||||||
|
|
@ -63,7 +60,6 @@ function ApiInterceptor() {
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ import {
|
||||||
} from "../../types/components";
|
} from "../../types/components";
|
||||||
import { nodeIconsLucide } from "../../utils/styleUtils";
|
import { nodeIconsLucide } from "../../utils/styleUtils";
|
||||||
import BaseModal from "../baseModal";
|
import BaseModal from "../baseModal";
|
||||||
import InputComponent from "../../components/inputComponent";
|
|
||||||
|
|
||||||
export default function UserManagementModal({
|
export default function UserManagementModal({
|
||||||
title,
|
title,
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import {
|
||||||
TableRow,
|
TableRow,
|
||||||
} from "../../components/ui/table";
|
} from "../../components/ui/table";
|
||||||
import { alertContext } from "../../contexts/alertContext";
|
import { alertContext } from "../../contexts/alertContext";
|
||||||
|
import { AuthContext } from "../../contexts/authContext";
|
||||||
import {
|
import {
|
||||||
addUser,
|
addUser,
|
||||||
deleteUser,
|
deleteUser,
|
||||||
|
|
@ -23,7 +24,6 @@ import {
|
||||||
} from "../../controllers/API";
|
} from "../../controllers/API";
|
||||||
import ConfirmationModal from "../../modals/ConfirmationModal";
|
import ConfirmationModal from "../../modals/ConfirmationModal";
|
||||||
import UserManagementModal from "../../modals/UserManagementModal";
|
import UserManagementModal from "../../modals/UserManagementModal";
|
||||||
import { AuthContext } from "../../contexts/authContext";
|
|
||||||
|
|
||||||
export default function AdminPage() {
|
export default function AdminPage() {
|
||||||
const [inputValue, setInputValue] = useState("");
|
const [inputValue, setInputValue] = useState("");
|
||||||
|
|
@ -49,9 +49,9 @@ export default function AdminPage() {
|
||||||
setLoadingUsers(true);
|
setLoadingUsers(true);
|
||||||
getUsersPage(index, size)
|
getUsersPage(index, size)
|
||||||
.then((users) => {
|
.then((users) => {
|
||||||
setTotalRowsCount(users['total_count']);
|
setTotalRowsCount(users["total_count"]);
|
||||||
userList.current = users['users'];
|
userList.current = users["users"];
|
||||||
setFilterUserList(users['users']);
|
setFilterUserList(users["users"]);
|
||||||
setLoadingUsers(false);
|
setLoadingUsers(false);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
|
|
@ -140,214 +140,208 @@ export default function AdminPage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<>
|
<>
|
||||||
{
|
{userData && (
|
||||||
userData && (
|
|
||||||
|
|
||||||
|
|
||||||
<div className="main-page-panel">
|
<div className="main-page-panel">
|
||||||
<div className="m-auto flex h-full flex-row justify-center">
|
<div className="m-auto flex h-full flex-row justify-center">
|
||||||
<div className="basis-5/6">
|
<div className="basis-5/6">
|
||||||
<div className="m-auto flex h-full flex-col space-y-8 p-8 ">
|
<div className="m-auto flex h-full flex-col space-y-8 p-8 ">
|
||||||
<div className="flex items-center justify-between space-y-2">
|
<div className="flex items-center justify-between space-y-2">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold tracking-tight">
|
<h2 className="text-2xl font-bold tracking-tight">
|
||||||
Welcome back!
|
Welcome back!
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Here's a list of all users!
|
Here's a list of all users!
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{userList.current.length === 0 && !loadingUsers && (
|
{userList.current.length === 0 && !loadingUsers && (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h2>There's no users registered :)</h2>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h2>There's no users registered :)</h2>
|
<div className="flex flex-1 items-center space-x-2">
|
||||||
</div>
|
<Input
|
||||||
</>
|
value={inputValue}
|
||||||
)}
|
placeholder="Filter users..."
|
||||||
<>
|
className="h-8 w-[150px] lg:w-[250px]"
|
||||||
<div className="flex items-center justify-between">
|
onChange={(e) => handleFilterUsers(e.target.value)}
|
||||||
<div className="flex flex-1 items-center space-x-2">
|
/>
|
||||||
<Input
|
{inputValue.length > 0 && (
|
||||||
value={inputValue}
|
<Button
|
||||||
placeholder="Filter users..."
|
onClick={() => {
|
||||||
className="h-8 w-[150px] lg:w-[250px]"
|
setInputValue("");
|
||||||
onChange={(e) => handleFilterUsers(e.target.value)}
|
setFilterUserList(userList.current);
|
||||||
/>
|
}}
|
||||||
{inputValue.length > 0 && (
|
variant="ghost"
|
||||||
<Button
|
className="h-8 px-2 lg:px-3"
|
||||||
onClick={() => {
|
>
|
||||||
setInputValue("");
|
Reset
|
||||||
setFilterUserList(userList.current);
|
<X className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<UserManagementModal
|
||||||
|
title="New User"
|
||||||
|
titleHeader={"Add a new user"}
|
||||||
|
cancelText="Cancel"
|
||||||
|
confirmationText="Save"
|
||||||
|
icon={"UserPlus2"}
|
||||||
|
onConfirm={(index, user) => {
|
||||||
|
handleNewUser(user);
|
||||||
}}
|
}}
|
||||||
variant="ghost"
|
|
||||||
className="h-8 px-2 lg:px-3"
|
|
||||||
>
|
>
|
||||||
Reset
|
<Button>New User</Button>
|
||||||
<X className="ml-2 h-4 w-4" />
|
</UserManagementModal>
|
||||||
</Button>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
{loadingUsers && (
|
||||||
<UserManagementModal
|
<div>
|
||||||
title="New User"
|
<strong>Loading...</strong>
|
||||||
titleHeader={"Add a new user"}
|
</div>
|
||||||
cancelText="Cancel"
|
)}
|
||||||
confirmationText="Save"
|
<div
|
||||||
icon={"UserPlus2"}
|
className={
|
||||||
onConfirm={(index, user) => {
|
"max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
|
||||||
handleNewUser(user);
|
(loadingUsers ? " border-0" : "")
|
||||||
}}
|
}
|
||||||
>
|
>
|
||||||
<Button>New User</Button>
|
<Table className={"table-fixed bg-muted outline-1"}>
|
||||||
</UserManagementModal>
|
<TableHeader
|
||||||
</div>
|
className={
|
||||||
</div>
|
loadingUsers
|
||||||
{loadingUsers && (
|
? "hidden"
|
||||||
<div>
|
: "table-fixed bg-muted outline-1"
|
||||||
<strong>Loading...</strong>
|
}
|
||||||
</div>
|
>
|
||||||
)}
|
<TableRow>
|
||||||
<div
|
<TableHead className="h-10">Id</TableHead>
|
||||||
className={
|
<TableHead className="h-10">Username</TableHead>
|
||||||
"max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
|
<TableHead className="h-10">Disabled</TableHead>
|
||||||
(loadingUsers ? " border-0" : "")
|
<TableHead className="h-10">Superuser</TableHead>
|
||||||
}
|
<TableHead className="h-10">Created At</TableHead>
|
||||||
>
|
<TableHead className="h-10">Updated At</TableHead>
|
||||||
<Table className={"table-fixed bg-muted outline-1"}>
|
<TableHead className="h-10 w-[100px] text-right"></TableHead>
|
||||||
<TableHeader
|
</TableRow>
|
||||||
className={
|
</TableHeader>
|
||||||
loadingUsers
|
{!loadingUsers && (
|
||||||
? "hidden"
|
<TableBody>
|
||||||
: "table-fixed bg-muted outline-1"
|
{filterUserList.map((user, index) => (
|
||||||
}
|
<TableRow key={index}>
|
||||||
>
|
<TableCell className="truncate py-2 font-medium">
|
||||||
<TableRow>
|
<ShadTooltip content={user.id}>
|
||||||
<TableHead className="h-10">Id</TableHead>
|
<span className="cursor-default">
|
||||||
<TableHead className="h-10">Username</TableHead>
|
{user.id}
|
||||||
<TableHead className="h-10">Disabled</TableHead>
|
</span>
|
||||||
<TableHead className="h-10">Superuser</TableHead>
|
</ShadTooltip>
|
||||||
<TableHead className="h-10">Created At</TableHead>
|
</TableCell>
|
||||||
<TableHead className="h-10">Updated At</TableHead>
|
<TableCell className="truncate py-2">
|
||||||
<TableHead className="h-10 w-[100px] text-right"></TableHead>
|
<ShadTooltip content={user.username}>
|
||||||
</TableRow>
|
<span className="cursor-default">
|
||||||
</TableHeader>
|
{user.username}
|
||||||
{!loadingUsers && (
|
</span>
|
||||||
<TableBody>
|
</ShadTooltip>
|
||||||
{filterUserList.map((user, index) => (
|
</TableCell>
|
||||||
<TableRow key={index}>
|
<TableCell className="relative left-5 truncate py-2">
|
||||||
<TableCell className="truncate py-2 font-medium">
|
<Checkbox
|
||||||
<ShadTooltip content={user.id}>
|
id="is_disabled"
|
||||||
<span className="cursor-default">
|
checked={user.is_disabled}
|
||||||
{user.id}
|
/>
|
||||||
</span>
|
</TableCell>
|
||||||
</ShadTooltip>
|
<TableCell className="relative left-5 truncate py-2">
|
||||||
</TableCell>
|
<Checkbox
|
||||||
<TableCell className="truncate py-2">
|
id="is_superuser"
|
||||||
<ShadTooltip content={user.username}>
|
checked={user.is_superuser}
|
||||||
<span className="cursor-default">
|
/>
|
||||||
{user.username}
|
</TableCell>
|
||||||
</span>
|
<TableCell className="truncate py-2 ">
|
||||||
</ShadTooltip>
|
{
|
||||||
</TableCell>
|
new Date(user.create_at)
|
||||||
<TableCell className="relative left-5 truncate py-2">
|
.toISOString()
|
||||||
<Checkbox
|
.split("T")[0]
|
||||||
id="is_disabled"
|
}
|
||||||
checked={user.is_disabled}
|
</TableCell>
|
||||||
/>
|
<TableCell className="truncate py-2">
|
||||||
</TableCell>
|
{
|
||||||
<TableCell className="relative left-5 truncate py-2">
|
new Date(user.updated_at)
|
||||||
<Checkbox
|
.toISOString()
|
||||||
id="is_superuser"
|
.split("T")[0]
|
||||||
checked={user.is_superuser}
|
}
|
||||||
/>
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell className="flex w-[100px] py-2 text-right">
|
||||||
<TableCell className="truncate py-2 ">
|
<div className="flex">
|
||||||
{
|
<UserManagementModal
|
||||||
new Date(user.create_at)
|
title="Edit"
|
||||||
.toISOString()
|
titleHeader={`${user.id}`}
|
||||||
.split("T")[0]
|
cancelText="Cancel"
|
||||||
}
|
confirmationText="Edit"
|
||||||
</TableCell>
|
icon={"UserPlus2"}
|
||||||
<TableCell className="truncate py-2">
|
data={user}
|
||||||
{
|
index={index}
|
||||||
new Date(user.updated_at)
|
onConfirm={(index, editUser) => {
|
||||||
.toISOString()
|
handleEditUser(user.id, editUser);
|
||||||
.split("T")[0]
|
}}
|
||||||
}
|
>
|
||||||
</TableCell>
|
<ShadTooltip content="Edit" side="top">
|
||||||
<TableCell className="flex w-[100px] py-2 text-right">
|
<IconComponent
|
||||||
<div className="flex">
|
name="Pencil"
|
||||||
<UserManagementModal
|
className="h-4 w-4 cursor-pointer"
|
||||||
title="Edit"
|
/>
|
||||||
titleHeader={`${user.id}`}
|
</ShadTooltip>
|
||||||
cancelText="Cancel"
|
</UserManagementModal>
|
||||||
confirmationText="Edit"
|
|
||||||
icon={"UserPlus2"}
|
|
||||||
data={user}
|
|
||||||
index={index}
|
|
||||||
onConfirm={(index, editUser) => {
|
|
||||||
handleEditUser(user.id, editUser);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ShadTooltip content="Edit" side="top">
|
|
||||||
<IconComponent
|
|
||||||
name="Pencil"
|
|
||||||
className="h-4 w-4 cursor-pointer"
|
|
||||||
/>
|
|
||||||
</ShadTooltip>
|
|
||||||
</UserManagementModal>
|
|
||||||
|
|
||||||
<ConfirmationModal
|
<ConfirmationModal
|
||||||
title="Delete"
|
title="Delete"
|
||||||
titleHeader="Delete User"
|
titleHeader="Delete User"
|
||||||
modalContentTitle="Attention!"
|
modalContentTitle="Attention!"
|
||||||
modalContent="Are you sure you want to delete this user? This action cannot be undone."
|
modalContent="Are you sure you want to delete this user? This action cannot be undone."
|
||||||
cancelText="Cancel"
|
cancelText="Cancel"
|
||||||
confirmationText="Delete"
|
confirmationText="Delete"
|
||||||
icon={"UserMinus2"}
|
icon={"UserMinus2"}
|
||||||
data={user}
|
data={user}
|
||||||
index={index}
|
index={index}
|
||||||
onConfirm={(index, user) => {
|
onConfirm={(index, user) => {
|
||||||
handleDeleteUser(user);
|
handleDeleteUser(user);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ShadTooltip content="Delete" side="top">
|
<ShadTooltip content="Delete" side="top">
|
||||||
<IconComponent
|
<IconComponent
|
||||||
name="Trash2"
|
name="Trash2"
|
||||||
className="ml-2 h-4 w-4 cursor-pointer"
|
className="ml-2 h-4 w-4 cursor-pointer"
|
||||||
/>
|
/>
|
||||||
</ShadTooltip>
|
</ShadTooltip>
|
||||||
</ConfirmationModal>
|
</ConfirmationModal>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
)}
|
)}
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<PaginatorComponent
|
<PaginatorComponent
|
||||||
pageIndex={index}
|
pageIndex={index}
|
||||||
pageSize={size}
|
pageSize={size}
|
||||||
totalRowsCount={filterUserList.length}
|
totalRowsCount={filterUserList.length}
|
||||||
paginate={(pageIndex, pageSize) => {
|
paginate={(pageIndex, pageSize) => {
|
||||||
handleChangePagination(pageSize, pageIndex);
|
handleChangePagination(pageSize, pageIndex);
|
||||||
}}
|
}}
|
||||||
></PaginatorComponent>
|
></PaginatorComponent>
|
||||||
</>
|
</>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
import { Route, Routes } from "react-router-dom";
|
import { Route, Routes } from "react-router-dom";
|
||||||
|
import { ProtectedAdminRoute } from "./components/authAdminGuard";
|
||||||
|
import { ProtectedRoute } from "./components/authGuard";
|
||||||
import { ProtectedLoginRoute } from "./components/authLoginGuard";
|
import { ProtectedLoginRoute } from "./components/authLoginGuard";
|
||||||
|
import { CatchAllRoute } from "./components/catchAllRoutes";
|
||||||
import AdminPage from "./pages/AdminPage";
|
import AdminPage from "./pages/AdminPage";
|
||||||
import LoginAdminPage from "./pages/AdminPage/LoginPage";
|
import LoginAdminPage from "./pages/AdminPage/LoginPage";
|
||||||
import CommunityPage from "./pages/CommunityPage";
|
import CommunityPage from "./pages/CommunityPage";
|
||||||
|
|
@ -8,9 +11,6 @@ import HomePage from "./pages/MainPage";
|
||||||
import DeleteAccountPage from "./pages/deleteAccountPage";
|
import DeleteAccountPage from "./pages/deleteAccountPage";
|
||||||
import LoginPage from "./pages/loginPage";
|
import LoginPage from "./pages/loginPage";
|
||||||
import SignUp from "./pages/signUpPage";
|
import SignUp from "./pages/signUpPage";
|
||||||
import { CatchAllRoute } from "./components/catchAllRoutes";
|
|
||||||
import { ProtectedRoute } from "./components/authGuard";
|
|
||||||
import { ProtectedAdminRoute } from "./components/authAdminGuard";
|
|
||||||
|
|
||||||
const Router = () => {
|
const Router = () => {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue