diff --git a/src/App.tsx b/src/App.tsx index b0ce191..6e7e3be 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,7 +16,7 @@ import {Register} from './pages/register' import {ForgotPassword} from './pages/forgotPassword' import {authProvider} from './authProvider' -import {CountryList, CountryCreate, CountryEdit} from './pages/country' +import {CountryList, CountryCreate, CountryEdit, CountryShow} from './pages/country' import {CityList, CityCreate, CityEdit} from './pages/city' import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier' import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media' @@ -48,6 +48,7 @@ function App() { list: '/country', create: '/country/create', edit: '/country/edit/:id', + show: '/country/show/:id', meta: { canDelete: true, label: 'Страны', @@ -173,6 +174,7 @@ function App() { <Route index element={<CountryList />} /> <Route path="create" element={<CountryCreate />} /> <Route path="edit/:name" element={<CountryEdit />} /> + <Route path="show/:id" element={<CountryShow />} /> </Route> <Route path="/city"> diff --git a/src/pages/country/index.ts b/src/pages/country/index.ts index fbafdcf..0f886cc 100644 --- a/src/pages/country/index.ts +++ b/src/pages/country/index.ts @@ -1,3 +1,4 @@ export * from './create' export * from './edit' export * from './list' +export * from './show' diff --git a/src/pages/country/list.tsx b/src/pages/country/list.tsx index 7c3100d..698210c 100644 --- a/src/pages/country/list.tsx +++ b/src/pages/country/list.tsx @@ -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 CountryList = () => { @@ -28,14 +28,15 @@ export const CountryList = () => { headerName: 'Actions', align: 'right', headerAlign: 'center', - minWidth: 100, + minWidth: 120, sortable: false, display: 'flex', renderCell: function render({row}) { return ( <> - <EditButton hideText recordItemId={row.name} /> - <DeleteButton hideText recordItemId={row.name} /> + <EditButton hideText recordItemId={row.code} /> + <ShowButton hideText recordItemId={row.code} /> + <DeleteButton hideText recordItemId={row.code} /> </> ) }, diff --git a/src/pages/country/show.tsx b/src/pages/country/show.tsx new file mode 100644 index 0000000..a75517c --- /dev/null +++ b/src/pages/country/show.tsx @@ -0,0 +1,30 @@ +import {Stack, Typography} from '@mui/material' +import {useShow} from '@refinedev/core' +import {Show, TextFieldComponent as TextField} from '@refinedev/mui' + +export const CountryShow = () => { + const {query} = useShow({}) + const {data, isLoading} = query + + const record = data?.data + + const fields = [ + {label: 'Code', data: 'code'}, + {label: 'Name', data: '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> + ) +}