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

Refactor DocumentPrinterInfo component to improve state management and enhance editing functionality. Introduce useRef for action handling and object form references, and update the rendering logic for better performance and user experience.

Browse Source
This commit is contained in:
Tom Butcher 2025-11-24 03:33:57 +00:00
parent 64c4d25982
commit 808d45273d
1 changed files with 153 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

305
src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
View File

@ -1,3 +1,4 @@
import { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom' import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd' import { Space, Flex, Card } from 'antd'
import { LoadingOutlined } from '@ant-design/icons' import { LoadingOutlined } from '@ant-design/icons'
@ -25,6 +26,8 @@ log.setLevel(config.logLevel)
const DocumentPrinterInfo = () => { const DocumentPrinterInfo = () => {
const location = useLocation() const location = useLocation()
const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null)
const documentPrinterId = new URLSearchParams(location.search).get( const documentPrinterId = new URLSearchParams(location.search).get(
'documentPrinterId' 'documentPrinterId'
) )
@ -32,122 +35,125 @@ const DocumentPrinterInfo = () => {
'DocumentPrinterInfo', 'DocumentPrinterInfo',
{ {
info: true, info: true,
stocks: true,
notes: true, notes: true,
auditLogs: true auditLogs: true
} }
) )
const [objectFormState, setEditFormState] = useState({
isEditing: false,
editLoading: false,
formValid: false,
locked: false,
loading: false,
objectData: {}
})
const actions = {
reload: () => {
objectFormRef?.current.handleFetchObject()
return true
},
edit: () => {
objectFormRef?.current.startEditing()
return false
},
cancelEdit: () => {
objectFormRef?.current.cancelEditing()
return true
},
finishEdit: () => {
objectFormRef?.current.handleUpdate()
return true
}
}
return ( return (
<ObjectForm <>
id={documentPrinterId} <Flex
type='documentPrinter' gap='large'
style={{ height: '100%' }} vertical='true'
> style={{
{({ maxHeight: '100%',
loading, minHeight: 0
isEditing, }}
startEditing, >
cancelEditing, <Flex justify={'space-between'}>
handleUpdate, <Space size='middle'>
formValid, <Space size='small'>
objectData, <ObjectActions
editLoading, type='documentPrinter'
lock, id={documentPrinterId}
fetchObject disabled={objectFormState.loading}
}) => { objectData={objectFormState.objectData}
// Define actions for ActionHandler />
const actions = { <ViewButton
reload: () => { disabled={objectFormState.loading}
fetchObject() items={[
return true {
}, key: 'info',
edit: () => { label: 'DocumentPrinter Information'
startEditing() },
return false { key: 'notes', label: 'Notes' },
}, { key: 'auditLogs', label: 'Audit Logs' }
cancelEdit: () => { ]}
cancelEditing() visibleState={collapseState}
return true updateVisibleState={updateCollapseState}
}, />
finishEdit: () => { <DocumentPrintButton
handleUpdate() type='documentPrinter'
return true objectData={objectFormState.objectData}
} disabled={objectFormState.loading}
} />
</Space>
<LockIndicator lock={objectFormState.lock} />
</Space>
<Space>
<EditButtons
isEditing={objectFormState.isEditing}
handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit')
}}
cancelEditing={() => {
actionHandlerRef.current.callAction('cancelEdit')
}}
startEditing={() => {
actionHandlerRef.current.callAction('edit')
}}
editLoading={objectFormState.editLoading}
formValid={objectFormState.formValid}
disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={objectFormState.editLoading}
/>
</Space>
</Flex>
return ( <div style={{ height: '100%', overflowY: 'scroll' }}>
<ActionHandler actions={actions} loading={loading}> <Flex vertical gap={'large'}>
{({ callAction }) => ( <ActionHandler
<Flex actions={actions}
gap='large' loading={objectFormState.loading}
vertical='true' ref={actionHandlerRef}
style={{ >
maxHeight: '100%', <InfoCollapse
minHeight: 0 title='Document Printer Information'
}} icon={<InfoCircleIcon />}
active={collapseState.info}
onToggle={(expanded) => updateCollapseState('info', expanded)}
collapseKey='info'
> >
<Flex justify={'space-between'}> <ObjectForm
<Space size='middle'> id={documentPrinterId}
<Space size='small'> type='documentPrinter'
<ObjectActions style={{ height: '100%' }}
type='documentPrinter' ref={objectFormRef}
id={documentPrinterId} onStateChange={(state) => {
disabled={loading} setEditFormState((prev) => ({ ...prev, ...state }))
objectData={objectData} }}
/> >
<ViewButton {({ loading, isEditing, objectData }) => {
disabled={loading} return (
items={[
{
key: 'info',
label: 'DocumentPrinter Information'
},
{ key: 'stocks', label: 'DocumentPrinter Stocks' },
{ key: 'notes', label: 'Notes' },
{ key: 'auditLogs', label: 'Audit Logs' }
]}
visibleState={collapseState}
updateVisibleState={updateCollapseState}
/>
<DocumentPrintButton
type='documentPrinter'
objectData={objectData}
disabled={loading}
/>
</Space>
<LockIndicator lock={lock} />
</Space>
<Space>
<EditButtons
isEditing={isEditing}
handleUpdate={() => {
callAction('finishEdit')
}}
cancelEditing={() => {
callAction('cancelEdit')
}}
startEditing={() => {
callAction('edit')
}}
editLoading={editLoading}
formValid={formValid}
disabled={lock?.locked || loading}
loading={editLoading}
/>
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<Flex vertical gap={'large'}>
<InfoCollapse
title='Document Printer Information'
icon={<InfoCircleIcon />}
active={collapseState.info}
onToggle={(expanded) =>
updateCollapseState('info', expanded)
}
collapseKey='info'
>
<ObjectInfo <ObjectInfo
loading={loading} loading={loading}
indicator={<LoadingOutlined />} indicator={<LoadingOutlined />}
@ -155,52 +161,47 @@ const DocumentPrinterInfo = () => {
type='documentPrinter' type='documentPrinter'
objectData={objectData} objectData={objectData}
/> />
</InfoCollapse> )
}}
</ObjectForm>
</InfoCollapse>
</ActionHandler>
<InfoCollapse <InfoCollapse
title='Notes' title='Notes'
icon={<NoteIcon />} icon={<NoteIcon />}
active={collapseState.notes} active={collapseState.notes}
onToggle={(expanded) => onToggle={(expanded) => updateCollapseState('notes', expanded)}
updateCollapseState('notes', expanded) collapseKey='notes'
} >
collapseKey='notes' <Card>
> <NotesPanel _id={documentPrinterId} type='documentPrinter' />
<Card> </Card>
<NotesPanel </InfoCollapse>
_id={documentPrinterId}
type='documentPrinter'
/>
</Card>
</InfoCollapse>
<InfoCollapse <InfoCollapse
title='Audit Logs' title='Audit Logs'
icon={<AuditLogIcon />} icon={<AuditLogIcon />}
active={collapseState.auditLogs} active={collapseState.auditLogs}
onToggle={(expanded) => onToggle={(expanded) =>
updateCollapseState('auditLogs', expanded) updateCollapseState('auditLogs', expanded)
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable
type='auditLog' type='auditLog'
masterFilter={{ 'parent._id': documentPrinterId }} masterFilter={{ 'parent._id': documentPrinterId }}
visibleColumns={{ _id: false, 'parent._id': false }} visibleColumns={{ _id: false, 'parent._id': false }}
/> />
)} )}
</InfoCollapse> </InfoCollapse>
</Flex> </Flex>
</div> </div>
</Flex> </Flex>
)} </>
</ActionHandler>
)
}}
</ObjectForm>
) )
} }