676 lines
22 KiB
JavaScript
676 lines
22 KiB
JavaScript
import { PureComponent, createRef } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import List from '@mui/material/List';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import TuneIcon from '@mui/icons-material/Tune';
|
|
import StyleIcon from '@mui/icons-material/Style';
|
|
import LabelImportantIcon from '@mui/icons-material/LabelImportant';
|
|
import Sortable from 'sortablejs';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import BackendError from '../../components/BackendError';
|
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
|
import FillSpace from 'dashgui/FillSpace';
|
|
import { PanelTile, PanelTileGrid, TabbedPanelTileGrid } from 'dashgui/panels';
|
|
import withNavigate from '../../components/withNavigate';
|
|
import { backendErrorFrom } from '../../utils/backendError';
|
|
import { notifyError } from '../../utils/notify';
|
|
import { setLastArticleSku } from '../../automats';
|
|
import attributeAutomat, { selectAttributes } from '../../automats/attributeAutomat';
|
|
import propertyAutomat, { selectProperties } from '../../automats/propertyAutomat';
|
|
import {
|
|
ArtikelMerkmalAuswahl,
|
|
ArtikelMerkmalWert,
|
|
ArtikelMerkmalText,
|
|
} from '../../components/merkmale';
|
|
import {
|
|
BLUE_PANEL,
|
|
ORANGE_PANEL,
|
|
PURPLE_PANEL,
|
|
} from '../../colors';
|
|
|
|
class ArtikelMerkmalePage extends PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
const initialAttributes = selectAttributes() || [];
|
|
const initialProperties = selectProperties() || [];
|
|
const initialSelectedAttrId = initialAttributes[0]?.id ?? null;
|
|
|
|
this.state = {
|
|
attrStatus: attributeAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
|
|
propStatus: propertyAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
|
|
error: attributeAutomat.state.error || propertyAutomat.state.error || null,
|
|
|
|
attributes: initialAttributes,
|
|
attrFilter: '',
|
|
attrSubmitting: false,
|
|
attrPage: 1,
|
|
selectedAttributeId: initialSelectedAttrId,
|
|
|
|
valFilter: '',
|
|
valSubmitting: false,
|
|
valPage: 1,
|
|
|
|
properties: initialProperties,
|
|
propFilter: '',
|
|
propSubmitting: false,
|
|
propPage: 1,
|
|
};
|
|
|
|
this._cancelled = false;
|
|
this.propListRef = createRef();
|
|
this.attrListRef = createRef();
|
|
this.valListRef = createRef();
|
|
|
|
this._propSortable = null;
|
|
this._attrSortable = null;
|
|
this._valSortable = null;
|
|
|
|
this.handleRetry = this.handleRetry.bind(this);
|
|
this.handleTabChange = this.handleTabChange.bind(this);
|
|
this.handleCreateAttribute = this.handleCreateAttribute.bind(this);
|
|
this.handleCreateValue = this.handleCreateValue.bind(this);
|
|
this.handleCreateProperty = this.handleCreateProperty.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
setLastArticleSku(null);
|
|
this._cancelled = false;
|
|
|
|
this.unsubProp = propertyAutomat.subscribe((state) => {
|
|
if (this._cancelled) return;
|
|
if (state.status === 'succeeded') {
|
|
this.setState({
|
|
propStatus: 'ready',
|
|
error: null,
|
|
properties: state.properties,
|
|
});
|
|
} else if (state.status === 'failed') {
|
|
this.setState({ propStatus: 'failed', error: backendErrorFrom(state.error) });
|
|
}
|
|
});
|
|
|
|
this.unsubAttr = attributeAutomat.subscribe((state) => {
|
|
if (this._cancelled) return;
|
|
if (state.status === 'succeeded') {
|
|
let selectedId = this.state.selectedAttributeId;
|
|
if (!selectedId || !state.attributes.some((a) => a.id === selectedId)) {
|
|
selectedId = state.attributes[0]?.id ?? null;
|
|
}
|
|
this.setState({
|
|
attrStatus: 'ready',
|
|
error: null,
|
|
attributes: state.attributes,
|
|
selectedAttributeId: selectedId,
|
|
});
|
|
} else if (state.status === 'failed') {
|
|
this.setState({ attrStatus: 'failed', error: backendErrorFrom(state.error) });
|
|
}
|
|
});
|
|
|
|
void this.loadAll();
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
if (
|
|
(prevState.properties !== this.state.properties ||
|
|
prevState.propFilter !== this.state.propFilter ||
|
|
prevState.propPage !== this.state.propPage ||
|
|
prevState.propStatus !== this.state.propStatus) &&
|
|
this.propListRef.current
|
|
) {
|
|
if (this.state.propStatus === 'ready') {
|
|
this._initPropSortable();
|
|
}
|
|
}
|
|
|
|
if (
|
|
(prevState.attributes !== this.state.attributes ||
|
|
prevState.attrFilter !== this.state.attrFilter ||
|
|
prevState.attrPage !== this.state.attrPage ||
|
|
prevState.attrStatus !== this.state.attrStatus) &&
|
|
this.attrListRef.current
|
|
) {
|
|
if (this.state.attrStatus === 'ready') {
|
|
this._initAttrSortable();
|
|
}
|
|
}
|
|
|
|
if (
|
|
(prevState.selectedAttributeId !== this.state.selectedAttributeId ||
|
|
prevState.attributes !== this.state.attributes ||
|
|
prevState.valFilter !== this.state.valFilter ||
|
|
prevState.valPage !== this.state.valPage ||
|
|
prevState.attrStatus !== this.state.attrStatus) &&
|
|
this.valListRef.current
|
|
) {
|
|
if (this.state.attrStatus === 'ready') {
|
|
this._initValSortable();
|
|
}
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this._cancelled = true;
|
|
this.unsubProp?.();
|
|
this.unsubAttr?.();
|
|
this._destroySortables();
|
|
}
|
|
|
|
// --- SortableJS Initialization ---
|
|
|
|
_initPropSortable() {
|
|
this._propSortable?.destroy();
|
|
const el = this.propListRef.current;
|
|
if (!el) return;
|
|
|
|
const isFiltered = Boolean(this.state.propFilter?.trim());
|
|
|
|
this._propSortable = Sortable.create(el, {
|
|
handle: '.drag-handle',
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
chosenClass: 'sortable-chosen',
|
|
disabled: isFiltered,
|
|
onEnd: (evt) => {
|
|
const { oldIndex, newIndex } = evt;
|
|
if (oldIndex === newIndex) return;
|
|
|
|
const offset = ((this.state.propPage || 1) - 1) * 8;
|
|
const realOld = offset + oldIndex;
|
|
const realNew = offset + newIndex;
|
|
if (realOld === realNew) return;
|
|
|
|
this.setState(
|
|
(prev) => {
|
|
const next = [...prev.properties];
|
|
const [moved] = next.splice(realOld, 1);
|
|
next.splice(realNew, 0, moved);
|
|
return { properties: next };
|
|
},
|
|
() => {
|
|
const ids = this.state.properties.map((p) => p.id);
|
|
void this._persistPropOrder(ids);
|
|
}
|
|
);
|
|
},
|
|
});
|
|
}
|
|
|
|
_initAttrSortable() {
|
|
this._attrSortable?.destroy();
|
|
const el = this.attrListRef.current;
|
|
if (!el) return;
|
|
|
|
const isFiltered = Boolean(this.state.attrFilter?.trim());
|
|
|
|
this._attrSortable = Sortable.create(el, {
|
|
handle: '.drag-handle',
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
chosenClass: 'sortable-chosen',
|
|
disabled: isFiltered,
|
|
onEnd: (evt) => {
|
|
const { oldIndex, newIndex } = evt;
|
|
if (oldIndex === newIndex) return;
|
|
|
|
const offset = ((this.state.attrPage || 1) - 1) * 8;
|
|
const realOld = offset + oldIndex;
|
|
const realNew = offset + newIndex;
|
|
if (realOld === realNew) return;
|
|
|
|
this.setState(
|
|
(prev) => {
|
|
const next = [...prev.attributes];
|
|
const [moved] = next.splice(realOld, 1);
|
|
next.splice(realNew, 0, moved);
|
|
return { attributes: next };
|
|
},
|
|
() => {
|
|
const ids = this.state.attributes.map((a) => a.id);
|
|
void this._persistAttrOrder(ids);
|
|
}
|
|
);
|
|
},
|
|
});
|
|
}
|
|
|
|
_initValSortable() {
|
|
this._valSortable?.destroy();
|
|
const el = this.valListRef.current;
|
|
if (!el) return;
|
|
|
|
const isFiltered = Boolean(this.state.valFilter?.trim());
|
|
|
|
this._valSortable = Sortable.create(el, {
|
|
handle: '.drag-handle',
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
chosenClass: 'sortable-chosen',
|
|
disabled: isFiltered,
|
|
onEnd: (evt) => {
|
|
const { oldIndex, newIndex } = evt;
|
|
if (oldIndex === newIndex) return;
|
|
|
|
const offset = ((this.state.valPage || 1) - 1) * 8;
|
|
const realOld = offset + oldIndex;
|
|
const realNew = offset + newIndex;
|
|
if (realOld === realNew) return;
|
|
|
|
const currentAttr = this.state.attributes.find(
|
|
(a) => a.id === this.state.selectedAttributeId
|
|
);
|
|
if (!currentAttr) return;
|
|
|
|
const values = currentAttr.values || [];
|
|
const next = [...values];
|
|
const [moved] = next.splice(realOld, 1);
|
|
next.splice(realNew, 0, moved);
|
|
|
|
const updatedAttributes = this.state.attributes.map((a) =>
|
|
a.id === currentAttr.id ? { ...a, values: next } : a
|
|
);
|
|
|
|
this.setState({ attributes: updatedAttributes }, () => {
|
|
const ids = next.map((v) => v.id);
|
|
void this._persistValOrder(currentAttr.id, ids);
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
_destroySortables() {
|
|
this._propSortable?.destroy();
|
|
this._propSortable = null;
|
|
this._attrSortable?.destroy();
|
|
this._attrSortable = null;
|
|
this._valSortable?.destroy();
|
|
this._valSortable = null;
|
|
}
|
|
|
|
async _persistPropOrder(ids) {
|
|
try {
|
|
await propertyAutomat.actions.reorderProperties(ids);
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
void propertyAutomat.actions.load();
|
|
}
|
|
}
|
|
|
|
async _persistAttrOrder(ids) {
|
|
try {
|
|
await attributeAutomat.actions.reorderAttributes(ids);
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
void attributeAutomat.actions.load();
|
|
}
|
|
}
|
|
|
|
async _persistValOrder(attributeId, ids) {
|
|
try {
|
|
await attributeAutomat.actions.reorderValues(attributeId, ids);
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
notifyError(err);
|
|
void attributeAutomat.actions.load();
|
|
}
|
|
}
|
|
|
|
async loadAll() {
|
|
this.setState({
|
|
propStatus: propertyAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
|
|
attrStatus: attributeAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
|
|
error: null,
|
|
});
|
|
try {
|
|
await Promise.all([
|
|
propertyAutomat.actions.load(),
|
|
attributeAutomat.actions.load(),
|
|
]);
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
this.setState({ error: backendErrorFrom(err) });
|
|
}
|
|
}
|
|
|
|
handleRetry() {
|
|
void this.loadAll();
|
|
}
|
|
|
|
handleTabChange(nextTab) {
|
|
if (nextTab === 0) {
|
|
this._initAttrSortable();
|
|
this._initValSortable();
|
|
} else if (nextTab === 1) {
|
|
this._initPropSortable();
|
|
}
|
|
}
|
|
|
|
handleSelectAttribute(attrId) {
|
|
this.setState({ selectedAttributeId: attrId, valFilter: '', valPage: 1 });
|
|
}
|
|
|
|
async handleCreateAttribute() {
|
|
const name = this.state.attrFilter.trim();
|
|
if (!name || this.state.attrSubmitting) return;
|
|
|
|
this.setState({ attrSubmitting: true });
|
|
try {
|
|
const row = await attributeAutomat.actions.createAttribute({
|
|
name,
|
|
exclusive: true,
|
|
});
|
|
if (this._cancelled) return;
|
|
this.setState({
|
|
attrFilter: '',
|
|
attrSubmitting: false,
|
|
selectedAttributeId: row?.id ?? this.state.selectedAttributeId,
|
|
});
|
|
enqueueSnackbar(`Attribut „${row?.name || name}“ angelegt.`, { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
this.setState({ attrSubmitting: false });
|
|
notifyError(err);
|
|
}
|
|
}
|
|
|
|
async handleCreateValue() {
|
|
const { selectedAttributeId } = this.state;
|
|
const value = this.state.valFilter.trim();
|
|
if (!selectedAttributeId || !value || this.state.valSubmitting) return;
|
|
|
|
this.setState({ valSubmitting: true });
|
|
try {
|
|
await attributeAutomat.actions.createValue(selectedAttributeId, { value });
|
|
if (this._cancelled) return;
|
|
this.setState({ valFilter: '', valSubmitting: false });
|
|
enqueueSnackbar(`Wert „${value}“ angelegt.`, { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
this.setState({ valSubmitting: false });
|
|
notifyError(err);
|
|
}
|
|
}
|
|
|
|
async handleCreateProperty() {
|
|
const name = this.state.propFilter.trim();
|
|
if (!name || this.state.propSubmitting) return;
|
|
|
|
this.setState({ propSubmitting: true });
|
|
try {
|
|
const row = await propertyAutomat.actions.createProperty({
|
|
name,
|
|
exclusive: true,
|
|
});
|
|
if (this._cancelled) return;
|
|
this.setState({ propFilter: '', propSubmitting: false });
|
|
enqueueSnackbar(`Merkmal „${row?.name || name}“ angelegt.`, { variant: 'success' });
|
|
} catch (err) {
|
|
if (this._cancelled) return;
|
|
this.setState({ propSubmitting: false });
|
|
notifyError(err);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
attrStatus,
|
|
propStatus,
|
|
error,
|
|
properties,
|
|
attributes,
|
|
selectedAttributeId,
|
|
attrFilter,
|
|
attrSubmitting,
|
|
valFilter,
|
|
valSubmitting,
|
|
propFilter,
|
|
propSubmitting,
|
|
} = this.state;
|
|
|
|
if (attrStatus === 'loading' && propStatus === 'loading' && !properties.length && !attributes.length) {
|
|
return (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (error && !properties.length && !attributes.length) {
|
|
return <BackendError error={error} onRetry={this.handleRetry} />;
|
|
}
|
|
|
|
const selectedAttr = attributes.find((a) => a.id === selectedAttributeId) ?? attributes[0] ?? null;
|
|
const selectedValues = selectedAttr?.values || [];
|
|
|
|
const attrFilterTrimmed = attrFilter.trim();
|
|
const filteredAttributes = attrFilterTrimmed
|
|
? attributes.filter((a) => a.name.toLowerCase().includes(attrFilterTrimmed.toLowerCase()))
|
|
: attributes;
|
|
|
|
const valFilterTrimmed = valFilter.trim();
|
|
const filteredValues = valFilterTrimmed
|
|
? selectedValues.filter((v) => v.value.toLowerCase().includes(valFilterTrimmed.toLowerCase()))
|
|
: selectedValues;
|
|
|
|
const propFilterTrimmed = propFilter.trim();
|
|
const filteredProperties = propFilterTrimmed
|
|
? properties.filter((p) => p.name.toLowerCase().includes(propFilterTrimmed.toLowerCase()))
|
|
: properties;
|
|
|
|
return (
|
|
<TabbedPanelTileGrid onChange={this.handleTabChange}>
|
|
{/* Tab 1: Auswahl-Merkmale & Werte */}
|
|
<PanelTileGrid icon={<StyleIcon />} text="Auswahl-Merkmale">
|
|
{/* Tile 1: Auswahl-Merkmale */}
|
|
<PanelTile wide={2} minHeight={0} color={BLUE_PANEL}>
|
|
<Stack spacing={1.5}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<StyleIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
|
Auswahl-Merkmale
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<SingleLineTextEdit
|
|
sx={{ flex: 1 }}
|
|
size="small"
|
|
search
|
|
clear
|
|
value={attrFilter}
|
|
disabled={attrSubmitting}
|
|
placeholder="Suchen oder anlegen…"
|
|
onChange={(next) => this.setState({ attrFilter: next })}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
void this.handleCreateAttribute();
|
|
}
|
|
}}
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
disabled={!attrFilterTrimmed || attrSubmitting}
|
|
onClick={() => void this.handleCreateAttribute()}
|
|
>
|
|
Hinzufügen
|
|
</Button>
|
|
</Box>
|
|
|
|
{filteredAttributes.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
|
{attrFilterTrimmed
|
|
? `Keine Treffer für „${attrFilterTrimmed}“.`
|
|
: 'Noch keine Auswahl-Merkmale angelegt.'}
|
|
</Typography>
|
|
) : (
|
|
<FillSpace
|
|
items={filteredAttributes}
|
|
totalCount={attributes.length}
|
|
minPageSize={8}
|
|
maxPageSize={8}
|
|
listRef={this.attrListRef}
|
|
onPageChange={(page) => this.setState({ attrPage: page })}
|
|
renderItem={(a) => (
|
|
<ArtikelMerkmalAuswahl
|
|
key={a.id}
|
|
attribute={a}
|
|
isSelected={selectedAttr?.id === a.id}
|
|
onSelect={() => this.handleSelectAttribute(a.id)}
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
</PanelTile>
|
|
|
|
{/* Tile 2: Werte für das gewählte Auswahl-Merkmal */}
|
|
<PanelTile wide={2} minHeight={0} color={PURPLE_PANEL}>
|
|
<Stack spacing={1.5}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<LabelImportantIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
|
{selectedAttr ? `Werte für Auswahl-Merkmal „${selectedAttr.name}“` : 'Werte'}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{!selectedAttr ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
|
Kein Attribut ausgewählt.
|
|
</Typography>
|
|
) : (
|
|
<>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<SingleLineTextEdit
|
|
sx={{ flex: 1 }}
|
|
size="small"
|
|
search
|
|
clear
|
|
value={valFilter}
|
|
disabled={valSubmitting}
|
|
placeholder="Suchen oder anlegen…"
|
|
onChange={(next) => this.setState({ valFilter: next })}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
void this.handleCreateValue();
|
|
}
|
|
}}
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
disabled={!valFilterTrimmed || valSubmitting}
|
|
onClick={() => void this.handleCreateValue()}
|
|
>
|
|
Hinzufügen
|
|
</Button>
|
|
</Box>
|
|
|
|
{filteredValues.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
|
{valFilterTrimmed
|
|
? `Keine Treffer für „${valFilterTrimmed}“.`
|
|
: 'Noch keine Werte angelegt.'}
|
|
</Typography>
|
|
) : (
|
|
<FillSpace
|
|
items={filteredValues}
|
|
totalCount={selectedValues.length}
|
|
minPageSize={8}
|
|
maxPageSize={8}
|
|
listRef={this.valListRef}
|
|
onPageChange={(page) => this.setState({ valPage: page })}
|
|
renderItem={(v) => (
|
|
<ArtikelMerkmalWert
|
|
key={v.id}
|
|
value={v}
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</PanelTile>
|
|
</PanelTileGrid>
|
|
|
|
{/* Tab 2: Text-Merkmale */}
|
|
<PanelTileGrid icon={<TuneIcon />} text="Text-Merkmale">
|
|
{/* Tile 3: Text-Merkmale */}
|
|
<PanelTile wide={2} minHeight={0} color={ORANGE_PANEL}>
|
|
<Stack spacing={1.5}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<TuneIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
|
Text-Merkmale
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<SingleLineTextEdit
|
|
sx={{ flex: 1 }}
|
|
size="small"
|
|
search
|
|
clear
|
|
value={propFilter}
|
|
disabled={propSubmitting}
|
|
placeholder="Suchen oder anlegen…"
|
|
onChange={(next) => this.setState({ propFilter: next })}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
void this.handleCreateProperty();
|
|
}
|
|
}}
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
disabled={!propFilterTrimmed || propSubmitting}
|
|
onClick={() => void this.handleCreateProperty()}
|
|
>
|
|
Hinzufügen
|
|
</Button>
|
|
</Box>
|
|
|
|
{filteredProperties.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
|
{propFilterTrimmed
|
|
? `Keine Treffer für „${propFilterTrimmed}“.`
|
|
: 'Noch keine Text-Merkmale angelegt.'}
|
|
</Typography>
|
|
) : (
|
|
<FillSpace
|
|
items={filteredProperties}
|
|
totalCount={properties.length}
|
|
minPageSize={8}
|
|
maxPageSize={8}
|
|
listRef={this.propListRef}
|
|
onPageChange={(page) => this.setState({ propPage: page })}
|
|
renderItem={(p) => (
|
|
<ArtikelMerkmalText
|
|
key={p.id}
|
|
property={p}
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
</PanelTile>
|
|
</PanelTileGrid>
|
|
</TabbedPanelTileGrid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export {
|
|
ArtikelMerkmalAuswahl,
|
|
ArtikelMerkmalWert,
|
|
ArtikelMerkmalText,
|
|
};
|
|
export default withNavigate(ArtikelMerkmalePage);
|