hobbyhimmel/Project-Image-Uploader
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): migrate DescriptionInput to MUI sx

Browse Source
This commit is contained in:
Matthias Lotz 2025-10-29 21:26:51 +01:00
parent 8535e8fafe
commit 4aac9dae4e
1 changed files with 74 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
frontend/src/Components/ComponentUtils/MultiUpload/DescriptionInput.js
View File

@ -1,73 +1,10 @@
import React from 'react';
import { makeStyles } from '@mui/styles';
import { TextField, Typography, Grid, Box } from '@mui/material';
const useStyles = makeStyles({
container: {
marginTop: '20px',
marginBottom: '20px'
},
sectionTitle: {
fontFamily: 'roboto',
fontSize: '18px',
color: '#333333',
marginBottom: '15px',
display: 'block',
fontWeight: '500'
},
fieldLabel: {
fontFamily: 'roboto',
fontSize: '14px',
color: '#555555',
marginBottom: '8px',
display: 'block'
},
textField: {
width: '100%',
marginBottom: '15px',
'& .MuiOutlinedInput-root': {
borderRadius: '8px'
}
},
requiredField: {
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
'& fieldset': {
borderColor: '#E57373'
}
}
},
optionalField: {
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
'& fieldset': {
borderColor: '#E0E0E0'
}
}
},
characterCount: {
fontSize: '12px',
color: '#999999',
textAlign: 'right',
marginTop: '-10px',
marginBottom: '10px'
},
requiredIndicator: {
color: '#E57373',
fontSize: '16px'
},
optionalIndicator: {
color: '#9E9E9E',
fontSize: '12px',
fontStyle: 'italic'
}
});
function DescriptionInput({
metadata = {},
onMetadataChange
}) {
const classes = useStyles();
const handleFieldChange = (field, value) => {
const updatedMetadata = {
@ -79,19 +16,71 @@ function DescriptionInput({
const currentYear = new Date().getFullYear();
const fieldLabelSx = {
fontFamily: 'roboto',
fontSize: '14px',
color: '#555555',
marginBottom: '8px',
display: 'block'
};
const sectionTitleSx = {
fontFamily: 'roboto',
fontSize: '18px',
color: '#333333',
marginBottom: '15px',
display: 'block',
fontWeight: 500
};
const textFieldSx = {
width: '100%',
marginBottom: '15px',
'& .MuiOutlinedInput-root': {
borderRadius: '8px'
}
};
const requiredFieldSx = {
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
'& fieldset': {
borderColor: '#E57373'
}
}
};
const optionalFieldSx = {
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
'& fieldset': {
borderColor: '#E0E0E0'
}
}
};
const characterCountSx = {
fontSize: '12px',
color: '#999999',
textAlign: 'right',
marginTop: '-10px',
marginBottom: '10px'
};
const requiredIndicatorSx = { color: '#E57373', fontSize: '16px' };
const optionalIndicatorSx = { color: '#9E9E9E', fontSize: '12px', fontStyle: 'italic' };
return (
<div className={classes.container}>
<Typography className={classes.sectionTitle}>
📝 Projekt-Informationen
</Typography>
<Box sx={{ marginTop: '20px', marginBottom: '20px' }}>
<Typography sx={sectionTitleSx}>📝 Projekt-Informationen</Typography>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Typography className={classes.fieldLabel}>
Jahr <span className={classes.requiredIndicator}>*</span>
<Typography sx={fieldLabelSx}>
Jahr <Box component="span" sx={requiredIndicatorSx}>*</Box>
</Typography>
<TextField
className={`${classes.textField} ${classes.requiredField}`}
sx={{ ...textFieldSx, ...requiredFieldSx }}
variant="outlined"
type="number"
value={metadata.year || currentYear}
@ -105,59 +94,51 @@ function DescriptionInput({
</Grid>
<Grid item xs={12} sm={6}>
<Typography className={classes.fieldLabel}>
Titel <span className={classes.requiredIndicator}>*</span>
<Typography sx={fieldLabelSx}>
Titel <Box component="span" sx={requiredIndicatorSx}>*</Box>
</Typography>
<TextField
className={`${classes.textField} ${classes.requiredField}`}
sx={{ ...textFieldSx, ...requiredFieldSx }}
variant="outlined"
value={metadata.title || ''}
onChange={(e) => handleFieldChange('title', e.target.value)}
placeholder="z.B. Wohnzimmer Renovierung"
inputProps={{
maxLength: 100
}}
inputProps={{ maxLength: 100 }}
/>
</Grid>
<Grid item xs={12}>
<Typography className={classes.fieldLabel}>
Beschreibung <span className={classes.optionalIndicator}>(optional)</span>
<Typography sx={fieldLabelSx}>
Beschreibung <Box component="span" sx={optionalIndicatorSx}>(optional)</Box>
</Typography>
<TextField
className={`${classes.textField} ${classes.optionalField}`}
sx={{ ...textFieldSx, ...optionalFieldSx }}
multiline
rows={3}
variant="outlined"
value={metadata.description || ''}
onChange={(e) => handleFieldChange('description', e.target.value)}
placeholder="Detaillierte Beschreibung des Projekts..."
inputProps={{
maxLength: 500
}}
inputProps={{ maxLength: 500 }}
/>
<div className={classes.characterCount}>
{(metadata.description || '').length} / 500 Zeichen
</div>
<Box sx={characterCountSx}>{(metadata.description || '').length} / 500 Zeichen</Box>
</Grid>
<Grid item xs={12}>
<Typography className={classes.fieldLabel}>
Name/Ersteller <span className={classes.optionalIndicator}>(optional)</span>
<Typography sx={fieldLabelSx}>
Name/Ersteller <Box component="span" sx={optionalIndicatorSx}>(optional)</Box>
</Typography>
<TextField
className={`${classes.textField} ${classes.optionalField}`}
sx={{ ...textFieldSx, ...optionalFieldSx }}
variant="outlined"
value={metadata.name || ''}
onChange={(e) => handleFieldChange('name', e.target.value)}
placeholder="Dein Name oder Projektersteller"
inputProps={{
maxLength: 50
}}
inputProps={{ maxLength: 50 }}
/>
</Grid>
</Grid>
</div>
</Box>
);
}