KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init /carrier route

Browse Source
This commit is contained in:
maxim 2025-01-27 16:11:20 +03:00
parent 6d4df1458b
commit 36e48e5540
5 changed files with 218 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.tsx
View File

@ -21,6 +21,7 @@ import {authProvider} from './authProvider'
import {CountryList, CountryCreate, CountryEdit} from './pages/country'
import {CityList, CityCreate, CityEdit} from './pages/city'
import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
function App() {
return (
@ -76,6 +77,15 @@ function App() {
canDelete: true,
},
},
{
name: 'carrier',
list: '/carrier',
create: '/carrier/create',
edit: '/carrier/edit/:id',
meta: {
canDelete: true,
},
},
]}
options={{
syncWithLocation: true,
@ -120,6 +130,12 @@ function App() {
<Route path="edit/:id" element={<CityEdit />} />
</Route>
<Route path="/carrier">
<Route index element={<CarrierList />} />
<Route path="create" element={<CarrierCreate />} />
<Route path="edit/:id" element={<CarrierEdit />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
<Route

75
src/pages/carrier/create.tsx Normal file
View File

@ -0,0 +1,75 @@
import {Autocomplete, Box, TextField} from '@mui/material'
import {Create, useAutocomplete} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
import {Controller} from 'react-hook-form'
export const CarrierCreate = () => {
const {
saveButtonProps,
refineCore: {formLoading},
register,
control,
formState: {errors},
} = useForm({})
const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
resource: 'city',
})
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<Controller
control={control}
name="city_id"
rules={{required: 'This field is required'}}
defaultValue={null}
render={({field}) => (
<Autocomplete
{...cityAutocompleteProps}
value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
onChange={(_, value) => {
field.onChange(value?.id || '')
}}
getOptionLabel={(item) => {
return item ? item.name : ''
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id
}}
renderInput={(params) => <TextField {...params} label="Select City" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
/>
)}
/>
<TextField
{...register('full_name', {
required: 'This field is required',
})}
error={!!(errors as any)?.full_name}
helperText={(errors as any)?.full_name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="text"
label={'Full Name'}
name="full_name"
/>
<TextField
{...register('short_name', {
required: 'This field is required',
})}
error={!!(errors as any)?.short_name}
helperText={(errors as any)?.short_name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="text"
label={'Short Name'}
name="short_name"
/>
</Box>
</Create>
)
}

59
src/pages/carrier/edit.tsx Normal file
View File

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

3
src/pages/carrier/index.ts Normal file
View File

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

65
src/pages/carrier/list.tsx Normal file
View File

@ -0,0 +1,65 @@
import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import React from 'react'
export const CarrierList = () => {
const {dataGridProps} = useDataGrid({})
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'id',
headerName: 'ID',
type: 'number',
minWidth: 50,
align: 'left',
headerAlign: 'left',
},
{
field: 'city_id',
headerName: 'City ID',
type: 'number',
minWidth: 100,
align: 'left',
headerAlign: 'left',
},
{
field: 'full_name',
headerName: 'Full Name',
type: 'string',
minWidth: 200,
},
{
field: 'short_name',
headerName: 'Short Name',
type: 'string',
minWidth: 150,
flex: 1,
},
{
field: 'actions',
headerName: 'Actions',
align: 'right',
headerAlign: 'center',
minWidth: 120,
sortable: false,
display: 'flex',
renderCell: function render({row}) {
return (
<>
<EditButton hideText recordItemId={row.id} />
<DeleteButton hideText recordItemId={row.id} />
</>
)
},
},
],
[],
)
return (
<List>
<DataGrid {...dataGridProps} columns={columns} />
</List>
)
}