[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

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