From 52c746caa3980a6fbd9418c7dd8557b358d48677 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Tue, 4 Feb 2025 16:09:48 +0300
Subject: [PATCH] init `/vehicle` route

---
 src/App.tsx                  | 21 +++++++++-
 src/components/ui/Icons.tsx  |  3 +-
 src/pages/vehicle/create.tsx | 76 ++++++++++++++++++++++++++++++++++++
 src/pages/vehicle/edit.tsx   | 74 +++++++++++++++++++++++++++++++++++
 src/pages/vehicle/index.ts   |  3 ++
 src/pages/vehicle/list.tsx   | 73 ++++++++++++++++++++++++++++++++++
 6 files changed, 248 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/vehicle/create.tsx
 create mode 100644 src/pages/vehicle/edit.tsx
 create mode 100644 src/pages/vehicle/index.ts
 create mode 100644 src/pages/vehicle/list.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d8960d1..d5f50e6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,8 +23,9 @@ import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
 import {ArticleList, ArticleCreate, ArticleEdit} from './pages/article'
 import {SightList, SightCreate, SightEdit} from './pages/sight'
 import {StationList, StationCreate, StationEdit} from './pages/station'
+import {VehicleList, VehicleCreate, VehicleEdit} from './pages/vehicle'
 
-import {CountryIcon, CityIcon, CarrierIcon, MediaIcon, ArticleIcon, SightIcon, StationIcon} from './components/ui/Icons'
+import {CountryIcon, CityIcon, CarrierIcon, MediaIcon, ArticleIcon, SightIcon, StationIcon, VehicleIcon} from './components/ui/Icons'
 
 function App() {
   return (
@@ -122,6 +123,18 @@ function App() {
                       icon: <StationIcon />,
                     },
                   },
+                  {
+                    name: 'vehicle',
+                    list: '/vehicle',
+                    create: '/vehicle/create',
+                    edit: '/vehicle/edit/:id',
+                    // добавить SHOW для vehicle->routes (https://wn.krbl.ru/vehicle/routes?id=1)
+                    meta: {
+                      canDelete: true,
+                      label: 'Транспорт',
+                      icon: <VehicleIcon />,
+                    },
+                  },
                 ]}
                 options={{
                   syncWithLocation: true,
@@ -185,6 +198,12 @@ function App() {
                       <Route path="edit/:id" element={<StationEdit />} />
                     </Route>
 
+                    <Route path="/vehicle">
+                      <Route index element={<VehicleList />} />
+                      <Route path="create" element={<VehicleCreate />} />
+                      <Route path="edit/:id" element={<VehicleEdit />} />
+                    </Route>
+
                     <Route path="*" element={<ErrorComponent />} />
                   </Route>
                   <Route
diff --git a/src/components/ui/Icons.tsx b/src/components/ui/Icons.tsx
index 79c8652..65828e8 100644
--- a/src/components/ui/Icons.tsx
+++ b/src/components/ui/Icons.tsx
@@ -5,5 +5,6 @@ import PermMediaIcon from '@mui/icons-material/PermMedia'
 import FeedIcon from '@mui/icons-material/Feed'
 import VisibilityIcon from '@mui/icons-material/Visibility'
 import HailIcon from '@mui/icons-material/Hail'
+import DirectionsBusIcon from '@mui/icons-material/DirectionsBus'
 
-export {PublicIcon as CountryIcon, LocationCityIcon as CityIcon, LocalShippingIcon as CarrierIcon, PermMediaIcon as MediaIcon, FeedIcon as ArticleIcon, VisibilityIcon as SightIcon, HailIcon as StationIcon}
+export {PublicIcon as CountryIcon, LocationCityIcon as CityIcon, LocalShippingIcon as CarrierIcon, PermMediaIcon as MediaIcon, FeedIcon as ArticleIcon, VisibilityIcon as SightIcon, HailIcon as StationIcon, DirectionsBusIcon as VehicleIcon}
diff --git a/src/pages/vehicle/create.tsx b/src/pages/vehicle/create.tsx
new file mode 100644
index 0000000..c2d23d8
--- /dev/null
+++ b/src/pages/vehicle/create.tsx
@@ -0,0 +1,76 @@
+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 VehicleCreate = () => {
+  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">
+        <TextField
+          {...register('tail_number', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.tail_number}
+          helperText={(errors as any)?.tail_number?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Tail Number'}
+          name="tail_number"
+        />
+        <TextField
+          {...register('type', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.type}
+          helperText={(errors as any)?.type?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Type'}
+          name="type"
+        />
+
+        <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 />}
+            />
+          )}
+        />
+      </Box>
+    </Create>
+  )
+}
diff --git a/src/pages/vehicle/edit.tsx b/src/pages/vehicle/edit.tsx
new file mode 100644
index 0000000..01e866f
--- /dev/null
+++ b/src/pages/vehicle/edit.tsx
@@ -0,0 +1,74 @@
+import {Autocomplete, Box, TextField} from '@mui/material'
+import {Edit, useAutocomplete} from '@refinedev/mui'
+import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
+
+export const VehicleEdit = () => {
+  const {
+    saveButtonProps,
+    register,
+    control,
+    formState: {errors},
+  } = useForm({})
+
+  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
+    resource: 'city',
+  })
+
+  return (
+    <Edit saveButtonProps={saveButtonProps}>
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <TextField
+          {...register('tail_number', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.tail_number}
+          helperText={(errors as any)?.tail_number?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Tail Number'}
+          name="tail_number"
+        />
+        <TextField
+          {...register('type', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.type}
+          helperText={(errors as any)?.type?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Type'}
+          name="type"
+        />
+
+        <Controller
+          control={control}
+          name="city_id"
+          rules={{required: 'This field is required'}}
+          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 />}
+            />
+          )}
+        />
+      </Box>
+    </Edit>
+  )
+}
diff --git a/src/pages/vehicle/index.ts b/src/pages/vehicle/index.ts
new file mode 100644
index 0000000..fbafdcf
--- /dev/null
+++ b/src/pages/vehicle/index.ts
@@ -0,0 +1,3 @@
+export * from './create'
+export * from './edit'
+export * from './list'
diff --git a/src/pages/vehicle/list.tsx b/src/pages/vehicle/list.tsx
new file mode 100644
index 0000000..6cd4cc4
--- /dev/null
+++ b/src/pages/vehicle/list.tsx
@@ -0,0 +1,73 @@
+import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
+import React from 'react'
+
+export const VehicleList = () => {
+  const {dataGridProps} = useDataGrid({})
+
+  const columns = React.useMemo<GridColDef[]>(
+    () => [
+      {
+        field: 'id',
+        headerName: 'ID',
+        type: 'number',
+        minWidth: 70,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'tail_number',
+        headerName: 'Tail Number',
+        type: 'number',
+        minWidth: 150,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'type',
+        headerName: 'Type',
+        type: 'number',
+        minWidth: 150,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'city_id',
+        headerName: 'City ID',
+        type: 'number',
+        minWidth: 70,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+        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.id} />
+              <DeleteButton hideText recordItemId={row.id} />
+            </>
+          )
+        },
+      },
+    ],
+    [],
+  )
+
+  return (
+    <List>
+      <DataGrid {...dataGridProps} columns={columns} getRowId={(row: any) => row.id} />
+    </List>
+  )
+}