dnviti/zentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement a comprehensive custom fields system with backend management and frontend rendering capabilities.

Browse Source
This commit is contained in:
Daniele Viti
2025-11-29 17:53:34 +01:00
parent 71071f42dc
commit 5a8740269b
19 changed files with 4881 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/App.tsx
View File

@@ -20,6 +20,7 @@ import ReportEditorPage from "./pages/ReportEditorPage";
import ModulesAdminPage from "./pages/ModulesAdminPage";
import ModulePurchasePage from "./pages/ModulePurchasePage";
import AutoCodesAdminPage from "./pages/AutoCodesAdminPage";
import CustomFieldsAdminPage from "./pages/CustomFieldsAdminPage";
import WarehouseRoutes from "./modules/warehouse/routes";
import { ModuleGuard } from "./components/ModuleGuard";
import { useRealTimeUpdates } from "./hooks/useRealTimeUpdates";
@@ -101,6 +102,10 @@ function App() {
path="admin/auto-codes"
element={<AutoCodesAdminPage />}
/>
<Route
path="admin/custom-fields"
element={<CustomFieldsAdminPage />}
/>
{/* Warehouse Module */}
<Route
path="warehouse/*"

195
frontend/src/components/customFields/CustomFieldsRenderer.tsx Normal file
View File

@@ -0,0 +1,195 @@
import React, { useEffect, useState } from 'react';
import {
TextField,
Checkbox,
FormControlLabel,
MenuItem,
Typography,
Box
} from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { CustomFieldDefinition, CustomFieldType, CustomFieldValues } from '../../types/customFields';
import { customFieldService } from '../../services/customFieldService';
import dayjs from 'dayjs';
interface Props {
entityName: string;
values: CustomFieldValues;
onChange: (fieldName: string, value: any) => void;
readOnly?: boolean;
}
export const CustomFieldsRenderer: React.FC<Props> = ({ entityName, values, onChange, readOnly = false }) => {
const [definitions, setDefinitions] = useState<CustomFieldDefinition[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadDefinitions = async () => {
try {
const defs = await customFieldService.getByEntity(entityName);
setDefinitions(defs);
} catch (error) {
console.error("Failed to load custom fields", error);
} finally {
setLoading(false);
}
};
loadDefinitions();
}, [entityName]);
if (loading) return null;
if (definitions.length === 0) return null;
return (
<Box sx={{ mt: 2, mb: 2, p: 2, border: '1px dashed #ccc', borderRadius: 1 }}>
<Typography variant="subtitle1" gutterBottom color="primary">
Campi Personalizzati
</Typography>
<Box display="flex" flexWrap="wrap" gap={2}>
{definitions.map(def => (
<Box key={def.id} flexBasis={{ xs: '100%', sm: '48%', md: '32%' }} flexGrow={1}>
<FieldRenderer
definition={def}
value={values?.[def.fieldName]}
onChange={(val) => onChange(def.fieldName, val)}
readOnly={readOnly}
/>
</Box>
))}
</Box>
</Box>
);
};
const FieldRenderer: React.FC<{
definition: CustomFieldDefinition;
value: any;
onChange: (value: any) => void;
readOnly: boolean;
}> = ({ definition, value, onChange, readOnly }) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
};
switch (definition.type) {
case CustomFieldType.Text:
case CustomFieldType.Email:
case CustomFieldType.Url:
return (
<TextField
fullWidth
label={definition.label}
value={value || ''}
onChange={handleChange}
required={definition.isRequired}
disabled={readOnly}
placeholder={definition.placeholder}
helperText={definition.description}
size="small"
/>
);
case CustomFieldType.Number:
return (
<TextField
fullWidth
type="number"
label={definition.label}
value={value || ''}
onChange={handleChange}
required={definition.isRequired}
disabled={readOnly}
helperText={definition.description}
size="small"
/>
);
case CustomFieldType.TextArea:
return (
<TextField
fullWidth
multiline
rows={4}
label={definition.label}
value={value || ''}
onChange={handleChange}
required={definition.isRequired}
disabled={readOnly}
helperText={definition.description}
size="small"
/>
);
case CustomFieldType.Boolean:
return (
<FormControlLabel
control={
<Checkbox
checked={!!value}
onChange={(e) => onChange(e.target.checked)}
disabled={readOnly}
/>
}
label={definition.label}
/>
);
case CustomFieldType.Date:
return (
<DatePicker
label={definition.label}
value={value ? dayjs(value) : null}
onChange={(newValue) => onChange(newValue ? newValue.toISOString() : null)}
disabled={readOnly}
slotProps={{ textField: { fullWidth: true, required: definition.isRequired, helperText: definition.description, size: 'small' } }}
/>
);
case CustomFieldType.Select:
let options: string[] = [];
try {
options = definition.optionsJson ? JSON.parse(definition.optionsJson) : [];
} catch (e) {
console.error("Invalid options JSON", e);
}
return (
<TextField
select
fullWidth
label={definition.label}
value={value || ''}
onChange={handleChange}
required={definition.isRequired}
disabled={readOnly}
helperText={definition.description}
size="small"
>
{options.map((opt) => (
<MenuItem key={opt} value={opt}>
{opt}
</MenuItem>
))}
</TextField>
);
case CustomFieldType.Color:
return (
<TextField
fullWidth
type="color"
label={definition.label}
value={value || '#000000'}
onChange={handleChange}
required={definition.isRequired}
disabled={readOnly}
helperText={definition.description}
InputLabelProps={{ shrink: true }}
size="small"
/>
);
default:
return null;
}
};

97
frontend/src/pages/ClientiPage.tsx
View File

@@ -11,7 +11,7 @@ import {
DialogContent,
DialogActions,
TextField,
Grid,
} from "@mui/material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import {
@@ -21,12 +21,15 @@ import {
} from "@mui/icons-material";
import { clientiService } from "../services/lookupService";
import { Cliente } from "../types";
import { CustomFieldsRenderer } from "../components/customFields/CustomFieldsRenderer";
import { CustomFieldValues } from "../types/customFields";
export default function ClientiPage() {
const queryClient = useQueryClient();
const [openDialog, setOpenDialog] = useState(false);
const [editingId, setEditingId] = useState<number | null>(null);
const [formData, setFormData] = useState<Partial<Cliente>>({ attivo: true });
const [customFields, setCustomFields] = useState<CustomFieldValues>({});
const { data: clienti = [], isLoading } = useQuery({
queryKey: ["clienti"],
@@ -59,22 +62,33 @@ export default function ClientiPage() {
setOpenDialog(false);
setEditingId(null);
setFormData({ attivo: true });
setCustomFields({});
};
const handleEdit = (cliente: Cliente) => {
setFormData(cliente);
setEditingId(cliente.id);
try {
setCustomFields(cliente.customFieldsJson ? JSON.parse(cliente.customFieldsJson) : {});
} catch (e) {
setCustomFields({});
}
setOpenDialog(true);
};
const handleSubmit = () => {
const dataWithCustomFields = {
...formData,
customFieldsJson: JSON.stringify(customFields)
};
if (editingId) {
// In modifica, non inviamo il codice (non modificabile)
const { codice: _codice, ...updateData } = formData;
const { codice: _codice, ...updateData } = dataWithCustomFields;
updateMutation.mutate({ id: editingId, data: updateData });
} else {
// In creazione, non inviamo il codice (generato automaticamente)
const { codice: _codice, ...createData } = formData;
const { codice: _codice, ...createData } = dataWithCustomFields;
createMutation.mutate(createData);
}
};
@@ -162,8 +176,8 @@ export default function ClientiPage() {
{editingId ? "Modifica Cliente" : "Nuovo Cliente"}
</DialogTitle>
<DialogContent>
<Grid container spacing={2} sx={{ mt: 1 }}>
<Grid size={{ xs: 12, md: 3 }}>
<Box display="flex" flexWrap="wrap" gap={2} mt={1}>
<Box flexBasis={{ xs: '100%', md: '23%' }} flexGrow={1}>
<TextField
label="Codice"
fullWidth
@@ -184,16 +198,16 @@ export default function ClientiPage() {
sx={
!editingId
? {
"& .MuiInputBase-input.Mui-disabled": {
fontStyle: "italic",
color: "text.secondary",
},
}
"& .MuiInputBase-input.Mui-disabled": {
fontStyle: "italic",
color: "text.secondary",
},
}
: undefined
}
/>
</Grid>
<Grid size={{ xs: 12, md: 3 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '23%' }} flexGrow={1}>
<TextField
label="Codice Alternativo"
fullWidth
@@ -206,8 +220,8 @@ export default function ClientiPage() {
}
helperText="Opzionale"
/>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '48%' }} flexGrow={1}>
<TextField
label="Ragione Sociale"
fullWidth
@@ -217,8 +231,8 @@ export default function ClientiPage() {
setFormData({ ...formData, ragioneSociale: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 8 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '65%' }} flexGrow={1}>
<TextField
label="Indirizzo"
fullWidth
@@ -227,8 +241,8 @@ export default function ClientiPage() {
setFormData({ ...formData, indirizzo: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 4 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '32%' }} flexGrow={1}>
<TextField
label="CAP"
fullWidth
@@ -237,8 +251,8 @@ export default function ClientiPage() {
setFormData({ ...formData, cap: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 8 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '65%' }} flexGrow={1}>
<TextField
label="Città"
fullWidth
@@ -247,8 +261,8 @@ export default function ClientiPage() {
setFormData({ ...formData, citta: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 4 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '32%' }} flexGrow={1}>
<TextField
label="Provincia"
fullWidth
@@ -257,8 +271,8 @@ export default function ClientiPage() {
setFormData({ ...formData, provincia: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '48%' }} flexGrow={1}>
<TextField
label="Telefono"
fullWidth
@@ -267,8 +281,8 @@ export default function ClientiPage() {
setFormData({ ...formData, telefono: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '48%' }} flexGrow={1}>
<TextField
label="Email"
fullWidth
@@ -278,8 +292,8 @@ export default function ClientiPage() {
setFormData({ ...formData, email: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '48%' }} flexGrow={1}>
<TextField
label="PEC"
fullWidth
@@ -288,8 +302,8 @@ export default function ClientiPage() {
setFormData({ ...formData, pec: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '48%' }} flexGrow={1}>
<TextField
label="Codice Fiscale"
fullWidth
@@ -298,8 +312,8 @@ export default function ClientiPage() {
setFormData({ ...formData, codiceFiscale: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '48%' }} flexGrow={1}>
<TextField
label="Partita IVA"
fullWidth
@@ -308,8 +322,8 @@ export default function ClientiPage() {
setFormData({ ...formData, partitaIva: e.target.value })
}
/>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
</Box>
<Box flexBasis={{ xs: '100%', md: '48%' }} flexGrow={1}>
<TextField
label="Codice Destinatario"
fullWidth
@@ -321,8 +335,8 @@ export default function ClientiPage() {
})
}
/>
</Grid>
<Grid size={{ xs: 12 }}>
</Box>
<Box flexBasis="100%">
<TextField
label="Note"
fullWidth
@@ -333,8 +347,15 @@ export default function ClientiPage() {
setFormData({ ...formData, note: e.target.value })
}
/>
</Grid>
</Grid>
</Box>
<Box flexBasis="100%">
<CustomFieldsRenderer
entityName="Cliente"
values={customFields}
onChange={(field, value) => setCustomFields(prev => ({ ...prev, [field]: value }))}
/>
</Box>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Annulla</Button>

302
frontend/src/pages/CustomFieldsAdminPage.tsx Normal file
View File

@@ -0,0 +1,302 @@
import React, { useState, useEffect } from 'react';
import {
Box,
Button,
Card,
CardContent,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
InputLabel,
MenuItem,
Select,
TextField,
Typography,
FormControlLabel,
Checkbox,
Snackbar,
Alert
} from '@mui/material';
import { DataGrid, GridColDef, GridActionsCellItem } from '@mui/x-data-grid';
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
import { CustomFieldDefinition, CustomFieldType } from '../types/customFields';
import { customFieldService } from '../services/customFieldService';
const ENTITIES = [
{ value: 'Cliente', label: 'Clienti' },
{ value: 'Articolo', label: 'Articoli (Catering)' },
{ value: 'Evento', label: 'Eventi' },
{ value: 'WarehouseArticle', label: 'Articoli Magazzino' },
{ value: 'WarehouseLocation', label: 'Magazzini' },
{ value: 'Risorsa', label: 'Risorse (Staff)' }
];
const FIELD_TYPES = [
{ value: CustomFieldType.Text, label: 'Testo' },
{ value: CustomFieldType.Number, label: 'Numero' },
{ value: CustomFieldType.Date, label: 'Data' },
{ value: CustomFieldType.Boolean, label: 'Booleano (Sì/No)' },
{ value: CustomFieldType.Select, label: 'Lista a discesa' },
{ value: CustomFieldType.TextArea, label: 'Area di testo' },
{ value: CustomFieldType.Color, label: 'Colore' },
{ value: CustomFieldType.Url, label: 'URL' },
{ value: CustomFieldType.Email, label: 'Email' }
];
const CustomFieldsAdminPage: React.FC = () => {
const [selectedEntity, setSelectedEntity] = useState<string>(ENTITIES[0].value);
const [fields, setFields] = useState<CustomFieldDefinition[]>([]);
const [loading, setLoading] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const [currentField, setCurrentField] = useState<Partial<CustomFieldDefinition>>({});
const [snackbar, setSnackbar] = useState<{ open: boolean, message: string, severity: 'success' | 'error' }>({
open: false,
message: '',
severity: 'success'
});
const showSnackbar = (message: string, severity: 'success' | 'error') => {
setSnackbar({ open: true, message, severity });
};
const handleCloseSnackbar = () => setSnackbar({ ...snackbar, open: false });
const loadFields = async () => {
setLoading(true);
try {
const data = await customFieldService.getByEntity(selectedEntity);
setFields(data);
} catch (error) {
showSnackbar('Errore nel caricamento dei campi', 'error');
} finally {
setLoading(false);
}
};
useEffect(() => {
loadFields();
}, [selectedEntity]);
const handleSave = async () => {
try {
if (currentField.id) {
await customFieldService.update(currentField.id, currentField as CustomFieldDefinition);
showSnackbar('Campo aggiornato con successo', 'success');
} else {
await customFieldService.create({
...currentField,
entityName: selectedEntity,
isActive: true,
sortOrder: fields.length + 1
} as CustomFieldDefinition);
showSnackbar('Campo creato con successo', 'success');
}
setDialogOpen(false);
loadFields();
} catch (error) {
showSnackbar('Errore nel salvataggio', 'error');
}
};
const handleDelete = async (id: number) => {
if (window.confirm('Sei sicuro di voler eliminare questo campo?')) {
try {
await customFieldService.delete(id);
showSnackbar('Campo eliminato', 'success');
loadFields();
} catch (error) {
showSnackbar('Errore durante l\'eliminazione', 'error');
}
}
};
const columns: GridColDef[] = [
{ field: 'label', headerName: 'Etichetta', flex: 1 },
{ field: 'fieldName', headerName: 'Nome Interno', flex: 1 },
{
field: 'type',
headerName: 'Tipo',
width: 150,
valueFormatter: (params) => FIELD_TYPES.find(t => t.value === params.value)?.label
},
{
field: 'isRequired',
headerName: 'Obbligatorio',
width: 120,
type: 'boolean'
},
{
field: 'sortOrder',
headerName: 'Ordine',
width: 100,
type: 'number',
editable: true
},
{
field: 'actions',
type: 'actions',
headerName: 'Azioni',
width: 100,
getActions: (params) => [
<GridActionsCellItem
icon={<EditIcon />}
label="Modifica"
onClick={() => {
setCurrentField(params.row);
setDialogOpen(true);
}}
/>,
<GridActionsCellItem
icon={<DeleteIcon />}
label="Elimina"
onClick={() => handleDelete(params.row.id)}
/>,
],
},
];
return (
<Box p={3}>
<Typography variant="h4" gutterBottom>
Gestione Campi Personalizzati
</Typography>
<Card sx={{ mb: 3 }}>
<CardContent>
<Box display="flex" flexWrap="wrap" gap={2} alignItems="center">
<Box flexBasis={{ xs: '100%', md: '33%' }} flexGrow={1}>
<FormControl fullWidth>
<InputLabel>Entità</InputLabel>
<Select
value={selectedEntity}
label="Entità"
onChange={(e) => setSelectedEntity(e.target.value)}
>
{ENTITIES.map(e => (
<MenuItem key={e.value} value={e.value}>{e.label}</MenuItem>
))}
</Select>
</FormControl>
</Box>
<Box flexBasis={{ xs: '100%', md: 'auto' }} display="flex" justifyContent="flex-end">
<Button
variant="contained"
startIcon={<AddIcon />}
onClick={() => {
setCurrentField({
type: CustomFieldType.Text,
isRequired: false,
entityName: selectedEntity
});
setDialogOpen(true);
}}
>
Nuovo Campo
</Button>
</Box>
</Box>
</CardContent>
</Card>
<div style={{ height: 600, width: '100%' }}>
<DataGrid
rows={fields}
columns={columns}
loading={loading}
disableRowSelectionOnClick
/>
</div>
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>{currentField.id ? 'Modifica Campo' : 'Nuovo Campo'}</DialogTitle>
<DialogContent>
<Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
<TextField
label="Etichetta (Label)"
fullWidth
value={currentField.label || ''}
onChange={(e) => setCurrentField({ ...currentField, label: e.target.value })}
required
/>
<TextField
label="Nome Interno (es. data_nascita)"
fullWidth
value={currentField.fieldName || ''}
onChange={(e) => setCurrentField({ ...currentField, fieldName: e.target.value })}
required
helperText="Deve essere univoco per l'entità. Usa solo lettere minuscole e underscore."
disabled={!!currentField.id}
/>
<FormControl fullWidth>
<InputLabel>Tipo</InputLabel>
<Select
value={currentField.type}
label="Tipo"
onChange={(e) => setCurrentField({ ...currentField, type: e.target.value as CustomFieldType })}
>
{FIELD_TYPES.map(t => (
<MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>
))}
</Select>
</FormControl>
{currentField.type === CustomFieldType.Select && (
<TextField
label="Opzioni (JSON Array)"
fullWidth
multiline
rows={3}
value={currentField.optionsJson || ''}
onChange={(e) => setCurrentField({ ...currentField, optionsJson: e.target.value })}
placeholder='["Opzione 1", "Opzione 2"]'
helperText="Inserisci un array JSON valido di stringhe"
/>
)}
<TextField
label="Descrizione / Helper Text"
fullWidth
value={currentField.description || ''}
onChange={(e) => setCurrentField({ ...currentField, description: e.target.value })}
/>
<FormControlLabel
control={
<Checkbox
checked={currentField.isRequired || false}
onChange={(e) => setCurrentField({ ...currentField, isRequired: e.target.checked })}
/>
}
label="Obbligatorio"
/>
<TextField
label="Ordine"
type="number"
fullWidth
value={currentField.sortOrder || 0}
onChange={(e) => setCurrentField({ ...currentField, sortOrder: parseInt(e.target.value) })}
/>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => setDialogOpen(false)}>Annulla</Button>
<Button onClick={handleSave} variant="contained">Salva</Button>
</DialogActions>
</Dialog>
<Snackbar open={snackbar.open} autoHideDuration={6000} onClose={handleCloseSnackbar}>
<Alert onClose={handleCloseSnackbar} severity={snackbar.severity} sx={{ width: '100%' }}>
{snackbar.message}
</Alert>
</Snackbar>
</Box>
);
};
export default CustomFieldsAdminPage;

24
frontend/src/services/customFieldService.ts Normal file
View File

@@ -0,0 +1,24 @@
import api from './api';
import { CustomFieldDefinition } from '../types/customFields';
export const customFieldService = {
getAll: async () => {
const response = await api.get<CustomFieldDefinition[]>('/custom-fields');
return response.data;
},
getByEntity: async (entityName: string) => {
const response = await api.get<CustomFieldDefinition[]>(`/custom-fields/entity/${entityName}`);
return response.data;
},
create: async (definition: Omit<CustomFieldDefinition, 'id'>) => {
const response = await api.post<CustomFieldDefinition>('/custom-fields', definition);
return response.data;
},
update: async (id: number, definition: CustomFieldDefinition) => {
const response = await api.put<CustomFieldDefinition>(`/custom-fields/${id}`, definition);
return response.data;
},
delete: async (id: number) => {
await api.delete(`/custom-fields/${id}`);
}
};

32
frontend/src/types/customFields.ts Normal file
View File

@@ -0,0 +1,32 @@
export enum CustomFieldType {
Text = 0,
Number = 1,
Date = 2,
Boolean = 3,
Select = 4,
MultiSelect = 5,
TextArea = 6,
Color = 7,
Url = 8,
Email = 9
}
export interface CustomFieldDefinition {
id: number;
entityName: string;
fieldName: string;
label: string;
type: CustomFieldType;
isRequired: boolean;
defaultValue?: string;
optionsJson?: string;
sortOrder: number;
description?: string;
isActive: boolean;
validationRegex?: string;
placeholder?: string;
}
export interface CustomFieldValues {
[key: string]: any;
}

1
frontend/src/types/index.ts
View File

@@ -10,6 +10,7 @@ export interface BaseEntity {
createdBy?: string;
updatedAt?: string;
updatedBy?: string;
customFieldsJson?: string;
}
export interface Cliente extends BaseEntity {