diff --git a/src/routes/artikel/merkmale.jsx b/src/routes/artikel/merkmale.jsx
index 6289ef2..8428726 100644
--- a/src/routes/artikel/merkmale.jsx
+++ b/src/routes/artikel/merkmale.jsx
@@ -13,7 +13,7 @@ import { enqueueSnackbar } from 'notistack';
import BackendError from '../../components/BackendError';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import FillSpace from 'dashgui/FillSpace';
-import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import { PanelTile, PanelTileGrid, TabbedPanelTileGrid } from 'dashgui/panels';
import withNavigate from '../../components/withNavigate';
import { backendErrorFrom } from '../../utils/backendError';
import { notifyError } from '../../utils/notify';
@@ -69,6 +69,7 @@ class ArtikelMerkmalePage extends PureComponent {
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);
@@ -340,6 +341,15 @@ class ArtikelMerkmalePage extends PureComponent {
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 });
}
@@ -453,200 +463,206 @@ class ArtikelMerkmalePage extends PureComponent {
: properties;
return (
-
- {/* Tile 1: Auswahl-Merkmale */}
-
-
-
-
-
- Auswahl-Merkmale
-
-
+
+ {/* Tab 1: Auswahl-Merkmale & Werte */}
+ } text="Auswahl-Merkmale">
+ {/* Tile 1: Auswahl-Merkmale */}
+
+
+
+
+
+ Auswahl-Merkmale
+
+
-
- this.setState({ attrFilter: next })}
- onKeyDown={(event) => {
- if (event.key === 'Enter') {
- event.preventDefault();
- void this.handleCreateAttribute();
- }
- }}
- />
-
-
+
+ this.setState({ attrFilter: next })}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ void this.handleCreateAttribute();
+ }
+ }}
+ />
+
+
- {filteredAttributes.length === 0 ? (
-
- {attrFilterTrimmed
- ? `Keine Treffer für „${attrFilterTrimmed}“.`
- : 'Noch keine Auswahl-Merkmale angelegt.'}
-
- ) : (
- this.setState({ attrPage: page })}
- renderItem={(a) => (
- this.handleSelectAttribute(a.id)}
- />
- )}
- />
- )}
-
-
+ {filteredAttributes.length === 0 ? (
+
+ {attrFilterTrimmed
+ ? `Keine Treffer für „${attrFilterTrimmed}“.`
+ : 'Noch keine Auswahl-Merkmale angelegt.'}
+
+ ) : (
+ this.setState({ attrPage: page })}
+ renderItem={(a) => (
+ this.handleSelectAttribute(a.id)}
+ />
+ )}
+ />
+ )}
+
+
- {/* Tile 2: Werte für das gewählte Auswahl-Merkmal */}
-
-
-
-
-
- {selectedAttr ? `Werte für Auswahl-Merkmal „${selectedAttr.name}“` : 'Werte'}
-
-
+ {/* Tile 2: Werte für das gewählte Auswahl-Merkmal */}
+
+
+
+
+
+ {selectedAttr ? `Werte für Auswahl-Merkmal „${selectedAttr.name}“` : 'Werte'}
+
+
- {!selectedAttr ? (
-
- Kein Attribut ausgewählt.
-
- ) : (
- <>
-
- this.setState({ valFilter: next })}
- onKeyDown={(event) => {
- if (event.key === 'Enter') {
- event.preventDefault();
- void this.handleCreateValue();
- }
- }}
- />
-
-
+ {!selectedAttr ? (
+
+ Kein Attribut ausgewählt.
+
+ ) : (
+ <>
+
+ this.setState({ valFilter: next })}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ void this.handleCreateValue();
+ }
+ }}
+ />
+
+
- {filteredValues.length === 0 ? (
-
- {valFilterTrimmed
- ? `Keine Treffer für „${valFilterTrimmed}“.`
- : 'Noch keine Werte angelegt.'}
-
- ) : (
- this.setState({ valPage: page })}
- renderItem={(v) => (
-
- )}
- />
- )}
-
- )}
-
-
+ {filteredValues.length === 0 ? (
+
+ {valFilterTrimmed
+ ? `Keine Treffer für „${valFilterTrimmed}“.`
+ : 'Noch keine Werte angelegt.'}
+
+ ) : (
+ this.setState({ valPage: page })}
+ renderItem={(v) => (
+
+ )}
+ />
+ )}
+
+ )}
+
+
+
- {/* Tile 3: Text-Merkmale */}
-
-
-
-
-
- Text-Merkmale
-
-
+ {/* Tab 2: Text-Merkmale */}
+ } text="Text-Merkmale">
+ {/* Tile 3: Text-Merkmale */}
+
+
+
+
+
+ Text-Merkmale
+
+
-
- this.setState({ propFilter: next })}
- onKeyDown={(event) => {
- if (event.key === 'Enter') {
- event.preventDefault();
- void this.handleCreateProperty();
- }
- }}
- />
-
-
+
+ this.setState({ propFilter: next })}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ void this.handleCreateProperty();
+ }
+ }}
+ />
+
+
- {filteredProperties.length === 0 ? (
-
- {propFilterTrimmed
- ? `Keine Treffer für „${propFilterTrimmed}“.`
- : 'Noch keine Text-Merkmale angelegt.'}
-
- ) : (
- this.setState({ propPage: page })}
- renderItem={(p) => (
-
- )}
- />
- )}
-
-
-
+ {filteredProperties.length === 0 ? (
+
+ {propFilterTrimmed
+ ? `Keine Treffer für „${propFilterTrimmed}“.`
+ : 'Noch keine Text-Merkmale angelegt.'}
+
+ ) : (
+ this.setState({ propPage: page })}
+ renderItem={(p) => (
+
+ )}
+ />
+ )}
+
+
+
+
);
}
}