init /country route

This commit is contained in:
maxim
2025-01-20 00:52:39 +03:00
parent 80d7e52b32
commit 69cc72b72c
5 changed files with 185 additions and 22 deletions

View File

@ -0,0 +1,45 @@
import {Box, TextField} from '@mui/material'
import {Create} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
export const CountryCreate = () => {
const {
saveButtonProps,
refineCore: {formLoading},
register,
formState: {errors},
} = useForm({})
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<TextField
{...register('code', {
required: 'This field is required',
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="text"
label={'Code'}
name="code"
/>
<TextField
{...register('name', {
required: 'This field is required',
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="text"
label={'Name'}
name="name"
/>
</Box>
</Create>
)
}

View File

@ -0,0 +1,44 @@
import {Box, TextField} from '@mui/material'
import {Edit} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
export const CountryEdit = () => {
const {
saveButtonProps,
register,
formState: {errors},
} = useForm({})
return (
<Edit saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<TextField
{...register('code', {
required: 'This field is required',
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="text"
label={'Code'}
name="code"
/>
<TextField
{...register('name', {
required: 'This field is required',
})}
error={!!(errors as any)?.title}
helperText={(errors as any)?.title?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="text"
label={'Name'}
name="name"
/>
</Box>
</Edit>
)
}

View File

@ -0,0 +1,3 @@
export * from './create'
export * from './edit'
export * from './list'

View File

@ -0,0 +1,52 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const CountryList = () => {
const {dataGridProps} = useDataGrid({})
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'code',
headerName: 'Code',
type: 'string',
minWidth: 100,
display: 'flex',
align: 'left',
headerAlign: 'left',
},
{
field: 'name',
headerName: 'Name',
type: 'string',
minWidth: 100,
flex: 1,
},
{
field: 'actions',
headerName: 'Actions',
align: 'right',
headerAlign: 'center',
minWidth: 100,
sortable: false,
display: 'flex',
renderCell: function render({row}) {
return (
<>
<EditButton hideText recordItemId={row.name} />
<DeleteButton hideText recordItemId={row.name} />
</>
)
},
},
],
[],
)
return (
<List>
<DataGrid {...dataGridProps} columns={columns} getRowId={(row: any) => row.code} />
</List>
)
}