From 92ad041aa26c8c4131c31b91ee89ef5d63754089 Mon Sep 17 00:00:00 2001 From: maxim Date: Thu, 13 Feb 2025 17:37:25 +0300 Subject: [PATCH] add `show` page for other routes --- src/App.tsx | 12 +++++++++--- src/pages/article/index.ts | 1 + src/pages/article/list.tsx | 5 +++-- src/pages/article/show.tsx | 31 +++++++++++++++++++++++++++++++ src/pages/carrier/index.ts | 1 + src/pages/carrier/list.tsx | 3 ++- src/pages/carrier/show.tsx | 32 ++++++++++++++++++++++++++++++++ src/pages/city/index.ts | 1 + src/pages/city/list.tsx | 3 ++- src/pages/city/show.tsx | 31 +++++++++++++++++++++++++++++++ 10 files changed, 113 insertions(+), 7 deletions(-) create mode 100644 src/pages/article/show.tsx create mode 100644 src/pages/carrier/show.tsx create mode 100644 src/pages/city/show.tsx diff --git a/src/App.tsx b/src/App.tsx index 6e7e3be..2e60045 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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() { } /> } /> } /> + } /> } /> } /> } /> + } /> @@ -200,6 +205,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/pages/article/index.ts b/src/pages/article/index.ts index fbafdcf..0f886cc 100644 --- a/src/pages/article/index.ts +++ b/src/pages/article/index.ts @@ -1,3 +1,4 @@ export * from './create' export * from './edit' export * from './list' +export * from './show' diff --git a/src/pages/article/list.tsx b/src/pages/article/list.tsx index 7c99c2d..075defb 100644 --- a/src/pages/article/list.tsx +++ b/src/pages/article/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 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 ( <> + ) diff --git a/src/pages/article/show.tsx b/src/pages/article/show.tsx new file mode 100644 index 0000000..441910c --- /dev/null +++ b/src/pages/article/show.tsx @@ -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 ( + + + {fields.map(({label, data}) => ( + + + {label} + + + + ))} + + + ) +} diff --git a/src/pages/carrier/index.ts b/src/pages/carrier/index.ts index fbafdcf..0f886cc 100644 --- a/src/pages/carrier/index.ts +++ b/src/pages/carrier/index.ts @@ -1,3 +1,4 @@ export * from './create' export * from './edit' export * from './list' +export * from './show' diff --git a/src/pages/carrier/list.tsx b/src/pages/carrier/list.tsx index e5ba46a..f84f534 100644 --- a/src/pages/carrier/list.tsx +++ b/src/pages/carrier/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 CarrierList = () => { @@ -48,6 +48,7 @@ export const CarrierList = () => { return ( <> + ) diff --git a/src/pages/carrier/show.tsx b/src/pages/carrier/show.tsx new file mode 100644 index 0000000..1dd28c6 --- /dev/null +++ b/src/pages/carrier/show.tsx @@ -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 ( + + + {fields.map(({label, data}) => ( + + + {label} + + + + ))} + + + ) +} diff --git a/src/pages/city/index.ts b/src/pages/city/index.ts index fbafdcf..0f886cc 100644 --- a/src/pages/city/index.ts +++ b/src/pages/city/index.ts @@ -1,3 +1,4 @@ export * from './create' export * from './edit' export * from './list' +export * from './show' diff --git a/src/pages/city/list.tsx b/src/pages/city/list.tsx index 9a996a6..7c35c33 100644 --- a/src/pages/city/list.tsx +++ b/src/pages/city/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 CityList = () => { @@ -42,6 +42,7 @@ export const CityList = () => { return ( <> + ) diff --git a/src/pages/city/show.tsx b/src/pages/city/show.tsx new file mode 100644 index 0000000..d7501a8 --- /dev/null +++ b/src/pages/city/show.tsx @@ -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 ( + + + {fields.map(({label, data}) => ( + + + {label} + + + + ))} + + + ) +}