Refactor PrinterInfo component for improved state management and UI consistency
- Updated the PrinterInfo component to utilize React hooks for managing edit form state and actions. - Replaced the previous job-related collapsible sections with a unified audit logs section for better clarity. - Enhanced the layout and structure of the component to improve user experience and maintainability. - Updated imports to ensure consistency with file extensions and component organization.
This commit is contained in:
parent
2eccf6736f
commit
ee90e75133
@ -1,142 +1,145 @@
|
|||||||
import React from 'react'
|
import React, { 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'
|
||||||
import useCollapseState from '../../hooks/useCollapseState'
|
import loglevel from 'loglevel'
|
||||||
import NotesPanel from '../../common/NotesPanel'
|
import config from '../../../../config.js'
|
||||||
import InfoCollapse from '../../common/InfoCollapse'
|
import useCollapseState from '../../hooks/useCollapseState.js'
|
||||||
import ObjectInfo from '../../common/ObjectInfo'
|
import NotesPanel from '../../common/NotesPanel.jsx'
|
||||||
import ViewButton from '../../common/ViewButton'
|
import InfoCollapse from '../../common/InfoCollapse.jsx'
|
||||||
import EditObjectForm from '../../common/EditObjectForm'
|
import ObjectInfo from '../../common/ObjectInfo.jsx'
|
||||||
import EditButtons from '../../common/EditButtons'
|
import ViewButton from '../../common/ViewButton.jsx'
|
||||||
import LockIndicator from '../../common/LockIndicator.jsx'
|
|
||||||
import PrinterJobsTree from '../../common/PrinterJobsTree'
|
|
||||||
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
|
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
|
||||||
import NoteIcon from '../../../Icons/NoteIcon.jsx'
|
import NoteIcon from '../../../Icons/NoteIcon.jsx'
|
||||||
import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
|
|
||||||
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
|
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
|
||||||
import ActionHandler from '../../common/ActionHandler'
|
import EditObjectForm from '../../common/EditObjectForm.jsx'
|
||||||
|
import EditButtons from '../../common/EditButtons.jsx'
|
||||||
|
import LockIndicator from '../../common/LockIndicator.jsx'
|
||||||
|
import ActionHandler from '../../common/ActionHandler.jsx'
|
||||||
import ObjectActions from '../../common/ObjectActions.jsx'
|
import ObjectActions from '../../common/ObjectActions.jsx'
|
||||||
import ObjectTable from '../../common/ObjectTable.jsx'
|
import ObjectTable from '../../common/ObjectTable.jsx'
|
||||||
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
|
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
|
||||||
|
|
||||||
|
const log = loglevel.getLogger('PrinterInfo')
|
||||||
|
log.setLevel(config.logLevel)
|
||||||
|
|
||||||
const PrinterInfo = () => {
|
const PrinterInfo = () => {
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
|
const editFormRef = useRef(null)
|
||||||
|
const actionHandlerRef = useRef(null)
|
||||||
const printerId = new URLSearchParams(location.search).get('printerId')
|
const printerId = new URLSearchParams(location.search).get('printerId')
|
||||||
const [collapseState, updateCollapseState] = useCollapseState('PrinterInfo', {
|
const [collapseState, updateCollapseState] = useCollapseState('PrinterInfo', {
|
||||||
info: true,
|
info: true,
|
||||||
jobs: true,
|
stocks: true,
|
||||||
notes: true,
|
notes: true,
|
||||||
auditLogsParent: true,
|
auditLogs: true
|
||||||
auditLogsOwner: true
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [editFormState, setEditFormState] = useState({
|
||||||
|
isEditing: false,
|
||||||
|
editLoading: false,
|
||||||
|
formValid: false,
|
||||||
|
locked: false,
|
||||||
|
loading: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
reload: () => {
|
||||||
|
editFormRef?.current.handleFetchObject()
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
edit: () => {
|
||||||
|
editFormRef?.current.startEditing()
|
||||||
|
console.log('CALLING START EDITING')
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
cancelEdit: () => {
|
||||||
|
editFormRef?.current.cancelEditing()
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
finishEdit: () => {
|
||||||
|
editFormRef?.current.handleUpdate()
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EditObjectForm
|
<>
|
||||||
id={printerId}
|
<Flex
|
||||||
type='printer'
|
gap='large'
|
||||||
style={{ height: 'calc(var(--unit-100vh) - 155px)', minHeight: 0 }}
|
vertical='true'
|
||||||
>
|
style={{
|
||||||
{({
|
height: 'calc(var(--unit-100vh) - 155px)',
|
||||||
loading,
|
minHeight: 0
|
||||||
isEditing,
|
}}
|
||||||
startEditing,
|
>
|
||||||
cancelEditing,
|
<Flex justify={'space-between'}>
|
||||||
handleUpdate,
|
<Space size='middle'>
|
||||||
formValid,
|
<Space size='small'>
|
||||||
objectData,
|
<ObjectActions
|
||||||
editLoading,
|
type='printer'
|
||||||
lock,
|
id={printerId}
|
||||||
fetchObject
|
disabled={editFormState.loading}
|
||||||
}) => {
|
/>
|
||||||
// Define actions for ActionHandler
|
<ViewButton
|
||||||
const actions = {
|
disabled={editFormState.loading}
|
||||||
reload: () => {
|
items={[
|
||||||
fetchObject()
|
{ key: 'info', label: 'Printer Information' },
|
||||||
return true
|
{ key: 'notes', label: 'Notes' },
|
||||||
},
|
{ key: 'auditLogs', label: 'Audit Logs' }
|
||||||
edit: () => {
|
]}
|
||||||
startEditing()
|
visibleState={collapseState}
|
||||||
return false
|
updateVisibleState={updateCollapseState}
|
||||||
},
|
/>
|
||||||
cancelEdit: () => {
|
</Space>
|
||||||
cancelEditing()
|
<LockIndicator lock={editFormState.lock} />
|
||||||
return true
|
</Space>
|
||||||
},
|
<Space>
|
||||||
finishEdit: () => {
|
<EditButtons
|
||||||
handleUpdate()
|
isEditing={editFormState.isEditing}
|
||||||
return true
|
handleUpdate={() => {
|
||||||
}
|
actionHandlerRef.current.callAction('finishEdit')
|
||||||
}
|
}}
|
||||||
|
cancelEditing={() => {
|
||||||
|
actionHandlerRef.current.callAction('cancelEdit')
|
||||||
|
}}
|
||||||
|
startEditing={() => {
|
||||||
|
actionHandlerRef.current.callAction('edit')
|
||||||
|
}}
|
||||||
|
editLoading={editFormState.editLoading}
|
||||||
|
formValid={editFormState.formValid}
|
||||||
|
disabled={editFormState.lock?.locked || editFormState.loading}
|
||||||
|
loading={editFormState.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={editFormState.loading}
|
||||||
vertical='true'
|
ref={actionHandlerRef}
|
||||||
style={{ height: '100%', minHeight: 0 }}
|
>
|
||||||
|
<InfoCollapse
|
||||||
|
title='Printer Information'
|
||||||
|
icon={<InfoCircleIcon />}
|
||||||
|
active={collapseState.info}
|
||||||
|
onToggle={(expanded) => updateCollapseState('info', expanded)}
|
||||||
|
collapseKey='info'
|
||||||
>
|
>
|
||||||
<Flex justify={'space-between'}>
|
<EditObjectForm
|
||||||
<Space size='middle'>
|
id={printerId}
|
||||||
<Space size='small'>
|
type='printer'
|
||||||
<ObjectActions
|
style={{ height: '100%' }}
|
||||||
type='printer'
|
ref={editFormRef}
|
||||||
id={printerId}
|
onStateChange={(state) => {
|
||||||
disabled={loading}
|
console.log('Got edit form state change', state)
|
||||||
/>
|
setEditFormState((prev) => ({ ...prev, ...state }))
|
||||||
<ViewButton
|
}}
|
||||||
disabled={loading}
|
>
|
||||||
items={[
|
{({ loading, isEditing, objectData }) => {
|
||||||
{ key: 'info', label: 'Printer Information' },
|
return (
|
||||||
{ key: 'jobs', label: 'Printer Jobs' },
|
|
||||||
{ key: 'notes', label: 'Notes' },
|
|
||||||
{
|
|
||||||
key: 'auditLogsParent',
|
|
||||||
label: 'Audit Logs (By Parent)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'auditLogsOwner',
|
|
||||||
label: 'Audit Logs (By Owner)'
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
visibleState={collapseState}
|
|
||||||
updateVisibleState={updateCollapseState}
|
|
||||||
/>
|
|
||||||
</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%', overflow: 'auto' }}>
|
|
||||||
<Flex vertical gap={'large'}>
|
|
||||||
<InfoCollapse
|
|
||||||
title='Printer Information'
|
|
||||||
icon={<InfoCircleIcon />}
|
|
||||||
active={collapseState.info}
|
|
||||||
onToggle={(expanded) =>
|
|
||||||
updateCollapseState('info', expanded)
|
|
||||||
}
|
|
||||||
collapseKey='info'
|
|
||||||
>
|
|
||||||
<ObjectInfo
|
<ObjectInfo
|
||||||
loading={loading}
|
loading={loading}
|
||||||
indicator={<LoadingOutlined />}
|
indicator={<LoadingOutlined />}
|
||||||
@ -144,83 +147,47 @@ const PrinterInfo = () => {
|
|||||||
type='printer'
|
type='printer'
|
||||||
objectData={objectData}
|
objectData={objectData}
|
||||||
/>
|
/>
|
||||||
</InfoCollapse>
|
)
|
||||||
|
}}
|
||||||
|
</EditObjectForm>
|
||||||
|
</InfoCollapse>
|
||||||
|
</ActionHandler>
|
||||||
|
|
||||||
<InfoCollapse
|
<InfoCollapse
|
||||||
title='Printer Jobs'
|
title='Notes'
|
||||||
icon={<PrinterIcon />}
|
icon={<NoteIcon />}
|
||||||
active={collapseState.jobs}
|
active={collapseState.notes}
|
||||||
onToggle={(expanded) =>
|
onToggle={(expanded) => updateCollapseState('notes', expanded)}
|
||||||
updateCollapseState('jobs', expanded)
|
collapseKey='notes'
|
||||||
}
|
>
|
||||||
collapseKey='jobs'
|
<Card>
|
||||||
>
|
<NotesPanel _id={printerId} type='printer' />
|
||||||
<PrinterJobsTree
|
</Card>
|
||||||
subJobs={objectData?.subJobs}
|
</InfoCollapse>
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
</InfoCollapse>
|
|
||||||
|
|
||||||
<InfoCollapse
|
<InfoCollapse
|
||||||
title='Notes'
|
title='Audit Logs'
|
||||||
icon={<NoteIcon />}
|
icon={<AuditLogIcon />}
|
||||||
active={collapseState.notes}
|
active={collapseState.auditLogs}
|
||||||
onToggle={(expanded) =>
|
onToggle={(expanded) =>
|
||||||
updateCollapseState('notes', expanded)
|
updateCollapseState('auditLogs', expanded)
|
||||||
}
|
}
|
||||||
collapseKey='notes'
|
collapseKey='auditLogs'
|
||||||
>
|
>
|
||||||
<Card>
|
{editFormState.loading ? (
|
||||||
<NotesPanel _id={printerId} type='printer' />
|
<InfoCollapsePlaceholder />
|
||||||
</Card>
|
) : (
|
||||||
</InfoCollapse>
|
<ObjectTable
|
||||||
|
type='auditLog'
|
||||||
<InfoCollapse
|
masterFilter={{ 'parent._id': printerId }}
|
||||||
title='Audit Logs (By Parent)'
|
visibleColumns={{ _id: false, 'parent._id': false }}
|
||||||
icon={<AuditLogIcon />}
|
/>
|
||||||
active={collapseState.auditLogsParent}
|
)}
|
||||||
onToggle={(expanded) =>
|
</InfoCollapse>
|
||||||
updateCollapseState('auditLogsParent', expanded)
|
</Flex>
|
||||||
}
|
</div>
|
||||||
collapseKey='auditLogs'
|
</Flex>
|
||||||
>
|
</>
|
||||||
{loading ? (
|
|
||||||
<InfoCollapsePlaceholder />
|
|
||||||
) : (
|
|
||||||
<ObjectTable
|
|
||||||
type='auditLog'
|
|
||||||
masterFilter={{ 'parent._id': printerId }}
|
|
||||||
visibleColumns={{ _id: false, 'parent._id': false }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</InfoCollapse>
|
|
||||||
<InfoCollapse
|
|
||||||
title='Audit Logs (By Owner)'
|
|
||||||
icon={<AuditLogIcon />}
|
|
||||||
active={collapseState.auditLogsOwner}
|
|
||||||
onToggle={(expanded) =>
|
|
||||||
updateCollapseState('auditLogsOwner', expanded)
|
|
||||||
}
|
|
||||||
collapseKey='auditLogs'
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<InfoCollapsePlaceholder />
|
|
||||||
) : (
|
|
||||||
<ObjectTable
|
|
||||||
type='auditLog'
|
|
||||||
masterFilter={{ 'owner._id': printerId }}
|
|
||||||
visibleColumns={{ _id: false, 'owner._id': false }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</InfoCollapse>
|
|
||||||
</Flex>
|
|
||||||
</div>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
</ActionHandler>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</EditObjectForm>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user