Initial commit
This commit is contained in:
271
frontend/src/pages/ArticoliPage.tsx
Normal file
271
frontend/src/pages/ArticoliPage.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Paper,
|
||||
IconButton,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
Grid,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
} 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 { articoliService, lookupService } from '../services/lookupService';
|
||||
import { Articolo } from '../types';
|
||||
|
||||
export default function ArticoliPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [formData, setFormData] = useState<Partial<Articolo>>({ attivo: true });
|
||||
|
||||
const { data: articoli = [], isLoading } = useQuery({
|
||||
queryKey: ['articoli'],
|
||||
queryFn: () => articoliService.getAll(),
|
||||
});
|
||||
|
||||
const { data: tipiMateriale = [] } = useQuery({
|
||||
queryKey: ['lookup', 'tipi-materiale'],
|
||||
queryFn: () => lookupService.getTipiMateriale(),
|
||||
});
|
||||
|
||||
const { data: categorie = [] } = useQuery({
|
||||
queryKey: ['lookup', 'categorie'],
|
||||
queryFn: () => lookupService.getCategorie(),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Partial<Articolo>) => articoliService.create(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['articoli'] });
|
||||
handleCloseDialog();
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number; data: Partial<Articolo> }) => articoliService.update(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['articoli'] });
|
||||
handleCloseDialog();
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => articoliService.delete(id),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['articoli'] }),
|
||||
});
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialog(false);
|
||||
setEditingId(null);
|
||||
setFormData({ attivo: true });
|
||||
};
|
||||
|
||||
const handleEdit = (articolo: Articolo) => {
|
||||
setFormData(articolo);
|
||||
setEditingId(articolo.id);
|
||||
setOpenDialog(true);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (editingId) {
|
||||
updateMutation.mutate({ id: editingId, data: formData });
|
||||
} else {
|
||||
createMutation.mutate(formData);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'codice', headerName: 'Codice', width: 100 },
|
||||
{ field: 'descrizione', headerName: 'Descrizione', flex: 1, minWidth: 200 },
|
||||
{
|
||||
field: 'tipoMateriale',
|
||||
headerName: 'Tipo',
|
||||
width: 130,
|
||||
valueGetter: (value: any) => value?.descrizione || '',
|
||||
},
|
||||
{
|
||||
field: 'categoria',
|
||||
headerName: 'Categoria',
|
||||
width: 120,
|
||||
valueGetter: (value: any) => value?.descrizione || '',
|
||||
},
|
||||
{ field: 'qtaDisponibile', headerName: 'Disponibile', width: 100, type: 'number' },
|
||||
{ field: 'qtaStdA', headerName: 'Qta A', width: 80, type: 'number' },
|
||||
{ field: 'qtaStdB', headerName: 'Qta B', width: 80, type: 'number' },
|
||||
{ field: 'qtaStdS', headerName: 'Qta S', width: 80, type: 'number' },
|
||||
{ field: 'unitaMisura', headerName: 'UM', width: 60 },
|
||||
{
|
||||
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 questo articolo?')) {
|
||||
deleteMutation.mutate(params.row.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h4">Articoli</Typography>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={() => setOpenDialog(true)}>
|
||||
Nuovo Articolo
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper sx={{ height: 600, width: '100%' }}>
|
||||
<DataGrid
|
||||
rows={articoli}
|
||||
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 Articolo' : 'Nuovo Articolo'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Grid container spacing={2} sx={{ mt: 1 }}>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<TextField
|
||||
label="Codice"
|
||||
fullWidth
|
||||
required
|
||||
value={formData.codice || ''}
|
||||
onChange={(e) => setFormData({ ...formData, codice: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 8 }}>
|
||||
<TextField
|
||||
label="Descrizione"
|
||||
fullWidth
|
||||
required
|
||||
value={formData.descrizione || ''}
|
||||
onChange={(e) => setFormData({ ...formData, descrizione: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Tipo Materiale</InputLabel>
|
||||
<Select
|
||||
value={formData.tipoMaterialeId || ''}
|
||||
label="Tipo Materiale"
|
||||
onChange={(e) => setFormData({ ...formData, tipoMaterialeId: e.target.value as number })}
|
||||
>
|
||||
{tipiMateriale.map((t) => (
|
||||
<MenuItem key={t.id} value={t.id}>{t.descrizione}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Categoria</InputLabel>
|
||||
<Select
|
||||
value={formData.categoriaId || ''}
|
||||
label="Categoria"
|
||||
onChange={(e) => setFormData({ ...formData, categoriaId: e.target.value as number })}
|
||||
>
|
||||
{categorie.map((c) => (
|
||||
<MenuItem key={c.id} value={c.id}>{c.descrizione}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<TextField
|
||||
label="Quantità Disponibile"
|
||||
fullWidth
|
||||
type="number"
|
||||
value={formData.qtaDisponibile || ''}
|
||||
onChange={(e) => setFormData({ ...formData, qtaDisponibile: parseFloat(e.target.value) || undefined })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<TextField
|
||||
label="Unità Misura"
|
||||
fullWidth
|
||||
value={formData.unitaMisura || ''}
|
||||
onChange={(e) => setFormData({ ...formData, unitaMisura: e.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}></Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<TextField
|
||||
label="Qta Std Adulti (A)"
|
||||
fullWidth
|
||||
type="number"
|
||||
value={formData.qtaStdA || ''}
|
||||
onChange={(e) => setFormData({ ...formData, qtaStdA: parseFloat(e.target.value) || undefined })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<TextField
|
||||
label="Qta Std Buffet (B)"
|
||||
fullWidth
|
||||
type="number"
|
||||
value={formData.qtaStdB || ''}
|
||||
onChange={(e) => setFormData({ ...formData, qtaStdB: parseFloat(e.target.value) || undefined })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<TextField
|
||||
label="Qta Std Seduti (S)"
|
||||
fullWidth
|
||||
type="number"
|
||||
value={formData.qtaStdS || ''}
|
||||
onChange={(e) => setFormData({ ...formData, qtaStdS: parseFloat(e.target.value) || undefined })}
|
||||
/>
|
||||
</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