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

Enhance NoteItem component with new props for body and footer visibility

Browse Source 
- Added showBody and showFooter props to the NoteItem component to control the rendering of the note's content and footer elements.
- Refactored the component structure to conditionally display the body and footer based on the new props, improving flexibility in note presentation.
This commit is contained in:
Tom Butcher 2026-07-25 01:35:41 +01:00
parent 6471434d81
commit 03cd3db1c7
1 changed files with 93 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/Dashboard/common/NoteItem.jsx
View File

@ -36,6 +36,8 @@ const NoteItem = ({
showChildNotes = true, showChildNotes = true,
showActions = true, showActions = true,
showInfo = true, showInfo = true,
showBody = true,
showFooter = true,
largeSpacing = false largeSpacing = false
}) => { }) => {
const [childNotes, setChildNotes] = useState([]) const [childNotes, setChildNotes] = useState([])
@ -162,90 +164,96 @@ const NoteItem = ({
const noteItem = ( const noteItem = (
<> <>
<Flex vertical gap={'small'}> <Flex vertical gap={'small'}>
<Flex gap={'middle'} align='start' style={{ marginBottom: '4px' }}> {showBody && (
<Space> <Flex gap={'middle'} align='start' style={{ marginBottom: '4px' }}>
<PersonIcon /> <Space>
<Text style={{ whiteSpace: 'nowrap' }}>{note.user.name}:</Text> <PersonIcon />
</Space> <Text style={{ whiteSpace: 'nowrap' }}>{note.user.name}:</Text>
<div style={{ marginTop: '1px' }}>
<MarkdownDisplay content={note.content} />
</div>
</Flex>
<Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
<Flex wrap gap={'small'}>
{showActions && (
<>
<Dropdown
menu={{ items: dropdownItems }}
trigger={['hover']}
placement='bottomLeft'
>
<Button size='small'>Actions</Button>
</Dropdown>
<UserNotifierToggle
type='note'
size='small'
objectData={note}
disabled={false}
/>
</>
)}
<Space size={'small'} style={{ marginRight: 8 }}>
<Text type='secondary'>Type:</Text>
<Tag color={note.noteType.color} style={{ margin: 0 }}>
{note.noteType.name}
</Tag>
</Space>
<Space size={'small'} style={{ marginRight: 8 }}>
<Text type='secondary'>User ID:</Text>
<IdDisplay
longId={false}
id={note.user._id}
type={'user'}
showHyperlink={true}
/>
</Space>
{showCreatedAt && (
<Space size={'small'} style={{ marginRight: 8 }}>
<Text type='secondary'>Created At:</Text>
<TimeDisplay dateTime={note.createdAt} showSince={true} />
</Space>
)}
<Flex style={{ flexGrow: 1 }} justify='end'>
<Space size={'small'}>
{showInfo && (
<Button
icon={<InfoIcon />}
type='text'
size='small'
onClick={() => {
navigate(infoAction.url(note._id))
}}
/>
)}
{showChildNotes && (
<Button
icon={
childNotesLoading ? (
<LoadingOutlined />
) : (
<CaretLeftFilled />
)
}
size='small'
type='text'
loading={childNotesLoading}
disabled={childNotesLoading}
style={{
transform: transformValue,
transition: 'transform 0.2s ease'
}}
onClick={toggleExpand}
/>
)}
</Space> </Space>
<div style={{ marginTop: '4px' }}>
<MarkdownDisplay content={note.content} />
</div>
</Flex> </Flex>
</Flex> )}
{showFooter && showBody && (
<Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
)}
{showFooter && (
<Flex wrap gap={'small'}>
{showActions && (
<>
<Dropdown
menu={{ items: dropdownItems }}
trigger={['hover']}
placement='bottomLeft'
>
<Button size='small'>Actions</Button>
</Dropdown>
<UserNotifierToggle
type='note'
size='small'
objectData={note}
disabled={false}
/>
</>
)}
<Space size={'small'} style={{ marginRight: 8 }}>
<Text type='secondary'>Type:</Text>
<Tag color={note.noteType.color} style={{ margin: 0 }}>
{note.noteType.name}
</Tag>
</Space>
<Space size={'small'} style={{ marginRight: 8 }}>
<Text type='secondary'>User ID:</Text>
<IdDisplay
longId={false}
id={note.user._id}
type={'user'}
showHyperlink={true}
/>
</Space>
{showCreatedAt && (
<Space size={'small'} style={{ marginRight: 8 }}>
<Text type='secondary'>Created At:</Text>
<TimeDisplay dateTime={note.createdAt} showSince={true} />
</Space>
)}
<Flex style={{ flexGrow: 1 }} justify='end'>
<Space size={'small'}>
{showInfo && (
<Button
icon={<InfoIcon />}
type='text'
size='small'
onClick={() => {
navigate(infoAction.url(note._id))
}}
/>
)}
{showChildNotes && (
<Button
icon={
childNotesLoading ? (
<LoadingOutlined />
) : (
<CaretLeftFilled />
)
}
size='small'
type='text'
loading={childNotesLoading}
disabled={childNotesLoading}
style={{
transform: transformValue,
transition: 'transform 0.2s ease'
}}
onClick={toggleExpand}
/>
)}
</Space>
</Flex>
</Flex>
)}
{isExpanded && ( {isExpanded && (
<Flex vertical gap={'small'} style={{ flexGrow: 1 }}> <Flex vertical gap={'small'} style={{ flexGrow: 1 }}>
{childNotes.length > 0 ? ( {childNotes.length > 0 ? (
@ -342,7 +350,9 @@ NoteItem.propTypes = {
showChildNotes: PropTypes.bool, showChildNotes: PropTypes.bool,
showActions: PropTypes.bool, showActions: PropTypes.bool,
largeSpacing: PropTypes.bool, largeSpacing: PropTypes.bool,
showInfo: PropTypes.bool showInfo: PropTypes.bool,
showBody: PropTypes.bool,
showFooter: PropTypes.bool
} }
export default NoteItem export default NoteItem