380 lines
12 KiB
JavaScript
380 lines
12 KiB
JavaScript
import { PureComponent } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
import Chip from '@mui/material/Chip';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';
|
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
|
import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
|
|
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
|
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
|
|
import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
|
|
import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import { PanelTile } from 'dashgui/panels';
|
|
import { delivery as deliveryApi } from '../../api';
|
|
import {
|
|
SURFACE_BASE,
|
|
SURFACE_WASH,
|
|
WHITE,
|
|
} from '../../colors';
|
|
|
|
/**
|
|
* Inline text-file viewer/editor rendered as a full-width panel tile below the
|
|
* manifest header ("Kopfdaten"). Mount it only while a text attachment is
|
|
* selected; unmounting closes it.
|
|
*/
|
|
export class TextEditorPanel extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
content: '',
|
|
initialContent: '',
|
|
loading: false,
|
|
};
|
|
this.handleChange = this.handleChange.bind(this);
|
|
this.handleSave = this.handleSave.bind(this);
|
|
this.handleCopy = this.handleCopy.bind(this);
|
|
this.handleDownload = this.handleDownload.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadContent();
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (this.props.attachment !== prevProps.attachment) {
|
|
this.loadContent();
|
|
}
|
|
}
|
|
|
|
async loadContent() {
|
|
const { attachment, docId, onContentLoad } = this.props;
|
|
if (!attachment) return;
|
|
|
|
if (typeof attachment.text === 'string') {
|
|
this.setState({
|
|
content: attachment.text,
|
|
initialContent: attachment.text,
|
|
loading: false,
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
(attachment.file instanceof Blob || attachment.file instanceof File) &&
|
|
attachment.file.size > 0
|
|
) {
|
|
this.setState({ loading: true });
|
|
try {
|
|
const text = await attachment.file.text();
|
|
this.setState({
|
|
content: text,
|
|
initialContent: text,
|
|
loading: false,
|
|
});
|
|
return;
|
|
} catch (err) {
|
|
console.error('Fehler beim Lesen der Textdatei:', err);
|
|
this.setState({ loading: false });
|
|
}
|
|
}
|
|
|
|
// Attachment has no text and empty file — load from API (GET /delivery/{id}/file/{fileId})
|
|
const effectiveDocId = docId ?? attachment.manifestId;
|
|
const fileId = attachment.fileId ?? attachment.id;
|
|
if (effectiveDocId != null && fileId != null) {
|
|
this.setState({ loading: true });
|
|
try {
|
|
const blob = await deliveryApi.getFile(effectiveDocId, fileId);
|
|
const text = await blob.text();
|
|
this.setState({
|
|
content: text,
|
|
initialContent: text,
|
|
loading: false,
|
|
});
|
|
onContentLoad?.(attachment, text, blob);
|
|
return;
|
|
} catch (err) {
|
|
console.error('Fehler beim Laden der Textdatei:', err);
|
|
enqueueSnackbar('Fehler beim Laden der Datei', { variant: 'error' });
|
|
this.setState({ loading: false });
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.setState({
|
|
content: '',
|
|
initialContent: '',
|
|
loading: false,
|
|
});
|
|
}
|
|
|
|
handleChange(e) {
|
|
this.setState({ content: e.target.value });
|
|
}
|
|
|
|
handleSave() {
|
|
const { onSave, onClose } = this.props;
|
|
const { content } = this.state;
|
|
onSave?.(content);
|
|
enqueueSnackbar('Textdatei gespeichert', { variant: 'success' });
|
|
onClose?.();
|
|
}
|
|
|
|
async handleCopy() {
|
|
try {
|
|
await navigator.clipboard.writeText(this.state.content);
|
|
enqueueSnackbar('In die Zwischenablage kopiert', { variant: 'info' });
|
|
} catch {
|
|
enqueueSnackbar('Kopieren fehlgeschlagen', { variant: 'error' });
|
|
}
|
|
}
|
|
|
|
handleDownload() {
|
|
const { attachment } = this.props;
|
|
const { content } = this.state;
|
|
if (!content) return;
|
|
const filename = attachment?.name || 'Dokument.txt';
|
|
const blob = new Blob([content], { type: 'text/plain;charset=utf-8;' });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = filename;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
onClose,
|
|
attachment,
|
|
readOnly = false,
|
|
wide = 3,
|
|
position = 'top',
|
|
onPositionChange,
|
|
height = '60vh',
|
|
} = this.props;
|
|
if (!attachment) return null;
|
|
|
|
const { content, initialContent, loading } = this.state;
|
|
const filename = attachment?.name || 'Dokument.txt';
|
|
const isDirty = content !== initialContent;
|
|
const linesCount = content ? content.split('\n').length : 0;
|
|
const charCount = content ? content.length : 0;
|
|
|
|
return (
|
|
<PanelTile
|
|
wide={wide}
|
|
minHeight={320}
|
|
color={SURFACE_BASE}
|
|
sx={{ height, minHeight: 320 }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 1.5,
|
|
mb: 1.5,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, minWidth: 0 }}>
|
|
<TextSnippetOutlinedIcon color="primary" />
|
|
<Box sx={{ minWidth: 0 }}>
|
|
<Typography variant="subtitle1" fontWeight={600} noWrap>
|
|
{filename}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{linesCount} Zeilen · {charCount} Zeichen
|
|
</Typography>
|
|
</Box>
|
|
{isDirty && (
|
|
<Chip
|
|
label="Ungespeichert"
|
|
size="small"
|
|
color="warning"
|
|
sx={{ height: 20, fontSize: '0.7rem' }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
|
|
<Tooltip title="Über der Artikelliste">
|
|
<IconButton
|
|
size="small"
|
|
color={position === 'top' ? 'primary' : 'default'}
|
|
aria-label="Über der Artikelliste"
|
|
onClick={() => onPositionChange?.('top')}
|
|
>
|
|
<VerticalAlignTopIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Rechts neben der Artikelliste">
|
|
<IconButton
|
|
size="small"
|
|
color={position === 'right' ? 'primary' : 'default'}
|
|
aria-label="Rechts neben der Artikelliste"
|
|
onClick={() => onPositionChange?.('right')}
|
|
>
|
|
<ViewSidebarIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Unter der Artikelliste">
|
|
<IconButton
|
|
size="small"
|
|
color={position === 'below' ? 'primary' : 'default'}
|
|
aria-label="Unter der Artikelliste"
|
|
onClick={() => onPositionChange?.('below')}
|
|
>
|
|
<VerticalAlignBottomIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<IconButton size="small" onClick={onClose} sx={{ color: 'text.secondary' }}>
|
|
<CloseIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
position: 'relative',
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: 0,
|
|
}}
|
|
>
|
|
{loading && (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
bgcolor: SURFACE_WASH,
|
|
zIndex: 2,
|
|
}}
|
|
>
|
|
<CircularProgress size={36} />
|
|
</Box>
|
|
)}
|
|
<TextField
|
|
multiline
|
|
fullWidth
|
|
value={content}
|
|
disabled={loading}
|
|
onChange={this.handleChange}
|
|
slotProps={{
|
|
htmlInput: {
|
|
wrap: 'off',
|
|
spellCheck: false,
|
|
},
|
|
input: {
|
|
readOnly,
|
|
sx: {
|
|
height: '100%',
|
|
alignItems: 'flex-start',
|
|
fontFamily:
|
|
'"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
fontSize: '0.72rem',
|
|
lineHeight: 1.45,
|
|
tabSize: 4,
|
|
bgcolor: WHITE,
|
|
p: 1.5,
|
|
'& textarea': {
|
|
height: '100% !important',
|
|
whiteSpace: 'pre !important',
|
|
overflowWrap: 'normal !important',
|
|
wordWrap: 'normal !important',
|
|
wordBreak: 'normal !important',
|
|
overflowX: 'auto !important',
|
|
overflowY: 'auto !important',
|
|
fontFamily: 'inherit',
|
|
fontSize: 'inherit',
|
|
lineHeight: 'inherit',
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
sx={{
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
'& .MuiInputBase-root': {
|
|
flex: 1,
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
gap: 1,
|
|
mt: 1.5,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
startIcon={<ContentCopyIcon />}
|
|
onClick={this.handleCopy}
|
|
disabled={loading || !content}
|
|
>
|
|
Kopieren
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
startIcon={<DownloadOutlinedIcon />}
|
|
onClick={this.handleDownload}
|
|
disabled={loading || !content}
|
|
>
|
|
Download
|
|
</Button>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
<Button size="small" onClick={onClose}>
|
|
{readOnly ? 'Schließen' : 'Abbrechen'}
|
|
</Button>
|
|
{!readOnly && (
|
|
<Button
|
|
size="small"
|
|
variant="contained"
|
|
startIcon={<SaveOutlinedIcon />}
|
|
onClick={this.handleSave}
|
|
disabled={loading || !isDirty}
|
|
>
|
|
Speichern
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</PanelTile>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default TextEditorPanel; |