🚚 Move new-frontend to frontend (#652)
This commit is contained in:
Alejandra
117
frontend/src/routes/_layout/admin.tsx
Normal file
117
frontend/src/routes/_layout/admin.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Container,
|
||||
Flex,
|
||||
Heading,
|
||||
Spinner,
|
||||
Table,
|
||||
TableContainer,
|
||||
Tbody,
|
||||
Td,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from '@chakra-ui/react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useQuery, useQueryClient } from 'react-query'
|
||||
|
||||
import { ApiError, UserOut, UsersService } from '../../client'
|
||||
import ActionsMenu from '../../components/Common/ActionsMenu'
|
||||
import Navbar from '../../components/Common/Navbar'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
export const Route = createFileRoute('/_layout/admin')({
|
||||
component: Admin,
|
||||
})
|
||||
|
||||
function Admin() {
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
|
||||
const {
|
||||
data: users,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery('users', () => UsersService.readUsers({}))
|
||||
|
||||
if (isError) {
|
||||
const errDetail = (error as ApiError).body?.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading ? (
|
||||
// TODO: Add skeleton
|
||||
<Flex justify="center" align="center" height="100vh" width="full">
|
||||
<Spinner size="xl" color="ui.main" />
|
||||
</Flex>
|
||||
) : (
|
||||
users && (
|
||||
<Container maxW="full">
|
||||
<Heading
|
||||
size="lg"
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
pt={12}
|
||||
>
|
||||
User Management
|
||||
</Heading>
|
||||
<Navbar type={'User'} />
|
||||
<TableContainer>
|
||||
<Table fontSize="md" size={{ base: 'sm', md: 'md' }}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Full name</Th>
|
||||
<Th>Email</Th>
|
||||
<Th>Role</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{users.data.map((user) => (
|
||||
<Tr key={user.id}>
|
||||
<Td color={!user.full_name ? 'gray.600' : 'inherit'}>
|
||||
{user.full_name || 'N/A'}
|
||||
{currentUser?.id === user.id && (
|
||||
<Badge ml="1" colorScheme="teal">
|
||||
You
|
||||
</Badge>
|
||||
)}
|
||||
</Td>
|
||||
<Td>{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 ? true : false}
|
||||
/>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Container>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Admin
|
||||
28
frontend/src/routes/_layout/index.tsx
Normal file
28
frontend/src/routes/_layout/index.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { Container, Text } from '@chakra-ui/react'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
import { UserOut } from '../../client'
|
||||
|
||||
export const Route = createFileRoute('/_layout/')({
|
||||
component: Dashboard,
|
||||
})
|
||||
|
||||
function Dashboard() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container maxW="full" pt={12}>
|
||||
<Text fontSize="2xl">
|
||||
Hi, {currentUser?.full_name || currentUser?.email} 👋🏼
|
||||
</Text>
|
||||
<Text>Welcome back, nice to see you again!</Text>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard
|
||||
91
frontend/src/routes/_layout/items.tsx
Normal file
91
frontend/src/routes/_layout/items.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import {
|
||||
Container,
|
||||
Flex,
|
||||
Heading,
|
||||
Spinner,
|
||||
Table,
|
||||
TableContainer,
|
||||
Tbody,
|
||||
Td,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from '@chakra-ui/react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useQuery } from 'react-query'
|
||||
|
||||
import { ApiError, ItemsService } from '../../client'
|
||||
import ActionsMenu from '../../components/Common/ActionsMenu'
|
||||
import Navbar from '../../components/Common/Navbar'
|
||||
import useCustomToast from '../../hooks/useCustomToast'
|
||||
|
||||
export const Route = createFileRoute('/_layout/items')({
|
||||
component: Items,
|
||||
})
|
||||
|
||||
function Items() {
|
||||
const showToast = useCustomToast()
|
||||
const {
|
||||
data: items,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery('items', () => ItemsService.readItems({}))
|
||||
|
||||
if (isError) {
|
||||
const errDetail = (error as ApiError).body?.detail
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading ? (
|
||||
// TODO: Add skeleton
|
||||
<Flex justify="center" align="center" height="100vh" width="full">
|
||||
<Spinner size="xl" color="ui.main" />
|
||||
</Flex>
|
||||
) : (
|
||||
items && (
|
||||
<Container maxW="full">
|
||||
<Heading
|
||||
size="lg"
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
pt={12}
|
||||
>
|
||||
Items Management
|
||||
</Heading>
|
||||
<Navbar type={'Item'} />
|
||||
<TableContainer>
|
||||
<Table size={{ base: 'sm', md: 'md' }}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>ID</Th>
|
||||
<Th>Title</Th>
|
||||
<Th>Description</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{items.data.map((item) => (
|
||||
<Tr key={item.id}>
|
||||
<Td>{item.id}</Td>
|
||||
<Td>{item.title}</Td>
|
||||
<Td color={!item.description ? 'gray.600' : 'inherit'}>
|
||||
{item.description || 'N/A'}
|
||||
</Td>
|
||||
<Td>
|
||||
<ActionsMenu type={'Item'} value={item} />
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Container>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Items
|
||||
60
frontend/src/routes/_layout/settings.tsx
Normal file
60
frontend/src/routes/_layout/settings.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import {
|
||||
Container,
|
||||
Heading,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
} from '@chakra-ui/react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useQueryClient } from 'react-query'
|
||||
|
||||
import { UserOut } 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'
|
||||
|
||||
const tabsConfig = [
|
||||
{ title: 'My profile', component: UserInformation },
|
||||
{ title: 'Password', component: ChangePassword },
|
||||
{ title: 'Appearance', component: Appearance },
|
||||
{ title: 'Danger zone', component: DeleteAccount },
|
||||
]
|
||||
|
||||
export const Route = createFileRoute('/_layout/settings')({
|
||||
component: UserSettings,
|
||||
})
|
||||
|
||||
function UserSettings() {
|
||||
const queryClient = useQueryClient()
|
||||
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
|
||||
const finalTabs = currentUser?.is_superuser
|
||||
? tabsConfig.slice(0, 3)
|
||||
: tabsConfig
|
||||
|
||||
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>
|
||||
))}
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{finalTabs.map((tab, index) => (
|
||||
<TabPanel key={index}>
|
||||
<tab.component />
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserSettings
|
||||
Reference in New Issue
Block a user