added script to generate open api scheme automatically - execute with npm run watch:openapi
This commit is contained in:
GotthardG
@ -9,14 +9,15 @@ import {
|
||||
Paper,
|
||||
Tooltip,
|
||||
TextField,
|
||||
Typography
|
||||
Typography,
|
||||
Button
|
||||
} from '@mui/material';
|
||||
import { SpreadsheetService } from '../../openapi'; // Ensure correct path
|
||||
import { SpreadsheetService } from '../../openapi';
|
||||
|
||||
const SpreadsheetTable = ({ raw_data, errors, headers, setRawData }) => {
|
||||
const [localErrors, setLocalErrors] = useState(errors || []);
|
||||
const [editingCell, setEditingCell] = useState({});
|
||||
|
||||
// Create an error map to easily lookup errors by row and column
|
||||
const generateErrorMap = (errorsList) => {
|
||||
const errorMap = new Map();
|
||||
if (Array.isArray(errorsList)) {
|
||||
@ -30,57 +31,105 @@ const SpreadsheetTable = ({ raw_data, errors, headers, setRawData }) => {
|
||||
|
||||
const errorMap = generateErrorMap(localErrors);
|
||||
|
||||
// Handle cell edit
|
||||
const handleCellEdit = async (rowIndex, colIndex, newValue) => {
|
||||
const handleCellEdit = async (rowIndex, colIndex) => {
|
||||
const updatedRawData = [...raw_data];
|
||||
const columnName = headers[colIndex];
|
||||
const currentRow = updatedRawData[rowIndex];
|
||||
const newValue = editingCell[`${rowIndex}-${colIndex}`];
|
||||
|
||||
// Assuming data is an array and we need to set by index
|
||||
if (newValue === undefined) return;
|
||||
|
||||
console.log(`Editing cell at row ${rowIndex}, column ${colIndex}: new value: ${newValue}`);
|
||||
|
||||
// Ensure currentRow.data exists before accessing it
|
||||
if (!currentRow.data) {
|
||||
currentRow.data = [];
|
||||
}
|
||||
|
||||
// Update the relevant cell value
|
||||
currentRow.data[colIndex] = newValue;
|
||||
|
||||
setEditingCell(prev => {
|
||||
const updated = { ...prev };
|
||||
delete updated[`${rowIndex}-${colIndex}`];
|
||||
return updated;
|
||||
});
|
||||
|
||||
try {
|
||||
// Send a request to validate the cell
|
||||
const response = await SpreadsheetService.validateCellValidateCellPost({
|
||||
row: currentRow.row_num, // Use row_num directly from the current row
|
||||
row: currentRow.row_num,
|
||||
column: columnName,
|
||||
value: newValue
|
||||
});
|
||||
|
||||
// Log the response to debug the structure
|
||||
console.log('Validation response:', response);
|
||||
|
||||
// Check if response is valid and structured as expected
|
||||
if (response.data && response.data.is_valid !== undefined) {
|
||||
if (response.data.is_valid) {
|
||||
// Remove error if validation passes
|
||||
const updatedErrors = localErrors.filter(error => !(error.row === currentRow.row_num && error.cell === colIndex));
|
||||
if (response.is_valid !== undefined) {
|
||||
if (response.is_valid) {
|
||||
// Remove error if it passes validation
|
||||
const updatedErrors = localErrors.filter(
|
||||
error => !(error.row === currentRow.row_num && error.cell === colIndex)
|
||||
);
|
||||
setLocalErrors(updatedErrors);
|
||||
} else {
|
||||
// Add error if validation fails
|
||||
const updatedErrors = [...localErrors, { row: currentRow.row_num, cell: colIndex, message: response.data.message || 'Invalid value.' }];
|
||||
const updatedErrors = [
|
||||
...localErrors,
|
||||
{ row: currentRow.row_num, cell: colIndex, message: response.message || 'Invalid value.' }
|
||||
];
|
||||
setLocalErrors(updatedErrors);
|
||||
}
|
||||
} else {
|
||||
// Handle unexpected response format
|
||||
console.error('Unexpected response structure:', response);
|
||||
}
|
||||
|
||||
// Update the raw data
|
||||
setRawData(updatedRawData);
|
||||
} catch (error) {
|
||||
console.error('Validation failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Hook to log and monitor changes in raw data, errors, and headers
|
||||
const handleCellBlur = (rowIndex, colIndex) => {
|
||||
handleCellEdit(rowIndex, colIndex);
|
||||
};
|
||||
|
||||
const validateBeforeSubmit = () => {
|
||||
let isValid = true;
|
||||
raw_data.forEach((row, rowIndex) => {
|
||||
headers.forEach((header, colIndex) => {
|
||||
const key = `${row.row_num}-${header}`;
|
||||
const newValue = editingCell[`${rowIndex}-${colIndex}`];
|
||||
|
||||
if (newValue !== undefined) {
|
||||
// Perform cell validation on each edit
|
||||
handleCellEdit(rowIndex, colIndex);
|
||||
}
|
||||
|
||||
const errorMessage = errorMap.get(key);
|
||||
if (errorMessage) {
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const isValid = validateBeforeSubmit();
|
||||
|
||||
if (isValid) {
|
||||
console.log('All data is valid. Proceeding with submission...');
|
||||
// Use validated data to populate the database
|
||||
// You can call a dedicated API endpoint to process the entire dataset as needed
|
||||
} else {
|
||||
console.log('There are validation errors in the dataset. Please correct them before submission.');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Raw data:', raw_data);
|
||||
console.log('Errors:', errors);
|
||||
console.log('Errors:', localErrors);
|
||||
console.log('Headers:', headers);
|
||||
}, [raw_data, errors, headers]);
|
||||
}, [raw_data, localErrors, headers]);
|
||||
|
||||
// Ensure data is loaded before rendering
|
||||
if (!raw_data || !headers) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
@ -101,35 +150,30 @@ const SpreadsheetTable = ({ raw_data, errors, headers, setRawData }) => {
|
||||
{raw_data.map((row, rowIndex) => (
|
||||
<TableRow key={rowIndex}>
|
||||
{headers.map((header, colIndex) => {
|
||||
const key = `${row.row_num}-${header}`; // Key for error lookup should match row's row_num
|
||||
const key = `${row.row_num}-${header}`;
|
||||
const errorMessage = errorMap.get(key);
|
||||
const isInvalid = !!errorMessage; // Check if the cell has an error
|
||||
const cellValue = row.data[colIndex]; // Extract cell value via index
|
||||
const isInvalid = !!errorMessage;
|
||||
const cellValue = (row.data && row.data[colIndex]) || "";
|
||||
const editingValue = editingCell[`${rowIndex}-${colIndex}`];
|
||||
|
||||
return (
|
||||
<TableCell key={colIndex} align="center">
|
||||
{isInvalid ? (
|
||||
<Tooltip title={errorMessage} arrow>
|
||||
<TextField
|
||||
value={cellValue || ""} // Prevent null, fallback to empty string
|
||||
onChange={(e) => handleCellEdit(rowIndex, colIndex, e.target.value)}
|
||||
error={true} // Show red border if there's an error
|
||||
fullWidth
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root.Mui-error': {
|
||||
borderColor: 'red', // Apply red border for invalid cells
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title={errorMessage || ""} arrow disableHoverListener={!isInvalid}>
|
||||
<TextField
|
||||
value={cellValue || ""}
|
||||
onChange={(e) => handleCellEdit(rowIndex, colIndex, e.target.value)}
|
||||
value={editingValue !== undefined ? editingValue : cellValue}
|
||||
onChange={(e) => setEditingCell({ ...editingCell, [`${rowIndex}-${colIndex}`]: e.target.value })}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleCellEdit(rowIndex, colIndex);
|
||||
}
|
||||
}}
|
||||
onBlur={() => handleCellBlur(rowIndex, colIndex)}
|
||||
error={isInvalid}
|
||||
fullWidth
|
||||
disabled={true} // Disable valid cells so they cannot be edited
|
||||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
@ -137,6 +181,9 @@ const SpreadsheetTable = ({ raw_data, errors, headers, setRawData }) => {
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Button variant="contained" color="primary" onClick={handleSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user