Tom Butcher
be57b3fde7
- Updated multiple dashboard components to integrate the useDashboardObjectTools hook for managing object navigation buttons. - Replaced direct rendering of ObjectTableNavigationButtons with a memoized version to enhance performance and maintainability. - Ensured consistent handling of loading and editing states across various components, improving user experience.
416 lines
15 KiB
JavaScript
416 lines
15 KiB
JavaScript
import { useRef, useState, useMemo } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
import { Card, Flex, Space } from 'antd'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
import ActionHandler from '../../common/ActionHandler'
|
|
import AuditLogIcon from '../../../Icons/AuditLogIcon'
|
|
import DocumentPrintButton from '../../common/DocumentPrintButton'
|
|
import EditButtons from '../../common/EditButtons'
|
|
import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
|
|
import HotEndIcon from '../../../Icons/HotEndIcon'
|
|
import InfoCircleIcon from '../../../Icons/InfoCircleIcon'
|
|
import MultiMotionIcon from '../../../Icons/MultiMotionIcon'
|
|
import PictureIcon from '../../../Icons/PictureIcon'
|
|
import RulerIcon from '../../../Icons/RulerIcon'
|
|
import InfoCollapse from '../../common/InfoCollapse'
|
|
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder'
|
|
import ActivityIndicator from '../../common/ActivityIndicator'
|
|
import NoteIcon from '../../../Icons/NoteIcon'
|
|
import NotesPanel from '../../common/NotesPanel'
|
|
import ObjectActions from '../../common/ObjectActions'
|
|
import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
|
|
import ObjectForm from '../../common/ObjectForm'
|
|
import ObjectInfo from '../../common/ObjectInfo'
|
|
import ObjectTable from '../../common/ObjectTable'
|
|
import ScrollBox from '../../common/ScrollBox'
|
|
import UserNotifierToggle from '../../common/UserNotifierToggle'
|
|
import ViewButton from '../../common/ViewButton'
|
|
import useCollapseState from '../../hooks/useCollapseState'
|
|
import ObjectProperty from '../../common/ObjectProperty'
|
|
import { getModelProperty, getModelByName } from '../../../../database/ObjectModels'
|
|
import GCodeFileIcon from '../../../Icons/GCodeFileIcon'
|
|
import SettingsIcon from '../../../Icons/SettingsIcon'
|
|
import ExclamationOctagonIcon from '../../../Icons/ExclamationOctagonIcon'
|
|
|
|
const PrinterProfileInfo = () => {
|
|
const location = useLocation()
|
|
const objectFormRef = useRef(null)
|
|
const actionHandlerRef = useRef(null)
|
|
const printerProfileId = new URLSearchParams(location.search).get(
|
|
'printerProfileId'
|
|
)
|
|
const [collapseState, updateCollapseState] = useCollapseState(
|
|
'PrinterProfileInfo',
|
|
{
|
|
info: true,
|
|
dimensions: true,
|
|
bedExcludeArea: true,
|
|
extruders: true,
|
|
motion: true,
|
|
gCodeSettings: true,
|
|
optional: true,
|
|
thumbnails: true,
|
|
notes: true,
|
|
auditLogs: false
|
|
}
|
|
)
|
|
const [objectFormState, setObjectFormState] = useState({
|
|
isEditing: false,
|
|
editLoading: false,
|
|
formValid: false,
|
|
lock: null,
|
|
loading: false,
|
|
editDisabled: false,
|
|
objectData: {}
|
|
})
|
|
|
|
const currentObjectTools = useMemo(
|
|
() => (
|
|
<ObjectTableNavigationButtons
|
|
disabled={objectFormState.loading}
|
|
_id={printerProfileId}
|
|
objectType='printerProfile'
|
|
showEndingDivider={false}
|
|
/>
|
|
),
|
|
[objectFormState.loading, printerProfileId]
|
|
)
|
|
useDashboardObjectTools(currentObjectTools)
|
|
|
|
const actions = {
|
|
edit: () => {
|
|
objectFormRef.current?.startEditing?.()
|
|
return false
|
|
},
|
|
cancelEdit: () => {
|
|
objectFormRef.current?.cancelEditing?.()
|
|
return true
|
|
},
|
|
finishEdit: () => {
|
|
objectFormRef.current?.handleUpdate?.()
|
|
return true
|
|
},
|
|
delete: () => {
|
|
objectFormRef.current?.handleDelete?.()
|
|
return true
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Flex
|
|
gap='large'
|
|
vertical='true'
|
|
style={{ maxHeight: '100%', minHeight: 0 }}
|
|
>
|
|
<Flex justify='space-between'>
|
|
<Space size='small'>
|
|
<Space size='small'>
|
|
<ObjectActions
|
|
type='printerProfile'
|
|
pageName='info'
|
|
id={printerProfileId}
|
|
disabled={objectFormState.loading}
|
|
objectData={objectFormState.objectData}
|
|
/>
|
|
<ViewButton
|
|
disabled={objectFormState.loading}
|
|
items={[
|
|
{ key: 'info', label: 'Printer Profile Information' },
|
|
{ key: 'dimensions', label: 'Dimensions' },
|
|
{ key: 'bedExcludeArea', label: 'Excluded Bed Area' },
|
|
{ key: 'extruders', label: 'Extruders' },
|
|
{ key: 'motion', label: 'Motion' },
|
|
{ key: 'gCodeSettings', label: 'G-Code Settings' },
|
|
{ key: 'miscellaneous', label: 'Miscellaneous' },
|
|
{ key: 'thumbnails', label: 'Thumbnail Sizes' },
|
|
{ key: 'notes', label: 'Notes' },
|
|
{ key: 'auditLogs', label: 'Audit Logs' }
|
|
]}
|
|
visibleState={collapseState}
|
|
updateVisibleState={updateCollapseState}
|
|
/>
|
|
<UserNotifierToggle
|
|
type='printerProfile'
|
|
objectData={objectFormState.objectData}
|
|
disabled={objectFormState.loading}
|
|
/>
|
|
<DocumentPrintButton
|
|
type='printerProfile'
|
|
objectData={objectFormState.objectData}
|
|
disabled={objectFormState.loading}
|
|
/>
|
|
</Space>
|
|
<ActivityIndicator
|
|
activities={objectFormState.activities}
|
|
showStartingDivider={true}
|
|
/>
|
|
</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.beingEditedByOther ||
|
|
objectFormState.loading ||
|
|
objectFormState.editDisabled
|
|
}
|
|
loading={objectFormState.editLoading}
|
|
/>
|
|
</Space>
|
|
</Flex>
|
|
|
|
<ScrollBox>
|
|
<Flex vertical gap='large'>
|
|
<ActionHandler
|
|
actions={actions}
|
|
loading={objectFormState.loading}
|
|
ref={actionHandlerRef}
|
|
>
|
|
<ObjectForm
|
|
id={printerProfileId}
|
|
type='printerProfile'
|
|
ref={objectFormRef}
|
|
setCurrentObject={true}
|
|
onStateChange={(state) =>
|
|
setObjectFormState((current) => ({ ...current, ...state }))
|
|
}
|
|
>
|
|
{({ loading, isEditing, objectData }) => (
|
|
<Flex vertical gap='large'>
|
|
<InfoCollapse
|
|
title='Printer Profile Information'
|
|
icon={<InfoCircleIcon />}
|
|
active={collapseState.info}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('info', expanded)
|
|
}
|
|
collapseKey='info'
|
|
>
|
|
<ObjectInfo
|
|
loading={loading}
|
|
indicator={<LoadingOutlined />}
|
|
isEditing={isEditing}
|
|
type='printerProfile'
|
|
objectData={objectData}
|
|
labelWidth='140px'
|
|
visibleProperties={{
|
|
_id: true,
|
|
name: true,
|
|
_reference: true,
|
|
printer: true,
|
|
createdAt: true,
|
|
updatedAt: true
|
|
}}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Dimensions'
|
|
icon={<RulerIcon />}
|
|
active={collapseState.dimensions}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('dimensions', expanded)
|
|
}
|
|
collapseKey='dimensions'
|
|
>
|
|
<ObjectInfo
|
|
loading={loading}
|
|
indicator={<LoadingOutlined />}
|
|
isEditing={isEditing}
|
|
type='printerProfile'
|
|
objectData={objectData}
|
|
labelWidth='230px'
|
|
visibleProperties={{
|
|
printBedWidth: true,
|
|
printBedHeight: true,
|
|
originX: true,
|
|
originY: true,
|
|
printableHeight: true,
|
|
supportMultiBedTypes: true,
|
|
bestObjectPositionX: true,
|
|
bestObjectPositionY: true,
|
|
zOffset: true,
|
|
preferredOrientation: true
|
|
}}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Excluded Bed Area'
|
|
icon={<ExclamationOctagonIcon />}
|
|
active={collapseState.bedExcludeArea}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('bedExcludeArea', expanded)
|
|
}
|
|
collapseKey='bedExcludeArea'
|
|
>
|
|
<ObjectProperty
|
|
{...getModelProperty('printerProfile', 'bedExcludeArea')}
|
|
isEditing={isEditing}
|
|
objectData={objectData}
|
|
loading={loading}
|
|
size='medium'
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Extruders'
|
|
icon={<HotEndIcon />}
|
|
active={collapseState.extruders}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('extruders', expanded)
|
|
}
|
|
collapseKey='extruders'
|
|
>
|
|
<ObjectProperty
|
|
{...getModelProperty('printerProfile', 'extruders')}
|
|
isEditing={isEditing}
|
|
objectData={objectData}
|
|
loading={loading}
|
|
size='medium'
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Motion'
|
|
icon={<MultiMotionIcon />}
|
|
active={collapseState.motion}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('motion', expanded)
|
|
}
|
|
collapseKey='motion'
|
|
>
|
|
<ObjectInfo
|
|
loading={loading}
|
|
indicator={<LoadingOutlined />}
|
|
isEditing={isEditing}
|
|
type='printerProfile'
|
|
objectData={objectData}
|
|
labelWidth='225px'
|
|
visibleProperties={{
|
|
machineMaxAccelerationRetracting: true,
|
|
machineMaxSpeedE: true,
|
|
machineMaxSpeedX: true,
|
|
machineMaxSpeedY: true,
|
|
machineMaxJunctionDeviation: true
|
|
}}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='G-Code Settings'
|
|
icon={<GCodeFileIcon />}
|
|
active={collapseState.gCodeSettings}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('gCodeSettings', expanded)
|
|
}
|
|
collapseKey='gCodeSettings'
|
|
>
|
|
<ObjectInfo
|
|
loading={loading}
|
|
indicator={<LoadingOutlined />}
|
|
isEditing={isEditing}
|
|
type='printerProfile'
|
|
objectData={objectData}
|
|
labelWidth='240px'
|
|
visibleProperties={{
|
|
machinePauseGcode: true,
|
|
machineStartGcode: true,
|
|
machineEndGcode: true,
|
|
layerChangeGcode: true,
|
|
beforeLayerChangeGcode: true
|
|
}}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Miscellaneous'
|
|
icon={<SettingsIcon />}
|
|
active={collapseState.miscellaneous}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('miscellaneous', expanded)
|
|
}
|
|
collapseKey='miscellaneous'
|
|
>
|
|
<ObjectInfo
|
|
loading={loading}
|
|
indicator={<LoadingOutlined />}
|
|
isEditing={isEditing}
|
|
type='printerProfile'
|
|
objectData={objectData}
|
|
labelWidth='210px'
|
|
visibleProperties={{
|
|
printerNotes: true,
|
|
scanFirstLayer: true,
|
|
machineLoadFilamentTime: true,
|
|
machineUnloadFilamentTime: true,
|
|
auxiliaryFan: true
|
|
}}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Thumbnail Sizes'
|
|
icon={<PictureIcon />}
|
|
active={collapseState.thumbnails}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('thumbnails', expanded)
|
|
}
|
|
collapseKey='thumbnails'
|
|
>
|
|
<ObjectProperty
|
|
{...getModelProperty('printerProfile', 'thumbnails')}
|
|
isEditing={isEditing}
|
|
objectData={objectData}
|
|
loading={loading}
|
|
size='medium'
|
|
/>
|
|
</InfoCollapse>
|
|
</Flex>
|
|
)}
|
|
</ObjectForm>
|
|
</ActionHandler>
|
|
|
|
<InfoCollapse
|
|
title='Notes'
|
|
icon={<NoteIcon />}
|
|
active={collapseState.notes}
|
|
onToggle={(expanded) => updateCollapseState('notes', expanded)}
|
|
collapseKey='notes'
|
|
>
|
|
<Card>
|
|
<NotesPanel _id={printerProfileId} type='printerProfile' />
|
|
</Card>
|
|
</InfoCollapse>
|
|
|
|
<InfoCollapse
|
|
title='Audit Logs'
|
|
icon={<AuditLogIcon />}
|
|
active={collapseState.auditLogs}
|
|
onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
|
|
collapseKey='auditLogs'
|
|
>
|
|
{objectFormState.loading ? (
|
|
<InfoCollapsePlaceholder />
|
|
) : (
|
|
<ObjectTable
|
|
type='auditLog'
|
|
masterFilter={{
|
|
parent:
|
|
getModelByName('printerProfile').prefix +
|
|
':' +
|
|
printerProfileId
|
|
}}
|
|
visibleColumns={{ _id: false, parent: false }}
|
|
/>
|
|
)}
|
|
</InfoCollapse>
|
|
</Flex>
|
|
</ScrollBox>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default PrinterProfileInfo
|