diff --git a/src/nav.js b/src/nav.js index e3a7b24..c7ea060 100644 --- a/src/nav.js +++ b/src/nav.js @@ -21,7 +21,7 @@ export const NAV_ITEMS = [ export const SUB_NAV = { '/artikel': [ - { segment: '', label: 'Übersicht', icon: ViewListIcon }, + { segment: '', icon: ViewListIcon }, { segment: 'kategorien', label: 'Kategorien', icon: CategoryIcon }, { segment: 'lager', label: 'Lager', icon: WarehouseIcon }, ], diff --git a/src/pages/artikel/index.jsx b/src/pages/artikel/index.jsx index 1ddc81a..494ebe2 100644 --- a/src/pages/artikel/index.jsx +++ b/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()} /> ); @@ -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: ( @@ -243,11 +249,7 @@ class ArtikelUebersichtPage extends Component { )} - {searchActive && !error && totalCount === 0 && ( - Keine Artikel gefunden. - )} - - {(facetEntries.length > 0 || recordset.length > 0) && ( + {showResultsPanel && ( {facetEntries.length > 0 && ( @@ -258,29 +260,40 @@ class ArtikelUebersichtPage extends Component { Kategorien - {facetEntries.map(({ id, count, name, depth }) => ( - { - const next = categories.includes(id) - ? categories.filter((c) => c !== id) - : [...categories, id]; - this.updateParams(input, buildFilter(next), 0); - }} - sx={{ pl: 2 + depth * 1.5 }} - > - - - ))} + {facetEntries.map(({ id, count, name, depth }) => { + const selected = categories.includes(id); + return ( + 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 }} + > + + {selected && ( + + )} + + ); + })} )} + {searchActive && !error && totalCount === 0 && ( + Keine Artikel gefunden. + )} + {recordset.length > 0 && ( <>