filter

src/pages/artikel/index.jsx

@@ -11,6 +11,7 @@ import Paper from '@mui/material/Paper';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
 import { article } from '../../api';
 import { formatPrice } from '../../utils/price';
 
@@ -44,7 +45,8 @@ function formatCategoryList(catStr, facets) {
   if (!catStr) return '';
   return catStr
     .split(',')
-    .map((id) => facets[id]?.name ?? id)
+    .map((id) => facets[id]?.name)
+    .filter(Boolean)
     .join(', ');
 }
 
@@ -71,6 +73,7 @@ function ResultsPagination({ offset, totalCount, pageCount, currentPage, onPageC
         onChange={onPageChange}
         color="primary"
         size="small"
+        onMouseDown={(e) => e.preventDefault()}
       />
     </Box>
   );
@@ -186,7 +189,8 @@ class ArtikelUebersichtPage extends Component {
 
     const facetEntries = categoryFacets
       ? Object.entries(categoryFacets)
-        .map(([id, { count, name, parent }]) => ({
+        .filter(([, meta]) => meta?.name)
+        .map(([id, { count, name }]) => ({
           id,
           count,
           name,
@@ -198,6 +202,8 @@ class ArtikelUebersichtPage extends Component {
     const pageCount = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
     const currentPage = Math.floor(offset / PAGE_SIZE) + 1;
     const emptyRowCount = Math.max(0, PAGE_SIZE - recordset.length);
+    const showResultsPanel =
+      facetEntries.length > 0 || recordset.length > 0 || (searchActive && !error && totalCount === 0);
 
     const handlePageChange = (_e, page) => {
       this.updateParams(input, filterParam, (page - 1) * PAGE_SIZE);
@@ -211,15 +217,15 @@ class ArtikelUebersichtPage extends Component {
             autoFocus
             type="search"
             autoComplete="off"
-            inputProps={{
-              autocapitalize: 'off',
-              autocorrect: 'off',
-              spellcheck: false,
-            }}
             placeholder="Artikel suchen (EAN, Artikelnr., Name, Barcode)…"
             value={input}
             onChange={this.handleInputChange}
             slotProps={{
+              htmlInput: {
+                spellCheck: false,
+                autoCapitalize: 'off',
+                autoCorrect: 'off',
+              },
               input: {
                 startAdornment: (
                   <InputAdornment position="start">
@@ -243,11 +249,7 @@ class ArtikelUebersichtPage extends Component {
           </Alert>
         )}
 
-        {searchActive && !error && totalCount === 0 && (
-          <Typography color="text.secondary">Keine Artikel gefunden.</Typography>
-        )}
-
-        {(facetEntries.length > 0 || recordset.length > 0) && (
+        {showResultsPanel && (
           <Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
             {facetEntries.length > 0 && (
               <Paper variant="outlined" sx={{ width: 220, flexShrink: 0, overflow: 'hidden' }}>
@@ -258,29 +260,40 @@ class ArtikelUebersichtPage extends Component {
                   Kategorien
                 </Typography>
                 <List dense disablePadding>
-                  {facetEntries.map(({ id, count, name, depth }) => (
-                    <ListItemButton
-                      key={id}
-                      selected={categories.includes(id)}
-                      onClick={() => {
-                        const next = categories.includes(id)
-                          ? categories.filter((c) => c !== id)
-                          : [...categories, id];
-                        this.updateParams(input, buildFilter(next), 0);
-                      }}
-                      sx={{ pl: 2 + depth * 1.5 }}
-                    >
-                      <ListItemText
-                        primary={`${name ?? id} (${count})`}
-                        slotProps={{ primary: { variant: 'body2' } }}
-                      />
-                    </ListItemButton>
-                  ))}
+                  {facetEntries.map(({ id, count, name, depth }) => {
+                    const selected = categories.includes(id);
+                    return (
+                      <ListItemButton
+                        key={id}
+                        selected={selected}
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => {
+                          const next = selected
+                            ? categories.filter((c) => c !== id)
+                            : [...categories, id];
+                          this.updateParams(input, buildFilter(next), 0);
+                        }}
+                        sx={{ pl: 2 + depth * 1.5 }}
+                      >
+                        <ListItemText
+                          primary={`${name} (${count})`}
+                          slotProps={{ primary: { variant: 'body2' } }}
+                        />
+                        {selected && (
+                          <ClearIcon fontSize="small" color="action" sx={{ ml: 1, flexShrink: 0 }} />
+                        )}
+                      </ListItemButton>
+                    );
+                  })}
                 </List>
               </Paper>
             )}
 
             <Box sx={{ flexGrow: 1, minWidth: 0 }}>
+              {searchActive && !error && totalCount === 0 && (
+                <Typography color="text.secondary">Keine Artikel gefunden.</Typography>
+              )}
+
               {recordset.length > 0 && (
                 <>
                   <ResultsPagination