init /station route

src/App.tsx

@@ -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

src/components/ui/Icons.tsx

@@ -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}

src/pages/station/create.tsx

@@ -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>
+  )
+}

src/pages/station/edit.tsx

@@ -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>
+  )
+}

src/pages/station/index.ts

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

src/pages/station/list.tsx

@@ -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>
+  )
+}