[2] add show page for other routes

This commit is contained in:
maxim 2025-02-14 00:16:14 +03:00
parent 311bf2189b
commit 3af49c5a23
13 changed files with 158 additions and 12 deletions

View File

@ -21,10 +21,10 @@ import {CityList, CityCreate, CityEdit, CityShow} from './pages/city'
import {CarrierList, CarrierCreate, CarrierEdit, CarrierShow} from './pages/carrier'
import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
import {ArticleList, ArticleCreate, ArticleEdit, ArticleShow} from './pages/article'
import {SightList, SightCreate, SightEdit} from './pages/sight'
import {StationList, StationCreate, StationEdit} from './pages/station'
import {VehicleList, VehicleCreate, VehicleEdit} from './pages/vehicle'
import {RouteList, RouteCreate, RouteEdit} from './pages/route'
import {SightList, SightCreate, SightEdit, SightShow} from './pages/sight'
import {StationList, StationCreate, StationEdit, StationShow} from './pages/station'
import {VehicleList, VehicleCreate, VehicleEdit, VehicleShow} from './pages/vehicle'
import {RouteList, RouteCreate, RouteEdit, RouteShow} from './pages/route'
import {CountryIcon, CityIcon, CarrierIcon, MediaIcon, ArticleIcon, SightIcon, StationIcon, VehicleIcon, RouteIcon} from './components/ui/Icons'
import {BACKEND_URL} from './lib/constants'
@ -109,6 +109,7 @@ function App() {
list: '/sight',
create: '/sight/create',
edit: '/sight/edit/:id',
show: '/sight/show/:id',
// добавить SHOW для sight->article (https://wn.krbl.ru/sight/2/article)
meta: {
canDelete: true,
@ -121,6 +122,7 @@ function App() {
list: '/station',
create: '/station/create',
edit: '/station/edit/:id',
show: '/station/show/:id',
// добавить SHOW для station->sight (https://wn.krbl.ru/station/2/sight)
meta: {
canDelete: true,
@ -133,6 +135,7 @@ function App() {
list: '/vehicle',
create: '/vehicle/create',
edit: '/vehicle/edit/:id',
show: '/vehicle/show/:id',
// добавить SHOW для vehicle->routes (https://wn.krbl.ru/vehicle/routes?id=1)
meta: {
canDelete: true,
@ -145,6 +148,7 @@ function App() {
list: '/route',
create: '/route/create',
edit: '/route/edit/:id',
show: '/route/show/:id',
// добавить SHOW для route->station (https://wn.krbl.ru/route/station)
// добавить SHOW для route->vehicle (https://wn.krbl.ru/route/vehicle)
meta: {
@ -212,24 +216,28 @@ function App() {
<Route index element={<SightList />} />
<Route path="create" element={<SightCreate />} />
<Route path="edit/:id" element={<SightEdit />} />
<Route path="show/:id" element={<SightShow />} />
</Route>
<Route path="/station">
<Route index element={<StationList />} />
<Route path="create" element={<StationCreate />} />
<Route path="edit/:id" element={<StationEdit />} />
<Route path="show/:id" element={<StationShow />} />
</Route>
<Route path="/vehicle">
<Route index element={<VehicleList />} />
<Route path="create" element={<VehicleCreate />} />
<Route path="edit/:id" element={<VehicleEdit />} />
<Route path="show/:id" element={<VehicleShow />} />
</Route>
<Route path="/route">
<Route index element={<RouteList />} />
<Route path="create" element={<RouteCreate />} />
<Route path="edit/:id" element={<RouteEdit />} />
<Route path="show/:id" element={<RouteShow />} />
</Route>
<Route path="*" element={<ErrorComponent />} />

View File

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

View File

@ -1,5 +1,5 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const RouteList = () => {
@ -50,13 +50,14 @@ export const RouteList = () => {
headerName: 'Actions',
align: 'right',
headerAlign: 'center',
minWidth: 100,
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} />
</>
)

32
src/pages/route/show.tsx Normal file
View File

@ -0,0 +1,32 @@
import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
export const RouteShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const fields = [
{label: 'ID', data: 'id'},
{label: 'Carrier ID', data: 'carrier_id'},
{label: 'Route Number', data: 'route_number'},
{label: 'Route Direction', data: 'route_direction'},
]
return (
<Show isLoading={isLoading}>
<Stack gap={4}>
{fields.map(({label, data}) => (
<Stack key={data} gap={1}>
<Typography variant="body1" fontWeight="bold">
{label}
</Typography>
<TextField value={record?.[data]} />
</Stack>
))}
</Stack>
</Show>
)
}

View File

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

View File

@ -1,5 +1,5 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const SightList = () => {
@ -60,13 +60,14 @@ export const SightList = () => {
headerName: 'Actions',
align: 'right',
headerAlign: 'center',
minWidth: 100,
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} />
</>
)

33
src/pages/sight/show.tsx Normal file
View File

@ -0,0 +1,33 @@
import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
export const SightShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const fields = [
{label: 'ID', data: 'id'},
{label: 'Name', data: 'name'},
{label: 'Latitude', data: 'latitude'},
{label: 'Longitude', data: 'longitude'},
{label: 'City ID', data: 'city_id'},
]
return (
<Show isLoading={isLoading}>
<Stack gap={4}>
{fields.map(({label, data}) => (
<Stack key={data} gap={1}>
<Typography variant="body1" fontWeight="bold">
{label}
</Typography>
<TextField value={record?.[data]} />
</Stack>
))}
</Stack>
</Show>
)
}

View File

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

View File

@ -1,5 +1,5 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const StationList = () => {
@ -59,13 +59,14 @@ export const StationList = () => {
headerName: 'Actions',
align: 'right',
headerAlign: 'center',
minWidth: 100,
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} />
</>
)

View File

@ -0,0 +1,33 @@
import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
export const StationShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const fields = [
{label: 'ID', data: 'id'},
{label: 'Name', data: 'name'},
{label: 'Latitude', data: 'latitude'},
{label: 'Longitude', data: 'longitude'},
{label: 'Description', data: 'description'},
]
return (
<Show isLoading={isLoading}>
<Stack gap={4}>
{fields.map(({label, data}) => (
<Stack key={data} gap={1}>
<Typography variant="body1" fontWeight="bold">
{label}
</Typography>
<TextField value={record?.[data]} />
</Stack>
))}
</Stack>
</Show>
)
}

View File

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

View File

@ -1,5 +1,5 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const VehicleList = () => {
@ -49,13 +49,14 @@ export const VehicleList = () => {
headerName: 'Actions',
align: 'right',
headerAlign: 'center',
minWidth: 100,
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} />
</>
)

View File

@ -0,0 +1,32 @@
import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
export const VehicleShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const fields = [
{label: 'ID', data: 'id'},
{label: 'Tail Number', data: 'tail_number'},
{label: 'Type', data: 'type'},
{label: 'City_id', data: 'city_id'},
]
return (
<Show isLoading={isLoading}>
<Stack gap={4}>
{fields.map(({label, data}) => (
<Stack key={data} gap={1}>
<Typography variant="body1" fontWeight="bold">
{label}
</Typography>
<TextField value={record?.[data]} />
</Stack>
))}
</Stack>
</Show>
)
}