u

src/components/brand/ArtikelMarke.jsx

@@ -1,7 +1,9 @@
 import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import ImageSearchIcon from '@mui/icons-material/ImageSearch';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
@@ -111,6 +113,8 @@ class ArtikelMarke extends PureComponent {
     const name = brand?.name ?? '';
     const hasLogo = this.hasLogo();
 
+    const articleCount = brand?.articleCount ?? 0;
+
     return (
       <>
         <ListItem
@@ -142,8 +146,7 @@ class ArtikelMarke extends PureComponent {
             </IconButton>
           )}
 
-
-          {true ? (<SingleLineTextEdit
+          <SingleLineTextEdit
             size="small"
             label=""
             value={draft}
@@ -153,7 +156,28 @@ class ArtikelMarke extends PureComponent {
             onKeyDown={this.handleKeyDown}
             sx={{ flex: 1, minWidth: 0 }}
           />
-          ) : (<Typography sx={{ flex: 1, px: 1.6, py: 0.9, borderRadius: 1, border: '1px solid rgba(0, 0, 0, 0.23)' }}>{draft}</Typography>)}
+
+          <Chip
+            size="small"
+            label={articleCount}
+            sx={{
+              height: 24,
+              width: 52,
+              minWidth: 52,
+              maxWidth: 52,
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              fontVariantNumeric: 'tabular-nums',
+              bgcolor: 'action.hover',
+              color: articleCount > 0 ? 'text.primary' : 'text.disabled',
+              flexShrink: 0,
+              '& .MuiChip-label': {
+                px: 0.5,
+                textAlign: 'center',
+                width: '100%',
+              },
+            }}
+          />
 
           <IconButton
             aria-label={`„${name}" löschen`}

src/routes/artikel/lager.jsx

@@ -177,15 +177,12 @@ class ArtikelLagerPage extends PureComponent {
     setLastArticleSku(null);
     this._cancelled = false;
 
-    this.unsub = warehouseAutomat.subscribe(this, (state) => {
-      if (this._cancelled) return;
-      return {
-        warehouses: state.filteredWarehouses,
-        filter: state.filter,
-        status: state.status,
-        error: state.error ? backendErrorFrom(state.error) : null,
-      };
-    });
+    this.unsub = warehouseAutomat.subscribe(this, (state) => ({
+      warehouses: state.filteredWarehouses ?? state.warehouses,
+      filter: state.filter ?? '',
+      status: state.status,
+      error: state.error ? backendErrorFrom(state.error) : null,
+    }));
 
     if (warehouseAutomat.state.status !== 'ready') {
       void warehouseAutomat.actions.load().catch((err) => notifyError(err));
@@ -265,7 +262,7 @@ class ArtikelLagerPage extends PureComponent {
   }
 
   render() {
-    const { status, error, warehouses } = this.state;
+    const { status, error, warehouses, filter } = this.state;
     const { prefill, returnTo } = getInitialParams(this.props);
 
     if (status === 'loading' || status === 'idle') {
@@ -280,6 +277,8 @@ class ArtikelLagerPage extends PureComponent {
       return <BackendError error={error} onRetry={this.handleRetry} />;
     }
 
+    const trimmedFilter = filter?.trim() ?? '';
+
     return (
       <>
         <ArtikelLagerSearchField
@@ -293,7 +292,9 @@ class ArtikelLagerPage extends PureComponent {
             <List dense disablePadding ref={this.listRef} sx={{ width: '100%' }}>
               {warehouses.length === 0 ? (
                 <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                  Noch keine Lager angelegt.
+                  {trimmedFilter
+                    ? `Keine Treffer für „${trimmedFilter}“.`
+                    : 'Noch keine Lager angelegt.'}
                 </Typography>
               ) : (
                 warehouses.map((wh) => (