120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
import { Component } from 'react';
|
|
import Autocomplete from '@mui/material/Autocomplete';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
import Box from '@mui/material/Box';
|
|
import { EditablePanelTile } from '../../panels';
|
|
import { StorageManagerContext } from '../../../api/storageManagerContext';
|
|
import { requireObject } from '../../../utils/apiShape';
|
|
import { articleEans } from '../../../utils/articleDetail';
|
|
class PanelValue extends Component {
|
|
render() {
|
|
const { label, children } = this.props;
|
|
if (children == null || children === '') return null;
|
|
return (
|
|
<Box sx={{ mb: 1 }}>
|
|
{label ? (
|
|
<Typography variant="caption" color="text.secondary" display="block">
|
|
{label}
|
|
</Typography>
|
|
) : null}
|
|
<Typography variant="body2" component="div">
|
|
{children}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
function eansDraftValue(article) {
|
|
return { eans: articleEans(article) };
|
|
}
|
|
|
|
function eansDraftDirty(draft, saved) {
|
|
return JSON.stringify(draft.eans ?? []) !== JSON.stringify(saved.eans ?? []);
|
|
}
|
|
|
|
function eansDraftValid(draft) {
|
|
return (draft.eans ?? []).every(
|
|
(ean) => typeof ean === 'string' && ean.trim().length > 0,
|
|
);
|
|
}
|
|
|
|
const SECOND_ROW_MIN_HEIGHT = 220;
|
|
|
|
class EansDisplay extends Component {
|
|
render() {
|
|
const { sku, eans } = this.props;
|
|
return (
|
|
<>
|
|
<PanelValue label="SKU">{sku}</PanelValue>
|
|
{(eans ?? []).map((ean) => (
|
|
<PanelValue key={ean} label="EAN">
|
|
{ean}
|
|
</PanelValue>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
class EansEdit extends Component {
|
|
render() {
|
|
const { draft, onChange, inputRef } = this.props;
|
|
return (
|
|
<Autocomplete
|
|
fullWidth
|
|
multiple
|
|
freeSolo
|
|
options={[]}
|
|
value={draft.eans ?? []}
|
|
onChange={(_event, eans) => onChange({ eans })}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
inputRef={inputRef}
|
|
label="EANs (Enter zum Hinzufügen)"
|
|
size="small"
|
|
slotProps={{ inputLabel: { shrink: true } }}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default class ArticleViewEANs extends Component {
|
|
static contextType = StorageManagerContext;
|
|
|
|
handleSave = async (draft) => {
|
|
const { article: articleData, onArticleUpdated } = this.props;
|
|
const eans = (draft.eans ?? [])
|
|
.map((ean) => String(ean).trim())
|
|
.filter((ean) => ean.length > 0);
|
|
const res = await this.context.article.setEans(articleData.sku, { eans });
|
|
requireObject(res, 'PUT /api/article/:sku/eans');
|
|
requireObject(res.article, 'article');
|
|
onArticleUpdated?.(res.article);
|
|
};
|
|
|
|
render() {
|
|
const { article: articleData } = this.props;
|
|
const value = eansDraftValue(articleData);
|
|
|
|
return (
|
|
<EditablePanelTile
|
|
wide={1}
|
|
minHeight={SECOND_ROW_MIN_HEIGHT}
|
|
color="#e2e8f0"
|
|
contentAlignItems="flex-start"
|
|
value={value}
|
|
onSave={this.handleSave}
|
|
isDirty={eansDraftDirty}
|
|
canSave={eansDraftValid}
|
|
display={<EansDisplay sku={articleData.sku} eans={value.eans} />}
|
|
edit={<EansEdit />}
|
|
/>
|
|
);
|
|
}
|
|
}
|