KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init /country route

Browse Source
This commit is contained in:
maxim 2025-01-20 00:52:39 +03:00
parent 80d7e52b32
commit 69cc72b72c
5 changed files with 185 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/App.tsx
View File

@ -1,4 +1,4 @@
import {Refine, GitHubBanner, WelcomePage, Authenticated} from '@refinedev/core'
import {Refine, Authenticated} from '@refinedev/core'
import {DevtoolsPanel, DevtoolsProvider} from '@refinedev/devtools'
import {RefineKbar, RefineKbarProvider} from '@refinedev/kbar'
@ -9,8 +9,6 @@ import CssBaseline from '@mui/material/CssBaseline'
import GlobalStyles from '@mui/material/GlobalStyles'
import {BrowserRouter, Route, Routes, Outlet} from 'react-router'
import routerBindings, {NavigateToResource, CatchAllNavigate, UnsavedChangesNotifier, DocumentTitleHandler} from '@refinedev/react-router'
import {BlogPostList, BlogPostCreate, BlogPostEdit, BlogPostShow} from './pages/blog-posts'
import {CategoryList, CategoryCreate, CategoryEdit, CategoryShow} from './pages/categories'
import {ColorModeContextProvider} from './contexts/color-mode'
import {Header} from './components/header'
import {Login} from './pages/login'
@ -18,10 +16,14 @@ import {Register} from './pages/register'
import {ForgotPassword} from './pages/forgotPassword'
import {authProvider} from './authProvider'
// import {BlogPostList, BlogPostCreate, BlogPostEdit, BlogPostShow} from './pages/blog-posts'
// import {CategoryList, CategoryCreate, CategoryEdit, CategoryShow} from './pages/categories'
import {CountryList, CountryCreate, CountryEdit} from './pages/country'
function App() {
return (
<BrowserRouter>
<GitHubBanner />
<RefineKbarProvider>
<ColorModeContextProvider>
<CssBaseline />
@ -29,27 +31,37 @@ function App() {
<RefineSnackbarProvider>
<DevtoolsProvider>
<Refine
dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
dataProvider={dataProvider('https://wn.krbl.ru')} // https://api.fake-rest.refine.dev
notificationProvider={useNotificationProvider}
routerProvider={routerBindings}
authProvider={authProvider}
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: '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',
name: 'country',
list: '/country',
create: '/country/create',
edit: '/country/edit/:id',
meta: {
canDelete: true,
},
@ -72,8 +84,8 @@ function App() {
</Authenticated>
}
>
<Route index element={<NavigateToResource resource="blog_posts" />} />
<Route path="/blog-posts">
<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 />} />
@ -84,7 +96,14 @@ function App() {
<Route path="create" element={<CategoryCreate />} />
<Route path="edit/:id" element={<CategoryEdit />} />
<Route path="show/:id" element={<CategoryShow />} />
</Route> */}
<Route path="/country">
<Route index element={<CountryList />} />
<Route path="create" element={<CountryCreate />} />
<Route path="edit/:name" element={<CountryEdit />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
<Route

45
src/pages/country/create.tsx Normal file
View File

@ -0,0 +1,45 @@
import {Box, TextField} from '@mui/material'
import {Create} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
export const CountryCreate = () => {
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('code', {
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={'Code'}
name="code"
/>
<TextField
{...register('name', {
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={'Name'}
name="name"
/>
</Box>
</Create>
)
}

44
src/pages/country/edit.tsx Normal file
View File

@ -0,0 +1,44 @@
import {Box, TextField} from '@mui/material'
import {Edit} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
export const CountryEdit = () => {
const {
saveButtonProps,
register,
formState: {errors},
} = useForm({})
return (
<Edit saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<TextField
{...register('code', {
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={'Code'}
name="code"
/>
<TextField
{...register('name', {
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={'Name'}
name="name"
/>
</Box>
</Edit>
)
}

3
src/pages/country/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './create'
export * from './edit'
export * from './list'

52
src/pages/country/list.tsx Normal file
View File

@ -0,0 +1,52 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const CountryList = () => {
const {dataGridProps} = useDataGrid({})
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'code',
headerName: 'Code',
type: 'string',
minWidth: 100,
display: 'flex',
align: 'left',
headerAlign: 'left',
},
{
field: 'name',
headerName: 'Name',
type: 'string',
minWidth: 100,
flex: 1,
},
{
field: 'actions',
headerName: 'Actions',
align: 'right',
headerAlign: 'center',
minWidth: 100,
sortable: false,
display: 'flex',
renderCell: function render({row}) {
return (
<>
<EditButton hideText recordItemId={row.name} />
<DeleteButton hideText recordItemId={row.name} />
</>
)
},
},
],
[],
)
return (
<List>
<DataGrid {...dataGridProps} columns={columns} getRowId={(row: any) => row.code} />
</List>
)
}