Tom Butcher
bc465f7202
- Introduced TableStateContext to manage table filters and sorting, allowing for persistence across sessions and URL parameters. - Updated ObjectTable and DashboardBreadcrumb components to utilize the new context for improved filter handling and user experience. - Refactored DashboardLayout to include TableStateProvider, ensuring consistent state management across the dashboard components.
116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
// DashboardBreadcrumb.js
|
|
import { Breadcrumb, Button, Flex, Space } from 'antd'
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
|
import ArrowLeftIcon from '../../Icons/ArrowLeftIcon'
|
|
import ArrowRightIcon from '../../Icons/ArrowRightIcon'
|
|
import FilterIcon from '../../Icons/FilterIcon'
|
|
import { getModelByName } from '../../../database/ObjectModels'
|
|
import { useTableState } from '../context/TableStateContext'
|
|
|
|
const breadcrumbNameMap = {
|
|
production: 'Production',
|
|
inventory: 'Inventory',
|
|
management: 'Management',
|
|
developer: 'Developer',
|
|
finance: 'Finance',
|
|
sales: 'Sales',
|
|
productcategories: 'Product Categories',
|
|
overview: 'Overview',
|
|
info: 'Info',
|
|
design: 'Design',
|
|
control: 'Control',
|
|
preview: 'Preview',
|
|
about: 'About'
|
|
}
|
|
|
|
const mainSections = ['production', 'inventory', 'management', 'developer']
|
|
|
|
const DashboardBreadcrumb = () => {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
const { hasPageFilter, hasStoredFilter } = useTableState()
|
|
const pathSnippets = location.pathname.split('/').filter((i) => i)
|
|
|
|
function segmentToModel(segment) {
|
|
if (segment) {
|
|
// If segment ends with 's', remove it and get the model
|
|
if (segment.endsWith('s')) {
|
|
const singularSegment = segment.slice(0, -1)
|
|
return getModelByName(singularSegment, true)
|
|
}
|
|
// Otherwise, get the model as is
|
|
return getModelByName(segment, true)
|
|
}
|
|
return null
|
|
}
|
|
|
|
const breadcrumbItems = pathSnippets.map((segment, index) => {
|
|
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
|
|
if (segment !== 'dashboard') {
|
|
const isMainSection = mainSections.includes(segment)
|
|
const model = segmentToModel(segment)
|
|
const modelLabelPlural = model?.label ? `${model.label}s` : null
|
|
const name = breadcrumbNameMap[segment] || modelLabelPlural || segment
|
|
const showFilterIcon =
|
|
hasPageFilter(url) ||
|
|
(model?.name && model.name !== 'unknown' && hasStoredFilter(model.name))
|
|
if (isMainSection) {
|
|
return {
|
|
title: (
|
|
<span style={{ padding: '0 12px' }} key={segment}>
|
|
{name}
|
|
</span>
|
|
),
|
|
key: segment
|
|
}
|
|
}
|
|
|
|
return {
|
|
title: (
|
|
<Link
|
|
to={url}
|
|
style={{
|
|
padding: '0 12px',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 6
|
|
}}
|
|
>
|
|
{name}
|
|
{showFilterIcon && (
|
|
<FilterIcon style={{ fontSize: 12, opacity: 0.65 }} />
|
|
)}
|
|
</Link>
|
|
),
|
|
key: url
|
|
}
|
|
} else {
|
|
return {}
|
|
}
|
|
})
|
|
|
|
return (
|
|
<Flex align='center' gap={'small'}>
|
|
<Flex gap={'small'}>
|
|
<Space.Compact>
|
|
<Button
|
|
type='text'
|
|
icon={<ArrowLeftIcon style={{ fontSize: '14px' }} />}
|
|
onClick={() => navigate(-1)}
|
|
style={{ padding: '0 2px', height: '22px' }}
|
|
/>
|
|
<Button
|
|
type='text'
|
|
icon={<ArrowRightIcon style={{ fontSize: '14px' }} />}
|
|
onClick={() => navigate(1)}
|
|
style={{ padding: '0 2px', height: '22px' }}
|
|
/>
|
|
</Space.Compact>
|
|
</Flex>
|
|
<Breadcrumb items={breadcrumbItems} />
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default DashboardBreadcrumb
|