🛂 Migrate to Chakra UI v3 (#1496)
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alejandra
@@ -1,38 +1,23 @@
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Container,
|
||||
Flex,
|
||||
Heading,
|
||||
SkeletonText,
|
||||
Table,
|
||||
TableContainer,
|
||||
Tbody,
|
||||
Td,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from "@chakra-ui/react"
|
||||
import { Badge, Container, Flex, Heading, Table } from "@chakra-ui/react"
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router"
|
||||
import { useEffect } from "react"
|
||||
import { z } from "zod"
|
||||
|
||||
import { type UserPublic, UsersService } from "../../client"
|
||||
import AddUser from "../../components/Admin/AddUser"
|
||||
import ActionsMenu from "../../components/Common/ActionsMenu"
|
||||
import Navbar from "../../components/Common/Navbar"
|
||||
import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
|
||||
import { UserActionsMenu } from "../../components/Common/UserActionsMenu"
|
||||
import PendingUsers from "../../components/Pending/PendingUsers"
|
||||
import {
|
||||
PaginationItems,
|
||||
PaginationNextTrigger,
|
||||
PaginationPrevTrigger,
|
||||
PaginationRoot,
|
||||
} from "../../components/ui/pagination.tsx"
|
||||
|
||||
const usersSearchSchema = z.object({
|
||||
page: z.number().catch(1),
|
||||
})
|
||||
|
||||
export const Route = createFileRoute("/_layout/admin")({
|
||||
component: Admin,
|
||||
validateSearch: (search) => usersSearchSchema.parse(search),
|
||||
})
|
||||
|
||||
const PER_PAGE = 5
|
||||
|
||||
function getUsersQueryOptions({ page }: { page: number }) {
|
||||
@@ -43,106 +28,87 @@ function getUsersQueryOptions({ page }: { page: number }) {
|
||||
}
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/_layout/admin")({
|
||||
component: Admin,
|
||||
validateSearch: (search) => usersSearchSchema.parse(search),
|
||||
})
|
||||
|
||||
function UsersTable() {
|
||||
const queryClient = useQueryClient()
|
||||
const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
|
||||
const { page } = Route.useSearch()
|
||||
const navigate = useNavigate({ from: Route.fullPath })
|
||||
const setPage = (page: number) =>
|
||||
navigate({ search: (prev: {[key: string]: string}) => ({ ...prev, page }) })
|
||||
const { page } = Route.useSearch()
|
||||
|
||||
const {
|
||||
data: users,
|
||||
isPending,
|
||||
isPlaceholderData,
|
||||
} = useQuery({
|
||||
const { data, isLoading, isPlaceholderData } = useQuery({
|
||||
...getUsersQueryOptions({ page }),
|
||||
placeholderData: (prevData) => prevData,
|
||||
})
|
||||
|
||||
const hasNextPage = !isPlaceholderData && users?.data.length === PER_PAGE
|
||||
const hasPreviousPage = page > 1
|
||||
const setPage = (page: number) =>
|
||||
navigate({
|
||||
search: (prev: { [key: string]: string }) => ({ ...prev, page }),
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (hasNextPage) {
|
||||
queryClient.prefetchQuery(getUsersQueryOptions({ page: page + 1 }))
|
||||
}
|
||||
}, [page, queryClient, hasNextPage])
|
||||
const users = data?.data.slice(0, PER_PAGE) ?? []
|
||||
const count = data?.count ?? 0
|
||||
|
||||
if (isLoading) {
|
||||
return <PendingUsers />
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableContainer>
|
||||
<Table size={{ base: "sm", md: "md" }}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th width="20%">Full name</Th>
|
||||
<Th width="50%">Email</Th>
|
||||
<Th width="10%">Role</Th>
|
||||
<Th width="10%">Status</Th>
|
||||
<Th width="10%">Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
{isPending ? (
|
||||
<Tbody>
|
||||
<Tr>
|
||||
{new Array(4).fill(null).map((_, index) => (
|
||||
<Td key={index}>
|
||||
<SkeletonText noOfLines={1} paddingBlock="16px" />
|
||||
</Td>
|
||||
))}
|
||||
</Tr>
|
||||
</Tbody>
|
||||
) : (
|
||||
<Tbody>
|
||||
{users?.data.map((user) => (
|
||||
<Tr key={user.id}>
|
||||
<Td
|
||||
color={!user.full_name ? "ui.dim" : "inherit"}
|
||||
isTruncated
|
||||
maxWidth="150px"
|
||||
>
|
||||
{user.full_name || "N/A"}
|
||||
{currentUser?.id === user.id && (
|
||||
<Badge ml="1" colorScheme="teal">
|
||||
You
|
||||
</Badge>
|
||||
)}
|
||||
</Td>
|
||||
<Td isTruncated maxWidth="150px">
|
||||
{user.email}
|
||||
</Td>
|
||||
<Td>{user.is_superuser ? "Superuser" : "User"}</Td>
|
||||
<Td>
|
||||
<Flex gap={2}>
|
||||
<Box
|
||||
w="2"
|
||||
h="2"
|
||||
borderRadius="50%"
|
||||
bg={user.is_active ? "ui.success" : "ui.danger"}
|
||||
alignSelf="center"
|
||||
/>
|
||||
{user.is_active ? "Active" : "Inactive"}
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>
|
||||
<ActionsMenu
|
||||
type="User"
|
||||
value={user}
|
||||
disabled={currentUser?.id === user.id}
|
||||
/>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<PaginationFooter
|
||||
onChangePage={setPage}
|
||||
page={page}
|
||||
hasNextPage={hasNextPage}
|
||||
hasPreviousPage={hasPreviousPage}
|
||||
/>
|
||||
<Table.Root size={{ base: "sm", md: "md" }}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users?.map((user) => (
|
||||
<Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}>
|
||||
<Table.Cell w="20%" color={!user.full_name ? "gray" : "inherit"}>
|
||||
{user.full_name || "N/A"}
|
||||
{currentUser?.id === user.id && (
|
||||
<Badge ml="1" colorScheme="teal">
|
||||
You
|
||||
</Badge>
|
||||
)}
|
||||
</Table.Cell>
|
||||
<Table.Cell w="25%">{user.email}</Table.Cell>
|
||||
<Table.Cell w="15%">
|
||||
{user.is_superuser ? "Superuser" : "User"}
|
||||
</Table.Cell>
|
||||
<Table.Cell w="20%">
|
||||
{user.is_active ? "Active" : "Inactive"}
|
||||
</Table.Cell>
|
||||
<Table.Cell w="20%">
|
||||
<UserActionsMenu
|
||||
user={user}
|
||||
disabled={currentUser?.id === user.id}
|
||||
/>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
<Flex justifyContent="flex-end" mt={4}>
|
||||
<PaginationRoot
|
||||
count={count}
|
||||
pageSize={PER_PAGE}
|
||||
onPageChange={({ page }) => setPage(page)}
|
||||
>
|
||||
<Flex>
|
||||
<PaginationPrevTrigger />
|
||||
<PaginationItems />
|
||||
<PaginationNextTrigger />
|
||||
</Flex>
|
||||
</PaginationRoot>
|
||||
</Flex>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -150,11 +116,11 @@ function UsersTable() {
|
||||
function Admin() {
|
||||
return (
|
||||
<Container maxW="full">
|
||||
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
|
||||
<Heading size="lg" pt={12}>
|
||||
Users Management
|
||||
</Heading>
|
||||
|
||||
<Navbar type={"User"} addModalAs={AddUser} />
|
||||
<AddUser />
|
||||
<UsersTable />
|
||||
</Container>
|
||||
)
|
||||
|
||||
@@ -1,35 +1,31 @@
|
||||
import {
|
||||
Container,
|
||||
EmptyState,
|
||||
Flex,
|
||||
Heading,
|
||||
SkeletonText,
|
||||
Table,
|
||||
TableContainer,
|
||||
Tbody,
|
||||
Td,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
VStack,
|
||||
} from "@chakra-ui/react"
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router"
|
||||
import { useEffect } from "react"
|
||||
import { FiSearch } from "react-icons/fi"
|
||||
import { z } from "zod"
|
||||
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { ItemsService } from "../../client"
|
||||
import ActionsMenu from "../../components/Common/ActionsMenu"
|
||||
import Navbar from "../../components/Common/Navbar"
|
||||
import { ItemActionsMenu } from "../../components/Common/ItemActionsMenu"
|
||||
import AddItem from "../../components/Items/AddItem"
|
||||
import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
|
||||
import PendingItems from "../../components/Pending/PendingItems"
|
||||
import {
|
||||
PaginationItems,
|
||||
PaginationNextTrigger,
|
||||
PaginationPrevTrigger,
|
||||
PaginationRoot,
|
||||
} from "../../components/ui/pagination.tsx"
|
||||
|
||||
const itemsSearchSchema = z.object({
|
||||
page: z.number().catch(1),
|
||||
})
|
||||
|
||||
export const Route = createFileRoute("/_layout/items")({
|
||||
component: Items,
|
||||
validateSearch: (search) => itemsSearchSchema.parse(search),
|
||||
})
|
||||
|
||||
const PER_PAGE = 5
|
||||
|
||||
function getItemsQueryOptions({ page }: { page: number }) {
|
||||
@@ -40,83 +36,97 @@ function getItemsQueryOptions({ page }: { page: number }) {
|
||||
}
|
||||
}
|
||||
|
||||
function ItemsTable() {
|
||||
const queryClient = useQueryClient()
|
||||
const { page } = Route.useSearch()
|
||||
const navigate = useNavigate({ from: Route.fullPath })
|
||||
const setPage = (page: number) =>
|
||||
navigate({ search: (prev: {[key: string]: string}) => ({ ...prev, page }) })
|
||||
export const Route = createFileRoute("/_layout/items")({
|
||||
component: Items,
|
||||
validateSearch: (search) => itemsSearchSchema.parse(search),
|
||||
})
|
||||
|
||||
const {
|
||||
data: items,
|
||||
isPending,
|
||||
isPlaceholderData,
|
||||
} = useQuery({
|
||||
function ItemsTable() {
|
||||
const navigate = useNavigate({ from: Route.fullPath })
|
||||
const { page } = Route.useSearch()
|
||||
|
||||
const { data, isLoading, isPlaceholderData } = useQuery({
|
||||
...getItemsQueryOptions({ page }),
|
||||
placeholderData: (prevData) => prevData,
|
||||
})
|
||||
|
||||
const hasNextPage = !isPlaceholderData && items?.data.length === PER_PAGE
|
||||
const hasPreviousPage = page > 1
|
||||
const setPage = (page: number) =>
|
||||
navigate({
|
||||
search: (prev: { [key: string]: string }) => ({ ...prev, page }),
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (hasNextPage) {
|
||||
queryClient.prefetchQuery(getItemsQueryOptions({ page: page + 1 }))
|
||||
}
|
||||
}, [page, queryClient, hasNextPage])
|
||||
const items = data?.data.slice(0, PER_PAGE) ?? []
|
||||
const count = data?.count ?? 0
|
||||
|
||||
if (isLoading) {
|
||||
return <PendingItems />
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<EmptyState.Root>
|
||||
<EmptyState.Content>
|
||||
<EmptyState.Indicator>
|
||||
<FiSearch />
|
||||
</EmptyState.Indicator>
|
||||
<VStack textAlign="center">
|
||||
<EmptyState.Title>You don't have any items yet</EmptyState.Title>
|
||||
<EmptyState.Description>
|
||||
Add a new item to get started
|
||||
</EmptyState.Description>
|
||||
</VStack>
|
||||
</EmptyState.Content>
|
||||
</EmptyState.Root>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableContainer>
|
||||
<Table size={{ base: "sm", md: "md" }}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>ID</Th>
|
||||
<Th>Title</Th>
|
||||
<Th>Description</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
{isPending ? (
|
||||
<Tbody>
|
||||
<Tr>
|
||||
{new Array(4).fill(null).map((_, index) => (
|
||||
<Td key={index}>
|
||||
<SkeletonText noOfLines={1} paddingBlock="16px" />
|
||||
</Td>
|
||||
))}
|
||||
</Tr>
|
||||
</Tbody>
|
||||
) : (
|
||||
<Tbody>
|
||||
{items?.data.map((item) => (
|
||||
<Tr key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
|
||||
<Td>{item.id}</Td>
|
||||
<Td isTruncated maxWidth="150px">
|
||||
{item.title}
|
||||
</Td>
|
||||
<Td
|
||||
color={!item.description ? "ui.dim" : "inherit"}
|
||||
isTruncated
|
||||
maxWidth="150px"
|
||||
>
|
||||
{item.description || "N/A"}
|
||||
</Td>
|
||||
<Td>
|
||||
<ActionsMenu type={"Item"} value={item} />
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<PaginationFooter
|
||||
page={page}
|
||||
onChangePage={setPage}
|
||||
hasNextPage={hasNextPage}
|
||||
hasPreviousPage={hasPreviousPage}
|
||||
/>
|
||||
<Table.Root size={{ base: "sm", md: "md" }}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
|
||||
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{items?.map((item) => (
|
||||
<Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
|
||||
<Table.Cell truncate maxW="30%">
|
||||
{item.id}
|
||||
</Table.Cell>
|
||||
<Table.Cell truncate maxW="30%">
|
||||
{item.title}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
color={!item.description ? "gray" : "inherit"}
|
||||
truncate
|
||||
maxW="30%"
|
||||
>
|
||||
{item.description || "N/A"}
|
||||
</Table.Cell>
|
||||
<Table.Cell width="10%">
|
||||
<ItemActionsMenu item={item} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
<Flex justifyContent="flex-end" mt={4}>
|
||||
<PaginationRoot
|
||||
count={count}
|
||||
pageSize={PER_PAGE}
|
||||
onPageChange={({ page }) => setPage(page)}
|
||||
>
|
||||
<Flex>
|
||||
<PaginationPrevTrigger />
|
||||
<PaginationItems />
|
||||
<PaginationNextTrigger />
|
||||
</Flex>
|
||||
</PaginationRoot>
|
||||
</Flex>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -124,11 +134,10 @@ function ItemsTable() {
|
||||
function Items() {
|
||||
return (
|
||||
<Container maxW="full">
|
||||
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
|
||||
<Heading size="lg" pt={12}>
|
||||
Items Management
|
||||
</Heading>
|
||||
|
||||
<Navbar type={"Item"} addModalAs={AddItem} />
|
||||
<AddItem />
|
||||
<ItemsTable />
|
||||
</Container>
|
||||
)
|
||||
|
||||
@@ -1,26 +1,17 @@
|
||||
import {
|
||||
Container,
|
||||
Heading,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
} from "@chakra-ui/react"
|
||||
import { useQueryClient } from "@tanstack/react-query"
|
||||
import { Container, Heading, Tabs } from "@chakra-ui/react"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
|
||||
import type { UserPublic } from "../../client"
|
||||
import Appearance from "../../components/UserSettings/Appearance"
|
||||
import ChangePassword from "../../components/UserSettings/ChangePassword"
|
||||
import DeleteAccount from "../../components/UserSettings/DeleteAccount"
|
||||
import UserInformation from "../../components/UserSettings/UserInformation"
|
||||
import useAuth from "../../hooks/useAuth"
|
||||
|
||||
const tabsConfig = [
|
||||
{ title: "My profile", component: UserInformation },
|
||||
{ title: "Password", component: ChangePassword },
|
||||
{ title: "Appearance", component: Appearance },
|
||||
{ title: "Danger zone", component: DeleteAccount },
|
||||
{ value: "my-profile", title: "My profile", component: UserInformation },
|
||||
{ value: "password", title: "Password", component: ChangePassword },
|
||||
{ value: "appearance", title: "Appearance", component: Appearance },
|
||||
{ value: "danger-zone", title: "Danger zone", component: DeleteAccount },
|
||||
]
|
||||
|
||||
export const Route = createFileRoute("/_layout/settings")({
|
||||
@@ -28,31 +19,35 @@ export const Route = createFileRoute("/_layout/settings")({
|
||||
})
|
||||
|
||||
function UserSettings() {
|
||||
const queryClient = useQueryClient()
|
||||
const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
|
||||
const { user: currentUser } = useAuth()
|
||||
const finalTabs = currentUser?.is_superuser
|
||||
? tabsConfig.slice(0, 3)
|
||||
: tabsConfig
|
||||
|
||||
if (!currentUser) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxW="full">
|
||||
<Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
|
||||
User Settings
|
||||
</Heading>
|
||||
<Tabs variant="enclosed">
|
||||
<TabList>
|
||||
{finalTabs.map((tab, index) => (
|
||||
<Tab key={index}>{tab.title}</Tab>
|
||||
|
||||
<Tabs.Root defaultValue="my-profile" variant="subtle">
|
||||
<Tabs.List>
|
||||
{finalTabs.map((tab) => (
|
||||
<Tabs.Trigger key={tab.value} value={tab.value}>
|
||||
{tab.title}
|
||||
</Tabs.Trigger>
|
||||
))}
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{finalTabs.map((tab, index) => (
|
||||
<TabPanel key={index}>
|
||||
<tab.component />
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Tabs.List>
|
||||
{finalTabs.map((tab) => (
|
||||
<Tabs.Content key={tab.value} value={tab.value}>
|
||||
<tab.component />
|
||||
</Tabs.Content>
|
||||
))}
|
||||
</Tabs.Root>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user