add custom icons for sidebar resources
and delete some boilerplate stuff
This commit is contained in:
maxim
parent
a19d0f9478
commit
b8b535d621
41
src/App.tsx
41
src/App.tsx
@ -24,6 +24,8 @@ import {CityList, CityCreate, CityEdit} from './pages/city'
|
|||||||
import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
|
import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
|
||||||
import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
|
import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
|
||||||
|
|
||||||
|
import {CountryIcon, CityIcon, CarrierIcon, MediaIcon} from './components/ui/Icons'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
@ -34,32 +36,11 @@ function App() {
|
|||||||
<RefineSnackbarProvider>
|
<RefineSnackbarProvider>
|
||||||
<DevtoolsProvider>
|
<DevtoolsProvider>
|
||||||
<Refine
|
<Refine
|
||||||
dataProvider={dataProvider('https://wn.krbl.ru')} // https://api.fake-rest.refine.dev
|
dataProvider={dataProvider('https://wn.krbl.ru')}
|
||||||
notificationProvider={useNotificationProvider}
|
notificationProvider={useNotificationProvider}
|
||||||
routerProvider={routerBindings}
|
routerProvider={routerBindings}
|
||||||
authProvider={authProvider}
|
authProvider={authProvider}
|
||||||
resources={[
|
resources={[
|
||||||
// {
|
|
||||||
// name: 'blog_posts',
|
|
||||||
// list: '/blog-posts',
|
|
||||||
// create: '/blog-posts/create',
|
|
||||||
// edit: '/blog-posts/edit/:id',
|
|
||||||
// show: '/blog-posts/show/:id',
|
|
||||||
// meta: {
|
|
||||||
// canDelete: true,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'categories',
|
|
||||||
// list: '/categories',
|
|
||||||
// create: '/categories/create',
|
|
||||||
// edit: '/categories/edit/:id',
|
|
||||||
// show: '/categories/show/:id',
|
|
||||||
// meta: {
|
|
||||||
// canDelete: true,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
{
|
{
|
||||||
name: 'country',
|
name: 'country',
|
||||||
list: '/country',
|
list: '/country',
|
||||||
@ -67,6 +48,7 @@ function App() {
|
|||||||
edit: '/country/edit/:id',
|
edit: '/country/edit/:id',
|
||||||
meta: {
|
meta: {
|
||||||
canDelete: true,
|
canDelete: true,
|
||||||
|
icon: <CountryIcon />,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -76,6 +58,7 @@ function App() {
|
|||||||
edit: '/city/edit/:id',
|
edit: '/city/edit/:id',
|
||||||
meta: {
|
meta: {
|
||||||
canDelete: true,
|
canDelete: true,
|
||||||
|
icon: <CityIcon />,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -85,6 +68,7 @@ function App() {
|
|||||||
edit: '/carrier/edit/:id',
|
edit: '/carrier/edit/:id',
|
||||||
meta: {
|
meta: {
|
||||||
canDelete: true,
|
canDelete: true,
|
||||||
|
icon: <CarrierIcon />,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -95,6 +79,7 @@ function App() {
|
|||||||
show: '/media/show/:id',
|
show: '/media/show/:id',
|
||||||
meta: {
|
meta: {
|
||||||
canDelete: true,
|
canDelete: true,
|
||||||
|
icon: <MediaIcon />,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@ -116,18 +101,6 @@ function App() {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Route index element={<NavigateToResource resource="country" />} />
|
<Route index element={<NavigateToResource resource="country" />} />
|
||||||
{/* <Route path="/blog-posts">
|
|
||||||
<Route index element={<BlogPostList />} />
|
|
||||||
<Route path="create" element={<BlogPostCreate />} />
|
|
||||||
<Route path="edit/:id" element={<BlogPostEdit />} />
|
|
||||||
<Route path="show/:id" element={<BlogPostShow />} />
|
|
||||||
</Route>
|
|
||||||
<Route path="/categories">
|
|
||||||
<Route index element={<CategoryList />} />
|
|
||||||
<Route path="create" element={<CategoryCreate />} />
|
|
||||||
<Route path="edit/:id" element={<CategoryEdit />} />
|
|
||||||
<Route path="show/:id" element={<CategoryShow />} />
|
|
||||||
</Route> */}
|
|
||||||
|
|
||||||
<Route path="/country">
|
<Route path="/country">
|
||||||
<Route index element={<CountryList />} />
|
<Route index element={<CountryList />} />
|
||||||
|
|||||||
6
src/components/ui/Icons.tsx
Normal file
6
src/components/ui/Icons.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import PublicIcon from '@mui/icons-material/Public'
|
||||||
|
import LocationCityIcon from '@mui/icons-material/LocationCity'
|
||||||
|
import LocalShippingIcon from '@mui/icons-material/LocalShipping'
|
||||||
|
import PermMediaIcon from '@mui/icons-material/PermMedia'
|
||||||
|
|
||||||
|
export {PublicIcon as CountryIcon, LocationCityIcon as CityIcon, LocalShippingIcon as CarrierIcon, PermMediaIcon as MediaIcon}
|
||||||
@ -1,96 +0,0 @@
|
|||||||
import {Autocomplete, Box, MenuItem, Select, TextField} from '@mui/material'
|
|
||||||
import {Create, useAutocomplete} from '@refinedev/mui'
|
|
||||||
import {useForm} from '@refinedev/react-hook-form'
|
|
||||||
import React from 'react'
|
|
||||||
import {Controller} from 'react-hook-form'
|
|
||||||
|
|
||||||
export const BlogPostCreate = () => {
|
|
||||||
const {
|
|
||||||
saveButtonProps,
|
|
||||||
refineCore: {formLoading},
|
|
||||||
register,
|
|
||||||
control,
|
|
||||||
formState: {errors},
|
|
||||||
} = useForm({})
|
|
||||||
|
|
||||||
const {autocompleteProps: categoryAutocompleteProps} = useAutocomplete({
|
|
||||||
resource: 'categories',
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
|
|
||||||
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
|
|
||||||
<TextField
|
|
||||||
{...register('title', {
|
|
||||||
required: 'This field is required',
|
|
||||||
})}
|
|
||||||
error={!!(errors as any)?.title}
|
|
||||||
helperText={(errors as any)?.title?.message}
|
|
||||||
margin="normal"
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{shrink: true}}
|
|
||||||
type="text"
|
|
||||||
label={'Title'}
|
|
||||||
name="title"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
{...register('content', {
|
|
||||||
required: 'This field is required',
|
|
||||||
})}
|
|
||||||
error={!!(errors as any)?.content}
|
|
||||||
helperText={(errors as any)?.content?.message}
|
|
||||||
margin="normal"
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{shrink: true}}
|
|
||||||
multiline
|
|
||||||
label={'Content'}
|
|
||||||
name="content"
|
|
||||||
/>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name={'category.id'}
|
|
||||||
rules={{required: 'This field is required'}}
|
|
||||||
// eslint-disable-next-line
|
|
||||||
defaultValue={null as any}
|
|
||||||
render={({field}) => (
|
|
||||||
<Autocomplete
|
|
||||||
{...categoryAutocompleteProps}
|
|
||||||
{...field}
|
|
||||||
onChange={(_, value) => {
|
|
||||||
field.onChange(value.id)
|
|
||||||
}}
|
|
||||||
getOptionLabel={(item) => {
|
|
||||||
return (
|
|
||||||
categoryAutocompleteProps?.options?.find((p) => {
|
|
||||||
const itemId = typeof item === 'object' ? item?.id?.toString() : item?.toString()
|
|
||||||
const pId = p?.id?.toString()
|
|
||||||
return itemId === pId
|
|
||||||
})?.title ?? ''
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
isOptionEqualToValue={(option, value) => {
|
|
||||||
const optionId = option?.id?.toString()
|
|
||||||
const valueId = typeof value === 'object' ? value?.id?.toString() : value?.toString()
|
|
||||||
return value === undefined || optionId === valueId
|
|
||||||
}}
|
|
||||||
renderInput={(params) => <TextField {...params} label={'Category'} margin="normal" variant="outlined" error={!!(errors as any)?.category?.id} helperText={(errors as any)?.category?.id?.message} required />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Controller
|
|
||||||
name="status"
|
|
||||||
control={control}
|
|
||||||
render={({field}) => {
|
|
||||||
return (
|
|
||||||
<Select {...field} value={field?.value || 'draft'} label={'Status'}>
|
|
||||||
<MenuItem value="draft">Draft</MenuItem>
|
|
||||||
<MenuItem value="published">Published</MenuItem>
|
|
||||||
<MenuItem value="rejected">Rejected</MenuItem>
|
|
||||||
</Select>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Create>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
import {Autocomplete, Box, Select, TextField} from '@mui/material'
|
|
||||||
import MenuItem from '@mui/material/MenuItem'
|
|
||||||
import {Edit, useAutocomplete} from '@refinedev/mui'
|
|
||||||
import {useForm} from '@refinedev/react-hook-form'
|
|
||||||
import React from 'react'
|
|
||||||
import {Controller} from 'react-hook-form'
|
|
||||||
|
|
||||||
export const BlogPostEdit = () => {
|
|
||||||
const {
|
|
||||||
saveButtonProps,
|
|
||||||
refineCore: {queryResult, formLoading},
|
|
||||||
register,
|
|
||||||
control,
|
|
||||||
formState: {errors},
|
|
||||||
} = useForm({})
|
|
||||||
|
|
||||||
const blogPostsData = queryResult?.data?.data
|
|
||||||
|
|
||||||
const {autocompleteProps: categoryAutocompleteProps} = useAutocomplete({
|
|
||||||
resource: 'categories',
|
|
||||||
defaultValue: blogPostsData?.category?.id,
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
|
|
||||||
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
|
|
||||||
<TextField
|
|
||||||
{...register('title', {
|
|
||||||
required: 'This field is required',
|
|
||||||
})}
|
|
||||||
error={!!(errors as any)?.title}
|
|
||||||
helperText={(errors as any)?.title?.message}
|
|
||||||
margin="normal"
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{shrink: true}}
|
|
||||||
type="text"
|
|
||||||
label={'Title'}
|
|
||||||
name="title"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
{...register('content', {
|
|
||||||
required: 'This field is required',
|
|
||||||
})}
|
|
||||||
error={!!(errors as any)?.content}
|
|
||||||
helperText={(errors as any)?.content?.message}
|
|
||||||
margin="normal"
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{shrink: true}}
|
|
||||||
multiline
|
|
||||||
label={'Content'}
|
|
||||||
name="content"
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name={'category.id'}
|
|
||||||
rules={{required: 'This field is required'}}
|
|
||||||
// eslint-disable-next-line
|
|
||||||
defaultValue={null as any}
|
|
||||||
render={({field}) => (
|
|
||||||
<Autocomplete
|
|
||||||
{...categoryAutocompleteProps}
|
|
||||||
{...field}
|
|
||||||
onChange={(_, value) => {
|
|
||||||
field.onChange(value.id)
|
|
||||||
}}
|
|
||||||
getOptionLabel={(item) => {
|
|
||||||
return (
|
|
||||||
categoryAutocompleteProps?.options?.find((p) => {
|
|
||||||
const itemId = typeof item === 'object' ? item?.id?.toString() : item?.toString()
|
|
||||||
const pId = p?.id?.toString()
|
|
||||||
return itemId === pId
|
|
||||||
})?.title ?? ''
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
isOptionEqualToValue={(option, value) => {
|
|
||||||
const optionId = option?.id?.toString()
|
|
||||||
const valueId = typeof value === 'object' ? value?.id?.toString() : value?.toString()
|
|
||||||
return value === undefined || optionId === valueId
|
|
||||||
}}
|
|
||||||
renderInput={(params) => <TextField {...params} label={'Category'} margin="normal" variant="outlined" error={!!(errors as any)?.category?.id} helperText={(errors as any)?.category?.id?.message} required />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Controller
|
|
||||||
name="status"
|
|
||||||
control={control}
|
|
||||||
render={({field}) => {
|
|
||||||
return (
|
|
||||||
<Select {...field} value={field?.value || 'draft'} label={'Status'}>
|
|
||||||
<MenuItem value="draft">Draft</MenuItem>
|
|
||||||
<MenuItem value="published">Published</MenuItem>
|
|
||||||
<MenuItem value="rejected">Rejected</MenuItem>
|
|
||||||
</Select>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Edit>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
export * from './create'
|
|
||||||
export * from './edit'
|
|
||||||
export * from './list'
|
|
||||||
export * from './show'
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
|
|
||||||
import {useMany} from '@refinedev/core'
|
|
||||||
import {DateField, DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
|
|
||||||
import {Typography} from '@mui/material'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export const BlogPostList = () => {
|
|
||||||
const {dataGridProps} = useDataGrid({})
|
|
||||||
|
|
||||||
const {data: categoryData, isLoading: categoryIsLoading} = useMany({
|
|
||||||
resource: 'categories',
|
|
||||||
ids: dataGridProps?.rows?.map((item: any) => item?.category?.id).filter(Boolean) ?? [],
|
|
||||||
queryOptions: {
|
|
||||||
enabled: !!dataGridProps?.rows,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const columns = React.useMemo<GridColDef[]>(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
field: 'id',
|
|
||||||
headerName: 'ID',
|
|
||||||
type: 'number',
|
|
||||||
minWidth: 50,
|
|
||||||
display: 'flex',
|
|
||||||
align: 'left',
|
|
||||||
headerAlign: 'left',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'title',
|
|
||||||
headerName: 'Title',
|
|
||||||
minWidth: 200,
|
|
||||||
display: 'flex',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'content',
|
|
||||||
flex: 1,
|
|
||||||
headerName: 'Content',
|
|
||||||
minWidth: 250,
|
|
||||||
display: 'flex',
|
|
||||||
renderCell: function render({value}) {
|
|
||||||
if (!value) return '-'
|
|
||||||
return (
|
|
||||||
<Typography component="p" whiteSpace="pre" overflow="hidden" textOverflow="ellipsis">
|
|
||||||
{value}
|
|
||||||
</Typography>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'category',
|
|
||||||
headerName: 'Category',
|
|
||||||
minWidth: 160,
|
|
||||||
display: 'flex',
|
|
||||||
valueGetter: (_, row) => {
|
|
||||||
const value = row?.category
|
|
||||||
return value
|
|
||||||
},
|
|
||||||
renderCell: function render({value}) {
|
|
||||||
return categoryIsLoading ? <>Loading...</> : categoryData?.data?.find((item) => item.id === value?.id)?.title
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'status',
|
|
||||||
headerName: 'Status',
|
|
||||||
minWidth: 80,
|
|
||||||
display: 'flex',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'createdAt',
|
|
||||||
headerName: 'Created at',
|
|
||||||
minWidth: 120,
|
|
||||||
display: 'flex',
|
|
||||||
renderCell: function render({value}) {
|
|
||||||
return <DateField value={value} />
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'actions',
|
|
||||||
headerName: 'Actions',
|
|
||||||
align: 'right',
|
|
||||||
headerAlign: 'right',
|
|
||||||
minWidth: 120,
|
|
||||||
sortable: false,
|
|
||||||
display: 'flex',
|
|
||||||
renderCell: function render({row}) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<EditButton hideText recordItemId={row.id} />
|
|
||||||
<ShowButton hideText recordItemId={row.id} />
|
|
||||||
<DeleteButton hideText recordItemId={row.id} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[categoryData, categoryIsLoading],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<List>
|
|
||||||
<DataGrid {...dataGridProps} columns={columns} />
|
|
||||||
</List>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import {Stack, Typography} from '@mui/material'
|
|
||||||
import {useOne, useShow} from '@refinedev/core'
|
|
||||||
import {DateField, MarkdownField, NumberField, Show, TextFieldComponent as TextField} from '@refinedev/mui'
|
|
||||||
|
|
||||||
export const BlogPostShow = () => {
|
|
||||||
const {query} = useShow({})
|
|
||||||
|
|
||||||
const {data, isLoading} = query
|
|
||||||
|
|
||||||
const record = data?.data
|
|
||||||
|
|
||||||
const {data: categoryData, isLoading: categoryIsLoading} = useOne({
|
|
||||||
resource: 'categories',
|
|
||||||
id: record?.category?.id || '',
|
|
||||||
queryOptions: {
|
|
||||||
enabled: !!record,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Show isLoading={isLoading}>
|
|
||||||
<Stack gap={1}>
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'ID'}
|
|
||||||
</Typography>
|
|
||||||
<TextField value={record?.id} />
|
|
||||||
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'Title'}
|
|
||||||
</Typography>
|
|
||||||
<TextField value={record?.title} />
|
|
||||||
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'Content'}
|
|
||||||
</Typography>
|
|
||||||
<MarkdownField value={record?.content} />
|
|
||||||
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'Category'}
|
|
||||||
</Typography>
|
|
||||||
{categoryIsLoading ? <>Loading...</> : <>{categoryData?.data?.title}</>}
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'Status'}
|
|
||||||
</Typography>
|
|
||||||
<TextField value={record?.status} />
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'CreatedAt'}
|
|
||||||
</Typography>
|
|
||||||
<DateField value={record?.createdAt} />
|
|
||||||
</Stack>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import {Box, TextField} from '@mui/material'
|
|
||||||
import {Create} from '@refinedev/mui'
|
|
||||||
import {useForm} from '@refinedev/react-hook-form'
|
|
||||||
|
|
||||||
export const CategoryCreate = () => {
|
|
||||||
const {
|
|
||||||
saveButtonProps,
|
|
||||||
refineCore: {formLoading},
|
|
||||||
register,
|
|
||||||
formState: {errors},
|
|
||||||
} = useForm({})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
|
|
||||||
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
|
|
||||||
<TextField
|
|
||||||
{...register('title', {
|
|
||||||
required: 'This field is required',
|
|
||||||
})}
|
|
||||||
error={!!(errors as any)?.title}
|
|
||||||
helperText={(errors as any)?.title?.message}
|
|
||||||
margin="normal"
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{shrink: true}}
|
|
||||||
type="text"
|
|
||||||
label={'Title'}
|
|
||||||
name="title"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Create>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import {Box, TextField} from '@mui/material'
|
|
||||||
import {Edit} from '@refinedev/mui'
|
|
||||||
import {useForm} from '@refinedev/react-hook-form'
|
|
||||||
|
|
||||||
export const CategoryEdit = () => {
|
|
||||||
const {
|
|
||||||
saveButtonProps,
|
|
||||||
register,
|
|
||||||
formState: {errors},
|
|
||||||
} = useForm({})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Edit saveButtonProps={saveButtonProps}>
|
|
||||||
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
|
|
||||||
<TextField
|
|
||||||
{...register('title', {
|
|
||||||
required: 'This field is required',
|
|
||||||
})}
|
|
||||||
error={!!(errors as any)?.title}
|
|
||||||
helperText={(errors as any)?.title?.message}
|
|
||||||
margin="normal"
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{shrink: true}}
|
|
||||||
type="text"
|
|
||||||
label={'Title'}
|
|
||||||
name="title"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Edit>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
export * from './create'
|
|
||||||
export * from './edit'
|
|
||||||
export * from './list'
|
|
||||||
export * from './show'
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
|
|
||||||
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export const CategoryList = () => {
|
|
||||||
const {dataGridProps} = useDataGrid({})
|
|
||||||
|
|
||||||
const columns = React.useMemo<GridColDef[]>(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
field: 'id',
|
|
||||||
headerName: 'ID',
|
|
||||||
type: 'number',
|
|
||||||
minWidth: 50,
|
|
||||||
display: 'flex',
|
|
||||||
align: 'left',
|
|
||||||
headerAlign: 'left',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'title',
|
|
||||||
flex: 1,
|
|
||||||
headerName: 'Title',
|
|
||||||
minWidth: 200,
|
|
||||||
display: 'flex',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'actions',
|
|
||||||
headerName: 'Actions',
|
|
||||||
align: 'right',
|
|
||||||
headerAlign: 'right',
|
|
||||||
minWidth: 120,
|
|
||||||
sortable: false,
|
|
||||||
display: 'flex',
|
|
||||||
renderCell: function render({row}) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<EditButton hideText recordItemId={row.id} />
|
|
||||||
<ShowButton hideText recordItemId={row.id} />
|
|
||||||
<DeleteButton hideText recordItemId={row.id} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<List>
|
|
||||||
<DataGrid {...dataGridProps} columns={columns} />
|
|
||||||
</List>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import {Stack, Typography} from '@mui/material'
|
|
||||||
import {useShow} from '@refinedev/core'
|
|
||||||
import {NumberField, Show, TextFieldComponent as TextField} from '@refinedev/mui'
|
|
||||||
|
|
||||||
export const CategoryShow = () => {
|
|
||||||
const {query} = useShow({})
|
|
||||||
const {data, isLoading} = query
|
|
||||||
|
|
||||||
const record = data?.data
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Show isLoading={isLoading}>
|
|
||||||
<Stack gap={1}>
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'ID'}
|
|
||||||
</Typography>
|
|
||||||
<TextField value={record?.id} />
|
|
||||||
<Typography variant="body1" fontWeight="bold">
|
|
||||||
{'Title'}
|
|
||||||
</Typography>
|
|
||||||
<TextField value={record?.title} />
|
|
||||||
</Stack>
|
|
||||||
</Show>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user