diff --git a/src/App.tsx b/src/App.tsx index 4f02261..c863ba0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,6 +24,8 @@ import {CityList, CityCreate, CityEdit} from './pages/city' import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier' import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media' +import {CountryIcon, CityIcon, CarrierIcon, MediaIcon} from './components/ui/Icons' + function App() { return ( @@ -34,32 +36,11 @@ function App() { , }, }, { @@ -76,6 +58,7 @@ function App() { edit: '/city/edit/:id', meta: { canDelete: true, + icon: , }, }, { @@ -85,6 +68,7 @@ function App() { edit: '/carrier/edit/:id', meta: { canDelete: true, + icon: , }, }, { @@ -95,6 +79,7 @@ function App() { show: '/media/show/:id', meta: { canDelete: true, + icon: , }, }, ]} @@ -116,18 +101,6 @@ function App() { } > } /> - {/* - } /> - } /> - } /> - } /> - - - } /> - } /> - } /> - } /> - */} } /> diff --git a/src/components/ui/Icons.tsx b/src/components/ui/Icons.tsx new file mode 100644 index 0000000..18d7513 --- /dev/null +++ b/src/components/ui/Icons.tsx @@ -0,0 +1,6 @@ +import PublicIcon from '@mui/icons-material/Public' +import LocationCityIcon from '@mui/icons-material/LocationCity' +import LocalShippingIcon from '@mui/icons-material/LocalShipping' +import PermMediaIcon from '@mui/icons-material/PermMedia' + +export {PublicIcon as CountryIcon, LocationCityIcon as CityIcon, LocalShippingIcon as CarrierIcon, PermMediaIcon as MediaIcon} diff --git a/src/pages/blog-posts/create.tsx b/src/pages/blog-posts/create.tsx deleted file mode 100644 index 448252b..0000000 --- a/src/pages/blog-posts/create.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import {Autocomplete, Box, MenuItem, Select, TextField} from '@mui/material' -import {Create, useAutocomplete} from '@refinedev/mui' -import {useForm} from '@refinedev/react-hook-form' -import React from 'react' -import {Controller} from 'react-hook-form' - -export const BlogPostCreate = () => { - const { - saveButtonProps, - refineCore: {formLoading}, - register, - control, - formState: {errors}, - } = useForm({}) - - const {autocompleteProps: categoryAutocompleteProps} = useAutocomplete({ - resource: 'categories', - }) - - return ( - - - - - ( - { - field.onChange(value.id) - }} - getOptionLabel={(item) => { - return ( - categoryAutocompleteProps?.options?.find((p) => { - const itemId = typeof item === 'object' ? item?.id?.toString() : item?.toString() - const pId = p?.id?.toString() - return itemId === pId - })?.title ?? '' - ) - }} - isOptionEqualToValue={(option, value) => { - const optionId = option?.id?.toString() - const valueId = typeof value === 'object' ? value?.id?.toString() : value?.toString() - return value === undefined || optionId === valueId - }} - renderInput={(params) => } - /> - )} - /> - { - return ( - - ) - }} - /> - - - ) -} diff --git a/src/pages/blog-posts/edit.tsx b/src/pages/blog-posts/edit.tsx deleted file mode 100644 index ccaa54f..0000000 --- a/src/pages/blog-posts/edit.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import {Autocomplete, Box, Select, TextField} from '@mui/material' -import MenuItem from '@mui/material/MenuItem' -import {Edit, useAutocomplete} from '@refinedev/mui' -import {useForm} from '@refinedev/react-hook-form' -import React from 'react' -import {Controller} from 'react-hook-form' - -export const BlogPostEdit = () => { - const { - saveButtonProps, - refineCore: {queryResult, formLoading}, - register, - control, - formState: {errors}, - } = useForm({}) - - const blogPostsData = queryResult?.data?.data - - const {autocompleteProps: categoryAutocompleteProps} = useAutocomplete({ - resource: 'categories', - defaultValue: blogPostsData?.category?.id, - }) - - return ( - - - - - ( - { - field.onChange(value.id) - }} - getOptionLabel={(item) => { - return ( - categoryAutocompleteProps?.options?.find((p) => { - const itemId = typeof item === 'object' ? item?.id?.toString() : item?.toString() - const pId = p?.id?.toString() - return itemId === pId - })?.title ?? '' - ) - }} - isOptionEqualToValue={(option, value) => { - const optionId = option?.id?.toString() - const valueId = typeof value === 'object' ? value?.id?.toString() : value?.toString() - return value === undefined || optionId === valueId - }} - renderInput={(params) => } - /> - )} - /> - { - return ( - - ) - }} - /> - - - ) -} diff --git a/src/pages/blog-posts/index.ts b/src/pages/blog-posts/index.ts deleted file mode 100644 index 0f886cc..0000000 --- a/src/pages/blog-posts/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './create' -export * from './edit' -export * from './list' -export * from './show' diff --git a/src/pages/blog-posts/list.tsx b/src/pages/blog-posts/list.tsx deleted file mode 100644 index 1f841a3..0000000 --- a/src/pages/blog-posts/list.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import {DataGrid, type GridColDef} from '@mui/x-data-grid' -import {useMany} from '@refinedev/core' -import {DateField, DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui' -import {Typography} from '@mui/material' -import React from 'react' - -export const BlogPostList = () => { - const {dataGridProps} = useDataGrid({}) - - const {data: categoryData, isLoading: categoryIsLoading} = useMany({ - resource: 'categories', - ids: dataGridProps?.rows?.map((item: any) => item?.category?.id).filter(Boolean) ?? [], - queryOptions: { - enabled: !!dataGridProps?.rows, - }, - }) - - const columns = React.useMemo( - () => [ - { - field: 'id', - headerName: 'ID', - type: 'number', - minWidth: 50, - display: 'flex', - align: 'left', - headerAlign: 'left', - }, - { - field: 'title', - headerName: 'Title', - minWidth: 200, - display: 'flex', - }, - { - field: 'content', - flex: 1, - headerName: 'Content', - minWidth: 250, - display: 'flex', - renderCell: function render({value}) { - if (!value) return '-' - return ( - - {value} - - ) - }, - }, - { - field: 'category', - headerName: 'Category', - minWidth: 160, - display: 'flex', - valueGetter: (_, row) => { - const value = row?.category - return value - }, - renderCell: function render({value}) { - return categoryIsLoading ? <>Loading... : categoryData?.data?.find((item) => item.id === value?.id)?.title - }, - }, - { - field: 'status', - headerName: 'Status', - minWidth: 80, - display: 'flex', - }, - { - field: 'createdAt', - headerName: 'Created at', - minWidth: 120, - display: 'flex', - renderCell: function render({value}) { - return - }, - }, - { - field: 'actions', - headerName: 'Actions', - align: 'right', - headerAlign: 'right', - minWidth: 120, - sortable: false, - display: 'flex', - renderCell: function render({row}) { - return ( - <> - - - - - ) - }, - }, - ], - [categoryData, categoryIsLoading], - ) - - return ( - - - - ) -} diff --git a/src/pages/blog-posts/show.tsx b/src/pages/blog-posts/show.tsx deleted file mode 100644 index e332665..0000000 --- a/src/pages/blog-posts/show.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import {Stack, Typography} from '@mui/material' -import {useOne, useShow} from '@refinedev/core' -import {DateField, MarkdownField, NumberField, Show, TextFieldComponent as TextField} from '@refinedev/mui' - -export const BlogPostShow = () => { - const {query} = useShow({}) - - const {data, isLoading} = query - - const record = data?.data - - const {data: categoryData, isLoading: categoryIsLoading} = useOne({ - resource: 'categories', - id: record?.category?.id || '', - queryOptions: { - enabled: !!record, - }, - }) - - return ( - - - - {'ID'} - - - - - {'Title'} - - - - - {'Content'} - - - - - {'Category'} - - {categoryIsLoading ? <>Loading... : <>{categoryData?.data?.title}} - - {'Status'} - - - - {'CreatedAt'} - - - - - ) -} diff --git a/src/pages/categories/create.tsx b/src/pages/categories/create.tsx deleted file mode 100644 index 500e30b..0000000 --- a/src/pages/categories/create.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import {Box, TextField} from '@mui/material' -import {Create} from '@refinedev/mui' -import {useForm} from '@refinedev/react-hook-form' - -export const CategoryCreate = () => { - const { - saveButtonProps, - refineCore: {formLoading}, - register, - formState: {errors}, - } = useForm({}) - - return ( - - - - - - ) -} diff --git a/src/pages/categories/edit.tsx b/src/pages/categories/edit.tsx deleted file mode 100644 index 80fa38c..0000000 --- a/src/pages/categories/edit.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import {Box, TextField} from '@mui/material' -import {Edit} from '@refinedev/mui' -import {useForm} from '@refinedev/react-hook-form' - -export const CategoryEdit = () => { - const { - saveButtonProps, - register, - formState: {errors}, - } = useForm({}) - - return ( - - - - - - ) -} diff --git a/src/pages/categories/index.ts b/src/pages/categories/index.ts deleted file mode 100644 index 0f886cc..0000000 --- a/src/pages/categories/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './create' -export * from './edit' -export * from './list' -export * from './show' diff --git a/src/pages/categories/list.tsx b/src/pages/categories/list.tsx deleted file mode 100644 index 5e40dab..0000000 --- a/src/pages/categories/list.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import {DataGrid, type GridColDef} from '@mui/x-data-grid' -import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui' -import React from 'react' - -export const CategoryList = () => { - const {dataGridProps} = useDataGrid({}) - - const columns = React.useMemo( - () => [ - { - field: 'id', - headerName: 'ID', - type: 'number', - minWidth: 50, - display: 'flex', - align: 'left', - headerAlign: 'left', - }, - { - field: 'title', - flex: 1, - headerName: 'Title', - minWidth: 200, - display: 'flex', - }, - { - field: 'actions', - headerName: 'Actions', - align: 'right', - headerAlign: 'right', - minWidth: 120, - sortable: false, - display: 'flex', - renderCell: function render({row}) { - return ( - <> - - - - - ) - }, - }, - ], - [], - ) - - return ( - - - - ) -} diff --git a/src/pages/categories/show.tsx b/src/pages/categories/show.tsx deleted file mode 100644 index efa8ad8..0000000 --- a/src/pages/categories/show.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import {Stack, Typography} from '@mui/material' -import {useShow} from '@refinedev/core' -import {NumberField, Show, TextFieldComponent as TextField} from '@refinedev/mui' - -export const CategoryShow = () => { - const {query} = useShow({}) - const {data, isLoading} = query - - const record = data?.data - - return ( - - - - {'ID'} - - - - {'Title'} - - - - - ) -}