seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-09-29 10:25:50 +02:00
parent 447033e53a
commit 88c96c94a3
12 changed files with 578 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/appRouter.jsx
View File

@@ -1,30 +1,29 @@
import { lazy } from 'react';
import { Navigate, createBrowserRouter } from 'react-router-dom';
import AppShell from './components/AppShell';
import SectionLayout from './components/SectionLayout';
const ArtikelUebersichtPage = lazy(() => import('./routes/artikel'));
const ArtikelKategorienPage = lazy(() => import('./routes/artikel/kategorien'));
const RedirectArtikelKategorien = lazy(() => import('./routes/artikel/RedirectArtikelKategorien'));
const ArtikelLagerPage = lazy(() => import('./routes/artikel/lager'));
const ArtikelMarkenPage = lazy(() => import('./routes/artikel/marken'));
const ArtikelVorlagenPage = lazy(() => import('./routes/artikel/vorlagen'));
const ArtikelSkuPage = lazy(() => import('./routes/artikel/_sku'));
const LieferungListePage = lazy(() => import('./routes/lieferung'));
const LieferungNeuPage = lazy(() => import('./routes/lieferung/neu'));
const LieferungLieferantenPage = lazy(() => import('./routes/lieferung/lieferanten'));
const LieferungEditPage = lazy(() => import('./routes/lieferung/_deliveryId'));
const AuftragAngebotPage = lazy(() => import('./routes/auftrag'));
const AuftragAngebotNeuPage = lazy(() => import('./routes/auftrag/neu'));
const AuftragAngebotEditPage = lazy(() => import('./routes/auftrag/_quoteId'));
const AuftragBestellungPage = lazy(() => import('./routes/auftrag/bestellung'));
const AuftragBestellungNeuPage = lazy(() => import('./routes/auftrag/bestellung/neu'));
const AuftragBestellungEditPage = lazy(() => import('./routes/auftrag/bestellung/_orderId'));
const KundeListePage = lazy(() => import('./routes/kunde'));
const KundeNeuPage = lazy(() => import('./routes/kunde/neu'));
const KundeGruppenPage = lazy(() => import('./routes/kunde/gruppen'));
const KundeEditPage = lazy(() => import('./routes/kunde/_entityId'));
const InfosPage = lazy(() => import('./routes/infos'));
import ArtikelUebersichtPage from './routes/artikel';
import ArtikelKategorienPage from './routes/artikel/kategorien';
import RedirectArtikelKategorien from './routes/artikel/RedirectArtikelKategorien';
import ArtikelLagerPage from './routes/artikel/lager';
import ArtikelMarkenPage from './routes/artikel/marken';
import ArtikelVorlagenPage from './routes/artikel/vorlagen';
import ArtikelSkuPage from './routes/artikel/_sku';
import LieferungListePage from './routes/lieferung';
import LieferungNeuPage from './routes/lieferung/neu';
import LieferungLieferantenPage from './routes/lieferung/lieferanten';
import LieferungEditPage from './routes/lieferung/_deliveryId';
import AuftragAngebotPage from './routes/auftrag';
import AuftragAngebotNeuPage from './routes/auftrag/neu';
import AuftragAngebotEditPage from './routes/auftrag/_quoteId';
import AuftragBestellungPage from './routes/auftrag/bestellung';
import AuftragBestellungNeuPage from './routes/auftrag/bestellung/neu';
import AuftragBestellungEditPage from './routes/auftrag/bestellung/_orderId';
import KundeListePage from './routes/kunde';
import KundeNeuPage from './routes/kunde/neu';
import KundeGruppenPage from './routes/kunde/gruppen';
import KundeEditPage from './routes/kunde/_entityId';
import InfosPage from './routes/infos';
const routes = [
{

45
src/automats/helpAutomat.js Normal file
View File

@@ -0,0 +1,45 @@
import { Automat } from 'react-automat';
/**
* @typedef {Object} HelpState
* @property {boolean} enabled Whether interactive help badges are enabled systemwide.
*/
/** @type {HelpState} */
const initialState = {
enabled: false,
};
/**
* Global reactive state for systemwide help badges mode.
* Persisted in IndexedDB so the setting survives page reloads and sessions.
* Registered as a named automat ('help') on window.__AUTOMATS__.
*
* @type {Automat<HelpState>}
*/
const helpAutomat = new Automat(
initialState,
{
/**
* Toggles the systemwide help mode on or off.
*/
toggle() {
helpAutomat.setState((prev) => ({ enabled: !prev?.enabled }));
},
/**
* Explicitly set whether help mode is enabled.
* @param {boolean} enabled
*/
setEnabled(enabled) {
helpAutomat.setState({ enabled: Boolean(enabled) });
},
},
{
name: 'help',
persist: true,
}
);
export default helpAutomat;
export const { toggle: toggleHelp, setEnabled: setHelpEnabled } = helpAutomat.actions;
export const isHelpEnabled = (state = helpAutomat.state) => Boolean(state?.enabled);

3
src/automats/index.js
View File

@@ -9,6 +9,9 @@ export { setLastDeliveryPath, setLastArticleSku, clearNavigation } from './navig
export { default as userSettingsAutomat } from './userSettingsAutomat';
export { setViewerPosition } from './userSettingsAutomat';
export { default as helpAutomat } from './helpAutomat';
export { toggleHelp, setHelpEnabled, isHelpEnabled } from './helpAutomat';
export { default as supplierAutomat } from './supplierAutomat';
export { default as warehouseAutomat } from './warehouseAutomat';

13
src/components/AppShell.jsx
View File

@@ -8,6 +8,7 @@ import ButtonBase from '@mui/material/ButtonBase';
import Typography from '@mui/material/Typography';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import UserMenu from './UserMenu';
import HelpBadge from './HelpBadge';
import { NAV_ITEMS, SUB_NAV, resolveActiveNav, resolveActiveSub } from '../nav';
import { artikelQueryPath } from './article/artikelQuery';
import { defaultCategoryPath } from './category/categoryRoute';
@@ -56,7 +57,7 @@ class AppSidebar extends PureComponent {
})}
>
<List disablePadding sx={{ flexGrow: 1 }}>
{NAV_ITEMS.map(({ path, label, icon: Icon }) => {
{NAV_ITEMS.map(({ path, label, help, icon: Icon }) => {
const active = path === activeNav;
return (
@@ -106,7 +107,9 @@ class AppSidebar extends PureComponent {
})}
>
<ListItemIcon sx={{ minWidth: 36 }}>
<Icon />
<HelpBadge title={label} help={help} placement="right">
<Icon />
</HelpBadge>
</ListItemIcon>
<ListItemText primary={label} />
</ListItemButton>
@@ -153,7 +156,7 @@ class AppSubNav extends PureComponent {
py: 4,
}}
>
{subNav.map(({ segment, label, icon: Icon }) => {
{subNav.map(({ segment, label, title, help, icon: Icon }) => {
const active = segment === activeSub;
return (
@@ -195,7 +198,9 @@ class AppSubNav extends PureComponent {
},
})}
>
<Icon sx={{ fontSize: 32 }} />
<HelpBadge title={title || label} help={help} placement="right">
<Icon sx={{ fontSize: 32 }} />
</HelpBadge>
{label ? (
<Typography
variant="caption"

259
src/components/HelpBadge.jsx Normal file
View File

@@ -0,0 +1,259 @@
import { PureComponent } from 'react';
import Badge from '@mui/material/Badge';
import Box from '@mui/material/Box';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import IconButton from '@mui/material/IconButton';
import Paper from '@mui/material/Paper';
import Popper from '@mui/material/Popper';
import Typography from '@mui/material/Typography';
import CloseIcon from '@mui/icons-material/Close';
import { helpAutomat } from '../automats';
/**
* Reusable reactive badge that appears on UI elements (navigation icons, tabs, etc.)
* when systemwide Help mode is enabled via helpAutomat.
*
* The red "?" badge does not move on hover.
* Clicking the "?" badge opens an explanatory Popper anchored to the badge.
* When Help mode is disabled, it transparently renders its children with zero overhead.
*/
class HelpBadge extends PureComponent {
constructor(props) {
super(props);
this.state = {
enabled: helpAutomat.state?.enabled ?? false,
anchorEl: null,
};
this.handleBadgeClick = this.handleBadgeClick.bind(this);
this.handleBadgeKeyDown = this.handleBadgeKeyDown.bind(this);
this.handleClosePopper = this.handleClosePopper.bind(this);
}
componentDidMount() {
this.unsub = helpAutomat.subscribe(this, (state) => ({
enabled: Boolean(state?.enabled),
anchorEl: state?.enabled ? this.state.anchorEl : null,
}));
}
componentWillUnmount() {
this.unsub?.();
this.unsub = null;
}
handleBadgeClick(event) {
event.preventDefault();
event.stopPropagation();
const currentTarget = event.currentTarget;
this.setState((prev) => ({
anchorEl: prev.anchorEl ? null : currentTarget,
}));
}
handleBadgeKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
const currentTarget = event.currentTarget;
this.setState((prev) => ({
anchorEl: prev.anchorEl ? null : currentTarget,
}));
} else if (event.key === 'Escape' && this.state.anchorEl) {
event.preventDefault();
event.stopPropagation();
this.setState({ anchorEl: null });
}
}
handleClosePopper(event) {
if (this.state.anchorEl && event?.target && this.state.anchorEl.contains(event.target)) {
return;
}
this.setState({ anchorEl: null });
}
render() {
const { enabled, anchorEl } = this.state;
const {
children,
title,
text,
help,
placement = 'right-start',
badgeContent = '?',
anchorOrigin = { vertical: 'top', horizontal: 'right' },
badgeSx,
sx,
} = this.props;
const helpText = text || help;
if (!enabled || !helpText) {
return children;
}
const isOpen = Boolean(anchorEl);
return (
<>
<Badge
badgeContent={
<span
role="button"
tabIndex={0}
aria-label={`${title ? `${title}: ` : ''}Hilfe anzeigen`}
title="Hilfe anzeigen"
onClick={this.handleBadgeClick}
onKeyDown={this.handleBadgeKeyDown}
style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
cursor: 'pointer',
userSelect: 'none',
}}
>
{badgeContent}
</span>
}
anchorOrigin={anchorOrigin}
sx={{
display: 'inline-flex',
'& .MuiBadge-badge': {
bgcolor: '#dc2626',
color: '#ffffff',
fontWeight: 800,
fontSize: '0.8rem',
width: 22,
height: 22,
minWidth: 22,
borderRadius: '50%',
boxShadow: '0 2px 5px rgba(0,0,0,0.35)',
cursor: 'pointer',
p: 0,
transition: 'background-color 0.15s ease',
'&:hover': {
bgcolor: '#b91c1c',
},
...badgeSx,
},
...sx,
}}
>
{children}
</Badge>
<Popper
open={isOpen}
anchorEl={anchorEl}
placement={placement}
disablePortal={false}
modifiers={[
{
name: 'offset',
options: {
offset: [0, 8],
},
},
{
name: 'preventOverflow',
options: {
boundary: 'viewport',
padding: 8,
},
},
]}
sx={{ zIndex: 1400 }}
>
<ClickAwayListener onClickAway={this.handleClosePopper}>
<Paper
elevation={8}
onKeyDown={(e) => {
if (e.key === 'Escape') this.handleClosePopper(e);
}}
sx={{
p: 1.5,
width: 260,
maxWidth: 'calc(100vw - 32px)',
bgcolor: 'background.paper',
borderRadius: 2,
border: '1px solid',
borderColor: 'divider',
boxShadow: '0 8px 28px rgba(0,0,0,0.2)',
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
mb: 0.75,
gap: 1,
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minWidth: 0 }}>
<Box
sx={{
width: 18,
height: 18,
borderRadius: '50%',
bgcolor: '#dc2626',
color: '#ffffff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '0.7rem',
fontWeight: 800,
flexShrink: 0,
}}
>
?
</Box>
{title ? (
<Typography
variant="subtitle2"
noWrap
sx={{
fontWeight: 700,
fontSize: '0.85rem',
color: 'text.primary',
}}
>
{title}
</Typography>
) : null}
</Box>
<IconButton
size="small"
onClick={this.handleClosePopper}
sx={{
p: 0.25,
color: 'text.secondary',
'&:hover': { color: 'text.primary', bgcolor: 'action.hover' },
}}
aria-label="Schließen"
>
<CloseIcon sx={{ fontSize: 16 }} />
</IconButton>
</Box>
<Typography
variant="body2"
sx={{
fontSize: '0.78rem',
lineHeight: 1.45,
color: 'text.secondary',
}}
>
{helpText}
</Typography>
</Paper>
</ClickAwayListener>
</Popper>
</>
);
}
}
export default HelpBadge;

35
src/components/UserMenu.jsx
View File

@@ -9,8 +9,12 @@ import ListItemText from '@mui/material/ListItemText';
import LogoutIcon from '@mui/icons-material/Logout';
import BusinessIcon from '@mui/icons-material/Business';
import SettingsIcon from '@mui/icons-material/Settings';
import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';
import Switch from '@mui/material/Switch';
import Divider from '@mui/material/Divider';
import { StorageManagerContext } from '../api/storageManagerContext';
import authAutomat from '../automats/authAutomat';
import { helpAutomat, toggleHelp } from '../automats';
import CompanySettingsDialog from './CompanySettingsDialog';
import SettingsDialog from './settings/SettingsDialog';
import { notifyError } from '../utils/notify';
@@ -25,6 +29,7 @@ class UserMenu extends PureComponent {
settingsOpen: false,
numbersOpen: false,
user: authAutomat.state.user,
helpEnabled: helpAutomat.state?.enabled ?? false,
};
this.handleOpenMenu = this.handleOpenMenu.bind(this);
this.handleCloseMenu = this.handleCloseMenu.bind(this);
@@ -32,15 +37,20 @@ class UserMenu extends PureComponent {
this.handleCloseSettings = this.handleCloseSettings.bind(this);
this.handleOpenNumbers = this.handleOpenNumbers.bind(this);
this.handleCloseNumbers = this.handleCloseNumbers.bind(this);
this.handleToggleHelp = this.handleToggleHelp.bind(this);
this.handleLogout = this.handleLogout.bind(this);
}
componentDidMount() {
this.unsubscribe = authAutomat.subscribe(this, 'user');
this.unsubscribeAuth = authAutomat.subscribe(this, 'user');
this.unsubscribeHelp = helpAutomat.subscribe(this, (state) => ({
helpEnabled: Boolean(state?.enabled),
}));
}
componentWillUnmount() {
this.unsubscribe?.();
this.unsubscribeAuth?.();
this.unsubscribeHelp?.();
}
handleOpenMenu(event) {
@@ -67,6 +77,12 @@ class UserMenu extends PureComponent {
this.setState({ numbersOpen: false });
}
handleToggleHelp(e) {
e?.preventDefault?.();
e?.stopPropagation?.();
toggleHelp();
}
async handleLogout() {
this.setState({ anchorEl: null });
try {
@@ -78,7 +94,7 @@ class UserMenu extends PureComponent {
}
render() {
const { user, anchorEl, settingsOpen, numbersOpen } = this.state;
const { user, anchorEl, settingsOpen, numbersOpen, helpEnabled } = this.state;
const open = Boolean(anchorEl);
const pictureSrc = (() => {
@@ -124,6 +140,19 @@ class UserMenu extends PureComponent {
</ListItemIcon>
<ListItemText>Einstellungen</ListItemText>
</MenuItem>
<MenuItem onClick={this.handleToggleHelp}>
<ListItemIcon>
<HelpOutlineRoundedIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Hilfe</ListItemText>
<Switch
edge="end"
size="small"
checked={helpEnabled}
sx={{ pointerEvents: 'none' }}
/>
</MenuItem>
<Divider />
<MenuItem onClick={this.handleLogout}>
<ListItemIcon>
<LogoutIcon fontSize="small" />

39
src/components/article/ArticleTileTab.jsx
View File

@@ -33,22 +33,43 @@ import ArticleLabelTab from './tabs/ArticleLabelTab';
import ArticleSeoTab from './tabs/ArticleSeoTab';
import ArticleSettingsTab from './tabs/ArticleSettingsTab';
import ArticleSupplierTab from './tabs/ArticleSupplierTab';
import HelpBadge from '../HelpBadge';
const ALWAYS_TABS = [
{ id: ARTICLE_TAB.history, label: 'History', color: '#fed7aa', Icon: HistoryIcon },
{ id: ARTICLE_TAB.supplier, label: 'Supplier', color: '#bbf7d0', Icon: LocalShippingIcon },
{
id: ARTICLE_TAB.history,
label: 'History',
color: '#fed7aa',
Icon: HistoryIcon,
help: 'Historie aller Änderungen, Buchungen und Ereignisse zu diesem Artikel',
},
{
id: ARTICLE_TAB.supplier,
label: 'Supplier',
color: '#bbf7d0',
Icon: LocalShippingIcon,
help: 'Zugeordnete Lieferanten, Einkaufspreise und Lieferanten-Artikelnummern',
},
{
id: ARTICLE_TAB.seo,
label: 'SEO & Beschreibung',
color: '#99f6e4',
Icon: ManageSearchIcon,
help: 'Shop-Texte, Beschreibungen und Suchmaschinen-Metadaten',
},
{
id: ARTICLE_TAB.label,
label: 'Label',
color: '#fde68a',
Icon: LabelIcon,
help: 'Barcode- und Preisetiketten für diesen Artikel gestalten und drucken',
},
{ id: ARTICLE_TAB.label, label: 'Label', color: '#fde68a', Icon: LabelIcon },
{
id: ARTICLE_TAB.attributes,
label: 'Attribute und Merkmale',
color: '#bfdbfe',
Icon: CategoryIcon,
help: 'Zusatzattribute, technische Merkmale und Filtereigenschaften',
},
];
@@ -57,6 +78,7 @@ const COMPOUND_TAB = {
label: 'Compound Editor',
color: '#e9d5ff',
Icon: AccountTreeIcon,
help: 'Stückliste und Unterartikel für diesen Set-Artikel verwalten',
};
const SETTINGS_TAB = {
@@ -64,6 +86,7 @@ const SETTINGS_TAB = {
label: 'Einstellungen',
color: '#fca5a5',
Icon: SettingsIcon,
help: 'Artikeleinstellungen, Einheiten, Steuersatz und Löschen',
};
function visibleTabs(article) {
@@ -260,7 +283,15 @@ class ArticleTileTab extends PureComponent {
value={row.id}
aria-label={row.label}
title={row.label}
icon={<Icon sx={{ fontSize: 40 }} />}
icon={
<HelpBadge
title={row.label}
help={row.help}
placement="top"
>
<Icon sx={{ fontSize: 40 }} />
</HelpBadge>
}
sx={{
minHeight: 56,
minWidth: 64,

135
src/nav.js
View File

@@ -56,11 +56,36 @@ class DeliveryNavIcon extends PureComponent {
}
export const NAV_ITEMS = [
{ path: '/artikel', label: 'Artikel', icon: Inventory2Icon },
{ path: '/lieferung', label: 'Lieferung', icon: DeliveryNavIcon },
{ path: '/auftrag', label: 'Auftrag', icon: AssignmentIcon },
{ path: '/kunde', label: 'Kunde', icon: PeopleIcon },
{ path: '/infos', label: 'Infos', icon: InfoIcon },
{
path: '/artikel',
label: 'Artikel',
icon: Inventory2Icon,
help: 'Artikelübersicht, Stammdaten, Barcodes und Bestandsverwaltung',
},
{
path: '/lieferung',
label: 'Lieferung',
icon: DeliveryNavIcon,
help: 'Wareneingänge verwalten, Lieferungen buchen und Lieferscheine erfassen',
},
{
path: '/auftrag',
label: 'Auftrag',
icon: AssignmentIcon,
help: 'Kundenangebote kalkulieren und Bestellungen abwickeln',
},
{
path: '/kunde',
label: 'Kunde',
icon: PeopleIcon,
help: 'Kundenstammdaten, Adressen, Ansprechpartner und Kundengruppen',
},
{
path: '/infos',
label: 'Infos',
icon: InfoIcon,
help: 'Systemstatus, Serververbindung und Mandanteneinstellungen',
},
];
class DeliveryNeuIcon extends PureComponent {
@@ -102,25 +127,99 @@ class DeliveryNeuIcon extends PureComponent {
export const SUB_NAV = {
'/artikel': [
{ segment: '', label: 'Liste', title: 'Artikel', icon: ViewListIcon },
{ segment: 'kategorien', label: 'Kategorieen', title: 'Kategorien', icon: CategoryIcon },
{ segment: 'lager', label: 'Lager', icon: WarehouseIcon },
{ segment: 'marken', label: 'Marken', icon: CopyrightIcon },
{ segment: 'vorlagen', label: 'Vorlagen', icon: LabelIcon },
{
segment: '',
label: 'Liste',
title: 'Artikel',
icon: ViewListIcon,
help: 'Gesamtliste aller Artikel durchsuchen, filtern und öffnen',
},
{
segment: 'kategorien',
label: 'Kategorieen',
title: 'Kategorien',
icon: CategoryIcon,
help: 'Hierarchischer Kategoriebaum zur Sortimentsgliederung',
},
{
segment: 'lager',
label: 'Lager',
icon: WarehouseIcon,
help: 'Lagerbestände einsehen, Bestandsabgleiche und Lagerplatzverwaltung',
},
{
segment: 'marken',
label: 'Marken',
icon: CopyrightIcon,
help: 'Katalog aller Hersteller und Marken verwalten',
},
{
segment: 'vorlagen',
label: 'Vorlagen',
icon: LabelIcon,
help: 'Druckvorlagen für Etiketten und Barcodes bearbeiten',
},
],
'/lieferung': [
{ segment: '', label: 'Liste', title: 'Lieferungen', icon: ListAltIcon },
{ segment: 'neu', label: 'Neu', title: 'Neue Lieferung', icon: DeliveryNeuIcon },
{ segment: 'lieferanten', label: 'Lieferanten', icon: StorefrontIcon },
{
segment: '',
label: 'Liste',
title: 'Lieferungen',
icon: ListAltIcon,
help: 'Historie und Status aller Wareneingänge und Lieferungen',
},
{
segment: 'neu',
label: 'Neu',
title: 'Neue Lieferung',
icon: DeliveryNeuIcon,
help: 'Neuen Wareneingang mit Belegscan und Positionserfassung buchen',
},
{
segment: 'lieferanten',
label: 'Lieferanten',
icon: StorefrontIcon,
help: 'Lieferantenverzeichnis mit hinterlegten Katalogen und Konditionen',
},
],
'/auftrag': [
{ segment: '', label: 'Angebot', icon: RequestQuoteIcon },
{ segment: 'bestellung', label: 'Bestellung', icon: ShoppingCartIcon },
{
segment: '',
label: 'Angebot',
title: 'Angebot',
icon: RequestQuoteIcon,
help: 'Angebote für Kunden kalkulieren und versenden',
},
{
segment: 'bestellung',
label: 'Bestellung',
title: 'Bestellung',
icon: ShoppingCartIcon,
help: 'Bestellungen prüfen, freigeben und kommissionieren',
},
],
'/kunde': [
{ segment: '', label: 'Liste', title: 'Kundenliste', icon: PeopleIcon },
{ segment: 'neu', label: 'neu', title: 'Neuer Kunde', icon: AddBoxIcon },
{ segment: 'gruppen', label: 'Gruppen', icon: GroupsIcon },
{
segment: '',
label: 'Liste',
title: 'Kundenliste',
icon: PeopleIcon,
help: 'Kundenkartei mit Kontaktdaten und Historie',
},
{
segment: 'neu',
label: 'neu',
title: 'Neuer Kunde',
icon: AddBoxIcon,
help: 'Neuen Kundenstamm mit Anschriften anlegen',
},
{
segment: 'gruppen',
label: 'Gruppen',
title: 'Gruppen',
icon: GroupsIcon,
help: 'Kundengruppen für Staffelpreise und Rabatte verwalten',
},
],
};

44
src/routes/artikel/vorlagen.jsx
View File

@@ -1,4 +1,4 @@
import { PureComponent } from 'react';
import { PureComponent, lazy, Suspense } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
@@ -18,8 +18,6 @@ import AddIcon from '@mui/icons-material/Add';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import EditIcon from '@mui/icons-material/Edit';
import LabelIcon from '@mui/icons-material/Label';
import { CanvasEditor } from 'react-canvas-label-editor';
import 'react-canvas-label-editor/style.css';
import BackendError from '../../components/BackendError';
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
import { backendErrorFrom } from '../../utils/backendError';
@@ -28,6 +26,12 @@ import { setLastArticleSku } from '../../automats';
import { labeltemplate } from '../../api';
import { enqueueSnackbar } from 'notistack';
const CanvasEditor = lazy(async () => {
await import('react-canvas-label-editor/style.css');
const mod = await import('react-canvas-label-editor');
return { default: mod.CanvasEditor };
});
const MIN_HEIGHT_MM = 10;
const DEFAULT_HEIGHT_MM = 25;
const DEFAULT_DPI = 203;
@@ -401,19 +405,27 @@ class ArtikelVorlagenPage extends PureComponent {
/>
</Box>
<Box sx={{ overflowX: 'auto' }}>
<CanvasEditor
width={editorWidth}
height={editorHeight}
minHeight={minHeightPx}
showWidthUI={false}
showHeightUI={false}
dpi={editorDpi}
objects={editorObjects}
onChange={(objects) => this.setState({ editorObjects: objects })}
clipboard={editorClipboard}
onCopy={(obj) => this.setState({ editorClipboard: obj })}
/>
<Box sx={{ overflowX: 'auto', minHeight: minHeightPx }}>
<Suspense
fallback={
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: editorHeight, minHeight: minHeightPx }}>
<CircularProgress size={32} />
</Box>
}
>
<CanvasEditor
width={editorWidth}
height={editorHeight}
minHeight={minHeightPx}
showWidthUI={false}
showHeightUI={false}
dpi={editorDpi}
objects={editorObjects}
onChange={(objects) => this.setState({ editorObjects: objects })}
clipboard={editorClipboard}
onCopy={(obj) => this.setState({ editorClipboard: obj })}
/>
</Suspense>
</Box>
</>
)}

13
src/utils/pdfText.js
View File

@@ -1,8 +1,15 @@
import { pdfToText, splitPdfPages } from 'pdfconvert-wasm';
export async function extractPdfText(pdfSource, options = { layout: true }) {
const { pdfToText } = await import('pdfconvert-wasm');
return pdfToText(pdfSource, options);
}
export { pdfToText, splitPdfPages };
export async function splitPdfPages(pdfSource) {
const { splitPdfPages: split } = await import('pdfconvert-wasm');
return split(pdfSource);
}
export async function pdfToText(pdfSource, options) {
const { pdfToText: toText } = await import('pdfconvert-wasm');
return toText(pdfSource, options);
}

3
src/utils/pdfThumbnail.js
View File

@@ -1,6 +1,5 @@
import { pdfToPng } from 'pdfconvert-wasm';
export async function generatePdfThumbnail(pdfSource, targetWidth = 200) {
const { pdfToPng } = await import('pdfconvert-wasm');
const images = await pdfToPng(pdfSource, {
firstPage: 1,
singleFile: true,

33
vite.config.js
View File

@@ -223,26 +223,22 @@ export default defineConfig(({ command }) => ({
// (api/, automats/, utils/, generic components/) fall out into a
// common chunk by the bundler automatically.
{
// Artikel section: pages + its dedicated component trees.
name: 'routes-artikel',
test: /\/src\/(pages\/artikel|components\/(article|category|tiles))\//,
priority: 20,
name: 'appArticleComponents',
test: /\/dashfront\/src\/components\/article\//,
includeDependenciesRecursively: false,
},
{
// Delivery + order (auftrag) editor surfaces share these.
name: 'routes-manifest',
test: /\/src\/components\/manifest\//,
priority: 10,
name: 'appComponents',
test: /\/dashfront\/src\/components\//,
includeDependenciesRecursively: false,
},
{
name: 'routes-auftrag',
test: /\/src\/pages\/auftrag\//,
},
{
name: 'routes-lieferung',
test: /\/src\/pages\/lieferung\//,
},
{
name: 'routes-kunde',
test: /\/src\/pages\/kunde\//,
priority: 5,
name: 'app',
test: /\/dashfront\/src\//,
includeDependenciesRecursively: false,
},
{
priority: 110,
@@ -274,6 +270,11 @@ export default defineConfig(({ command }) => ({
name: 'jsquash-image',
test: /node_modules\/@jsquash\/(avif|resize)\//,
},
{
priority: 100,
name: 'vendor',
test: /node_modules\/(jsbarcode|sortablejs|notistack)\//,
},
],
},
},