export

src/components/ElevatedPill.jsx

@@ -11,10 +11,11 @@ class ElevatedPill extends Component {
   }
 
   render() {
-    const { label, active = false } = this.props;
+    const { label, active = false, onClick } = this.props;
     return (
       <Box
         component="label"
+        onClick={onClick}
         sx={(theme) => ({
           display: 'inline-flex',
           alignItems: 'center',

src/components/SectionLayout.jsx

@@ -1,17 +1,37 @@
+import { useState } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Box from '@mui/material/Box';
+import Popover from '@mui/material/Popover';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import GetAppIcon from '@mui/icons-material/GetApp';
 import SettingsIcon from '@mui/icons-material/Settings';
 import PageLayout from './PageLayout';
 import { NAV_ITEMS, SUB_NAV } from '../nav';
 import { isKategorienPath } from '../pages/artikel/categoryRoute';
 import { selectRenameMode, setRenameMode } from '../store/categorySlice';
 import { ActionElevatedPill, ToggleElevatedPill } from './ElevatedPill';
+import { article, category } from '../api';
+
+function triggerDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
 
 export default function SectionLayout({ sectionPath }) {
   const { pathname } = useLocation();
   const dispatch = useDispatch();
   const renameMode = useSelector(selectRenameMode);
+  const [extrasAnchor, setExtrasAnchor] = useState(null);
   const title = NAV_ITEMS.find((item) => item.path === sectionPath)?.label ?? '';
   const subNav = SUB_NAV[sectionPath];
   const activeSub = subNav?.find((item) => {
@@ -36,6 +56,16 @@ export default function SectionLayout({ sectionPath }) {
 
   const showsRenameSwitch = activeSub?.segment === 'kategorien';
 
+  const exportKategorien = async () => {
+    setExtrasAnchor(null);
+    triggerDownload(await category.exportZip(), 'kategorien.zip');
+  };
+
+  const exportArtikel = async () => {
+    setExtrasAnchor(null);
+    triggerDownload(await article.exportZip(), 'artikel.zip');
+  };
+
   const titleAction = showsRenameSwitch ? (
     <Box sx={{ display: 'inline-flex', gap: 1 }}>
       <ToggleElevatedPill
@@ -43,7 +73,33 @@ export default function SectionLayout({ sectionPath }) {
         checked={renameMode}
         onToggle={(checked) => dispatch(setRenameMode(checked))}
       />
-      <ActionElevatedPill label="Extras" icon={<SettingsIcon sx={{ fontSize: 18 }} />} />
+      <ActionElevatedPill
+        label="Extras"
+        icon={<SettingsIcon sx={{ fontSize: 18 }} />}
+        onClick={(event) => setExtrasAnchor(event.currentTarget)}
+      />
+      <Popover
+        open={Boolean(extrasAnchor)}
+        anchorEl={extrasAnchor}
+        onClose={() => setExtrasAnchor(null)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        <MenuList sx={{ py: 0.5 }}>
+          <MenuItem onClick={exportArtikel}>
+            <ListItemIcon>
+              <GetAppIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Artikel exportieren</ListItemText>
+          </MenuItem>
+          <MenuItem onClick={exportKategorien}>
+            <ListItemIcon>
+              <GetAppIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Kategorien exportieren</ListItemText>
+          </MenuItem>
+        </MenuList>
+      </Popover>
     </Box>
   ) : null;