farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Added splitter to filter sidebar.

Browse Source
This commit is contained in:
Tom Butcher 2026-06-20 22:56:07 +01:00
parent 476a01eafb
commit 27f5989eb8
2 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Dashboard/common/FilterSidebar.jsx
View File

@ -136,7 +136,7 @@ const FilterSidebar = ({
} }
return ( return (
<Card style={{ width: '25%', flexShrink: 0, height: '100%' }}> <Card style={{ flexShrink: 0, height: '100%' }}>
<Flex vertical gap='middle'> <Flex vertical gap='middle'>
<Flex justify='space-between'> <Flex justify='space-between'>
<Dropdown menu={menuItems} trigger={['hover']} placement='bottomLeft'> <Dropdown menu={menuItems} trigger={['hover']} placement='bottomLeft'>
@ -158,14 +158,14 @@ const FilterSidebar = ({
value={row.field || undefined} value={row.field || undefined}
onChange={(v) => changeField(row.field, v)} onChange={(v) => changeField(row.field, v)}
options={availableOptions(row.field)} options={availableOptions(row.field)}
style={{ minWidth: 80, flex: 1 }} style={{ minWidth: 80 }}
allowClear={false} allowClear={false}
/> />
<Input <Input
placeholder='Value' placeholder='Value'
value={row.value} value={row.value}
onChange={(e) => changeValue(row.field, e.target.value)} onChange={(e) => changeValue(row.field, e.target.value)}
style={{ width: 160 }} style={{ flex: 1 }}
/> />
<Button <Button
icon={<CloseOutlined />} icon={<CloseOutlined />}

28
src/components/Dashboard/common/ObjectTable.jsx
View File

@ -19,7 +19,8 @@ import {
Input, Input,
Space, Space,
Tooltip, Tooltip,
Form Form,
Splitter
} from 'antd' } from 'antd'
import { LoadingOutlined } from '@ant-design/icons' import { LoadingOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
@ -940,6 +941,8 @@ const ObjectTable = forwardRef(
const tableContent = ( const tableContent = (
<Flex gap={'middle'} vertical style={{ flex: 1, minWidth: 0 }}> <Flex gap={'middle'} vertical style={{ flex: 1, minWidth: 0 }}>
<Splitter className={'farmcontrol-splitter'}>
<Splitter.Panel>
{cards ? ( {cards ? (
<Spin indicator={<LoadingOutlined />} spinning={loading}> <Spin indicator={<LoadingOutlined />} spinning={loading}>
{renderCards()} {renderCards()}
@ -953,7 +956,10 @@ const ObjectTable = forwardRef(
pagination={false} pagination={false}
scroll={{ y: adjustedScrollHeight }} scroll={{ y: adjustedScrollHeight }}
rowKey='_id' rowKey='_id'
loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }} loading={{
spinning: loading,
indicator: <LoadingOutlined spin />
}}
onScroll={handleScroll} onScroll={handleScroll}
onChange={handleTableChange} onChange={handleTableChange}
showSorterTooltip={false} showSorterTooltip={false}
@ -963,26 +969,20 @@ const ObjectTable = forwardRef(
onRow={onRow} onRow={onRow}
/> />
)} )}
</Flex> </Splitter.Panel>
) {showFilterSidebar && (
<Splitter.Panel>
if (showFilterSidebar) {
return (
<Flex
gap='middle'
align='flex-start'
style={{ width: '100%', height: '100%' }}
>
{tableContent}
<FilterSidebar <FilterSidebar
type={type} type={type}
filter={sidebarFilter} filter={sidebarFilter}
onFilterChange={handleSidebarFilterChange} onFilterChange={handleSidebarFilterChange}
masterFilter={masterFilter} masterFilter={masterFilter}
/> />
</Splitter.Panel>
)}
</Splitter>
</Flex> </Flex>
) )
}
return tableContent return tableContent
} }