file api

src/nav.js

@@ -1,3 +1,5 @@
+import { PureComponent, createElement } from 'react';
+import Badge from '@mui/material/Badge';
 import Inventory2Icon from '@mui/icons-material/Inventory2';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 import AssignmentIcon from '@mui/icons-material/Assignment';
@@ -13,15 +15,89 @@ import StorefrontIcon from '@mui/icons-material/Storefront';
 import RequestQuoteIcon from '@mui/icons-material/RequestQuote';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { isKategorienPath } from './pages/artikel/categoryRoute';
+import { deliveryEditorAutomat } from './automats/deliveryEditorAutomat';
+
+class DeliveryNavIcon extends PureComponent {
+  constructor(props) {
+    super(props);
+    const state = deliveryEditorAutomat.state;
+    const isDraft = state.id == null && state.deliveryId == null;
+    this.state = {
+      hasDraft: isDraft && (state.lines?.length || 0) > 0,
+    };
+  }
+
+  componentDidMount() {
+    this.unsub = deliveryEditorAutomat.subscribe(this, (state) => {
+      const isDraft = state.id == null && state.deliveryId == null;
+      return {
+        hasDraft: isDraft && (state.lines?.length || 0) > 0,
+      };
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+  }
+
+  render() {
+    const { hasDraft } = this.state;
+    const { sx, ...rest } = this.props;
+    return createElement(LocalShippingIcon, {
+      ...rest,
+      sx: [
+        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+        (theme) => (hasDraft ? { color: theme.nav?.itemActiveAccent || '#2dd4bf' } : null),
+      ],
+    });
+  }
+}
 
 export const NAV_ITEMS = [
   { path: '/artikel', label: 'Artikel', icon: Inventory2Icon },
-  { path: '/lieferung', label: 'Lieferung', icon: LocalShippingIcon },
+  { path: '/lieferung', label: 'Lieferung', icon: DeliveryNavIcon },
   { path: '/auftrag', label: 'Auftrag', icon: AssignmentIcon },
   { path: '/kunde', label: 'Kunde', icon: PeopleIcon },
   { path: '/infos', label: 'Infos', icon: InfoIcon },
 ];
 
+class DeliveryNeuIcon extends PureComponent {
+  constructor(props) {
+    super(props);
+    const state = deliveryEditorAutomat.state;
+    const isDraft = state.id == null && state.deliveryId == null;
+    this.state = {
+      badgeCount: isDraft ? (state.lines?.length || 0) : 0,
+    };
+  }
+
+  componentDidMount() {
+    this.unsub = deliveryEditorAutomat.subscribe(this, (state) => {
+      const isDraft = state.id == null && state.deliveryId == null;
+      return {
+        badgeCount: isDraft ? (state.lines?.length || 0) : 0,
+      };
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+  }
+
+  render() {
+    return createElement(
+      Badge,
+      {
+        badgeContent: this.state.badgeCount,
+        invisible: !this.state.badgeCount,
+        color: 'primary',
+        max: 999,
+      },
+      createElement(AddBoxIcon, this.props)
+    );
+  }
+}
+
 export const SUB_NAV = {
   '/artikel': [
     { segment: '', label: 'Liste', title: 'Artikel', icon: ViewListIcon },
@@ -30,7 +106,7 @@ export const SUB_NAV = {
   ],
   '/lieferung': [
     { segment: '', label: 'Liste', title: 'Lieferungen', icon: ListAltIcon },
-    { segment: 'neu', label: 'Neu', title: 'Neue Lieferung', icon: AddBoxIcon },
+    { segment: 'neu', label: 'Neu', title: 'Neue Lieferung', icon: DeliveryNeuIcon },
     { segment: 'lieferanten', label: 'Lieferanten', icon: StorefrontIcon },
   ],
   '/auftrag': [