Implemented filter sidebar.
Some checks are pending
farmcontrol/farmcontrol-ui/pipeline/head Build queued...
Some checks are pending
farmcontrol/farmcontrol-ui/pipeline/head Build queued...
This commit is contained in:
parent
e82d7e10df
commit
af063f7acc
7
assets/icons/filtercirclefilledicon.svg
Normal file
7
assets/icons/filtercirclefilledicon.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.889695,0,0,0.889695,3,3.004404)">
|
||||
<path d="M65.191,32.59C65.191,50.56 50.592,65.181 32.59,65.181C14.621,65.181 0,50.56 0,32.59C0,14.599 14.621,0 32.59,0C50.592,0 65.191,14.599 65.191,32.59ZM24.761,42.45C22.996,42.45 21.767,43.565 21.767,45.227C21.767,46.89 22.996,48.026 24.761,48.026L40.494,48.026C42.259,48.026 43.509,46.89 43.509,45.227C43.509,43.565 42.259,42.45 40.494,42.45L24.761,42.45ZM20.339,31.642C18.552,31.642 17.323,32.777 17.323,34.44C17.323,36.144 18.552,37.249 20.339,37.249L44.937,37.249C46.703,37.249 47.931,36.144 47.931,34.44C47.931,32.777 46.703,31.642 44.937,31.642L20.339,31.642ZM16.054,20.886C14.279,20.886 13.039,22.001 13.039,23.684C13.039,25.358 14.279,26.472 16.054,26.472L49.222,26.472C50.976,26.472 52.237,25.358 52.237,23.684C52.237,22.001 50.976,20.886 49.222,20.886L16.054,20.886Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
8
assets/icons/filtercircleicon.svg
Normal file
8
assets/icons/filtercircleicon.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.889695,0,0,0.889695,3,3.004404)">
|
||||
<path d="M32.59,65.181C50.592,65.181 65.191,50.582 65.191,32.59C65.191,14.599 50.592,0 32.59,0C14.599,0 0,14.599 0,32.59C0,50.582 14.599,65.181 32.59,65.181ZM32.59,58.02C18.529,58.02 7.161,46.652 7.161,32.59C7.161,18.529 18.529,7.161 32.59,7.161C46.652,7.161 58.03,18.529 58.03,32.59C58.03,46.652 46.652,58.02 32.59,58.02Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M16.733,26.802L48.5,26.802C50.183,26.802 51.362,25.748 51.362,24.146C51.362,22.565 50.183,21.511 48.5,21.511L16.733,21.511C15.029,21.511 13.871,22.565 13.871,24.146C13.871,25.748 15.029,26.802 16.733,26.802ZM20.832,37.096L44.402,37.096C46.065,37.096 47.233,36.042 47.233,34.44C47.233,32.869 46.065,31.805 44.402,31.805L20.832,31.805C19.147,31.805 17.98,32.869 17.98,34.44C17.98,36.042 19.147,37.096 20.832,37.096ZM25.068,47.411L40.145,47.411C41.808,47.411 42.996,46.336 42.996,44.755C42.996,43.184 41.808,42.121 40.145,42.121L25.068,42.121C23.405,42.121 22.237,43.184 22.237,44.755C22.237,46.336 23.405,47.411 25.068,47.411Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
9
assets/icons/filtericon.svg
Normal file
9
assets/icons/filtericon.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.929807,0,0,0.929807,1,12.754528)">
|
||||
<path d="M16.503,41.397L50.239,41.397C52.648,41.397 54.536,39.324 54.536,36.987C54.536,34.578 52.671,32.569 50.239,32.569L16.503,32.569C14.094,32.569 12.212,34.626 12.212,36.987C12.212,39.276 14.118,41.397 16.503,41.397Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M10.407,25.112L56.342,25.112C58.727,25.112 60.608,23.039 60.608,20.702C60.608,18.269 58.751,16.285 56.342,16.285L10.407,16.285C8.022,16.285 6.133,18.341 6.133,20.702C6.133,22.992 8.046,25.112 10.407,25.112Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M4.267,8.827L62.414,8.827C64.823,8.827 66.68,6.755 66.68,4.417C66.68,1.984 64.847,0 62.414,0L4.267,0C1.882,0 0,2.032 0,4.417C0,6.683 1.905,8.827 4.267,8.827Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -584,3 +584,15 @@ body {
|
||||
.markdown-code-editor .cm-editor .cm-gutters {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-table.ant-table-middle .ant-table-filter-trigger {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-filter-column {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const Invoices = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('invoices')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Invoices')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const Invoices = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const Invoices = () => {
|
||||
<ExportListButton objectType='invoice' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const Invoices = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='invoice'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const Payments = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('payments')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Payments')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const Payments = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const Payments = () => {
|
||||
<ExportListButton objectType='payment' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const Payments = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='payment'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -9,9 +9,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -25,6 +26,9 @@ const FilamentStocks = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('filamentStocks')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('FilamentStocks')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -50,7 +54,7 @@ const FilamentStocks = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -65,11 +69,13 @@ const FilamentStocks = () => {
|
||||
<ExportListButton objectType='filamentStock' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -79,6 +85,7 @@ const FilamentStocks = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='filamentStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const OrderItems = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('orderItems')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('OrderItems')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const OrderItems = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const OrderItems = () => {
|
||||
<ExportListButton objectType='orderItem' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const OrderItems = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='orderItem'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -9,9 +9,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -25,6 +26,9 @@ const PartStocks = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('partStocks')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('PartStocks')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -50,7 +54,7 @@ const PartStocks = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -65,11 +69,13 @@ const PartStocks = () => {
|
||||
<ExportListButton objectType='partStock' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -79,6 +85,7 @@ const PartStocks = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='partStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -10,9 +10,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -26,6 +27,9 @@ const ProductStocks = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('productStock')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('ProductStocks')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -51,7 +55,7 @@ const ProductStocks = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -66,11 +70,13 @@ const ProductStocks = () => {
|
||||
<ExportListButton objectType='productStock' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -80,6 +86,7 @@ const ProductStocks = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='productStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const PurchaseOrders = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('purchaseOrders')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('PurchaseOrders')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const PurchaseOrders = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const PurchaseOrders = () => {
|
||||
<ExportListButton objectType='purchaseOrder' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const PurchaseOrders = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='purchaseOrder'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const Shipments = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('shipments')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Shipments')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const Shipments = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const Shipments = () => {
|
||||
<ExportListButton objectType='shipment' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const Shipments = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='shipment'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -9,9 +9,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -25,6 +26,9 @@ const StockAudits = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('stockAudits')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('StockAudits')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -50,7 +54,7 @@ const StockAudits = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -65,11 +69,13 @@ const StockAudits = () => {
|
||||
<ExportListButton objectType='stockAudit' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -79,6 +85,7 @@ const StockAudits = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='stockAudit'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -2,9 +2,10 @@ import { useRef } from 'react'
|
||||
import { Button, Flex, Space, Dropdown } from 'antd'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
@ -16,6 +17,9 @@ const StockEvents = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('stockEvent')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('StockEvents')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -33,7 +37,7 @@ const StockEvents = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -48,11 +52,13 @@ const StockEvents = () => {
|
||||
<ExportListButton objectType='stockEvent' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -62,6 +68,7 @@ const StockEvents = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='stockEvent'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -6,9 +6,10 @@ import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
const AppPasswords = () => {
|
||||
@ -19,6 +20,9 @@ const AppPasswords = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('appPassword')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('AppPasswords')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -44,7 +48,7 @@ const AppPasswords = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -59,11 +63,13 @@ const AppPasswords = () => {
|
||||
<ExportListButton objectType='appPassword' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const AppPasswords = () => {
|
||||
type='appPassword'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -3,7 +3,9 @@ import { Button, Flex, Space, Dropdown } from 'antd'
|
||||
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -13,6 +15,9 @@ const AuditLogs = () => {
|
||||
const [columnVisibility, updateColumnVisibility] =
|
||||
useColumnVisibility('auditLog')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('AuditLogs')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -30,7 +35,7 @@ const AuditLogs = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -44,12 +49,19 @@ const AuditLogs = () => {
|
||||
/>
|
||||
<ExportListButton objectType='auditLog' />
|
||||
</Space>
|
||||
<Space>
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='auditLog'
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const CourierServices = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('courierService')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('CourierServices')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const CourierServices = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const CourierServices = () => {
|
||||
<ExportListButton objectType='courierService' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const CourierServices = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='courierService'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -19,6 +20,9 @@ const Couriers = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('courier')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Couriers')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -44,7 +48,7 @@ const Couriers = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -59,11 +63,13 @@ const Couriers = () => {
|
||||
<ExportListButton objectType='courier' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -72,6 +78,7 @@ const Couriers = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='courier'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const DocumentJobs = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentJob')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('DocumentJobs')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const DocumentJobs = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const DocumentJobs = () => {
|
||||
<ExportListButton objectType='documentJob' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const DocumentJobs = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentJob'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -4,9 +4,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
import NewDocumentPrinter from './DocumentPrinters/NewDocumentPrinter'
|
||||
@ -19,6 +20,9 @@ const DocumentPrinters = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentPrinter')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('DocumentPrinters')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -44,7 +48,7 @@ const DocumentPrinters = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -59,11 +63,13 @@ const DocumentPrinters = () => {
|
||||
<ExportListButton objectType='documentPrinter' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -72,6 +78,7 @@ const DocumentPrinters = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentPrinter'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -18,6 +19,9 @@ const DocumentSizes = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentSize')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('DocumentSizes')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -43,7 +47,7 @@ const DocumentSizes = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -58,11 +62,13 @@ const DocumentSizes = () => {
|
||||
<ExportListButton objectType='documentSize' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -71,6 +77,7 @@ const DocumentSizes = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentSize'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const DocumentTemplates = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentTemplate')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('DocumentTemplates')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const DocumentTemplates = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const DocumentTemplates = () => {
|
||||
<ExportListButton objectType='documentTemplate' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const DocumentTemplates = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentTemplate'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -7,9 +7,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -23,6 +24,9 @@ const FilamentSkus = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('filamentSku')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('FilamentSkus')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -48,7 +52,7 @@ const FilamentSkus = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -63,11 +67,13 @@ const FilamentSkus = () => {
|
||||
<ExportListButton objectType='filamentSku' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -77,6 +83,7 @@ const FilamentSkus = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='filamentSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -10,10 +10,11 @@ import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
|
||||
const Filaments = () => {
|
||||
const [newFilamentOpen, setNewFilamentOpen] = useState(false)
|
||||
@ -25,6 +26,9 @@ const Filaments = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('filament')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Filaments')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -50,7 +54,7 @@ const Filaments = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -65,11 +69,13 @@ const Filaments = () => {
|
||||
<ExportListButton objectType='filament' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -79,6 +85,7 @@ const Filaments = () => {
|
||||
type='filament'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -3,9 +3,10 @@ import { Button, Flex, Space, Dropdown } from 'antd'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -16,6 +17,9 @@ const Files = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('file')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Files')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -33,7 +37,7 @@ const Files = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -48,11 +52,13 @@ const Files = () => {
|
||||
<ExportListButton objectType='file' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -61,6 +67,7 @@ const Files = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='file'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -11,9 +11,10 @@ import ExportListButton from '../common/ExportListButton'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
|
||||
const Hosts = () => {
|
||||
const [newHostOpen, setNewHostOpen] = useState(false)
|
||||
@ -24,6 +25,9 @@ const Hosts = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('host')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Hosts')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -49,7 +53,7 @@ const Hosts = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -64,11 +68,13 @@ const Hosts = () => {
|
||||
<ExportListButton objectType='host' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -78,6 +84,7 @@ const Hosts = () => {
|
||||
type='host'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -8,9 +8,10 @@ import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
const Materials = () => {
|
||||
@ -22,6 +23,9 @@ const Materials = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('material')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Materials')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -47,7 +51,7 @@ const Materials = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -62,11 +66,13 @@ const Materials = () => {
|
||||
<ExportListButton objectType='material' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -76,6 +82,7 @@ const Materials = () => {
|
||||
type='material'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const NoteTypes = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('noteType')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('NoteTypes')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const NoteTypes = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const NoteTypes = () => {
|
||||
<ExportListButton objectType='noteType' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const NoteTypes = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='noteType'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -7,9 +7,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -22,6 +23,9 @@ const PartSkus = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('partSku')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('PartSkus')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -47,7 +51,7 @@ const PartSkus = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -62,11 +66,13 @@ const PartSkus = () => {
|
||||
<ExportListButton objectType='partSku' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -76,6 +82,7 @@ const PartSkus = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='partSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -11,9 +11,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
@ -24,6 +25,9 @@ const Parts = (filter) => {
|
||||
const [viewMode, setViewMode] = useViewMode('part')
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('part')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Parts')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -49,7 +53,7 @@ const Parts = (filter) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -64,11 +68,13 @@ const Parts = (filter) => {
|
||||
<ExportListButton objectType='part' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -78,6 +84,7 @@ const Parts = (filter) => {
|
||||
type='part'
|
||||
cards={viewMode === 'cards'}
|
||||
filter={filter}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -7,9 +7,10 @@ import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -23,6 +24,9 @@ const ProductSkus = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('productSku')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('ProductSkus')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -48,7 +52,7 @@ const ProductSkus = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -63,11 +67,13 @@ const ProductSkus = () => {
|
||||
<ExportListButton objectType='productSku' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -77,6 +83,7 @@ const ProductSkus = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='productSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -25,9 +25,10 @@ import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import XMarkIcon from '../../Icons/XMarkIcon'
|
||||
import CheckIcon from '../../Icons/CheckIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
const Products = () => {
|
||||
@ -235,6 +236,9 @@ const Products = () => {
|
||||
columns
|
||||
)
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Products')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -320,7 +324,7 @@ const Products = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -336,11 +340,13 @@ const Products = () => {
|
||||
</Popover>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -348,6 +354,7 @@ const Products = () => {
|
||||
ref={tableRef}
|
||||
type={'product'}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -19,6 +20,9 @@ const TaxRates = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('taxRate')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('TaxRates')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -44,7 +48,7 @@ const TaxRates = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -59,11 +63,13 @@ const TaxRates = () => {
|
||||
<ExportListButton objectType='taxRate' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -72,6 +78,7 @@ const TaxRates = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='taxRate'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const TaxRecords = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('taxRecord')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('TaxRecords')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const TaxRecords = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const TaxRecords = () => {
|
||||
<ExportListButton objectType='taxRecord' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const TaxRecords = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='taxRecord'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -3,9 +3,10 @@ import { Button, Flex, Space, Dropdown } from 'antd'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -16,6 +17,9 @@ const Users = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('user')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Users')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -32,7 +36,7 @@ const Users = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -47,9 +51,13 @@ const Users = () => {
|
||||
<ExportListButton objectType='user' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -58,6 +66,7 @@ const Users = () => {
|
||||
type={'user'}
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
)
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -19,6 +20,9 @@ const Vendors = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('vendor')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Vendors')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -44,7 +48,7 @@ const Vendors = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -59,11 +63,13 @@ const Vendors = () => {
|
||||
<ExportListButton objectType='vendor' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -72,6 +78,7 @@ const Vendors = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='vendor'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -7,9 +7,10 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
@ -22,6 +23,9 @@ const GCodeFiles = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('gcodeFile')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('GCodeFiles')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -47,7 +51,7 @@ const GCodeFiles = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -62,11 +66,13 @@ const GCodeFiles = () => {
|
||||
<ExportListButton objectType='gcodeFile' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -75,6 +81,7 @@ const GCodeFiles = () => {
|
||||
type='gcodeFile'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -7,10 +7,11 @@ import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
|
||||
import PlusIcon from '../../Icons/PlusIcon.jsx'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon.jsx'
|
||||
import ObjectTable from '../common/ObjectTable.jsx'
|
||||
import ListIcon from '../../Icons/ListIcon.jsx'
|
||||
import GridIcon from '../../Icons/GridIcon.jsx'
|
||||
import useViewMode from '../hooks/useViewMode.jsx'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import ColumnViewButton from '../common/ColumnViewButton.jsx'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility.jsx'
|
||||
import ExportListButton from '../common/ExportListButton.jsx'
|
||||
|
||||
const Jobs = () => {
|
||||
@ -20,6 +21,9 @@ const Jobs = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('job')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Jobs')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -49,7 +53,7 @@ const Jobs = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large' style={{ height: '100%' }}>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -65,11 +69,13 @@ const Jobs = () => {
|
||||
</Space>
|
||||
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -79,6 +85,7 @@ const Jobs = () => {
|
||||
type={'job'}
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -9,10 +9,11 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
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)
|
||||
@ -24,6 +25,9 @@ const 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: [
|
||||
{
|
||||
@ -49,7 +53,7 @@ const Printers = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -64,11 +68,13 @@ const Printers = () => {
|
||||
<ExportListButton objectType='printer' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -76,6 +82,7 @@ const Printers = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='printer'
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
/>
|
||||
|
||||
@ -5,10 +5,11 @@ import { Button, Flex, Space, Dropdown } from 'antd'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon.jsx'
|
||||
import ObjectTable from '../common/ObjectTable.jsx'
|
||||
import ListIcon from '../../Icons/ListIcon.jsx'
|
||||
import GridIcon from '../../Icons/GridIcon.jsx'
|
||||
import useViewMode from '../hooks/useViewMode.jsx'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import ColumnViewButton from '../common/ColumnViewButton.jsx'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility.jsx'
|
||||
import ExportListButton from '../common/ExportListButton.jsx'
|
||||
|
||||
const SubJobs = () => {
|
||||
@ -17,6 +18,9 @@ const SubJobs = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('subJob')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('SubJobs')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -34,7 +38,7 @@ const SubJobs = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large' style={{ height: '100%' }}>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -50,11 +54,13 @@ const SubJobs = () => {
|
||||
</Space>
|
||||
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -64,6 +70,7 @@ const SubJobs = () => {
|
||||
type={'subJob'}
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -19,6 +20,9 @@ const Clients = () => {
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('client')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('Clients')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -44,7 +48,7 @@ const Clients = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -59,11 +63,13 @@ const Clients = () => {
|
||||
<ExportListButton objectType='client' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -72,6 +78,7 @@ const Clients = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='client'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import ReloadIcon from '../../Icons/ReloadIcon'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
|
||||
@ -20,6 +21,9 @@ const SalesOrders = () => {
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('salesOrders')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('SalesOrders')
|
||||
|
||||
const actionItems = {
|
||||
items: [
|
||||
{
|
||||
@ -45,7 +49,7 @@ const SalesOrders = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex vertical={'true'} gap='large'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='small'>
|
||||
<Dropdown menu={actionItems}>
|
||||
@ -60,11 +64,13 @@ const SalesOrders = () => {
|
||||
<ExportListButton objectType='salesOrder' />
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === 'cards' ? 'list' : 'cards')
|
||||
}
|
||||
<FilterSidebarButton
|
||||
active={showFilterSidebar}
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
@ -73,6 +79,7 @@ const SalesOrders = () => {
|
||||
visibleColumns={columnVisibility}
|
||||
type='salesOrder'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
/>
|
||||
</Flex>
|
||||
<Modal
|
||||
|
||||
193
src/components/Dashboard/common/FilterSidebar.jsx
Normal file
193
src/components/Dashboard/common/FilterSidebar.jsx
Normal file
@ -0,0 +1,193 @@
|
||||
import { useMemo, useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { Card, Select, Input, Button, Flex, Space, Dropdown } from 'antd'
|
||||
import { CloseOutlined } from '@ant-design/icons'
|
||||
import PropTypes from 'prop-types'
|
||||
import PlusIcon from '../../Icons/PlusIcon'
|
||||
import {
|
||||
getModelByName,
|
||||
getModelProperties
|
||||
} from '../../../database/ObjectModels'
|
||||
import MissingPlaceholder from './MissingPlaceholder'
|
||||
import BinIcon from '../../Icons/BinIcon'
|
||||
|
||||
const FilterSidebar = ({
|
||||
type,
|
||||
filter = {},
|
||||
onFilterChange,
|
||||
masterFilter = {}
|
||||
}) => {
|
||||
const model = getModelByName(type)
|
||||
const modelProps = getModelProperties(type)
|
||||
const masterKeys = Object.keys(masterFilter)
|
||||
|
||||
const initialEmptyFields = useRef(
|
||||
new Set(Object.keys(filter).filter((k) => filter[k] === ''))
|
||||
)
|
||||
const [localFilter, setLocalFilter] = useState(() => {
|
||||
const visible = {}
|
||||
for (const [k, v] of Object.entries(filter)) {
|
||||
if (v !== '') visible[k] = v
|
||||
}
|
||||
return visible
|
||||
})
|
||||
const debounceRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const visible = {}
|
||||
for (const [k, v] of Object.entries(filter)) {
|
||||
if (initialEmptyFields.current.has(k) && v === '') continue
|
||||
visible[k] = v
|
||||
}
|
||||
setLocalFilter(visible)
|
||||
}, [filter])
|
||||
|
||||
const debouncedFilterChange = useCallback(
|
||||
(next) => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current)
|
||||
debounceRef.current = setTimeout(() => onFilterChange(next), 250)
|
||||
},
|
||||
[onFilterChange]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const filterableProperties = useMemo(() => {
|
||||
if (!model.filters) return []
|
||||
return model.filters
|
||||
.filter((name) => !masterKeys.includes(name))
|
||||
.map((name) => modelProps.find((p) => p.name === name))
|
||||
.filter(Boolean)
|
||||
}, [model.filters, modelProps, masterKeys])
|
||||
|
||||
const fieldOptions = useMemo(
|
||||
() =>
|
||||
filterableProperties.map((prop) => ({
|
||||
label: prop.label,
|
||||
value: prop.name
|
||||
})),
|
||||
[filterableProperties]
|
||||
)
|
||||
|
||||
const activeFields = Object.keys(localFilter)
|
||||
|
||||
const usedFields = new Set(activeFields)
|
||||
const availableOptions = (currentField) =>
|
||||
fieldOptions.filter(
|
||||
(o) => !usedFields.has(o.value) || o.value === currentField
|
||||
)
|
||||
|
||||
const rows =
|
||||
activeFields.length > 0
|
||||
? activeFields.map((field) => ({ field, value: localFilter[field] }))
|
||||
: []
|
||||
|
||||
const addRow = () => {
|
||||
const unused = fieldOptions.find((o) => !usedFields.has(o.value))
|
||||
if (!unused) return
|
||||
initialEmptyFields.current.delete(unused.value)
|
||||
const next = { ...localFilter, [unused.value]: '' }
|
||||
setLocalFilter(next)
|
||||
}
|
||||
|
||||
const removeRow = (field) => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current)
|
||||
const next = { ...localFilter }
|
||||
const hadValue = localFilter[field] !== ''
|
||||
delete next[field]
|
||||
setLocalFilter(next)
|
||||
if (hadValue) onFilterChange(next)
|
||||
}
|
||||
|
||||
const changeField = (oldField, newField) => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current)
|
||||
initialEmptyFields.current.delete(newField)
|
||||
const value = localFilter[oldField] || ''
|
||||
const next = { ...localFilter }
|
||||
delete next[oldField]
|
||||
next[newField] = value
|
||||
setLocalFilter(next)
|
||||
if (value !== '') onFilterChange(next)
|
||||
}
|
||||
|
||||
const changeValue = (field, value) => {
|
||||
const next = { ...localFilter, [field]: value }
|
||||
setLocalFilter(next)
|
||||
debouncedFilterChange(next)
|
||||
}
|
||||
const menuItems = {
|
||||
items: [
|
||||
{
|
||||
key: 'clearAll',
|
||||
label: 'Clear all filters',
|
||||
danger: true,
|
||||
icon: <BinIcon />,
|
||||
onClick: () => clearAllFilters()
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setLocalFilter({})
|
||||
onFilterChange({})
|
||||
}
|
||||
|
||||
return (
|
||||
<Card style={{ width: '25%', flexShrink: 0, height: '100%' }}>
|
||||
<Flex vertical gap='middle'>
|
||||
<Flex justify='space-between'>
|
||||
<Dropdown menu={menuItems} trigger={['hover']} placement='bottomLeft'>
|
||||
<Button type='default'>Actions</Button>
|
||||
</Dropdown>
|
||||
<Button
|
||||
type='primary'
|
||||
icon={<PlusIcon />}
|
||||
onClick={addRow}
|
||||
disabled={usedFields.size >= fieldOptions.length}
|
||||
title='Add filter'
|
||||
/>
|
||||
</Flex>
|
||||
<Flex vertical gap={8}>
|
||||
{rows.map((row) => (
|
||||
<Space.Compact key={row.field} style={{ width: '100%' }}>
|
||||
<Select
|
||||
placeholder='Field'
|
||||
value={row.field || undefined}
|
||||
onChange={(v) => changeField(row.field, v)}
|
||||
options={availableOptions(row.field)}
|
||||
style={{ minWidth: 80, flex: 1 }}
|
||||
allowClear={false}
|
||||
/>
|
||||
<Input
|
||||
placeholder='Value'
|
||||
value={row.value}
|
||||
onChange={(e) => changeValue(row.field, e.target.value)}
|
||||
style={{ width: 160 }}
|
||||
/>
|
||||
<Button
|
||||
icon={<CloseOutlined />}
|
||||
onClick={() => removeRow(row.field)}
|
||||
title='Remove filter'
|
||||
/>
|
||||
</Space.Compact>
|
||||
))}
|
||||
{rows.length === 0 && (
|
||||
<MissingPlaceholder message='No filters applied.' />
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
FilterSidebar.propTypes = {
|
||||
type: PropTypes.string.isRequired,
|
||||
filter: PropTypes.object,
|
||||
onFilterChange: PropTypes.func.isRequired,
|
||||
masterFilter: PropTypes.object
|
||||
}
|
||||
|
||||
export default FilterSidebar
|
||||
27
src/components/Dashboard/common/FilterSidebarButton.jsx
Normal file
27
src/components/Dashboard/common/FilterSidebarButton.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import { Button } from 'antd'
|
||||
import FilterCircleFilledIcon from '../../Icons/FilterCircleFilledIcon'
|
||||
import FilterCircleIcon from '../../Icons/FilterCircleIcon'
|
||||
|
||||
const FilterSidebarButton = ({ active, onClick, ...buttonProps }) => (
|
||||
<Button
|
||||
icon={
|
||||
active ? (
|
||||
<FilterCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
|
||||
) : (
|
||||
<FilterCircleIcon />
|
||||
)
|
||||
}
|
||||
onClick={onClick}
|
||||
type={'default'}
|
||||
title={active ? 'Hide filter sidebar' : 'Show filter sidebar'}
|
||||
{...buttonProps}
|
||||
/>
|
||||
)
|
||||
|
||||
FilterSidebarButton.propTypes = {
|
||||
active: PropTypes.bool.isRequired,
|
||||
onClick: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
export default FilterSidebarButton
|
||||
@ -35,6 +35,7 @@ import {
|
||||
getModelByName
|
||||
} from '../../../database/ObjectModels'
|
||||
import ObjectProperty from './ObjectProperty'
|
||||
import FilterSidebar from './FilterSidebar'
|
||||
import XMarkIcon from '../../Icons/XMarkIcon'
|
||||
import CheckIcon from '../../Icons/CheckIcon'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
@ -42,6 +43,7 @@ import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
|
||||
import { AuthContext } from '../context/AuthContext'
|
||||
import { ElectronContext } from '../context/ElectronContext'
|
||||
import ActionsIcon from '../../Icons/ActionsIcon'
|
||||
import FilterIcon from '../../Icons/FilterIcon'
|
||||
|
||||
const logger = loglevel.getLogger('DasboardTable')
|
||||
logger.setLevel(config.logLevel)
|
||||
@ -98,7 +100,8 @@ const ObjectTable = forwardRef(
|
||||
visibleColumns = {},
|
||||
masterFilter = {},
|
||||
size = 'middle',
|
||||
onStateChange
|
||||
onStateChange,
|
||||
showFilterSidebar = false
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
@ -138,8 +141,9 @@ const ObjectTable = forwardRef(
|
||||
}
|
||||
const tableRef = useRef(null)
|
||||
const model = getModelByName(type)
|
||||
const tableFilterRef = useRef({})
|
||||
const activeFilterRef = useRef({})
|
||||
const tableSorterRef = useRef({})
|
||||
const [sidebarFilter, setSidebarFilter] = useState({})
|
||||
const [initialized, setInitialized] = useState(false)
|
||||
|
||||
// Table state
|
||||
@ -228,9 +232,9 @@ const ObjectTable = forwardRef(
|
||||
const fetchData = useCallback(
|
||||
async (pageNum = 1, filter = null, sorter = null) => {
|
||||
if (filter == null) {
|
||||
filter = tableFilterRef.current
|
||||
filter = activeFilterRef.current
|
||||
} else {
|
||||
tableFilterRef.current = filter
|
||||
activeFilterRef.current = filter
|
||||
}
|
||||
if (sorter == null) {
|
||||
sorter = tableSorterRef.current
|
||||
@ -590,8 +594,9 @@ const ObjectTable = forwardRef(
|
||||
|
||||
if (hasChanged) {
|
||||
setPages([])
|
||||
tableFilterRef.current = {}
|
||||
activeFilterRef.current = {}
|
||||
tableSorterRef.current = {}
|
||||
setSidebarFilter({})
|
||||
setInitialized(false)
|
||||
setLoading(true)
|
||||
setLazyLoading(false)
|
||||
@ -636,23 +641,44 @@ const ObjectTable = forwardRef(
|
||||
)
|
||||
}
|
||||
|
||||
const getActiveFilter = useCallback((filterState) => {
|
||||
const active = {}
|
||||
Object.entries(filterState).forEach(([k, v]) => {
|
||||
if (v !== '' && v !== undefined) active[k] = v
|
||||
})
|
||||
return active
|
||||
}, [])
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
const newFilters = {}
|
||||
const next = { ...sidebarFilter }
|
||||
|
||||
Object.entries(filters).forEach(([key, value]) => {
|
||||
if (value && value.length > 0) {
|
||||
newFilters[key] = value[0]
|
||||
next[key] = value[0]
|
||||
} else {
|
||||
delete next[key]
|
||||
}
|
||||
})
|
||||
|
||||
setSidebarFilter(next)
|
||||
setPages([])
|
||||
setLoading(true)
|
||||
loadPage(initialPage, newFilters, {
|
||||
loadPage(initialPage, getActiveFilter(next), {
|
||||
field: sorter.field,
|
||||
order: sorter.order
|
||||
})
|
||||
}
|
||||
|
||||
const handleSidebarFilterChange = useCallback(
|
||||
(newSidebarFilter) => {
|
||||
setSidebarFilter(newSidebarFilter)
|
||||
setPages([])
|
||||
setLoading(true)
|
||||
loadPage(initialPage, getActiveFilter(newSidebarFilter))
|
||||
},
|
||||
[initialPage, loadPage, getActiveFilter]
|
||||
)
|
||||
|
||||
const modelProperties = getModelProperties(type)
|
||||
// Table columns from model properties
|
||||
const columnsWithSkeleton = [
|
||||
@ -722,6 +748,9 @@ const ObjectTable = forwardRef(
|
||||
width: prop.columnWidth || width,
|
||||
fixed: isMobile ? undefined : fixed,
|
||||
key: prop.name,
|
||||
filterIcon: () => {
|
||||
return <FilterIcon />
|
||||
},
|
||||
render: (text, record) => {
|
||||
if (record?.isSkeleton) {
|
||||
return (
|
||||
@ -739,7 +768,6 @@ const ObjectTable = forwardRef(
|
||||
}
|
||||
}
|
||||
|
||||
// Add filter configuration if the property is filterable and not in masterFilter
|
||||
if (isFilterable && !Object.keys(masterFilter).includes(prop.name)) {
|
||||
columnConfig.filterDropdown = ({
|
||||
setSelectedKeys,
|
||||
@ -754,8 +782,9 @@ const ObjectTable = forwardRef(
|
||||
clearFilters,
|
||||
propertyName: prop.label
|
||||
})
|
||||
// Remove local filtering - let the server handle it
|
||||
columnConfig.filtered = false
|
||||
const sidebarVal = sidebarFilter[prop.name]
|
||||
columnConfig.filteredValue =
|
||||
sidebarVal !== undefined && sidebarVal !== '' ? [sidebarVal] : null
|
||||
}
|
||||
|
||||
columnsWithSkeleton.push(columnConfig)
|
||||
@ -925,7 +954,7 @@ const ObjectTable = forwardRef(
|
||||
)
|
||||
|
||||
const tableContent = (
|
||||
<Flex gap={'middle'} vertical>
|
||||
<Flex gap={'middle'} vertical style={{ flex: 1, minWidth: 0 }}>
|
||||
<Table
|
||||
ref={tableRef}
|
||||
dataSource={tableData}
|
||||
@ -951,6 +980,24 @@ const ObjectTable = forwardRef(
|
||||
</Flex>
|
||||
)
|
||||
|
||||
if (showFilterSidebar) {
|
||||
return (
|
||||
<Flex
|
||||
gap='middle'
|
||||
align='flex-start'
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
>
|
||||
{tableContent}
|
||||
<FilterSidebar
|
||||
type={type}
|
||||
filter={sidebarFilter}
|
||||
onFilterChange={handleSidebarFilterChange}
|
||||
masterFilter={masterFilter}
|
||||
/>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
return tableContent
|
||||
}
|
||||
)
|
||||
@ -968,7 +1015,8 @@ ObjectTable.propTypes = {
|
||||
visibleColumns: PropTypes.object,
|
||||
masterFilter: PropTypes.object,
|
||||
size: PropTypes.string,
|
||||
onStateChange: PropTypes.func
|
||||
onStateChange: PropTypes.func,
|
||||
showFilterSidebar: PropTypes.bool
|
||||
}
|
||||
|
||||
export default ObjectTable
|
||||
|
||||
20
src/components/Dashboard/common/ObjectTableViewButton.jsx
Normal file
20
src/components/Dashboard/common/ObjectTableViewButton.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import { Button } from 'antd'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
|
||||
const ObjectTableViewButton = ({ viewMode, setViewMode, ...buttonProps }) => (
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
|
||||
title={viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'}
|
||||
{...buttonProps}
|
||||
/>
|
||||
)
|
||||
|
||||
ObjectTableViewButton.propTypes = {
|
||||
viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
|
||||
setViewMode: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
export default ObjectTableViewButton
|
||||
@ -0,0 +1,21 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
const useFilterSidebarVisibility = (componentName, defaultValue = false) => {
|
||||
const getInitialVisibility = () => {
|
||||
const stored = sessionStorage.getItem(`${componentName}_filterSidebarVisibility`)
|
||||
if (stored !== null) {
|
||||
return stored === 'true'
|
||||
}
|
||||
return defaultValue
|
||||
}
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] = useState(getInitialVisibility)
|
||||
|
||||
useEffect(() => {
|
||||
sessionStorage.setItem(`${componentName}_filterSidebarVisibility`, showFilterSidebar)
|
||||
}, [showFilterSidebar, componentName])
|
||||
|
||||
return [showFilterSidebar, setShowFilterSidebar]
|
||||
}
|
||||
|
||||
export default useFilterSidebarVisibility
|
||||
6
src/components/Icons/FilterCircleFilledIcon.jsx
Normal file
6
src/components/Icons/FilterCircleFilledIcon.jsx
Normal file
@ -0,0 +1,6 @@
|
||||
import Icon from '@ant-design/icons'
|
||||
import CustomIconSvg from '../../../assets/icons/filtercirclefilledicon.svg?react'
|
||||
|
||||
const FilterCircleFilledIcon = (props) => <Icon component={CustomIconSvg} {...props} />
|
||||
|
||||
export default FilterCircleFilledIcon
|
||||
6
src/components/Icons/FilterCircleIcon.jsx
Normal file
6
src/components/Icons/FilterCircleIcon.jsx
Normal file
@ -0,0 +1,6 @@
|
||||
import Icon from '@ant-design/icons'
|
||||
import CustomIconSvg from '../../../assets/icons/filtercircleicon.svg?react'
|
||||
|
||||
const FilterCircleIcon = (props) => <Icon component={CustomIconSvg} {...props} />
|
||||
|
||||
export default FilterCircleIcon
|
||||
6
src/components/Icons/FilterIcon.jsx
Normal file
6
src/components/Icons/FilterIcon.jsx
Normal file
@ -0,0 +1,6 @@
|
||||
import Icon from '@ant-design/icons'
|
||||
import CustomIconSvg from '../../../assets/icons/filtericon.svg?react'
|
||||
|
||||
const FilterIcon = (props) => <Icon component={CustomIconSvg} {...props} />
|
||||
|
||||
export default FilterIcon
|
||||
Loading…
x
Reference in New Issue
Block a user