225 lines
7.8 KiB
JavaScript
225 lines
7.8 KiB
JavaScript
import React, { useContext } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
import { Space, Flex, Card, Typography } from 'antd'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
import useCollapseState from '../../hooks/useCollapseState'
|
|
import NotesPanel from '../../common/NotesPanel'
|
|
import InfoCollapse from '../../common/InfoCollapse'
|
|
import ObjectInfo from '../../common/ObjectInfo'
|
|
import ViewButton from '../../common/ViewButton'
|
|
import EditObjectForm from '../../common/EditObjectForm'
|
|
import EditButtons from '../../common/EditButtons'
|
|
import LockIndicator from '../../Management/Filaments/LockIndicator'
|
|
import ActionHandler from '../../common/ActionHandler'
|
|
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
|
|
import NoteIcon from '../../../Icons/NoteIcon.jsx'
|
|
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
|
|
import GCodeFileIcon from '../../../Icons/GCodeFileIcon.jsx'
|
|
import { ApiServerContext } from '../../context/ApiServerContext'
|
|
import ObjectActions from '../../common/ObjectActions.jsx'
|
|
import ObjectTable from '../../common/ObjectTable.jsx'
|
|
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
|
|
|
|
const { Text } = Typography
|
|
|
|
const GCodeFileInfo = () => {
|
|
const location = useLocation()
|
|
const gcodeFileId = new URLSearchParams(location.search).get('gcodeFileId')
|
|
|
|
const { fetchObjectContent } = useContext(ApiServerContext)
|
|
const [collapseState, updateCollapseState] = useCollapseState(
|
|
'gcodeFileInfo',
|
|
{
|
|
info: true,
|
|
preview: true,
|
|
notes: true,
|
|
auditLogs: true
|
|
}
|
|
)
|
|
|
|
return (
|
|
<EditObjectForm
|
|
id={gcodeFileId}
|
|
type='gcodefile'
|
|
style={{ height: 'calc(var(--unit-100vh) - 155px)', minHeight: 0 }}
|
|
>
|
|
{({
|
|
loading,
|
|
isEditing,
|
|
startEditing,
|
|
cancelEditing,
|
|
handleUpdate,
|
|
formValid,
|
|
objectData,
|
|
editLoading,
|
|
lock,
|
|
fetchObject
|
|
}) => {
|
|
// Define actions that can be triggered via URL, now with access to startEditing
|
|
const actions = {
|
|
reload: () => {
|
|
fetchObject()
|
|
return true
|
|
},
|
|
edit: () => {
|
|
startEditing()
|
|
return false
|
|
},
|
|
cancelEdit: () => {
|
|
cancelEditing()
|
|
return true
|
|
},
|
|
finishEdit: () => {
|
|
handleUpdate()
|
|
return true
|
|
},
|
|
download: () => {
|
|
if (gcodeFileId) {
|
|
fetchObjectContent(
|
|
gcodeFileId,
|
|
'gcodeFile',
|
|
`${objectData.name}.gcode`
|
|
)
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ActionHandler actions={actions} loading={loading}>
|
|
{({ callAction }) => (
|
|
<Flex
|
|
gap='large'
|
|
vertical='true'
|
|
style={{ height: '100%', minHeight: 0 }}
|
|
>
|
|
<Flex justify={'space-between'}>
|
|
<Space size='middle'>
|
|
<Space size='small'>
|
|
<ObjectActions
|
|
type='gcodeFile'
|
|
id={gcodeFileId}
|
|
disabled={loading}
|
|
/>
|
|
<ViewButton
|
|
disabled={loading}
|
|
items={[
|
|
{ key: 'info', label: 'GCode File Information' },
|
|
{ key: 'preview', label: 'GCode File Preview' },
|
|
{ key: 'notes', label: 'Notes' },
|
|
{ key: 'auditLogs', label: 'Audit Logs' }
|
|
]}
|
|
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='GCode File Information'
|
|
icon={<InfoCircleIcon />}
|
|
active={collapseState.info}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('info', expanded)
|
|
}
|
|
collapseKey='info'
|
|
>
|
|
<ObjectInfo
|
|
loading={loading}
|
|
indicator={<LoadingOutlined />}
|
|
isEditing={isEditing}
|
|
objectData={objectData}
|
|
type='gcodeFile'
|
|
/>
|
|
</InfoCollapse>
|
|
|
|
<InfoCollapse
|
|
title='GCode File Preview'
|
|
icon={<GCodeFileIcon />}
|
|
active={collapseState.preview}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('preview', expanded)
|
|
}
|
|
collapseKey='preview'
|
|
>
|
|
<Card>
|
|
{objectData?.gcodeFileInfo?.thumbnail ? (
|
|
<img
|
|
src={`data:image/png;base64,${objectData.gcodeFileInfo.thumbnail.data}`}
|
|
alt='GCodeFile'
|
|
style={{ maxWidth: '100%' }}
|
|
/>
|
|
) : (
|
|
<Text>n/a</Text>
|
|
)}
|
|
</Card>
|
|
</InfoCollapse>
|
|
|
|
<InfoCollapse
|
|
title='Notes'
|
|
icon={<NoteIcon />}
|
|
active={collapseState.notes}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('notes', expanded)
|
|
}
|
|
collapseKey='notes'
|
|
>
|
|
<Card>
|
|
<NotesPanel _id={gcodeFileId} type='gcodeFile' />
|
|
</Card>
|
|
</InfoCollapse>
|
|
|
|
<InfoCollapse
|
|
title='Audit Logs'
|
|
icon={<AuditLogIcon />}
|
|
active={collapseState.auditLogs}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('auditLogs', expanded)
|
|
}
|
|
collapseKey='auditLogs'
|
|
>
|
|
{loading ? (
|
|
<InfoCollapsePlaceholder />
|
|
) : (
|
|
<ObjectTable
|
|
type='auditLog'
|
|
masterFilter={{ 'parent._id': gcodeFileId }}
|
|
visibleColumns={{ _id: false, 'parent._id': false }}
|
|
/>
|
|
)}
|
|
</InfoCollapse>
|
|
</Flex>
|
|
</div>
|
|
</Flex>
|
|
)}
|
|
</ActionHandler>
|
|
)
|
|
}}
|
|
</EditObjectForm>
|
|
)
|
|
}
|
|
|
|
export default GCodeFileInfo
|