add show page for other routes

This commit is contained in:
maxim 2025-02-13 17:37:25 +03:00
parent b9556d212a
commit 92ad041aa2
10 changed files with 113 additions and 7 deletions

View File

@ -17,10 +17,10 @@ import {ForgotPassword} from './pages/forgotPassword'
import {authProvider} from './authProvider'
import {CountryList, CountryCreate, CountryEdit, CountryShow} from './pages/country'
import {CityList, CityCreate, CityEdit} from './pages/city'
import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
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} from './pages/article'
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'
@ -60,6 +60,7 @@ function App() {
list: '/city',
create: '/city/create',
edit: '/city/edit/:id',
show: '/city/show/:id',
meta: {
canDelete: true,
label: 'Города',
@ -71,6 +72,7 @@ function App() {
list: '/carrier',
create: '/carrier/create',
edit: '/carrier/edit/:id',
show: '/carrier/show/:id',
meta: {
canDelete: true,
label: 'Перевозчики',
@ -94,6 +96,7 @@ function App() {
list: '/article',
create: '/article/create',
edit: '/article/edit/:id',
show: '/article/show/:id',
// добавить SHOW для article->media (https://wn.krbl.ru/article/2/media)
meta: {
canDelete: true,
@ -181,12 +184,14 @@ function App() {
<Route index element={<CityList />} />
<Route path="create" element={<CityCreate />} />
<Route path="edit/:id" element={<CityEdit />} />
<Route path="show/:id" element={<CityShow />} />
</Route>
<Route path="/carrier">
<Route index element={<CarrierList />} />
<Route path="create" element={<CarrierCreate />} />
<Route path="edit/:id" element={<CarrierEdit />} />
<Route path="show/:id" element={<CarrierShow />} />
</Route>
<Route path="/media">
@ -200,6 +205,7 @@ function App() {
<Route index element={<ArticleList />} />
<Route path="create" element={<ArticleCreate />} />
<Route path="edit/:id" element={<ArticleEdit />} />
<Route path="show/:id" element={<ArticleShow />} />
</Route>
<Route path="/sight">

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 ArticleList = () => {
@ -41,13 +41,14 @@ export const ArticleList = () => {
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,31 @@
import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
export const ArticleShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const fields = [
{label: 'ID', data: 'id'},
{label: 'Heading', data: 'heading'},
{label: 'Body', data: 'body'},
]
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 CarrierList = () => {
@ -48,6 +48,7 @@ export const CarrierList = () => {
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 CarrierShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const fields = [
{label: 'ID', data: 'id'},
{label: 'City ID', data: 'city_id'},
{label: 'Full Name', data: 'full_name'},
{label: 'Short Name', data: 'short_name'},
]
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 CityList = () => {
@ -42,6 +42,7 @@ export const CityList = () => {
return (
<>
<EditButton hideText recordItemId={row.id} />
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText recordItemId={row.id} />
</>
)

31
src/pages/city/show.tsx Normal file
View File

@ -0,0 +1,31 @@
import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
export const CityShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const fields = [
{label: 'ID', data: 'id'},
{label: 'City Name', data: 'name'},
{label: 'Country Code', data: 'country_code'},
]
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>
)
}