Initial commit
This commit is contained in:
228
frontend/src/pages/LocationPage.tsx
Normal file
228
frontend/src/pages/LocationPage.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Paper,
|
||||
IconButton,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
Grid,
|
||||
} from '@mui/material';
|
||||
import { DataGrid, GridColDef } from '@mui/x-data-grid';
|
||||
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
||||
import { locationService } from '../services/lookupService';
|
||||
import { Location } from '../types';
|
||||
|
||||
export default function LocationPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [formData, setFormData] = useState<Partial<Location>>({ attivo: true });
|
||||
|
||||
const { data: locations = [], isLoading } = useQuery({
|
||||
queryKey: ['location'],
|
||||
queryFn: () => locationService.getAll(),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Partial<Location>) => locationService.create(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['location'] });
|
||||
handleCloseDialog();
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number; data: Partial<Location> }) => locationService.update(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['location'] });
|
||||
handleCloseDialog();
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => locationService.delete(id),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['location'] }),
|
||||
});
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialog(false);
|
||||
setEditingId(null);
|
||||
setFormData({ attivo: true });
|
||||
};
|
||||
|
||||
const handleEdit = (location: Location) => {
|
||||
setFormData(location);
|
||||
setEditingId(location.id);
|
||||
setOpenDialog(true);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (editingId) {
|
||||
updateMutation.mutate({ id: editingId, data: formData });
|
||||
} else {
|
||||
createMutation.mutate(formData);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'nome', headerName: 'Nome', flex: 1, minWidth: 200 },
|
||||
{ field: 'citta', headerName: 'Città', width: 150 },
|
||||
{ field: 'provincia', headerName: 'Prov.', width: 80 },
|
||||
{ field: 'distanzaKm', headerName: 'Distanza (km)', width: 120, type: 'number' },
|
||||
{ field: 'referente', headerName: 'Referente', width: 150 },
|
||||
{ field: 'telefono', headerName: 'Telefono', width: 130 },
|
||||
{
|
||||
field: 'actions',
|
||||
headerName: 'Azioni',
|
||||
width: 120,
|
||||
sortable: false,
|
||||
renderCell: (params) => (
|
||||
<Box>
|
||||
<IconButton size="small" onClick={() => handleEdit(params.row)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => {
|
||||
if (confirm('Eliminare questa location?')) {
|
||||
deleteMutation.mutate(params.row.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h4">Location</Typography>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={() => setOpenDialog(true)}>
|
||||
Nuova Location
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper sx={{ height: 600, width: '100%' }}>
|
||||
<DataGrid
|
||||
rows={locations}
|
||||
columns={columns}
|
||||
loading={isLoading}
|
||||
pageSizeOptions={[10, 25, 50]}
|
||||
initialState={{
|
||||
pagination: { paginationModel: { pageSize: 25 } },
|
||||
}}
|
||||
disableRowSelectionOnClick
|
||||
/>
|
||||
</Paper>
|
||||
|
||||
<Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingId ? 'Modifica Location' : 'Nuova Location'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Grid container spacing={2} sx={{ mt: 1 }}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<TextField
|
||||
label="Nome"
|
||||
fullWidth
|
||||
required
|
||||
value={formData.nome || ''}
|
||||
onChange={(e) => setFormData({ ...formData, nome: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 8 }}>
|
||||
<TextField
|
||||
label="Indirizzo"
|
||||
fullWidth
|
||||
value={formData.indirizzo || ''}
|
||||
onChange={(e) => setFormData({ ...formData, indirizzo: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<TextField
|
||||
label="CAP"
|
||||
fullWidth
|
||||
value={formData.cap || ''}
|
||||
onChange={(e) => setFormData({ ...formData, cap: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<TextField
|
||||
label="Città"
|
||||
fullWidth
|
||||
value={formData.citta || ''}
|
||||
onChange={(e) => setFormData({ ...formData, citta: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 3 }}>
|
||||
<TextField
|
||||
label="Provincia"
|
||||
fullWidth
|
||||
value={formData.provincia || ''}
|
||||
onChange={(e) => setFormData({ ...formData, provincia: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 3 }}>
|
||||
<TextField
|
||||
label="Distanza (km)"
|
||||
fullWidth
|
||||
type="number"
|
||||
value={formData.distanzaKm || ''}
|
||||
onChange={(e) => setFormData({ ...formData, distanzaKm: parseFloat(e.target.value) || undefined })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<TextField
|
||||
label="Telefono"
|
||||
fullWidth
|
||||
value={formData.telefono || ''}
|
||||
onChange={(e) => setFormData({ ...formData, telefono: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<TextField
|
||||
label="Email"
|
||||
fullWidth
|
||||
type="email"
|
||||
value={formData.email || ''}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<TextField
|
||||
label="Referente"
|
||||
fullWidth
|
||||
value={formData.referente || ''}
|
||||
onChange={(e) => setFormData({ ...formData, referente: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<TextField
|
||||
label="Note"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={3}
|
||||
value={formData.note || ''}
|
||||
onChange={(e) => setFormData({ ...formData, note: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleCloseDialog}>Annulla</Button>
|
||||
<Button variant="contained" onClick={handleSubmit}>
|
||||
{editingId ? 'Salva' : 'Crea'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user