u

src/routes/artikel/merkmale.jsx

@@ -12,6 +12,7 @@ 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 } from 'dashgui/panels';
 import withNavigate from '../../components/withNavigate';
 import { backendErrorFrom } from '../../utils/backendError';
@@ -45,14 +46,17 @@ class ArtikelMerkmalePage extends PureComponent {
       attributes: initialAttributes,
       attrFilter: '',
       attrSubmitting: false,
+      attrPage: 1,
       selectedAttributeId: initialSelectedAttrId,
 
       valFilter: '',
       valSubmitting: false,
+      valPage: 1,
 
       properties: initialProperties,
       propFilter: '',
       propSubmitting: false,
+      propPage: 1,
     };
 
     this._cancelled = false;
@@ -112,6 +116,7 @@ class ArtikelMerkmalePage extends PureComponent {
     if (
       (prevState.properties !== this.state.properties ||
         prevState.propFilter !== this.state.propFilter ||
+        prevState.propPage !== this.state.propPage ||
         prevState.propStatus !== this.state.propStatus) &&
       this.propListRef.current
     ) {
@@ -123,6 +128,7 @@ class ArtikelMerkmalePage extends PureComponent {
     if (
       (prevState.attributes !== this.state.attributes ||
         prevState.attrFilter !== this.state.attrFilter ||
+        prevState.attrPage !== this.state.attrPage ||
         prevState.attrStatus !== this.state.attrStatus) &&
       this.attrListRef.current
     ) {
@@ -135,6 +141,7 @@ class ArtikelMerkmalePage extends PureComponent {
       (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
     ) {
@@ -170,11 +177,16 @@ class ArtikelMerkmalePage extends PureComponent {
         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(oldIndex, 1);
-            next.splice(newIndex, 0, moved);
+            const [moved] = next.splice(realOld, 1);
+            next.splice(realNew, 0, moved);
             return { properties: next };
           },
           () => {
@@ -203,11 +215,16 @@ class ArtikelMerkmalePage extends PureComponent {
         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(oldIndex, 1);
-            next.splice(newIndex, 0, moved);
+            const [moved] = next.splice(realOld, 1);
+            next.splice(realNew, 0, moved);
             return { attributes: next };
           },
           () => {
@@ -236,6 +253,11 @@ class ArtikelMerkmalePage extends PureComponent {
         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
         );
@@ -243,8 +265,8 @@ class ArtikelMerkmalePage extends PureComponent {
 
         const values = currentAttr.values || [];
         const next = [...values];
-        const [moved] = next.splice(oldIndex, 1);
-        next.splice(newIndex, 0, moved);
+        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
@@ -319,7 +341,7 @@ class ArtikelMerkmalePage extends PureComponent {
   }
 
   handleSelectAttribute(attrId) {
-    this.setState({ selectedAttributeId: attrId, valFilter: '' });
+    this.setState({ selectedAttributeId: attrId, valFilter: '', valPage: 1 });
   }
 
   async handleCreateAttribute() {
@@ -468,24 +490,29 @@ class ArtikelMerkmalePage extends PureComponent {
               </Button>
             </Box>
 
-            <List dense disablePadding ref={this.attrListRef} sx={{ width: '100%' }}>
-              {filteredAttributes.length === 0 ? (
-                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                  {attrFilterTrimmed
-                    ? `Keine Treffer für „${attrFilterTrimmed}“.`
-                    : 'Noch keine Auswahl-Merkmale angelegt.'}
-                </Typography>
-              ) : (
-                filteredAttributes.map((a) => (
+            {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}
+                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)}
                   />
-                ))
-              )}
-            </List>
+                )}
+              />
+            )}
           </Stack>
         </PanelTile>
 
@@ -531,22 +558,27 @@ class ArtikelMerkmalePage extends PureComponent {
                   </Button>
                 </Box>
 
-                <List dense disablePadding ref={this.valListRef} sx={{ width: '100%' }}>
-                  {filteredValues.length === 0 ? (
-                    <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                      {valFilterTrimmed
-                        ? `Keine Treffer für „${valFilterTrimmed}“.`
-                        : 'Noch keine Werte angelegt.'}
-                    </Typography>
-                  ) : (
-                    filteredValues.map((v) => (
+                {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}
+                    minPageSize={8}
+                    maxPageSize={8}
+                    listRef={this.valListRef}
+                    onPageChange={(page) => this.setState({ valPage: page })}
+                    renderItem={(v) => (
                       <ArtikelMerkmalWert
                         key={v.id}
                         value={v}
                       />
-                    ))
-                  )}
-                </List>
+                    )}
+                  />
+                )}
               </>
             )}
           </Stack>
@@ -588,22 +620,27 @@ class ArtikelMerkmalePage extends PureComponent {
               </Button>
             </Box>
 
-            <List dense disablePadding ref={this.propListRef} sx={{ width: '100%' }}>
-              {filteredProperties.length === 0 ? (
-                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                  {propFilterTrimmed
-                    ? `Keine Treffer für „${propFilterTrimmed}“.`
-                    : 'Noch keine Text-Merkmale angelegt.'}
-                </Typography>
-              ) : (
-                filteredProperties.map((p) => (
+            {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}
+                minPageSize={8}
+                maxPageSize={8}
+                listRef={this.propListRef}
+                onPageChange={(page) => this.setState({ propPage: page })}
+                renderItem={(p) => (
                   <ArtikelMerkmalText
                     key={p.id}
                     property={p}
                   />
-                ))
-              )}
-            </List>
+                )}
+              />
+            )}
           </Stack>
         </PanelTile>
       </PanelTileGrid>