150 lines
3.1 KiB
TypeScript
150 lines
3.1 KiB
TypeScript
import { apiCall } from "@/lib";
|
|
import { User } from "@/Zustand";
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableColumn,
|
|
TableHeader,
|
|
TableRow,
|
|
Tooltip,
|
|
} from "@nextui-org/react";
|
|
import { useAsyncList } from "@react-stately/data";
|
|
import { FormEvent, useState } from "react";
|
|
import AddUser from "./AddUser";
|
|
import { Edit } from "@carbon/icons-react";
|
|
import EditUser from "./EditUser";
|
|
|
|
export default function Users() {
|
|
const [showAddUser, setShowAddUser] = useState(false);
|
|
const [editUser, setEditUser] = useState<User | undefined>();
|
|
|
|
const users = useAsyncList<User>({
|
|
async load() {
|
|
const result = await apiCall("GET", "users");
|
|
|
|
if (result.ok) {
|
|
const users = (await result.json()) as User[];
|
|
|
|
return {
|
|
items: users,
|
|
};
|
|
} else {
|
|
return {
|
|
items: [],
|
|
};
|
|
}
|
|
},
|
|
async sort({ items, sortDescriptor }) {
|
|
return {
|
|
items: items.sort((a, b) => {
|
|
let cmp = 0;
|
|
|
|
switch (sortDescriptor.column) {
|
|
case "admin":
|
|
if (a.admin && !b.admin) {
|
|
cmp = -1;
|
|
} else if (!a.admin && b.admin) {
|
|
cmp = 1;
|
|
}
|
|
break;
|
|
case "userName":
|
|
cmp = a.userName.localeCompare(b.userName);
|
|
}
|
|
|
|
if (sortDescriptor.direction === "descending") {
|
|
cmp *= -1;
|
|
}
|
|
|
|
return cmp;
|
|
}),
|
|
};
|
|
},
|
|
});
|
|
|
|
// send an addUser request to the backend then reload the table
|
|
async function addUser(e: FormEvent<HTMLFormElement>) {
|
|
const data = Object.fromEntries(new FormData(e.currentTarget));
|
|
|
|
const result = await apiCall("POST", "users", undefined, {
|
|
...data,
|
|
admin: data.admin === "admin",
|
|
});
|
|
|
|
if (result.ok) {
|
|
users.reload();
|
|
}
|
|
}
|
|
|
|
// content above the user-tabel
|
|
const topContent = (
|
|
<>
|
|
<Button onPress={() => setShowAddUser(true)}>Add User</Button>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<Table
|
|
aria-label="Table with all users"
|
|
shadow="none"
|
|
isHeaderSticky
|
|
topContent={topContent}
|
|
sortDescriptor={users.sortDescriptor}
|
|
onSortChange={users.sort}
|
|
>
|
|
<TableHeader>
|
|
<TableColumn allowsSorting key="userName">
|
|
Username
|
|
</TableColumn>
|
|
<TableColumn allowsSorting key="admin">
|
|
Admin
|
|
</TableColumn>
|
|
<TableColumn key="edit">Edit</TableColumn>
|
|
</TableHeader>
|
|
<TableBody items={users.items}>
|
|
{(user) => (
|
|
<TableRow key={user.userName}>
|
|
<TableCell>{user.userName}</TableCell>
|
|
<TableCell>
|
|
<Checkbox isSelected={user.admin} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
isIconOnly
|
|
variant="light"
|
|
size="sm"
|
|
onPress={() => setEditUser(user)}
|
|
>
|
|
<Tooltip content="Edit event">
|
|
<Edit />
|
|
</Tooltip>
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
<AddUser
|
|
isOpen={showAddUser}
|
|
onOpenChange={setShowAddUser}
|
|
onSubmit={(e) => void addUser(e)}
|
|
/>
|
|
<EditUser
|
|
isOpen={editUser !== undefined}
|
|
user={editUser}
|
|
onOpenChange={(isOpen) =>
|
|
!isOpen ? setEditUser(undefined) : undefined
|
|
}
|
|
onSuccess={() => {
|
|
users.reload();
|
|
setEditUser(undefined);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|