From 88c96c94a3a02ba7290c3444c49a55094af60fd8 Mon Sep 17 00:00:00 2001 From: seb Date: Tue, 29 Sep 2026 10:25:50 +0200 Subject: [PATCH] u --- src/appRouter.jsx | 45 ++-- src/automats/helpAutomat.js | 45 ++++ src/automats/index.js | 3 + src/components/AppShell.jsx | 13 +- src/components/HelpBadge.jsx | 259 ++++++++++++++++++++++ src/components/UserMenu.jsx | 35 ++- src/components/article/ArticleTileTab.jsx | 39 +++- src/nav.js | 135 +++++++++-- src/routes/artikel/vorlagen.jsx | 44 ++-- src/utils/pdfText.js | 13 +- src/utils/pdfThumbnail.js | 3 +- vite.config.js | 33 +-- 12 files changed, 578 insertions(+), 89 deletions(-) create mode 100644 src/automats/helpAutomat.js create mode 100644 src/components/HelpBadge.jsx diff --git a/src/appRouter.jsx b/src/appRouter.jsx index 9620f30..dd69701 100644 --- a/src/appRouter.jsx +++ b/src/appRouter.jsx @@ -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 = [ { diff --git a/src/automats/helpAutomat.js b/src/automats/helpAutomat.js new file mode 100644 index 0000000..781bc81 --- /dev/null +++ b/src/automats/helpAutomat.js @@ -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} + */ +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); diff --git a/src/automats/index.js b/src/automats/index.js index 377cc41..fabe0fa 100644 --- a/src/automats/index.js +++ b/src/automats/index.js @@ -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'; diff --git a/src/components/AppShell.jsx b/src/components/AppShell.jsx index 72545c2..dae26dd 100644 --- a/src/components/AppShell.jsx +++ b/src/components/AppShell.jsx @@ -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 { })} > - {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 { })} > - + + + @@ -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 { }, })} > - + + + {label ? ( ({ + 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 ( + <> + + {badgeContent} + + } + 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} + + + + + { + 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)', + }} + > + + + + ? + + {title ? ( + + {title} + + ) : null} + + + + + + + {helpText} + + + + + + ); + } +} + +export default HelpBadge; diff --git a/src/components/UserMenu.jsx b/src/components/UserMenu.jsx index 7ff5390..8936098 100644 --- a/src/components/UserMenu.jsx +++ b/src/components/UserMenu.jsx @@ -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 { Einstellungen + + + + + Hilfe + + + diff --git a/src/components/article/ArticleTileTab.jsx b/src/components/article/ArticleTileTab.jsx index 38c6469..4fdf834 100644 --- a/src/components/article/ArticleTileTab.jsx +++ b/src/components/article/ArticleTileTab.jsx @@ -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={{ minHeight: 56, minWidth: 64, diff --git a/src/nav.js b/src/nav.js index 6ac8ca5..dd05cb8 100644 --- a/src/nav.js +++ b/src/nav.js @@ -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', + }, ], }; diff --git a/src/routes/artikel/vorlagen.jsx b/src/routes/artikel/vorlagen.jsx index 355370c..e46c05d 100644 --- a/src/routes/artikel/vorlagen.jsx +++ b/src/routes/artikel/vorlagen.jsx @@ -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 { /> - - this.setState({ editorObjects: objects })} - clipboard={editorClipboard} - onCopy={(obj) => this.setState({ editorClipboard: obj })} - /> + + + + + } + > + this.setState({ editorObjects: objects })} + clipboard={editorClipboard} + onCopy={(obj) => this.setState({ editorClipboard: obj })} + /> + )} diff --git a/src/utils/pdfText.js b/src/utils/pdfText.js index b077a72..d6e390b 100644 --- a/src/utils/pdfText.js +++ b/src/utils/pdfText.js @@ -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); +} diff --git a/src/utils/pdfThumbnail.js b/src/utils/pdfThumbnail.js index 0a3a5be..44fc82f 100644 --- a/src/utils/pdfThumbnail.js +++ b/src/utils/pdfThumbnail.js @@ -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, diff --git a/vite.config.js b/vite.config.js index 5508c4b..403d31a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -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)\//, + }, ], }, },