Tom Butcher
f05ed39184
- Added props to the Printers component to enable saving and using filters and sorting in both session and URL, improving user experience and state management consistency.
123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
// src/Printers.js
|
|
|
|
import { useState, useRef } from 'react'
|
|
import { Button, Dropdown, Space, Flex, Modal } from 'antd'
|
|
import NewPrinter from './Printers/NewPrinter'
|
|
import PlusIcon from '../../Icons/PlusIcon'
|
|
import ReloadIcon from '../../Icons/ReloadIcon'
|
|
import ObjectTable from '../common/ObjectTable'
|
|
import ColumnViewButton from '../common/ColumnViewButton'
|
|
import ExportListButton from '../common/ExportListButton'
|
|
|
|
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
|
import FilterSidebarButton from '../common/FilterSidebarButton'
|
|
import useViewMode from '../hooks/useViewMode'
|
|
import useColumnVisibility from '../hooks/useColumnVisibility'
|
|
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
|
|
|
const Printers = () => {
|
|
const [newPrinterOpen, setNewPrinterOpen] = useState(false)
|
|
const tableRef = useRef()
|
|
|
|
// View mode state (cards/list), persisted in sessionStorage via custom hook
|
|
const [viewMode, setViewMode] = useViewMode('Printers')
|
|
|
|
// Column visibility state, persisted in sessionStorage via custom hook
|
|
const [columnVisibility, setColumnVisibility] = useColumnVisibility('printer')
|
|
|
|
// Filter sidebar visibility, persisted in sessionStorage via custom hook
|
|
const [showFilterSidebar, setShowFilterSidebar] =
|
|
useFilterSidebarVisibility('Printers')
|
|
|
|
const actionItems = {
|
|
items: [
|
|
{
|
|
label: 'New Printer',
|
|
key: 'newPrinter',
|
|
icon: <PlusIcon />
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
label: 'Reload List',
|
|
key: 'reloadList',
|
|
icon: <ReloadIcon />
|
|
}
|
|
],
|
|
onClick: ({ key }) => {
|
|
if (key === 'reloadList') {
|
|
tableRef.current?.reload()
|
|
} else if (key === 'newPrinter') {
|
|
setNewPrinterOpen(true)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Flex vertical={'true'} gap='large' className='h-100'>
|
|
<Flex justify={'space-between'} style={{ minHeight: 0 }}>
|
|
<Space>
|
|
<Dropdown menu={actionItems}>
|
|
<Button>Actions</Button>
|
|
</Dropdown>
|
|
<ColumnViewButton
|
|
type='printer'
|
|
disabled={false}
|
|
visibleState={columnVisibility}
|
|
updateVisibleState={setColumnVisibility}
|
|
/>
|
|
<ExportListButton objectType='printer' />
|
|
</Space>
|
|
<Space>
|
|
<FilterSidebarButton
|
|
active={showFilterSidebar}
|
|
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
|
/>
|
|
<ObjectTableViewButton
|
|
viewMode={viewMode}
|
|
setViewMode={setViewMode}
|
|
/>
|
|
</Space>
|
|
</Flex>
|
|
|
|
<ObjectTable
|
|
ref={tableRef}
|
|
type='printer'
|
|
showFilterSidebar={showFilterSidebar}
|
|
cards={viewMode === 'cards'}
|
|
visibleColumns={columnVisibility}
|
|
expandHeight={true}
|
|
saveFilterInSession={true}
|
|
saveFilterInUrl={true}
|
|
useFilterInSession={true}
|
|
useFilterInUrl={true}
|
|
saveSortInSession={true}
|
|
saveSortInUrl={true}
|
|
useSortInSession={true}
|
|
useSortInUrl={true}
|
|
/>
|
|
|
|
<Modal
|
|
open={newPrinterOpen}
|
|
footer={null}
|
|
width={700}
|
|
onCancel={() => {
|
|
setNewPrinterOpen(false)
|
|
}}
|
|
destroyOnHidden
|
|
>
|
|
<NewPrinter
|
|
onOk={() => {
|
|
setNewPrinterOpen(false)
|
|
tableRef.current?.reload()
|
|
}}
|
|
reset={newPrinterOpen}
|
|
/>
|
|
</Modal>
|
|
</Flex>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Printers
|