124 lines
4.4 KiB
JavaScript
124 lines
4.4 KiB
JavaScript
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, resolveActiveSub } from '../nav';
|
|
import { isKategorienPath } from '../pages/artikel/categoryRoute';
|
|
import { selectRenameMode, setRenameMode } from '../store/categorySlice';
|
|
import { ActionElevatedPill, ToggleElevatedPill } from 'dashgui/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 subSegment = resolveActiveSub(pathname, sectionPath);
|
|
const activeSub = subNav?.find((item) => item.segment === subSegment);
|
|
|
|
const knownSegments = new Set((subNav ?? []).map((item) => item.segment).filter(Boolean));
|
|
const rest = pathname.slice(sectionPath.length).replace(/^\//, '').split('/')[0];
|
|
const isArticleDetail =
|
|
sectionPath === '/artikel' &&
|
|
!isKategorienPath(pathname) &&
|
|
rest &&
|
|
!knownSegments.has(rest);
|
|
const isKundeDetail =
|
|
sectionPath === '/kunde' && rest && !knownSegments.has(rest);
|
|
const isLieferungDetail =
|
|
sectionPath === '/lieferung' && rest && !knownSegments.has(rest);
|
|
const isAngebotDoc =
|
|
sectionPath === '/auftrag' && rest && !knownSegments.has(rest);
|
|
const isDetail =
|
|
isArticleDetail || isKundeDetail || isLieferungDetail || isAngebotDoc;
|
|
|
|
const angebotLabel =
|
|
subNav?.find((item) => item.segment === '')?.label ?? 'Angebot';
|
|
let pageTitle = isDetail
|
|
? title
|
|
: (activeSub?.label ?? title);
|
|
if (pathname === '/auftrag/neu') pageTitle = 'Neues Angebot';
|
|
else if (isAngebotDoc) pageTitle = angebotLabel;
|
|
else if (pathname === '/auftrag/bestellung/neu') pageTitle = 'Neue Bestellung';
|
|
|
|
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
|
|
label="Edit"
|
|
checked={renameMode}
|
|
onToggle={(checked) => dispatch(setRenameMode(checked))}
|
|
/>
|
|
<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;
|
|
|
|
return (
|
|
<PageLayout
|
|
title={pageTitle}
|
|
showTitle={!isArticleDetail}
|
|
titleAction={titleAction}
|
|
>
|
|
<Outlet />
|
|
</PageLayout>
|
|
);
|
|
}
|