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

init /station route

Browse Source
This commit is contained in:
maxim 2025-02-04 15:34:12 +03:00
parent 7a6764cf32
commit 88428b07f9
6 changed files with 258 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.tsx
View File

@ -22,8 +22,9 @@ import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
import {ArticleList, ArticleCreate, ArticleEdit} from './pages/article'
import {SightList, SightCreate, SightEdit} from './pages/sight'
import {StationList, StationCreate, StationEdit} from './pages/station'
import {CountryIcon, CityIcon, CarrierIcon, MediaIcon, ArticleIcon, SightIcon} from './components/ui/Icons'
import {CountryIcon, CityIcon, CarrierIcon, MediaIcon, ArticleIcon, SightIcon, StationIcon} from './components/ui/Icons'
function App() {
return (
@ -105,10 +106,22 @@ function App() {
// добавить SHOW для sight->article (https://wn.krbl.ru/sight/2/article)
meta: {
canDelete: true,
label: 'Вид',
label: 'Виды',
icon: <SightIcon />,
},
},
{
name: 'station',
list: '/station',
create: '/station/create',
edit: '/station/edit/:id',
// добавить SHOW для station->sight (https://wn.krbl.ru/station/2/sight)
meta: {
canDelete: true,
label: 'Остановки',
icon: <StationIcon />,
},
},
]}
options={{
syncWithLocation: true,
@ -166,6 +179,12 @@ function App() {
<Route path="edit/:id" element={<SightEdit />} />
</Route>
<Route path="/station">
<Route index element={<StationList />} />
<Route path="create" element={<StationCreate />} />
<Route path="edit/:id" element={<StationEdit />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
<Route

3
src/components/ui/Icons.tsx
View File

@ -4,5 +4,6 @@ import LocalShippingIcon from '@mui/icons-material/LocalShipping'
import PermMediaIcon from '@mui/icons-material/PermMedia'
import FeedIcon from '@mui/icons-material/Feed'
import VisibilityIcon from '@mui/icons-material/Visibility'
import HailIcon from '@mui/icons-material/Hail'
export {PublicIcon as CountryIcon, LocationCityIcon as CityIcon, LocalShippingIcon as CarrierIcon, PermMediaIcon as MediaIcon, FeedIcon as ArticleIcon, VisibilityIcon as SightIcon}
export {PublicIcon as CountryIcon, LocationCityIcon as CityIcon, LocalShippingIcon as CarrierIcon, PermMediaIcon as MediaIcon, FeedIcon as ArticleIcon, VisibilityIcon as SightIcon, HailIcon as StationIcon}

77
src/pages/station/create.tsx Normal file
View File

@ -0,0 +1,77 @@
import {Box, TextField} from '@mui/material'
import {Create} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
export const StationCreate = () => {
const {
saveButtonProps,
refineCore: {formLoading},
register,
formState: {errors},
} = useForm({
refineCoreProps: {
resource: 'station/',
},
})
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<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"
/>
<TextField
{...register('description', {
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={'Description'}
name="description"
/>
<TextField
{...register('latitude', {
required: 'This field is required',
valueAsNumber: true,
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="number"
label={'Latitude'}
name="latitude"
/>
<TextField
{...register('longitude', {
required: 'This field is required',
valueAsNumber: true,
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="number"
label={'Longitude'}
name="longitude"
/>
</Box>
</Create>
)
}

72
src/pages/station/edit.tsx Normal file
View File

@ -0,0 +1,72 @@
import {Box, TextField} from '@mui/material'
import {Edit} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
export const StationEdit = () => {
const {
saveButtonProps,
register,
formState: {errors},
} = useForm({})
return (
<Edit saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<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"
/>
<TextField
{...register('description', {
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={'Description'}
name="description"
/>
<TextField
{...register('latitude', {
required: 'This field is required',
valueAsNumber: true,
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="number"
label={'Latitude'}
name="latitude"
/>
<TextField
{...register('longitude', {
required: 'This field is required',
valueAsNumber: true,
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="number"
label={'Longitude'}
name="longitude"
/>
</Box>
</Edit>
)
}

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

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

83
src/pages/station/list.tsx Normal file
View File

@ -0,0 +1,83 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const StationList = () => {
const {dataGridProps} = useDataGrid({
resource: 'station/',
})
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'id',
headerName: 'ID',
type: 'number',
minWidth: 70,
display: 'flex',
align: 'left',
headerAlign: 'left',
},
{
field: 'name',
headerName: 'Name',
type: 'string',
minWidth: 300,
display: 'flex',
align: 'left',
headerAlign: 'left',
},
{
field: 'latitude',
headerName: 'Latitude',
type: 'number',
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
},
{
field: 'longitude',
headerName: 'Longitude',
type: 'number',
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
},
{
field: 'description',
headerName: 'Description',
type: 'string',
display: 'flex',
align: 'left',
headerAlign: 'left',
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.id} />
<DeleteButton hideText recordItemId={row.id} />
</>
)
},
},
],
[],
)
return (
<List>
<DataGrid {...dataGridProps} columns={columns} getRowId={(row: any) => row.id} />
</List>
)
}