[2] add show
page for other routes
This commit is contained in:
parent
311bf2189b
commit
3af49c5a23
16
src/App.tsx
16
src/App.tsx
@ -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 />} />
|
||||
|
@ -1,3 +1,4 @@
|
||||
export * from './create'
|
||||
export * from './edit'
|
||||
export * from './list'
|
||||
export * from './show'
|
||||
|
@ -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
32
src/pages/route/show.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
export * from './create'
|
||||
export * from './edit'
|
||||
export * from './list'
|
||||
export * from './show'
|
||||
|
@ -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
33
src/pages/sight/show.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
export * from './create'
|
||||
export * from './edit'
|
||||
export * from './list'
|
||||
export * from './show'
|
||||
|
@ -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} />
|
||||
</>
|
||||
)
|
||||
|
33
src/pages/station/show.tsx
Normal file
33
src/pages/station/show.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
export * from './create'
|
||||
export * from './edit'
|
||||
export * from './list'
|
||||
export * from './show'
|
||||
|
@ -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} />
|
||||
</>
|
||||
)
|
||||
|
32
src/pages/vehicle/show.tsx
Normal file
32
src/pages/vehicle/show.tsx
Normal 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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user