Add Kanban and Timeline Icons, Enhance Kanban Component Styles
- Introduced new SVG icons for Kanban and Timeline to enhance visual representation in the dashboard. - Expanded App.css with new styles for the Kanban component, improving layout and responsiveness. - Updated various dashboard components to integrate the new ObjectListViewPageContent for better view management and consistency across the application.
This commit is contained in:
parent
9b344b6a3d
commit
ab7919122a
7
assets/icons/kanbanicon.svg
Normal file
7
assets/icons/kanbanicon.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.779032,0,0,0.779032,3.073021,9.025537)">
|
||||
<path d="M22.587,55.452L29.317,55.452L29.317,3.541L22.587,3.541L22.587,55.452ZM44.947,55.452L51.677,55.452L51.677,3.541L44.947,3.541L44.947,55.452ZM10.588,58.962L63.676,58.962C70.606,58.962 74.264,55.326 74.264,48.481L74.264,10.522C74.264,3.667 70.606,0.02 63.676,0.02L10.588,0.02C3.679,0.02 0,3.667 0,10.522L0,48.481C0,55.326 3.679,58.962 10.588,58.962ZM11.167,52.003C8.429,52.003 6.959,50.615 6.959,47.743L6.959,11.251C6.959,8.378 8.429,6.979 11.167,6.979L63.097,6.979C65.813,6.979 67.305,8.378 67.305,11.251L67.305,47.743C67.305,50.615 65.813,52.003 63.097,52.003L11.167,52.003Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
12
assets/icons/timelineicon.svg
Normal file
12
assets/icons/timelineicon.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?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,-0.777065,0.777065,0,9.038886,69.94022)">
|
||||
<path d="M75.315,48.595C75.315,55.44 71.658,59.097 64.728,59.097L21.503,59.097C14.606,59.097 10.906,55.461 10.906,48.595L10.906,36.765L17.865,36.765L17.865,48.26C17.865,50.888 19.229,52.138 21.722,52.138L64.499,52.138C66.981,52.138 68.356,50.888 68.356,48.26L68.356,36.765L75.315,36.765L75.315,48.595ZM75.315,10.657L75.315,22.436L68.356,22.436L68.356,10.982C68.356,8.354 66.981,7.114 64.499,7.114L21.722,7.114C19.229,7.114 17.865,8.354 17.865,10.982L17.865,22.436L10.906,22.436L10.906,10.657C10.906,3.781 14.606,0.155 21.503,0.155L64.728,0.155C71.658,0.155 75.315,3.802 75.315,10.657Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M88.562,55.043C88.562,57.276 86.765,59.094 84.532,59.094C82.3,59.094 80.481,57.276 80.481,55.043C80.481,52.81 82.3,51.013 84.532,51.013C86.765,51.013 88.562,52.81 88.562,55.043Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M88.562,42.32C88.562,44.553 86.765,46.34 84.532,46.34C82.3,46.34 80.481,44.553 80.481,42.32C80.481,40.066 82.3,38.269 84.532,38.269C86.765,38.269 88.562,40.066 88.562,42.32Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M88.562,16.774C88.562,19.007 86.765,20.825 84.532,20.825C82.3,20.825 80.481,19.007 80.481,16.774C80.481,14.541 82.3,12.744 84.532,12.744C86.765,12.744 88.562,14.541 88.562,16.774Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M88.562,4.02C88.562,6.284 86.765,8.071 84.532,8.071C82.3,8.071 80.481,6.284 80.481,4.02C80.481,1.787 82.3,0 84.532,0C86.765,0 88.562,1.787 88.562,4.02Z" style="fill-rule:nonzero;"/>
|
||||
<path d="M84.582,34.107C87.085,34.107 89.11,32.082 89.11,29.579C89.11,27.076 87.085,25.041 84.582,25.041C82.961,25.041 81.507,25.903 80.707,27.224L10.916,27.224C9.558,27.224 8.54,28.242 8.54,29.6C8.54,30.958 9.558,31.998 10.916,31.998L80.75,31.998C81.55,33.276 82.961,34.107 84.582,34.107Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -1384,6 +1384,161 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.objectKanbanContainerWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.objectKanbanContainerSkeletons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.objectKanbanKanbanBody {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.objectKanbanContainer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.objectKanbanWrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.objectKanbanWrap > .ant-spin-nested-loading,
|
||||
.objectKanbanWrap > .ant-spin-nested-loading > .ant-spin-container {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.objectKanbanScroll {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.objectKanbanScroll .simplebar-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.objectKanbanScroll .simplebar-content {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.objectKanbanHeader {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.objectKanbanHeaderTrack {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.objectKanbanHeaderRow {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.objectKanbanHeaderCell {
|
||||
flex: 0 0 360px;
|
||||
min-width: 360px;
|
||||
flex-shrink: 0;
|
||||
padding: 8px 8px;
|
||||
border: 1px solid var(--ant-color-border-secondary);
|
||||
border-bottom: 1px solid var(--color-descriptions-border);
|
||||
border-radius: 12px 12px 0 0;
|
||||
background-color: var(--layout-header-bg);
|
||||
}
|
||||
|
||||
.objectKanban {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
align-items: stretch;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.objectKanbanSkeletonColumns {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.objectKanbanSkeletonTrack {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.objectKanbanSkeletonRow {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.objectKanbanColumn,
|
||||
.objectKanbanColumnSkeleton {
|
||||
flex: 0 0 360px;
|
||||
min-width: 360px;
|
||||
min-height: 0;
|
||||
border-top: none;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
.objectKanbanColumnSkeleton {
|
||||
border-radius: 0 0 12px 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.objectKanbanColumnCards {
|
||||
flex: 1;
|
||||
border-radius: 0 0 12px 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.objectKanbanColumnSkeleton .objectKanbanColumnCards {
|
||||
background-color: var(--layout-header-bg);
|
||||
}
|
||||
|
||||
.objectKanbanColumnCardsInner {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.electron-body .ant-modal-wrap,
|
||||
.electron-body .ant-modal-mask,
|
||||
.electron-body .ant-drawer {
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Invoices = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('invoices')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('invoices')
|
||||
|
||||
@ -35,7 +32,7 @@ const Invoices = () => {
|
||||
objectType='invoice'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const Invoices = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='invoice'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const Invoices = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='invoice'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const Invoices = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
|
||||
const PaymentPolicies = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('paymentPolicy')
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('paymentPolicy')
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -31,7 +28,7 @@ const PaymentPolicies = () => {
|
||||
objectType='paymentPolicy'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -58,8 +55,7 @@ const PaymentPolicies = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='paymentPolicy'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -69,7 +65,6 @@ const PaymentPolicies = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='paymentPolicy'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -83,7 +78,7 @@ const PaymentPolicies = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Payments = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('payments')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('payments')
|
||||
|
||||
@ -35,7 +32,7 @@ const Payments = () => {
|
||||
objectType='payment'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const Payments = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='payment'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const Payments = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='payment'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const Payments = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const TaxRecords = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('taxRecord')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('taxRecord')
|
||||
|
||||
@ -35,7 +32,7 @@ const TaxRecords = () => {
|
||||
objectType='taxRecord'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const TaxRecords = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='taxRecord'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const TaxRecords = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='taxRecord'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const TaxRecords = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -22,8 +21,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const FilamentStocks = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('filamentStocks')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('filamentStocks')
|
||||
|
||||
@ -39,7 +36,7 @@ const FilamentStocks = () => {
|
||||
objectType='filamentStock'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -66,8 +63,7 @@ const FilamentStocks = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='filamentStock'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -76,7 +72,6 @@ const FilamentStocks = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='filamentStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -91,7 +86,7 @@ const FilamentStocks = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const OrderItems = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('orderItems')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('orderItems')
|
||||
|
||||
@ -35,7 +32,7 @@ const OrderItems = () => {
|
||||
objectType='orderItem'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const OrderItems = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='orderItem'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const OrderItems = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='orderItem'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const OrderItems = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -22,8 +21,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const PartStocks = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('partStocks')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('partStocks')
|
||||
|
||||
@ -39,7 +36,7 @@ const PartStocks = () => {
|
||||
objectType='partStock'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -66,8 +63,7 @@ const PartStocks = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='partStock'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -76,7 +72,6 @@ const PartStocks = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='partStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -91,7 +86,7 @@ const PartStocks = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -23,8 +22,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const ProductStocks = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('productStocks')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('productStock')
|
||||
|
||||
@ -40,7 +37,7 @@ const ProductStocks = () => {
|
||||
objectType='productStock'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -67,8 +64,7 @@ const ProductStocks = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='productStock'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -77,7 +73,6 @@ const ProductStocks = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='productStock'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -92,7 +87,7 @@ const ProductStocks = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const PurchaseOrders = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('purchaseOrders')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('purchaseOrders')
|
||||
|
||||
@ -35,7 +32,7 @@ const PurchaseOrders = () => {
|
||||
objectType='purchaseOrder'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const PurchaseOrders = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='purchaseOrder'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const PurchaseOrders = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='purchaseOrder'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const PurchaseOrders = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Shipments = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('shipments')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('shipments')
|
||||
|
||||
@ -35,7 +32,7 @@ const Shipments = () => {
|
||||
objectType='shipment'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const Shipments = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='shipment'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const Shipments = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='shipment'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const Shipments = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -22,8 +21,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const StockAudits = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('stockAudits')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('stockAudits')
|
||||
|
||||
@ -39,7 +36,7 @@ const StockAudits = () => {
|
||||
objectType='stockAudit'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -66,8 +63,7 @@ const StockAudits = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='stockAudit'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -76,7 +72,6 @@ const StockAudits = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='stockAudit'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -91,7 +86,7 @@ const StockAudits = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const StockEvents = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('stockEvents')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('stockEvent')
|
||||
|
||||
@ -35,7 +32,7 @@ const StockEvents = () => {
|
||||
objectType='stockEvent'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const StockEvents = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='stockEvent'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const StockEvents = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='stockEvent'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const StockEvents = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const StockLocations = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('stockLocations')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('stockLocation')
|
||||
|
||||
@ -37,7 +34,7 @@ const StockLocations = () => {
|
||||
objectType='stockLocation'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -64,8 +61,7 @@ const StockLocations = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='stockLocation'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -74,7 +70,6 @@ const StockLocations = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='stockLocation'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -89,7 +84,7 @@ const StockLocations = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const StockTransfers = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('stockTransfers')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('stockTransfer')
|
||||
|
||||
@ -37,7 +34,7 @@ const StockTransfers = () => {
|
||||
objectType='stockTransfer'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -64,8 +61,7 @@ const StockTransfers = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='stockTransfer'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -74,7 +70,6 @@ const StockTransfers = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='stockTransfer'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -89,7 +84,7 @@ const StockTransfers = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
|
||||
const AppPasswords = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('appPassword')
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('appPassword')
|
||||
|
||||
@ -34,7 +31,7 @@ const AppPasswords = () => {
|
||||
objectType='appPassword'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const AppPasswords = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='appPassword'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -70,7 +66,6 @@ const AppPasswords = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='appPassword'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -86,7 +81,7 @@ const AppPasswords = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const CourierServices = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('courierService')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('courierService')
|
||||
|
||||
@ -35,7 +32,7 @@ const CourierServices = () => {
|
||||
objectType='courierService'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const CourierServices = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='courierService'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const CourierServices = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='courierService'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const CourierServices = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Couriers = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('courier')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('courier')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -34,7 +31,7 @@ const Couriers = () => {
|
||||
objectType='courier'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const Couriers = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='courier'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const Couriers = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='courier'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -86,7 +81,7 @@ const Couriers = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const DocumentJobs = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('documentJob')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentJob')
|
||||
|
||||
@ -35,7 +32,7 @@ const DocumentJobs = () => {
|
||||
objectType='documentJob'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const DocumentJobs = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='documentJob'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const DocumentJobs = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentJob'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const DocumentJobs = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const DocumentPrinters = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('documentPrinter')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentPrinter')
|
||||
|
||||
@ -35,7 +32,7 @@ const DocumentPrinters = () => {
|
||||
objectType='documentPrinter'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const DocumentPrinters = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='documentPrinter'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const DocumentPrinters = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentPrinter'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const DocumentPrinters = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
|
||||
const DocumentSizes = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('documentSize')
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentSize')
|
||||
|
||||
@ -34,7 +31,7 @@ const DocumentSizes = () => {
|
||||
objectType='documentSize'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const DocumentSizes = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='documentSize'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const DocumentSizes = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentSize'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -86,7 +81,7 @@ const DocumentSizes = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const DocumentTemplates = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('documentTemplate')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('documentTemplate')
|
||||
|
||||
@ -35,7 +32,7 @@ const DocumentTemplates = () => {
|
||||
objectType='documentTemplate'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const DocumentTemplates = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='documentTemplate'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const DocumentTemplates = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='documentTemplate'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const DocumentTemplates = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const FilamentSkus = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('filamentSkus')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('filamentSku')
|
||||
|
||||
@ -37,7 +34,7 @@ const FilamentSkus = () => {
|
||||
objectType='filamentSku'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -64,8 +61,7 @@ const FilamentSkus = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='filamentSku'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -74,7 +70,6 @@ const FilamentSkus = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='filamentSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -89,7 +84,7 @@ const FilamentSkus = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ObjectActions from '../common/ObjectActions'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
@ -23,7 +22,6 @@ const Filaments = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
// View mode state (cards/list), persisted in sessionStorage via custom hook
|
||||
const [viewMode, setViewMode] = useViewMode('filament')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('filament')
|
||||
@ -40,7 +38,7 @@ const Filaments = () => {
|
||||
objectType='filament'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -67,8 +65,7 @@ const Filaments = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='filament'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -76,7 +73,6 @@ const Filaments = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='filament'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -92,7 +88,7 @@ const Filaments = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Files = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('file')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('file')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -29,8 +26,11 @@ const Files = () => {
|
||||
useSortSidebarVisibility('Files')
|
||||
|
||||
return (
|
||||
<ObjectListViewProvider objectType='file' tableRef={tableRef}>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<ObjectListViewProvider
|
||||
objectType='file'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -57,8 +57,7 @@ const Files = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='file'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -67,7 +66,6 @@ const Files = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='file'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -81,7 +79,7 @@ const Files = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,6 @@ import ListViewEditButtons from '../common/ListViewEditButtons'
|
||||
import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
import ObjectTable from '../common/ObjectTable'
|
||||
import ObjectActions from '../common/ObjectActions'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
@ -23,7 +22,6 @@ const Hosts = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
// View mode state (cards/list), persisted in sessionStorage via custom hook
|
||||
const [viewMode, setViewMode] = useViewMode('host')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('host')
|
||||
|
||||
@ -39,7 +37,7 @@ const Hosts = () => {
|
||||
objectType='host'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -66,8 +64,7 @@ const Hosts = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='host'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -75,7 +72,6 @@ const Hosts = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='host'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -91,7 +87,7 @@ const Hosts = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Materials = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('material')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('material')
|
||||
|
||||
@ -37,7 +34,7 @@ const Materials = () => {
|
||||
objectType='material'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -64,8 +61,7 @@ const Materials = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='material'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const Materials = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='material'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -89,7 +84,7 @@ const Materials = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const NoteTypes = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('noteType')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('noteType')
|
||||
|
||||
@ -35,7 +32,7 @@ const NoteTypes = () => {
|
||||
objectType='noteType'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const NoteTypes = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='noteType'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const NoteTypes = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='noteType'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const NoteTypes = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const PartSkus = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('partSkus')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('partSku')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -36,7 +33,7 @@ const PartSkus = () => {
|
||||
objectType='partSku'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -63,8 +60,7 @@ const PartSkus = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='partSku'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const PartSkus = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='partSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -88,7 +83,7 @@ const PartSkus = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
@ -24,8 +23,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
|
||||
const Parts = (filter) => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('part')
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('part')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -40,7 +37,7 @@ const Parts = (filter) => {
|
||||
objectType='part'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -67,8 +64,7 @@ const Parts = (filter) => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='part'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -78,7 +74,6 @@ const Parts = (filter) => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='part'
|
||||
cards={viewMode === 'cards'}
|
||||
filter={filter}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -93,7 +88,7 @@ const Parts = (filter) => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const PermissionSettingsList = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('permissionSetting')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('permissionSetting')
|
||||
|
||||
@ -35,7 +32,7 @@ const PermissionSettingsList = () => {
|
||||
objectType='permissionSetting'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const PermissionSettingsList = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='permissionSetting'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const PermissionSettingsList = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='permissionSetting'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const PermissionSettingsList = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const ProductCategories = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('productCategory')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('productCategory')
|
||||
|
||||
@ -37,7 +34,7 @@ const ProductCategories = () => {
|
||||
objectType='productCategory'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -64,8 +61,7 @@ const ProductCategories = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='productCategory'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const ProductCategories = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='productCategory'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -89,7 +84,7 @@ const ProductCategories = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const ProductSkus = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('productSkus')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('productSku')
|
||||
|
||||
@ -37,7 +34,7 @@ const ProductSkus = () => {
|
||||
objectType='productSku'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -64,8 +61,7 @@ const ProductSkus = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='productSku'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -74,7 +70,6 @@ const ProductSkus = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='productSku'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -89,7 +84,7 @@ const ProductSkus = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -25,7 +25,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ExportListButton from '../common/ExportListButton'
|
||||
@ -37,8 +36,6 @@ const Products = () => {
|
||||
const navigate = useNavigate()
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('Products')
|
||||
|
||||
const getProductActionItems = (id) => {
|
||||
return {
|
||||
items: [
|
||||
@ -309,7 +306,7 @@ const Products = () => {
|
||||
objectType='product'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -337,8 +334,7 @@ const Products = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='product'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -347,7 +343,6 @@ const Products = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type={'product'}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -361,7 +356,7 @@ const Products = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const StockAuditLevels = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('stockAuditLevel')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('stockAuditLevel')
|
||||
|
||||
@ -34,7 +31,7 @@ const StockAuditLevels = () => {
|
||||
objectType='stockAuditLevel'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const StockAuditLevels = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='stockAuditLevel'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const StockAuditLevels = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='stockAuditLevel'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -86,7 +81,7 @@ const StockAuditLevels = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const TaxRates = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('taxRate')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('taxRate')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -34,7 +31,7 @@ const TaxRates = () => {
|
||||
objectType='taxRate'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const TaxRates = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='taxRate'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const TaxRates = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='taxRate'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -86,7 +81,7 @@ const TaxRates = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const UserGroups = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('userGroup')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('userGroup')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -34,7 +31,7 @@ const UserGroups = () => {
|
||||
objectType='userGroup'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const UserGroups = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='userGroup'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const UserGroups = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='userGroup'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -86,7 +81,7 @@ const UserGroups = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Users = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('user')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('user')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -34,7 +31,7 @@ const Users = () => {
|
||||
objectType='user'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const Users = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='user'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const Users = () => {
|
||||
ref={tableRef}
|
||||
type={'user'}
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -86,7 +81,7 @@ const Users = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Vendors = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('vendor')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('vendor')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -29,8 +26,11 @@ const Vendors = () => {
|
||||
useSortSidebarVisibility('Vendors')
|
||||
|
||||
return (
|
||||
<ObjectListViewProvider objectType='vendor' tableRef={tableRef}>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<ObjectListViewProvider
|
||||
objectType='vendor'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -57,8 +57,7 @@ const Vendors = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='vendor'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -67,7 +66,6 @@ const Vendors = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='vendor'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -81,7 +79,7 @@ const Vendors = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -13,12 +13,9 @@ import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
|
||||
const FilamentProfiles = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('FilamentProfiles')
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('filamentProfile')
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -33,7 +30,7 @@ const FilamentProfiles = () => {
|
||||
objectType='filamentProfile'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -59,8 +56,7 @@ const FilamentProfiles = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='filamentProfile'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -68,7 +64,6 @@ const FilamentProfiles = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='filamentProfile'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -84,7 +79,7 @@ const FilamentProfiles = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
|
||||
@ -21,8 +20,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const GCodeFiles = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('gcodeFile')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('gcodeFile')
|
||||
|
||||
@ -38,7 +35,7 @@ const GCodeFiles = () => {
|
||||
objectType='gcodeFile'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -65,8 +62,7 @@ const GCodeFiles = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='gcodeFile'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -75,7 +71,6 @@ const GCodeFiles = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='gcodeFile'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -90,7 +85,7 @@ const GCodeFiles = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@ import { Flex, Space } from 'antd'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
|
||||
import ObjectTable from '../common/ObjectTable.jsx'
|
||||
import ObjectActions from '../common/ObjectActions'
|
||||
import useViewMode from '../hooks/useViewMode.jsx'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Jobs = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('job')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('job')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -36,7 +33,7 @@ const Jobs = () => {
|
||||
objectType='job'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -63,8 +60,7 @@ const Jobs = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='job'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const Jobs = () => {
|
||||
ref={tableRef}
|
||||
type={'job'}
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -88,7 +83,7 @@ const Jobs = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -13,11 +13,8 @@ import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
const PrinterProfiles = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('PrinterProfiles')
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('printerProfile')
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -32,7 +29,7 @@ const PrinterProfiles = () => {
|
||||
objectType='printerProfile'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -58,8 +55,7 @@ const PrinterProfiles = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='printerProfile'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -67,7 +63,6 @@ const PrinterProfiles = () => {
|
||||
<ObjectTable
|
||||
ref={tableRef}
|
||||
type='printerProfile'
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
@ -83,7 +78,7 @@ const PrinterProfiles = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
@ -22,7 +21,6 @@ const Printers = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
// View mode state (cards/list), persisted in sessionStorage via custom hook
|
||||
const [viewMode, setViewMode] = useViewMode('Printers')
|
||||
|
||||
// Column visibility state, persisted in sessionStorage via custom hook
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('printer')
|
||||
@ -40,7 +38,7 @@ const Printers = () => {
|
||||
objectType='printer'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space>
|
||||
<ObjectActions
|
||||
@ -67,8 +65,7 @@ const Printers = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='printer'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -78,7 +75,6 @@ const Printers = () => {
|
||||
type='printer'
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
cards={viewMode === 'cards'}
|
||||
visibleColumns={columnVisibility}
|
||||
expandHeight={true}
|
||||
saveFilterInSession={true}
|
||||
@ -92,7 +88,7 @@ const Printers = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@ import { Flex, Space } from 'antd'
|
||||
import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
|
||||
import ObjectTable from '../common/ObjectTable.jsx'
|
||||
import ObjectActions from '../common/ObjectActions'
|
||||
import useViewMode from '../hooks/useViewMode.jsx'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const SubJobs = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('subJob')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('subJob')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -36,7 +33,7 @@ const SubJobs = () => {
|
||||
objectType='subJob'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -63,8 +60,7 @@ const SubJobs = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='subJob'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const SubJobs = () => {
|
||||
ref={tableRef}
|
||||
type={'subJob'}
|
||||
visibleColumns={columnVisibility}
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -88,7 +83,7 @@ const SubJobs = () => {
|
||||
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Clients = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('client')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('client')
|
||||
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -34,7 +31,7 @@ const Clients = () => {
|
||||
objectType='client'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -61,8 +58,7 @@ const Clients = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='client'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -72,7 +68,6 @@ const Clients = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='client'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -86,7 +81,7 @@ const Clients = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
|
||||
const FulfillmentPolicies = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('fulfillmentPolicy')
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('fulfillmentPolicy')
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
@ -31,7 +28,7 @@ const FulfillmentPolicies = () => {
|
||||
objectType='fulfillmentPolicy'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -58,8 +55,7 @@ const FulfillmentPolicies = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='fulfillmentPolicy'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -69,7 +65,6 @@ const FulfillmentPolicies = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='fulfillmentPolicy'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -83,7 +78,7 @@ const FulfillmentPolicies = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const ListingVarients = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('listingVarients')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('listingVarients')
|
||||
|
||||
@ -35,7 +32,7 @@ const ListingVarients = () => {
|
||||
objectType='listingVarient'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const ListingVarients = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='listingVarient'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const ListingVarients = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='listingVarient'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const ListingVarients = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Listings = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('listings')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('listings')
|
||||
|
||||
@ -35,7 +32,7 @@ const Listings = () => {
|
||||
objectType='listing'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const Listings = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='listing'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const Listings = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='listing'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const Listings = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const Marketplaces = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('marketplaces')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('marketplaces')
|
||||
|
||||
@ -35,7 +32,7 @@ const Marketplaces = () => {
|
||||
objectType='marketplace'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const Marketplaces = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='marketplace'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const Marketplaces = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='marketplace'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const Marketplaces = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
|
||||
const ReturnPolicies = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('returnPolicy')
|
||||
const [columnVisibility, setColumnVisibility] = useColumnVisibility('returnPolicy')
|
||||
const [showFilterSidebar, setShowFilterSidebar] =
|
||||
useFilterSidebarVisibility('ReturnPolicies')
|
||||
@ -30,7 +27,7 @@ const ReturnPolicies = () => {
|
||||
objectType='returnPolicy'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -57,8 +54,7 @@ const ReturnPolicies = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='returnPolicy'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -68,7 +64,6 @@ const ReturnPolicies = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='returnPolicy'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -82,7 +77,7 @@ const ReturnPolicies = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
|
||||
import ObjectTableViewButton from '../common/ObjectTableViewButton'
|
||||
import FilterSidebarButton from '../common/FilterSidebarButton'
|
||||
import SortSidebarButton from '../common/SortSidebarButton'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
|
||||
import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
|
||||
import ColumnViewButton from '../common/ColumnViewButton'
|
||||
@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
|
||||
const SalesOrders = () => {
|
||||
const tableRef = useRef()
|
||||
|
||||
const [viewMode, setViewMode] = useViewMode('salesOrders')
|
||||
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
useColumnVisibility('salesOrders')
|
||||
|
||||
@ -35,7 +32,7 @@ const SalesOrders = () => {
|
||||
objectType='salesOrder'
|
||||
tableRef={tableRef}
|
||||
>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex vertical={'true'} gap='large' className='h-100'>
|
||||
<Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
@ -62,8 +59,7 @@ const SalesOrders = () => {
|
||||
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
|
||||
/>
|
||||
<ObjectTableViewButton
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
objectType='salesOrder'
|
||||
/>
|
||||
<ListViewEditButtons showStartingDivider={true} />
|
||||
</Space>
|
||||
@ -73,7 +69,6 @@ const SalesOrders = () => {
|
||||
ref={tableRef}
|
||||
visibleColumns={columnVisibility}
|
||||
type='salesOrder'
|
||||
cards={viewMode === 'cards'}
|
||||
showFilterSidebar={showFilterSidebar}
|
||||
showSortSidebar={showSortSidebar}
|
||||
expandHeight={true}
|
||||
@ -87,7 +82,7 @@ const SalesOrders = () => {
|
||||
useSortInUrl={true}
|
||||
/>
|
||||
</Flex>
|
||||
</ObjectListViewProvider>
|
||||
</ObjectListViewProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
283
src/components/Dashboard/common/ObjectKanban.jsx
Normal file
283
src/components/Dashboard/common/ObjectKanban.jsx
Normal file
@ -0,0 +1,283 @@
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useContext,
|
||||
useImperativeHandle,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react'
|
||||
import { Empty, Flex } from 'antd'
|
||||
import PropTypes from 'prop-types'
|
||||
import { ApiServerContext } from '../context/ApiServerContext'
|
||||
import ObjectKanbanColumn from './ObjectKanbanColumn'
|
||||
import ObjectKanbanHeader from './ObjectKanbanHeader'
|
||||
import ScrollBox from './ScrollBox'
|
||||
import { getCategoryValueKey } from './viewModeUtils'
|
||||
|
||||
const ObjectKanban = forwardRef(
|
||||
(
|
||||
{
|
||||
type,
|
||||
categoryProperty,
|
||||
baseFilter = {},
|
||||
masterFilter = {},
|
||||
sorter = {},
|
||||
pageSize = 25,
|
||||
model,
|
||||
modelProperties,
|
||||
visibleColumns = {},
|
||||
isEditing = false,
|
||||
rowActions = [],
|
||||
renderActions
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const { getModelPropertyValues } = useContext(ApiServerContext)
|
||||
const columnRefs = useRef({})
|
||||
const headerTrackRef = useRef(null)
|
||||
const skeletonTrackRef = useRef(null)
|
||||
const [scrollElement, setScrollElement] = useState(null)
|
||||
const [categoryValues, setCategoryValues] = useState([])
|
||||
const [hasLoaded, setHasLoaded] = useState(false)
|
||||
|
||||
const baseFilterRef = useRef(baseFilter)
|
||||
const masterFilterRef = useRef(masterFilter)
|
||||
const sorterRef = useRef(sorter)
|
||||
const getModelPropertyValuesRef = useRef(getModelPropertyValues)
|
||||
const lastCategoryQueryKeyRef = useRef(null)
|
||||
|
||||
baseFilterRef.current = baseFilter
|
||||
masterFilterRef.current = masterFilter
|
||||
sorterRef.current = sorter
|
||||
getModelPropertyValuesRef.current = getModelPropertyValues
|
||||
|
||||
const setScrollContainerRef = useCallback((node) => {
|
||||
setScrollElement(node)
|
||||
}, [])
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const mainScroll = scrollElement
|
||||
const headerTrack = headerTrackRef.current
|
||||
const skeletonTrack = skeletonTrackRef.current
|
||||
if (!mainScroll || !headerTrack) return undefined
|
||||
|
||||
const handleMainScroll = () => {
|
||||
const offset = `translate3d(-${mainScroll.scrollLeft}px, 0, 0)`
|
||||
headerTrack.style.transform = offset
|
||||
if (skeletonTrack) {
|
||||
skeletonTrack.style.transform = offset
|
||||
}
|
||||
}
|
||||
|
||||
handleMainScroll()
|
||||
mainScroll.addEventListener('scroll', handleMainScroll, { passive: true })
|
||||
|
||||
return () => {
|
||||
mainScroll.removeEventListener('scroll', handleMainScroll)
|
||||
}
|
||||
}, [scrollElement, categoryValues])
|
||||
|
||||
const categoryPropertyDef = useMemo(
|
||||
() =>
|
||||
model?.properties?.find(
|
||||
(property) => property.name === categoryProperty
|
||||
),
|
||||
[categoryProperty, model]
|
||||
)
|
||||
|
||||
const buildCategoryQueryKey = useCallback(
|
||||
(filter, activeSorter) =>
|
||||
JSON.stringify({
|
||||
type,
|
||||
categoryProperty,
|
||||
filter,
|
||||
masterFilter: masterFilterRef.current,
|
||||
sorter: activeSorter
|
||||
}),
|
||||
[categoryProperty, type]
|
||||
)
|
||||
|
||||
const reloadColumns = useCallback(async () => {
|
||||
await Promise.all(
|
||||
Object.values(columnRefs.current)
|
||||
.filter(Boolean)
|
||||
.map((columnRef) => columnRef.reload?.())
|
||||
)
|
||||
}, [])
|
||||
|
||||
const load = useCallback(
|
||||
async (filter = null, sorterArg = null) => {
|
||||
if (!categoryProperty) {
|
||||
lastCategoryQueryKeyRef.current = null
|
||||
setCategoryValues([])
|
||||
setHasLoaded(true)
|
||||
return
|
||||
}
|
||||
|
||||
const activeFilter = filter ?? baseFilterRef.current
|
||||
const activeSorter = sorterArg ?? sorterRef.current
|
||||
const queryKey = buildCategoryQueryKey(activeFilter, activeSorter)
|
||||
|
||||
if (lastCategoryQueryKeyRef.current === queryKey) {
|
||||
await reloadColumns()
|
||||
setHasLoaded(true)
|
||||
return
|
||||
}
|
||||
|
||||
setHasLoaded(false)
|
||||
|
||||
try {
|
||||
const values = await getModelPropertyValuesRef.current(
|
||||
type,
|
||||
categoryProperty,
|
||||
{
|
||||
filter: activeFilter,
|
||||
masterFilter: masterFilterRef.current
|
||||
}
|
||||
)
|
||||
const nextValues = Array.isArray(values) ? values : []
|
||||
setCategoryValues(nextValues)
|
||||
lastCategoryQueryKeyRef.current = queryKey
|
||||
} catch (error) {
|
||||
console.error('Error fetching kanban category values:', error)
|
||||
setCategoryValues([])
|
||||
lastCategoryQueryKeyRef.current = null
|
||||
throw error
|
||||
} finally {
|
||||
setHasLoaded(true)
|
||||
}
|
||||
},
|
||||
[buildCategoryQueryKey, categoryProperty, reloadColumns, type]
|
||||
)
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
lastCategoryQueryKeyRef.current = null
|
||||
await load(baseFilterRef.current, sorterRef.current)
|
||||
}, [load])
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
load,
|
||||
reload
|
||||
}),
|
||||
[load, reload]
|
||||
)
|
||||
|
||||
if (!categoryProperty) {
|
||||
return (
|
||||
<Flex align='center' justify='center' style={{ height: '100%' }}>
|
||||
<Empty description='Select a category property for kanban view' />
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
if (hasLoaded && categoryValues.length === 0) {
|
||||
return (
|
||||
<Flex align='center' justify='center' style={{ height: '100%' }}>
|
||||
<Empty description='No category values found' />
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
if (!hasLoaded || categoryValues.length === 0) {
|
||||
return (
|
||||
<div className='objectKanbanContainer' style={{ height: '100%' }} />
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='objectKanbanContainerWrapper'>
|
||||
<div className='objectKanbanContainerSkeletons'>
|
||||
<ObjectKanbanHeader
|
||||
categoryValues={categoryValues}
|
||||
categoryProperty={categoryProperty}
|
||||
categoryPropertyDef={categoryPropertyDef}
|
||||
trackRef={headerTrackRef}
|
||||
/>
|
||||
<div className='objectKanbanKanbanBody'>
|
||||
<div className='objectKanbanContainer'>
|
||||
<ScrollBox
|
||||
className='objectKanbanScroll'
|
||||
scrollableNodeProps={{ ref: setScrollContainerRef }}
|
||||
>
|
||||
<Flex gap='middle' className='objectKanban'>
|
||||
{categoryValues.map((categoryValue) => {
|
||||
const columnKey = getCategoryValueKey(categoryValue)
|
||||
return (
|
||||
<ObjectKanbanColumn
|
||||
key={columnKey}
|
||||
ref={(node) => {
|
||||
if (node) {
|
||||
columnRefs.current[columnKey] = node
|
||||
} else {
|
||||
delete columnRefs.current[columnKey]
|
||||
}
|
||||
}}
|
||||
scrollElement={scrollElement}
|
||||
type={type}
|
||||
categoryProperty={categoryProperty}
|
||||
categoryValue={categoryValue}
|
||||
baseFilter={baseFilter}
|
||||
masterFilter={masterFilter}
|
||||
sorter={sorter}
|
||||
pageSize={pageSize}
|
||||
model={model}
|
||||
modelProperties={modelProperties}
|
||||
visibleColumns={visibleColumns}
|
||||
isEditing={isEditing}
|
||||
rowActions={rowActions}
|
||||
renderActions={renderActions}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</ScrollBox>
|
||||
</div>
|
||||
<div className='objectKanbanSkeletonColumns'>
|
||||
<div
|
||||
className='objectKanbanSkeletonTrack'
|
||||
ref={skeletonTrackRef}
|
||||
>
|
||||
<Flex gap='middle' className='objectKanbanSkeletonRow'>
|
||||
{categoryValues.map((categoryValue) => {
|
||||
const columnKey = getCategoryValueKey(categoryValue)
|
||||
return (
|
||||
<div
|
||||
key={columnKey}
|
||||
className='objectKanbanColumnSkeleton'
|
||||
>
|
||||
<div className='objectKanbanColumnCards' />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
ObjectKanban.displayName = 'ObjectKanban'
|
||||
|
||||
ObjectKanban.propTypes = {
|
||||
type: PropTypes.string.isRequired,
|
||||
categoryProperty: PropTypes.string,
|
||||
baseFilter: PropTypes.object,
|
||||
masterFilter: PropTypes.object,
|
||||
sorter: PropTypes.object,
|
||||
pageSize: PropTypes.number,
|
||||
model: PropTypes.object.isRequired,
|
||||
modelProperties: PropTypes.array.isRequired,
|
||||
visibleColumns: PropTypes.object,
|
||||
isEditing: PropTypes.bool,
|
||||
rowActions: PropTypes.array,
|
||||
renderActions: PropTypes.func
|
||||
}
|
||||
|
||||
export default ObjectKanban
|
||||
552
src/components/Dashboard/common/ObjectKanbanColumn.jsx
Normal file
552
src/components/Dashboard/common/ObjectKanbanColumn.jsx
Normal file
@ -0,0 +1,552 @@
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react'
|
||||
import { Flex, Spin } from 'antd'
|
||||
import { LoadingOutlined } from '@ant-design/icons'
|
||||
import PropTypes from 'prop-types'
|
||||
import { ApiServerContext } from '../context/ApiServerContext'
|
||||
import ObjectCard from './ObjectCard'
|
||||
import { toCategoryFilterValue } from './viewModeUtils'
|
||||
|
||||
const SCROLL_THRESHOLD = 50
|
||||
|
||||
const ObjectKanbanColumn = forwardRef(
|
||||
(
|
||||
{
|
||||
type,
|
||||
categoryProperty,
|
||||
categoryValue,
|
||||
baseFilter = {},
|
||||
masterFilter = {},
|
||||
sorter = {},
|
||||
pageSize = 25,
|
||||
model,
|
||||
modelProperties,
|
||||
visibleColumns = {},
|
||||
isEditing = false,
|
||||
rowActions = [],
|
||||
renderActions,
|
||||
scrollElement = null
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const { fetchObjects } = useContext(ApiServerContext)
|
||||
const containerRef = useRef(null)
|
||||
const pagesRef = useRef([])
|
||||
const loadingPagesRef = useRef(new Set())
|
||||
const dataLoadGenerationRef = useRef(0)
|
||||
const pendingScrollAnchorRef = useRef(null)
|
||||
const lastColumnQueryKeyRef = useRef(null)
|
||||
|
||||
const baseFilterRef = useRef(baseFilter)
|
||||
const masterFilterRef = useRef(masterFilter)
|
||||
const sorterRef = useRef(sorter)
|
||||
const fetchObjectsRef = useRef(fetchObjects)
|
||||
|
||||
baseFilterRef.current = baseFilter
|
||||
masterFilterRef.current = masterFilter
|
||||
sorterRef.current = sorter
|
||||
fetchObjectsRef.current = fetchObjects
|
||||
|
||||
const [pages, setPages] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const columnFilter = useMemo(
|
||||
() => ({
|
||||
...baseFilter,
|
||||
[categoryProperty]: toCategoryFilterValue(categoryValue)
|
||||
}),
|
||||
[baseFilter, categoryProperty, categoryValue]
|
||||
)
|
||||
|
||||
const columnQueryKey = useMemo(
|
||||
() =>
|
||||
JSON.stringify({
|
||||
type,
|
||||
categoryProperty,
|
||||
categoryValue: toCategoryFilterValue(categoryValue),
|
||||
filter: columnFilter,
|
||||
sorter
|
||||
}),
|
||||
[columnFilter, categoryProperty, categoryValue, sorter, type]
|
||||
)
|
||||
|
||||
const tableData = useMemo(() => {
|
||||
const items = pages.flatMap((page) => page.items)
|
||||
const seen = new Set()
|
||||
return items.filter((item) => {
|
||||
const id = item?._id
|
||||
if (id == null) return true
|
||||
if (seen.has(id)) return false
|
||||
seen.add(id)
|
||||
return true
|
||||
})
|
||||
}, [pages])
|
||||
|
||||
const createSkeletonData = useCallback(
|
||||
(pageNum) =>
|
||||
Array(pageSize)
|
||||
.fill(null)
|
||||
.map((_, index) => ({
|
||||
_id: `skeleton-${categoryProperty}-${pageNum}-${index}`,
|
||||
isSkeleton: true
|
||||
})),
|
||||
[categoryProperty, pageSize]
|
||||
)
|
||||
|
||||
const createSkeletonPage = useCallback(
|
||||
(pageNum) => ({
|
||||
pageNum,
|
||||
items: createSkeletonData(pageNum),
|
||||
isSkeletonPage: true
|
||||
}),
|
||||
[createSkeletonData]
|
||||
)
|
||||
|
||||
const createPageWindow = useCallback(
|
||||
(loadedPages, direction) => {
|
||||
const dedupedByPageNum = new Map()
|
||||
loadedPages.forEach((page) => {
|
||||
dedupedByPageNum.set(page.pageNum, page)
|
||||
})
|
||||
const sortedPages = [...dedupedByPageNum.values()].sort(
|
||||
(a, b) => a.pageNum - b.pageNum
|
||||
)
|
||||
const visiblePages =
|
||||
direction === 'previous'
|
||||
? sortedPages.slice(0, 2)
|
||||
: sortedPages.slice(-2)
|
||||
const firstPage = visiblePages[0]
|
||||
const lastPage = visiblePages[visiblePages.length - 1]
|
||||
const nextPages = []
|
||||
|
||||
if (firstPage?.pageNum > 1) {
|
||||
nextPages.push(createSkeletonPage(firstPage.pageNum - 1))
|
||||
}
|
||||
nextPages.push(...visiblePages)
|
||||
if (lastPage?.hasMore) {
|
||||
nextPages.push(createSkeletonPage(lastPage.pageNum + 1))
|
||||
}
|
||||
|
||||
return nextPages
|
||||
},
|
||||
[createSkeletonPage]
|
||||
)
|
||||
|
||||
const mergeLoadedPage = useCallback((currentPages, loadedPage) => {
|
||||
const withoutSkeletons = currentPages.filter(
|
||||
(page) => !page.isSkeletonPage
|
||||
)
|
||||
const withoutDuplicate = withoutSkeletons.filter(
|
||||
(page) => page.pageNum !== loadedPage.pageNum
|
||||
)
|
||||
return [...withoutDuplicate, loadedPage].sort(
|
||||
(a, b) => a.pageNum - b.pageNum
|
||||
)
|
||||
}, [])
|
||||
|
||||
const setTablePages = useCallback((nextPages) => {
|
||||
pagesRef.current = nextPages
|
||||
setPages(nextPages)
|
||||
}, [])
|
||||
|
||||
const isStaleDataLoad = useCallback(
|
||||
(generation) => generation !== dataLoadGenerationRef.current,
|
||||
[]
|
||||
)
|
||||
|
||||
const fetchPage = useCallback(
|
||||
async (pageNum) => {
|
||||
const filter = {
|
||||
...masterFilterRef.current,
|
||||
...baseFilterRef.current,
|
||||
[categoryProperty]: toCategoryFilterValue(categoryValue)
|
||||
}
|
||||
return fetchObjectsRef.current(type, {
|
||||
page: pageNum,
|
||||
limit: pageSize,
|
||||
filter,
|
||||
sorter: sorterRef.current
|
||||
})
|
||||
},
|
||||
[categoryProperty, categoryValue, pageSize, type]
|
||||
)
|
||||
|
||||
const fetchData = useCallback(
|
||||
async (pageNum) => {
|
||||
const generation = dataLoadGenerationRef.current
|
||||
try {
|
||||
const result = await fetchPage(pageNum)
|
||||
if (isStaleDataLoad(generation)) return []
|
||||
const loadedPage = {
|
||||
pageNum,
|
||||
items: result.data || [],
|
||||
hasMore: result.hasMore
|
||||
}
|
||||
setPages((prev) =>
|
||||
prev.map((page) => (page.pageNum === pageNum ? loadedPage : page))
|
||||
)
|
||||
return result.data || []
|
||||
} catch (error) {
|
||||
console.error(`Error loading kanban page ${pageNum}:`, error)
|
||||
return []
|
||||
}
|
||||
},
|
||||
[fetchPage, isStaleDataLoad]
|
||||
)
|
||||
|
||||
const findRenderedCard = useCallback((scrollTarget, id) => {
|
||||
if (!scrollTarget || id == null) return null
|
||||
return scrollTarget.querySelector(`[data-kanban-card-id="${String(id)}"]`)
|
||||
}, [])
|
||||
|
||||
const captureScrollAnchor = useCallback(
|
||||
(scrollTarget, placeholderPage, direction, currentPages) => {
|
||||
if (!scrollTarget) return null
|
||||
|
||||
const targetTop = scrollTarget.getBoundingClientRect().top
|
||||
const closestCard = (items) =>
|
||||
items
|
||||
.map((item, index) => {
|
||||
const element = findRenderedCard(scrollTarget, item._id)
|
||||
return element
|
||||
? {
|
||||
index,
|
||||
id: item._id,
|
||||
top: element.getBoundingClientRect().top
|
||||
}
|
||||
: null
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
Math.abs(a.top - targetTop) - Math.abs(b.top - targetTop)
|
||||
)[0]
|
||||
|
||||
const placeholderAnchor = closestCard(placeholderPage.items)
|
||||
const loadedPages = currentPages.filter((page) => !page.isSkeletonPage)
|
||||
const retainedPage =
|
||||
direction === 'previous'
|
||||
? loadedPages[0]
|
||||
: loadedPages[loadedPages.length - 1]
|
||||
const fallbackAnchor = retainedPage
|
||||
? closestCard(retainedPage.items)
|
||||
: null
|
||||
|
||||
return { placeholderAnchor, fallbackAnchor }
|
||||
},
|
||||
[findRenderedCard]
|
||||
)
|
||||
|
||||
const restoreScrollAnchor = useCallback(
|
||||
(scrollTarget, anchor, loadedPage) => {
|
||||
if (!scrollTarget || !anchor) return
|
||||
|
||||
const loadedItem = loadedPage.items[anchor.placeholderAnchor?.index]
|
||||
const anchorId = loadedItem?._id ?? anchor.fallbackAnchor?.id
|
||||
const previousTop = loadedItem
|
||||
? anchor.placeholderAnchor?.top
|
||||
: anchor.fallbackAnchor?.top
|
||||
if (anchorId == null || previousTop == null) return
|
||||
|
||||
const element = findRenderedCard(scrollTarget, anchorId)
|
||||
if (!element) return
|
||||
const renderedTop = element.getBoundingClientRect().top
|
||||
scrollTarget.scrollTop += renderedTop - previousTop
|
||||
},
|
||||
[findRenderedCard]
|
||||
)
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const pendingAnchor = pendingScrollAnchorRef.current
|
||||
if (!pendingAnchor) return
|
||||
pendingScrollAnchorRef.current = null
|
||||
restoreScrollAnchor(
|
||||
pendingAnchor.scrollTarget,
|
||||
pendingAnchor.anchor,
|
||||
pendingAnchor.loadedPage
|
||||
)
|
||||
}, [pages, restoreScrollAnchor])
|
||||
|
||||
const loadBoundaryPage = useCallback(
|
||||
async (pageNum, direction, scrollTarget) => {
|
||||
if (loadingPagesRef.current.size > 0) return
|
||||
|
||||
const currentPages = pagesRef.current
|
||||
const placeholderPage = currentPages.find(
|
||||
(page) => page.pageNum === pageNum && page.isSkeletonPage
|
||||
)
|
||||
if (!placeholderPage) return
|
||||
|
||||
const scrollAnchor = captureScrollAnchor(
|
||||
scrollTarget,
|
||||
placeholderPage,
|
||||
direction,
|
||||
currentPages
|
||||
)
|
||||
|
||||
const generation = dataLoadGenerationRef.current
|
||||
loadingPagesRef.current.add(pageNum)
|
||||
|
||||
try {
|
||||
const result = await fetchPage(pageNum)
|
||||
if (isStaleDataLoad(generation)) return
|
||||
const loadedPage = {
|
||||
pageNum,
|
||||
items: result.data || [],
|
||||
hasMore: result.hasMore
|
||||
}
|
||||
|
||||
pendingScrollAnchorRef.current = {
|
||||
scrollTarget,
|
||||
anchor: scrollAnchor,
|
||||
loadedPage
|
||||
}
|
||||
setPages((prev) => {
|
||||
if (
|
||||
!prev.some(
|
||||
(page) => page.pageNum === pageNum && page.isSkeletonPage
|
||||
)
|
||||
) {
|
||||
return prev
|
||||
}
|
||||
|
||||
const loadedPages = mergeLoadedPage(prev, loadedPage)
|
||||
return createPageWindow(loadedPages, direction)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(`Error loading kanban page ${pageNum}:`, error)
|
||||
} finally {
|
||||
loadingPagesRef.current.delete(pageNum)
|
||||
}
|
||||
},
|
||||
[
|
||||
captureScrollAnchor,
|
||||
createPageWindow,
|
||||
fetchPage,
|
||||
isStaleDataLoad,
|
||||
mergeLoadedPage
|
||||
]
|
||||
)
|
||||
|
||||
const loadNextPage = useCallback(
|
||||
(scrollTarget) => {
|
||||
const nextPage = pagesRef.current[pagesRef.current.length - 1]
|
||||
if (nextPage?.isSkeletonPage) {
|
||||
loadBoundaryPage(nextPage.pageNum, 'next', scrollTarget)
|
||||
}
|
||||
},
|
||||
[loadBoundaryPage]
|
||||
)
|
||||
|
||||
const loadPreviousPage = useCallback(
|
||||
(scrollTarget) => {
|
||||
const previousPage = pagesRef.current[0]
|
||||
if (previousPage?.isSkeletonPage) {
|
||||
loadBoundaryPage(previousPage.pageNum, 'previous', scrollTarget)
|
||||
}
|
||||
},
|
||||
[loadBoundaryPage]
|
||||
)
|
||||
|
||||
const loadInitialPage = useCallback(async () => {
|
||||
dataLoadGenerationRef.current += 1
|
||||
loadingPagesRef.current.clear()
|
||||
pendingScrollAnchorRef.current = null
|
||||
const generation = dataLoadGenerationRef.current
|
||||
|
||||
pagesRef.current = []
|
||||
setPages([])
|
||||
setLoading(true)
|
||||
|
||||
const skeletonPage = createSkeletonPage(1)
|
||||
setTablePages([skeletonPage])
|
||||
|
||||
try {
|
||||
const firstResult = await fetchPage(1)
|
||||
if (isStaleDataLoad(generation)) return
|
||||
const loadedPages = [
|
||||
{
|
||||
pageNum: 1,
|
||||
items: firstResult.data || [],
|
||||
hasMore: firstResult.hasMore
|
||||
}
|
||||
]
|
||||
if (!isStaleDataLoad(generation)) {
|
||||
setTablePages(createPageWindow(loadedPages, 'next'))
|
||||
}
|
||||
} catch {
|
||||
if (!isStaleDataLoad(generation)) {
|
||||
setTablePages([])
|
||||
}
|
||||
} finally {
|
||||
if (!isStaleDataLoad(generation)) {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
}, [
|
||||
createPageWindow,
|
||||
createSkeletonPage,
|
||||
fetchPage,
|
||||
isStaleDataLoad,
|
||||
setTablePages
|
||||
])
|
||||
|
||||
const reloadLoadedPages = useCallback(async () => {
|
||||
const loadedPages = pagesRef.current.filter(
|
||||
(page) => !page.isSkeletonPage
|
||||
)
|
||||
for (let i = 0; i < loadedPages.length; i++) {
|
||||
await fetchData(loadedPages[i].pageNum)
|
||||
}
|
||||
}, [fetchData])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
reload: reloadLoadedPages
|
||||
}))
|
||||
|
||||
useEffect(() => {
|
||||
if (lastColumnQueryKeyRef.current === columnQueryKey) return
|
||||
|
||||
let cancelled = false
|
||||
|
||||
const runLoad = async () => {
|
||||
await loadInitialPage()
|
||||
if (!cancelled) {
|
||||
lastColumnQueryKeyRef.current = columnQueryKey
|
||||
}
|
||||
}
|
||||
|
||||
runLoad()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [columnQueryKey, loadInitialPage])
|
||||
|
||||
const skeletonBoundaryIds = useMemo(() => {
|
||||
const firstPage = pages[0]
|
||||
const lastPage = pages[pages.length - 1]
|
||||
return {
|
||||
previous:
|
||||
firstPage?.isSkeletonPage && firstPage.items.length > 0
|
||||
? firstPage.items[firstPage.items.length - 1]._id
|
||||
: null,
|
||||
next:
|
||||
lastPage?.isSkeletonPage && lastPage.items[0]
|
||||
? lastPage.items[0]._id
|
||||
: null
|
||||
}
|
||||
}, [pages])
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const container = containerRef.current
|
||||
if (!container || !scrollElement) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const entry of entries) {
|
||||
if (!entry.isIntersecting) continue
|
||||
const boundary = entry.target.dataset.skeletonBoundary
|
||||
if (boundary === 'next') {
|
||||
loadNextPage(scrollElement)
|
||||
} else if (boundary === 'previous') {
|
||||
loadPreviousPage(scrollElement)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
root: scrollElement,
|
||||
rootMargin: `${SCROLL_THRESHOLD}px`,
|
||||
threshold: 0
|
||||
}
|
||||
)
|
||||
|
||||
container
|
||||
.querySelectorAll('[data-skeleton-boundary]')
|
||||
.forEach((el) => observer.observe(el))
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [
|
||||
scrollElement,
|
||||
skeletonBoundaryIds,
|
||||
loadNextPage,
|
||||
loadPreviousPage,
|
||||
tableData
|
||||
])
|
||||
|
||||
return (
|
||||
<Flex vertical className='objectKanbanColumn'>
|
||||
<div className='objectKanbanColumnCards' ref={containerRef}>
|
||||
<Spin indicator={<LoadingOutlined />} spinning={loading}>
|
||||
<Flex
|
||||
vertical
|
||||
gap='middle'
|
||||
className='objectKanbanColumnCardsInner'
|
||||
>
|
||||
{tableData.map((record) => {
|
||||
if (record?._id == undefined) return null
|
||||
|
||||
const skeletonBoundary =
|
||||
record._id === skeletonBoundaryIds.next
|
||||
? 'next'
|
||||
: record._id === skeletonBoundaryIds.previous
|
||||
? 'previous'
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<div
|
||||
key={record._id}
|
||||
data-kanban-card-id={record._id}
|
||||
data-skeleton-boundary={skeletonBoundary}
|
||||
>
|
||||
<ObjectCard
|
||||
isSkeleton={record?.isSkeleton || false}
|
||||
model={model}
|
||||
modelProperties={modelProperties}
|
||||
visibleColumns={visibleColumns}
|
||||
record={record}
|
||||
isEditing={isEditing}
|
||||
rowActions={rowActions}
|
||||
renderActions={renderActions}
|
||||
cardStyle='bordered'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Spin>
|
||||
</div>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
ObjectKanbanColumn.displayName = 'ObjectKanbanColumn'
|
||||
|
||||
ObjectKanbanColumn.propTypes = {
|
||||
type: PropTypes.string.isRequired,
|
||||
categoryProperty: PropTypes.string.isRequired,
|
||||
categoryValue: PropTypes.any,
|
||||
baseFilter: PropTypes.object,
|
||||
masterFilter: PropTypes.object,
|
||||
sorter: PropTypes.object,
|
||||
pageSize: PropTypes.number,
|
||||
model: PropTypes.object.isRequired,
|
||||
modelProperties: PropTypes.array.isRequired,
|
||||
visibleColumns: PropTypes.object,
|
||||
isEditing: PropTypes.bool,
|
||||
rowActions: PropTypes.array,
|
||||
renderActions: PropTypes.func,
|
||||
scrollElement: PropTypes.object
|
||||
}
|
||||
|
||||
export default ObjectKanbanColumn
|
||||
46
src/components/Dashboard/common/ObjectKanbanHeader.jsx
Normal file
46
src/components/Dashboard/common/ObjectKanbanHeader.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { Flex } from 'antd'
|
||||
import PropTypes from 'prop-types'
|
||||
import ObjectProperty from './ObjectProperty'
|
||||
import { getCategoryValueKey } from './viewModeUtils'
|
||||
|
||||
const ObjectKanbanHeader = ({
|
||||
categoryValues,
|
||||
categoryProperty,
|
||||
categoryPropertyDef,
|
||||
trackRef
|
||||
}) => {
|
||||
return (
|
||||
<div className='objectKanbanHeader'>
|
||||
<div className='objectKanbanHeaderTrack' ref={trackRef}>
|
||||
<Flex gap='middle' className='objectKanbanHeaderRow'>
|
||||
{categoryValues.map((categoryValue) => {
|
||||
const columnKey = getCategoryValueKey(categoryValue)
|
||||
return (
|
||||
<div key={columnKey} className='objectKanbanHeaderCell'>
|
||||
{categoryPropertyDef ? (
|
||||
<ObjectProperty
|
||||
{...categoryPropertyDef}
|
||||
value={categoryValue}
|
||||
objectData={{ [categoryProperty]: categoryValue }}
|
||||
name={categoryProperty}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
ObjectKanbanHeader.displayName = 'ObjectKanbanHeader'
|
||||
|
||||
ObjectKanbanHeader.propTypes = {
|
||||
categoryValues: PropTypes.array.isRequired,
|
||||
categoryProperty: PropTypes.string.isRequired,
|
||||
categoryPropertyDef: PropTypes.object,
|
||||
trackRef: PropTypes.object
|
||||
}
|
||||
|
||||
export default ObjectKanbanHeader
|
||||
@ -9,7 +9,6 @@ import {
|
||||
useMemo,
|
||||
createElement
|
||||
} from 'react'
|
||||
import { flushSync } from 'react-dom'
|
||||
import {
|
||||
Table,
|
||||
Skeleton,
|
||||
@ -36,6 +35,7 @@ import {
|
||||
} from '../../../database/ObjectModels'
|
||||
import ObjectProperty from './ObjectProperty'
|
||||
import ObjectCard from './ObjectCard'
|
||||
import ObjectKanban from './ObjectKanban'
|
||||
import FilterSidebar from './FilterSidebar'
|
||||
import SortSidebar from './SortSidebar'
|
||||
import CheckIcon from '../../Icons/CheckIcon'
|
||||
@ -59,6 +59,7 @@ import { hasActionPermission } from '../../../database/permissions'
|
||||
import Tooltip from './Tooltip'
|
||||
import { ObjectTableFilterContext } from './ObjectTableFilterContext'
|
||||
import ObjectListViewContext from '../context/ObjectListViewContext'
|
||||
import { isCardsView, isKanbanView, normalizeViewMode } from './viewModeUtils'
|
||||
|
||||
const logger = loglevel.getLogger('DasboardTable')
|
||||
logger.setLevel(config.logLevel)
|
||||
@ -271,6 +272,7 @@ const ObjectTable = forwardRef(
|
||||
scrollHeight = 'calc(var(--unit-100vh) - 258px)',
|
||||
onDataChange,
|
||||
initialPage = 1,
|
||||
viewMode: viewModeProp,
|
||||
cards = false,
|
||||
visibleColumns = {},
|
||||
masterFilter = {},
|
||||
@ -292,10 +294,19 @@ const ObjectTable = forwardRef(
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const objectListView = useContext(ObjectListViewContext)
|
||||
const viewMode = normalizeViewMode(
|
||||
viewModeProp ??
|
||||
objectListView?.viewMode ??
|
||||
(cards ? { type: 'cards' } : { type: 'list' })
|
||||
)
|
||||
const isCards = isCardsView(viewMode)
|
||||
const isKanban = isKanbanView(viewMode)
|
||||
const kanbanRef = useRef(null)
|
||||
const wasKanbanRef = useRef(false)
|
||||
const { token, userProfile } = useContext(AuthContext)
|
||||
const { isElectron } = useContext(ElectronContext)
|
||||
const { callAction } = useActions()
|
||||
const objectListView = useContext(ObjectListViewContext)
|
||||
const listViewId = objectListView?.listViewId ?? null
|
||||
const listViewFilter = objectListView?.listViewFilter ?? null
|
||||
const listViewSort = objectListView?.listViewSort ?? null
|
||||
@ -349,7 +360,7 @@ const ObjectTable = forwardRef(
|
||||
if (isMobile) {
|
||||
adjustedScrollHeight = 'calc(var(--unit-100vh) - 298px)'
|
||||
}
|
||||
if (cards) {
|
||||
if (isCards || isKanban) {
|
||||
adjustedScrollHeight = 'calc(var(--unit-100vh) - 210px)'
|
||||
}
|
||||
if (isElectron) {
|
||||
@ -358,7 +369,7 @@ const ObjectTable = forwardRef(
|
||||
if (isMobile && isElectron) {
|
||||
adjustedScrollHeight = 'calc(var(--unit-100vh) - 282px)'
|
||||
}
|
||||
if (cards && isElectron) {
|
||||
if ((isCards || isKanban) && isElectron) {
|
||||
adjustedScrollHeight = 'calc(var(--unit-100vh) - 258px)'
|
||||
}
|
||||
const tableRef = useRef(null)
|
||||
@ -384,15 +395,18 @@ const ObjectTable = forwardRef(
|
||||
|
||||
const lastAppliedViewKeyRef = useRef(null)
|
||||
|
||||
const buildEffectiveFilter = useCallback((userFilter, viewFilter = listViewFilterRef.current) => {
|
||||
const active = getActiveFilterValues(userFilter)
|
||||
const viewId = listViewIdRef.current
|
||||
if (!viewId) return active
|
||||
return {
|
||||
...getActiveFilterValues(viewFilter || {}),
|
||||
...active
|
||||
}
|
||||
}, [])
|
||||
const buildEffectiveFilter = useCallback(
|
||||
(userFilter, viewFilter = listViewFilterRef.current) => {
|
||||
const active = getActiveFilterValues(userFilter)
|
||||
const viewId = listViewIdRef.current
|
||||
if (!viewId) return active
|
||||
return {
|
||||
...getActiveFilterValues(viewFilter || {}),
|
||||
...active
|
||||
}
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
// Table state
|
||||
const [pages, setPages] = useState([])
|
||||
@ -443,7 +457,10 @@ const ObjectTable = forwardRef(
|
||||
)
|
||||
const prevValuesRef = useRef({ type, masterFilter })
|
||||
|
||||
const getMasterFilter = useCallback(() => masterFilter || {}, [masterFilter])
|
||||
const getMasterFilter = useCallback(
|
||||
() => masterFilter || {},
|
||||
[masterFilter]
|
||||
)
|
||||
|
||||
const resolveSorter = useCallback((userSorter) => {
|
||||
if (userSorter?.field && userSorter?.order) {
|
||||
@ -517,9 +534,7 @@ const ObjectTable = forwardRef(
|
||||
|
||||
const clearTablePages = useCallback(() => {
|
||||
pagesRef.current = []
|
||||
flushSync(() => {
|
||||
setPages([])
|
||||
})
|
||||
setPages([])
|
||||
}, [])
|
||||
|
||||
const setTablePages = useCallback((nextPages) => {
|
||||
@ -889,6 +904,10 @@ const ObjectTable = forwardRef(
|
||||
|
||||
const reloadLoadedPages = useCallback(
|
||||
async ({ silent = false } = {}) => {
|
||||
if (isKanban) {
|
||||
await kanbanRef.current?.reload?.()
|
||||
return
|
||||
}
|
||||
if (!silent) {
|
||||
setLazyLoading(true)
|
||||
}
|
||||
@ -905,7 +924,7 @@ const ObjectTable = forwardRef(
|
||||
}
|
||||
}
|
||||
},
|
||||
[fetchData]
|
||||
[fetchData, isKanban]
|
||||
)
|
||||
|
||||
const reload = useCallback(() => reloadLoadedPages(), [reloadLoadedPages])
|
||||
@ -1076,9 +1095,12 @@ const ObjectTable = forwardRef(
|
||||
useEffect(() => {
|
||||
if (connected !== true || !type) return
|
||||
|
||||
const unsubscribe = subscribeToAllObjectUpdates(type, (id, updateData) => {
|
||||
updateEventHandlerRef.current(id, updateData)
|
||||
})
|
||||
const unsubscribe = subscribeToAllObjectUpdates(
|
||||
type,
|
||||
(id, updateData) => {
|
||||
updateEventHandlerRef.current(id, updateData)
|
||||
}
|
||||
)
|
||||
subscribeToAllObjectUpdatesRef.current = unsubscribe
|
||||
return () => {
|
||||
if (unsubscribe) unsubscribe()
|
||||
@ -1119,15 +1141,38 @@ const ObjectTable = forwardRef(
|
||||
|
||||
const loadPage = useCallback(
|
||||
async (pageNum, filter = null, sorter = null) => {
|
||||
if (isKanban) {
|
||||
setLoading(true)
|
||||
try {
|
||||
const activeFilter =
|
||||
filter != null ? filter : activeFilterRef.current
|
||||
const resolvedSorter =
|
||||
sorter != null
|
||||
? resolveSorter(sorter)
|
||||
: resolveSorter(tableSorterRef.current)
|
||||
|
||||
if (!kanbanRef.current?.load) {
|
||||
await new Promise((resolve) => requestAnimationFrame(resolve))
|
||||
}
|
||||
|
||||
await kanbanRef.current?.load?.(
|
||||
activeFilter,
|
||||
resolvedSorter?.field ? resolvedSorter : {}
|
||||
)
|
||||
} catch (error) {
|
||||
logger.error('Error loading kanban view:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
return
|
||||
}
|
||||
const generation = beginDataReload()
|
||||
clearTablePages()
|
||||
if (isStaleDataLoad(generation)) return
|
||||
|
||||
const skeletonPage = createSkeletonPage(pageNum)
|
||||
flushSync(() => {
|
||||
setTablePages([skeletonPage])
|
||||
setLoading(true)
|
||||
})
|
||||
setTablePages([skeletonPage])
|
||||
setLoading(true)
|
||||
if (isStaleDataLoad(generation)) return
|
||||
|
||||
try {
|
||||
@ -1165,7 +1210,9 @@ const ObjectTable = forwardRef(
|
||||
fetchPage,
|
||||
isStaleDataLoad,
|
||||
setTablePages,
|
||||
suppressTableChange
|
||||
suppressTableChange,
|
||||
isKanban,
|
||||
resolveSorter
|
||||
]
|
||||
)
|
||||
|
||||
@ -1232,11 +1279,7 @@ const ObjectTable = forwardRef(
|
||||
setTableSorter(viewSort)
|
||||
tableSorterRef.current = viewSort
|
||||
activeFilterRef.current = viewFilter
|
||||
loadPage(
|
||||
initialPage,
|
||||
viewFilter,
|
||||
viewSort.field ? viewSort : null
|
||||
)
|
||||
loadPage(initialPage, viewFilter, viewSort.field ? viewSort : null)
|
||||
}, [
|
||||
activeObjectView,
|
||||
initialPage,
|
||||
@ -1261,11 +1304,11 @@ const ObjectTable = forwardRef(
|
||||
return
|
||||
}
|
||||
|
||||
listViewIdRef.current = null
|
||||
listViewFilterRef.current = {}
|
||||
lastAppliedViewKeyRef.current = null
|
||||
filter = getAllTabPersistedFilter()
|
||||
sorter = getAllTabPersistedSorter()
|
||||
listViewIdRef.current = null
|
||||
listViewFilterRef.current = {}
|
||||
lastAppliedViewKeyRef.current = null
|
||||
filter = getAllTabPersistedFilter()
|
||||
sorter = getAllTabPersistedSorter()
|
||||
|
||||
const resolvedSorter = resolveSorter(sorter)
|
||||
const nextSorter = sorter?.field ? sorter : {}
|
||||
@ -1287,9 +1330,7 @@ const ObjectTable = forwardRef(
|
||||
// View tab: apply the view definition. Sidebar starts as the view
|
||||
// filter so the UI matches; All-tab user settings must not leak in.
|
||||
const viewId =
|
||||
options.viewId !== undefined
|
||||
? options.viewId
|
||||
: listViewIdRef.current
|
||||
options.viewId !== undefined ? options.viewId : listViewIdRef.current
|
||||
const viewFilter =
|
||||
options.viewFilter !== undefined
|
||||
? options.viewFilter || {}
|
||||
@ -1299,12 +1340,11 @@ const ObjectTable = forwardRef(
|
||||
listViewFilterRef.current = viewFilter
|
||||
|
||||
filter = viewFilter
|
||||
sorter =
|
||||
options.viewSort?.field
|
||||
? options.viewSort
|
||||
: sorterState?.field
|
||||
? sorterState
|
||||
: {}
|
||||
sorter = options.viewSort?.field
|
||||
? options.viewSort
|
||||
: sorterState?.field
|
||||
? sorterState
|
||||
: {}
|
||||
|
||||
const resolvedSorter = resolveSorter(sorter)
|
||||
const nextSorter = sorter?.field ? sorter : {}
|
||||
@ -1349,16 +1389,55 @@ const ObjectTable = forwardRef(
|
||||
}))
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
connected == true &&
|
||||
token != null &&
|
||||
!pages.includes(initialPage) &&
|
||||
!initialized
|
||||
) {
|
||||
loadInitialPage()
|
||||
setInitialized(true)
|
||||
if (connected !== true || token == null || initialized) {
|
||||
return
|
||||
}
|
||||
}, [token, loadInitialPage, initialPage, pages, initialized, connected])
|
||||
|
||||
let cancelled = false
|
||||
|
||||
const run = async () => {
|
||||
await loadInitialPage()
|
||||
if (!cancelled) {
|
||||
setInitialized(true)
|
||||
}
|
||||
}
|
||||
|
||||
run()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [token, loadInitialPage, initialized, connected])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isKanban || connected !== true || token == null) {
|
||||
wasKanbanRef.current = isKanban
|
||||
return
|
||||
}
|
||||
|
||||
const categoryProperty = viewMode?.settings?.categoryProperty
|
||||
if (!categoryProperty) {
|
||||
wasKanbanRef.current = isKanban
|
||||
return
|
||||
}
|
||||
|
||||
if (!wasKanbanRef.current) {
|
||||
loadPage(
|
||||
initialPage,
|
||||
activeFilterRef.current,
|
||||
tableSorterRef.current?.field ? tableSorterRef.current : null
|
||||
)
|
||||
}
|
||||
|
||||
wasKanbanRef.current = isKanban
|
||||
}, [
|
||||
isKanban,
|
||||
connected,
|
||||
token,
|
||||
loadPage,
|
||||
initialPage,
|
||||
viewMode?.settings?.categoryProperty
|
||||
])
|
||||
|
||||
// Watch for changes in type and masterFilter, reset component state when they change
|
||||
useEffect(() => {
|
||||
@ -1457,15 +1536,14 @@ const ObjectTable = forwardRef(
|
||||
const effective = buildEffectiveFilter(newSidebarFilter)
|
||||
activeFilterRef.current = effective
|
||||
if (activeObjectViewRef.current) {
|
||||
onObjectViewFilterSortChangeRef.current?.(newSidebarFilter, tableSorter)
|
||||
onObjectViewFilterSortChangeRef.current?.(
|
||||
newSidebarFilter,
|
||||
tableSorter
|
||||
)
|
||||
} else if (!listViewIdRef.current) {
|
||||
persistFilter(newSidebarFilter)
|
||||
}
|
||||
loadPage(
|
||||
initialPage,
|
||||
effective,
|
||||
resolveSorter(tableSorter)
|
||||
)
|
||||
loadPage(initialPage, effective, resolveSorter(tableSorter))
|
||||
},
|
||||
[
|
||||
buildEffectiveFilter,
|
||||
@ -1511,7 +1589,7 @@ const ObjectTable = forwardRef(
|
||||
// Table columns from model properties
|
||||
const columnsWithSkeleton = [
|
||||
{
|
||||
title: lazyLoading ? <LoadingOutlined /> : cards ? model.icon : null,
|
||||
title: lazyLoading ? <LoadingOutlined /> : isCards ? model.icon : null,
|
||||
key: 'icon',
|
||||
width: 45,
|
||||
fixed: 'left',
|
||||
@ -1526,7 +1604,7 @@ const ObjectTable = forwardRef(
|
||||
}, [pages])
|
||||
|
||||
useEffect(() => {
|
||||
if (!expandHeight || cards) return
|
||||
if (!expandHeight || isCards || isKanban) return
|
||||
|
||||
const findAntTableBody = (element) => {
|
||||
if (!element) return null
|
||||
@ -1547,7 +1625,14 @@ const ObjectTable = forwardRef(
|
||||
return () => {
|
||||
tableBody.style.minHeight = ''
|
||||
}
|
||||
}, [expandHeight, adjustedScrollHeight, cards, loading, tableData])
|
||||
}, [
|
||||
expandHeight,
|
||||
adjustedScrollHeight,
|
||||
isCards,
|
||||
isKanban,
|
||||
loading,
|
||||
tableData
|
||||
])
|
||||
|
||||
// Add columns in the order specified by model.columns
|
||||
model.columns.forEach((colName) => {
|
||||
@ -1720,9 +1805,9 @@ const ObjectTable = forwardRef(
|
||||
)
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!cards) return
|
||||
if (!isCards) return
|
||||
measureCardColSpan()
|
||||
}, [cards, showFilterSidebar, showSortSidebar, measureCardColSpan])
|
||||
}, [isCards, showFilterSidebar, showSortSidebar, measureCardColSpan])
|
||||
|
||||
useEffect(() => {
|
||||
return () => cardsResizeObserverRef.current?.disconnect()
|
||||
@ -1730,7 +1815,7 @@ const ObjectTable = forwardRef(
|
||||
|
||||
// Card view: load when the leading skeleton card in a boundary page enters view
|
||||
useLayoutEffect(() => {
|
||||
if (!cards) return
|
||||
if (!isCards) return
|
||||
const container = cardsContainerNodeRef.current
|
||||
if (!container) return
|
||||
const scrollEl = container.querySelector('.simplebar-content-wrapper')
|
||||
@ -1760,7 +1845,7 @@ const ObjectTable = forwardRef(
|
||||
.forEach((el) => observer.observe(el))
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [cards, skeletonBoundaryIds, loadNextPage, loadPreviousPage])
|
||||
}, [isCards, skeletonBoundaryIds, loadNextPage, loadPreviousPage])
|
||||
|
||||
const renderCards = () => {
|
||||
return (
|
||||
@ -1847,7 +1932,31 @@ const ObjectTable = forwardRef(
|
||||
onResizeEnd={measureCardColSpan}
|
||||
>
|
||||
<Splitter.Panel>
|
||||
{cards ? (
|
||||
{isKanban ? (
|
||||
<div className='objectKanbanWrap'>
|
||||
<Spin
|
||||
indicator={<LoadingOutlined />}
|
||||
spinning={loading}
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<ObjectKanban
|
||||
ref={kanbanRef}
|
||||
type={type}
|
||||
categoryProperty={viewMode.settings?.categoryProperty}
|
||||
baseFilter={effectiveFilter}
|
||||
masterFilter={masterFilter}
|
||||
sorter={effectiveSorter}
|
||||
pageSize={pageSize}
|
||||
model={model}
|
||||
modelProperties={modelProperties}
|
||||
visibleColumns={visibleColumns}
|
||||
isEditing={isEditing}
|
||||
rowActions={rowActions}
|
||||
renderActions={renderActions}
|
||||
/>
|
||||
</Spin>
|
||||
</div>
|
||||
) : isCards ? (
|
||||
<div
|
||||
className='objectTableCardsContainer'
|
||||
ref={objectTableCardsContainerRef}
|
||||
@ -1932,6 +2041,7 @@ ObjectTable.propTypes = {
|
||||
scrollHeight: PropTypes.string,
|
||||
onDataChange: PropTypes.func,
|
||||
initialPage: PropTypes.number,
|
||||
viewMode: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
cards: PropTypes.bool,
|
||||
cardRenderer: PropTypes.func,
|
||||
visibleColumns: PropTypes.object,
|
||||
|
||||
@ -1,24 +1,143 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import { Button, Divider, Flex } from 'antd'
|
||||
import { useContext, useMemo, useState } from 'react'
|
||||
import ObjectListViewContext from '../context/ObjectListViewContext'
|
||||
import { Button, Divider, Flex, Modal, Popover, Radio, Select } from 'antd'
|
||||
import GridIcon from '../../Icons/GridIcon'
|
||||
import ListIcon from '../../Icons/ListIcon'
|
||||
import KanbanIcon from '../../Icons/KanbanIcon'
|
||||
import SettingsIcon from '../../Icons/SettingsIcon'
|
||||
import { getModelByName } from '../../../database/ObjectModels'
|
||||
import { getViewModeType, normalizeViewMode } from './viewModeUtils'
|
||||
|
||||
const VIEW_MODE_OPTIONS = [
|
||||
{ type: 'list', label: 'List', icon: <ListIcon /> },
|
||||
{ type: 'cards', label: 'Cards', icon: <GridIcon /> },
|
||||
{ type: 'kanban', label: 'Kanban', icon: <KanbanIcon /> }
|
||||
]
|
||||
|
||||
const ObjectTableViewButton = ({
|
||||
viewMode,
|
||||
setViewMode,
|
||||
objectType,
|
||||
viewMode: viewModeProp,
|
||||
setViewMode: setViewModeProp,
|
||||
showEndingDivider = false,
|
||||
...buttonProps
|
||||
}) => {
|
||||
const content = (
|
||||
<Button
|
||||
icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
|
||||
onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
|
||||
title={
|
||||
viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'
|
||||
}
|
||||
{...buttonProps}
|
||||
/>
|
||||
const objectListView = useContext(ObjectListViewContext)
|
||||
const viewMode = viewModeProp ?? objectListView?.viewMode
|
||||
const setViewMode = setViewModeProp ?? objectListView?.setViewMode
|
||||
const [settingsOpen, setSettingsOpen] = useState(false)
|
||||
const normalizedViewMode = normalizeViewMode(viewMode)
|
||||
const model = getModelByName(objectType)
|
||||
|
||||
const stateProperties = useMemo(
|
||||
() =>
|
||||
model?.properties?.filter((property) => property.type === 'state') || [],
|
||||
[model]
|
||||
)
|
||||
|
||||
const hasKanbanOption = stateProperties.length > 0
|
||||
const defaultCategoryProperty = stateProperties[0]?.name
|
||||
|
||||
const handleTypeChange = (nextType) => {
|
||||
if (nextType === 'kanban') {
|
||||
setViewMode({
|
||||
type: 'kanban',
|
||||
settings: {
|
||||
categoryProperty:
|
||||
normalizedViewMode.type === 'kanban'
|
||||
? normalizedViewMode.settings?.categoryProperty ||
|
||||
defaultCategoryProperty
|
||||
: defaultCategoryProperty
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setViewMode({ type: nextType })
|
||||
}
|
||||
|
||||
const handleCategoryPropertyChange = (categoryProperty) => {
|
||||
setViewMode({
|
||||
type: 'kanban',
|
||||
settings: { categoryProperty }
|
||||
})
|
||||
}
|
||||
|
||||
const activeIcon =
|
||||
normalizedViewMode.type === 'cards' ? (
|
||||
<GridIcon />
|
||||
) : normalizedViewMode.type === 'kanban' ? (
|
||||
<KanbanIcon />
|
||||
) : (
|
||||
<ListIcon />
|
||||
)
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<Popover
|
||||
content={
|
||||
<Flex vertical>
|
||||
<Radio.Group
|
||||
value={getViewModeType(normalizedViewMode)}
|
||||
onChange={(e) => handleTypeChange(e.target.value)}
|
||||
>
|
||||
<Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
|
||||
{VIEW_MODE_OPTIONS.filter(
|
||||
(option) => option.type !== 'kanban' || hasKanbanOption
|
||||
).map((option) => (
|
||||
<Radio key={option.type} value={option.type}>
|
||||
<Flex gap='small' align='center'>
|
||||
{option.icon}
|
||||
{option.label}
|
||||
{option.type === 'kanban' && (
|
||||
<Button
|
||||
type='text'
|
||||
size='small'
|
||||
icon={<SettingsIcon />}
|
||||
disabled={normalizedViewMode.type !== 'kanban'}
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
setSettingsOpen(true)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Radio>
|
||||
))}
|
||||
</Flex>
|
||||
</Radio.Group>
|
||||
</Flex>
|
||||
}
|
||||
placement='bottomLeft'
|
||||
arrow={false}
|
||||
>
|
||||
<Button icon={activeIcon} title='View mode' {...buttonProps} />
|
||||
</Popover>
|
||||
<Modal
|
||||
title='Kanban settings'
|
||||
open={settingsOpen}
|
||||
onCancel={() => setSettingsOpen(false)}
|
||||
onOk={() => setSettingsOpen(false)}
|
||||
destroyOnClose
|
||||
>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
placeholder='Select category property'
|
||||
value={
|
||||
normalizedViewMode.settings?.categoryProperty ||
|
||||
defaultCategoryProperty
|
||||
}
|
||||
onChange={handleCategoryPropertyChange}
|
||||
options={stateProperties.map((property) => ({
|
||||
value: property.name,
|
||||
label: property.label || property.name
|
||||
}))}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
|
||||
if (showEndingDivider) {
|
||||
return (
|
||||
<Flex gap='small' align='center'>
|
||||
@ -31,8 +150,9 @@ const ObjectTableViewButton = ({
|
||||
}
|
||||
|
||||
ObjectTableViewButton.propTypes = {
|
||||
viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
|
||||
setViewMode: PropTypes.func.isRequired,
|
||||
objectType: PropTypes.string.isRequired,
|
||||
viewMode: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
setViewMode: PropTypes.func,
|
||||
showEndingDivider: PropTypes.bool
|
||||
}
|
||||
|
||||
|
||||
31
src/components/Dashboard/common/viewModeUtils.js
Normal file
31
src/components/Dashboard/common/viewModeUtils.js
Normal file
@ -0,0 +1,31 @@
|
||||
export const DEFAULT_VIEW_MODE = { type: 'list' }
|
||||
|
||||
export const normalizeViewMode = (value) => {
|
||||
if (!value) return DEFAULT_VIEW_MODE
|
||||
if (typeof value === 'string') {
|
||||
return {
|
||||
type: value === 'cards' ? 'cards' : value === 'kanban' ? 'kanban' : 'list'
|
||||
}
|
||||
}
|
||||
if (value?.type) return value
|
||||
return DEFAULT_VIEW_MODE
|
||||
}
|
||||
|
||||
export const isCardsView = (vm) => normalizeViewMode(vm).type === 'cards'
|
||||
export const isKanbanView = (vm) => normalizeViewMode(vm).type === 'kanban'
|
||||
export const getViewModeType = (vm) => normalizeViewMode(vm).type
|
||||
|
||||
export const toCategoryFilterValue = (value) => {
|
||||
if (value && typeof value === 'object') {
|
||||
return value.type ?? value._id ?? JSON.stringify(value)
|
||||
}
|
||||
return String(value)
|
||||
}
|
||||
|
||||
export const getCategoryValueKey = (value) => {
|
||||
if (value && typeof value === 'object' && value.type != null) {
|
||||
return String(value.type)
|
||||
}
|
||||
if (value != null) return String(value)
|
||||
return 'null'
|
||||
}
|
||||
@ -12,6 +12,11 @@ import PropTypes from 'prop-types'
|
||||
import { ApiServerContext } from './ApiServerContext'
|
||||
import { AuthContext } from './AuthContext'
|
||||
import { useTableState } from './TableStateContext'
|
||||
import useViewMode from '../hooks/useViewMode'
|
||||
import {
|
||||
DEFAULT_VIEW_MODE,
|
||||
normalizeViewMode
|
||||
} from '../common/viewModeUtils'
|
||||
|
||||
const ObjectListViewContext = createContext()
|
||||
|
||||
@ -103,7 +108,8 @@ const cloneViews = (views) =>
|
||||
views.map((view) => ({
|
||||
...view,
|
||||
filter: view.filter ? { ...view.filter } : {},
|
||||
sort: view.sort ? { ...view.sort } : {}
|
||||
sort: view.sort ? { ...view.sort } : {},
|
||||
viewMode: view.viewMode ? { ...view.viewMode } : view.viewMode
|
||||
}))
|
||||
|
||||
const getViewTabSignature = (view) =>
|
||||
@ -112,6 +118,9 @@ const getViewTabSignature = (view) =>
|
||||
const viewStateEqual = (left, right) =>
|
||||
JSON.stringify(left || {}) === JSON.stringify(right || {})
|
||||
|
||||
const viewModeEqual = (left, right) =>
|
||||
JSON.stringify(left ?? null) === JSON.stringify(right ?? null)
|
||||
|
||||
export const ObjectListViewProvider = ({
|
||||
children,
|
||||
objectType,
|
||||
@ -142,6 +151,8 @@ export const ObjectListViewProvider = ({
|
||||
const [viewsFetched, setViewsFetched] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [activeTabKey, setActiveTabKey] = useState(ALL_TAB_KEY)
|
||||
const activeTabKeyRef = useRef(activeTabKey)
|
||||
activeTabKeyRef.current = activeTabKey
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [viewSyncReady, setViewSyncReady] = useState(false)
|
||||
|
||||
@ -172,6 +183,7 @@ export const ObjectListViewProvider = ({
|
||||
|
||||
const authReady = Boolean(token && authInitialized)
|
||||
const displayedViews = isEditing ? draftViews : views
|
||||
const [userViewMode, setUserViewMode] = useViewMode(objectType)
|
||||
|
||||
const activeView = useMemo(() => {
|
||||
if (activeTabKey === ALL_TAB_KEY) return null
|
||||
@ -459,7 +471,8 @@ export const ObjectListViewProvider = ({
|
||||
color: draft.color,
|
||||
private: draft.private !== false,
|
||||
filter: draft.filter || {},
|
||||
sort: draft.sort || {}
|
||||
sort: draft.sort || {},
|
||||
viewMode: draft.viewMode ?? null
|
||||
})
|
||||
if (String(activeTabKey) === String(draft._id) && created?._id) {
|
||||
newActiveId = created._id
|
||||
@ -480,6 +493,9 @@ export const ObjectListViewProvider = ({
|
||||
if (!viewStateEqual(draft.sort, original.sort)) {
|
||||
updates.sort = draft.sort || {}
|
||||
}
|
||||
if (!viewModeEqual(draft.viewMode, original.viewMode)) {
|
||||
updates.viewMode = draft.viewMode ?? null
|
||||
}
|
||||
|
||||
if (Object.keys(updates).length > 0) {
|
||||
await apiRef.current.updateObjectView(draft._id, updates)
|
||||
@ -847,10 +863,73 @@ export const ObjectListViewProvider = ({
|
||||
const listViewSort = activeView?.sort?.field
|
||||
? activeView.sort
|
||||
: EMPTY_SORT
|
||||
const listViewViewMode = activeView?.viewMode ?? null
|
||||
// Only expose the editable view while editing — ObjectTable uses this to
|
||||
// route filter/sort changes into the draft instead of URL/session persistence.
|
||||
const activeObjectView = isEditing ? activeView : null
|
||||
|
||||
const handleViewModeChange = useCallback(
|
||||
async (viewMode) => {
|
||||
const view = activeViewRef.current
|
||||
if (!view || activeTabKeyRef.current === ALL_TAB_KEY) return
|
||||
|
||||
if (isEditingRef.current) {
|
||||
const updateInList = (list) =>
|
||||
list.map((item) =>
|
||||
String(item._id) === String(view._id)
|
||||
? { ...item, viewMode }
|
||||
: item
|
||||
)
|
||||
|
||||
activeViewRef.current = { ...view, viewMode }
|
||||
|
||||
setDraftViews((prev) => updateInList(prev))
|
||||
viewsStateRef.current = {
|
||||
...viewsStateRef.current,
|
||||
draftViews: updateInList(viewsStateRef.current.draftViews)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await apiRef.current.updateObjectView(view._id, { viewMode })
|
||||
mergeViewUpdate(view._id, { viewMode })
|
||||
} catch (error) {
|
||||
console.error('Error updating view mode:', error)
|
||||
message.error('Failed to save view mode')
|
||||
}
|
||||
},
|
||||
[mergeViewUpdate]
|
||||
)
|
||||
|
||||
const isCustomView = activeTabKey !== ALL_TAB_KEY
|
||||
|
||||
const viewMode = useMemo(() => {
|
||||
if (isCustomView && listViewViewMode) {
|
||||
return normalizeViewMode(listViewViewMode)
|
||||
}
|
||||
if (isCustomView) {
|
||||
return DEFAULT_VIEW_MODE
|
||||
}
|
||||
return normalizeViewMode(userViewMode)
|
||||
}, [isCustomView, listViewViewMode, userViewMode])
|
||||
|
||||
const setViewMode = useCallback(
|
||||
(nextMode) => {
|
||||
const resolved = normalizeViewMode(
|
||||
typeof nextMode === 'function' ? nextMode(viewMode) : nextMode
|
||||
)
|
||||
|
||||
if (isCustomView) {
|
||||
handleViewModeChange(resolved)
|
||||
return
|
||||
}
|
||||
|
||||
setUserViewMode(resolved)
|
||||
},
|
||||
[handleViewModeChange, isCustomView, setUserViewMode, viewMode]
|
||||
)
|
||||
|
||||
const viewTabSignatures = useMemo(
|
||||
() => displayedViews.map(getViewTabSignature).join('|'),
|
||||
[displayedViews]
|
||||
@ -867,6 +946,9 @@ export const ObjectListViewProvider = ({
|
||||
listViewId,
|
||||
listViewFilter,
|
||||
listViewSort,
|
||||
listViewViewMode,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
initialLoading,
|
||||
saving,
|
||||
isEditing,
|
||||
@ -880,6 +962,7 @@ export const ObjectListViewProvider = ({
|
||||
mergeViewUpdate,
|
||||
removeView,
|
||||
handleFilterSortChange,
|
||||
handleViewModeChange,
|
||||
reloadViews: () => loadViewsRef.current(true),
|
||||
viewTabSignatures
|
||||
}),
|
||||
@ -892,6 +975,9 @@ export const ObjectListViewProvider = ({
|
||||
listViewId,
|
||||
listViewFilter,
|
||||
listViewSort,
|
||||
listViewViewMode,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
initialLoading,
|
||||
saving,
|
||||
isEditing,
|
||||
@ -905,6 +991,7 @@ export const ObjectListViewProvider = ({
|
||||
mergeViewUpdate,
|
||||
removeView,
|
||||
handleFilterSortChange,
|
||||
handleViewModeChange,
|
||||
viewTabSignatures
|
||||
]
|
||||
)
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
import { useCallback, useContext } from 'react'
|
||||
import { ApiServerContext } from '../context/ApiServerContext'
|
||||
import {
|
||||
DEFAULT_VIEW_MODE,
|
||||
normalizeViewMode
|
||||
} from '../common/viewModeUtils'
|
||||
|
||||
const useViewMode = (componentName, defaultMode = 'list') => {
|
||||
const useViewMode = (componentName, defaultMode = DEFAULT_VIEW_MODE) => {
|
||||
const { userSettings, updateUserSettings } = useContext(ApiServerContext)
|
||||
const viewMode = userSettings.viewMode[componentName] ?? defaultMode
|
||||
const viewMode = normalizeViewMode(
|
||||
userSettings.viewMode[componentName] ?? defaultMode
|
||||
)
|
||||
|
||||
const setViewMode = useCallback(
|
||||
(nextMode) => {
|
||||
const mode =
|
||||
const mode = normalizeViewMode(
|
||||
typeof nextMode === 'function' ? nextMode(viewMode) : nextMode
|
||||
)
|
||||
updateUserSettings('viewMode', componentName, mode)
|
||||
},
|
||||
[componentName, updateUserSettings, viewMode]
|
||||
|
||||
6
src/components/Icons/KanbanIcon.jsx
Normal file
6
src/components/Icons/KanbanIcon.jsx
Normal file
@ -0,0 +1,6 @@
|
||||
import Icon from '@ant-design/icons'
|
||||
import CustomIconSvg from '../../../assets/icons/kanbanicon.svg?react'
|
||||
|
||||
const KanbanIcon = (props) => <Icon component={CustomIconSvg} {...props} />
|
||||
|
||||
export default KanbanIcon
|
||||
Loading…
x
Reference in New Issue
Block a user