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

Refactor object form.

Browse Source
This commit is contained in:
Tom Butcher 2025-08-31 21:29:46 +01:00
parent 4d01a6a04f
commit aee3370b6d
21 changed files with 581 additions and 663 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
View File

@ -20,7 +20,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder'
const FilamentStockInfo = () => { const FilamentStockInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const filamentStockId = new URLSearchParams(location.search).get( const filamentStockId = new URLSearchParams(location.search).get(
'filamentStockId' 'filamentStockId'
@ -34,7 +34,7 @@ const FilamentStockInfo = () => {
auditLogs: true auditLogs: true
} }
) )
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -44,19 +44,19 @@ const FilamentStockInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.fetchObject?.() objectFormRef?.current?.fetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
} }
} }
@ -74,10 +74,10 @@ const FilamentStockInfo = () => {
<ObjectActions <ObjectActions
type='filamentStock' type='filamentStock'
id={filamentStockId} id={filamentStockId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Filament Stock Information' }, { key: 'info', label: 'Filament Stock Information' },
{ key: 'events', label: 'Filament Stock Events' }, { key: 'events', label: 'Filament Stock Events' },
@ -88,11 +88,11 @@ const FilamentStockInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -102,10 +102,10 @@ const FilamentStockInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -113,7 +113,7 @@ const FilamentStockInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -127,7 +127,7 @@ const FilamentStockInfo = () => {
id={filamentStockId} id={filamentStockId}
type='filamentStock' type='filamentStock'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -150,7 +150,7 @@ const FilamentStockInfo = () => {
onToggle={(expanded) => updateCollapseState('events', expanded)} onToggle={(expanded) => updateCollapseState('events', expanded)}
collapseKey='events' collapseKey='events'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable
@ -180,7 +180,7 @@ const FilamentStockInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

34
src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
View File

@ -25,7 +25,7 @@ log.setLevel(config.logLevel)
const DocumentSizeInfo = () => { const DocumentSizeInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const documentSizeId = new URLSearchParams(location.search).get( const documentSizeId = new URLSearchParams(location.search).get(
'documentSizeId' 'documentSizeId'
@ -38,7 +38,7 @@ const DocumentSizeInfo = () => {
auditLogs: true auditLogs: true
} }
) )
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -48,19 +48,19 @@ const DocumentSizeInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.fetchObject?.() objectFormRef?.current?.fetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
} }
} }
@ -78,10 +78,10 @@ const DocumentSizeInfo = () => {
<ObjectActions <ObjectActions
type='documentSize' type='documentSize'
id={documentSizeId} id={documentSizeId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Document Size Information' }, { key: 'info', label: 'Document Size Information' },
{ key: 'notes', label: 'Notes' }, { key: 'notes', label: 'Notes' },
@ -91,11 +91,11 @@ const DocumentSizeInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -105,10 +105,10 @@ const DocumentSizeInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -116,7 +116,7 @@ const DocumentSizeInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -130,7 +130,7 @@ const DocumentSizeInfo = () => {
id={documentSizeId} id={documentSizeId}
type='documentSize' type='documentSize'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -167,7 +167,7 @@ const DocumentSizeInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

32
src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
View File

@ -21,7 +21,7 @@ log.setLevel(config.logLevel)
const DocumentTemplateDesign = () => { const DocumentTemplateDesign = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const documentTemplateId = new URLSearchParams(location.search).get( const documentTemplateId = new URLSearchParams(location.search).get(
'documentTemplateId' 'documentTemplateId'
@ -36,7 +36,7 @@ const DocumentTemplateDesign = () => {
} }
) )
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -46,19 +46,19 @@ const DocumentTemplateDesign = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current.handleFetchObject() objectFormRef?.current.handleFetchObject()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current.startEditing() objectFormRef?.current.startEditing()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current.cancelEditing() objectFormRef?.current.cancelEditing()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current.handleUpdate() objectFormRef?.current.handleUpdate()
return true return true
} }
} }
@ -78,11 +78,11 @@ const DocumentTemplateDesign = () => {
<ObjectActions <ObjectActions
type='documentTemplate' type='documentTemplate'
id={documentTemplateId} id={documentTemplateId}
disabled={editFormState.loading} disabled={objectFormState.loading}
visibleActions={{ edit: false }} visibleActions={{ edit: false }}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ {
key: 'preview', key: 'preview',
@ -99,11 +99,11 @@ const DocumentTemplateDesign = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -113,10 +113,10 @@ const DocumentTemplateDesign = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -125,14 +125,14 @@ const DocumentTemplateDesign = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<ObjectForm <ObjectForm
id={documentTemplateId} id={documentTemplateId}
type='documentTemplate' type='documentTemplate'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
console.log('Got edit form state change', state) console.log('Got edit form state change', state)
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))

34
src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
View File

@ -25,7 +25,7 @@ log.setLevel(config.logLevel)
const DocumentTemplateInfo = () => { const DocumentTemplateInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const documentTemplateId = new URLSearchParams(location.search).get( const documentTemplateId = new URLSearchParams(location.search).get(
'documentTemplateId' 'documentTemplateId'
@ -40,7 +40,7 @@ const DocumentTemplateInfo = () => {
} }
) )
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -50,19 +50,19 @@ const DocumentTemplateInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current.handleFetchObject() objectFormRef?.current.handleFetchObject()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current.startEditing() objectFormRef?.current.startEditing()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current.cancelEditing() objectFormRef?.current.cancelEditing()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current.handleUpdate() objectFormRef?.current.handleUpdate()
return true return true
} }
} }
@ -83,10 +83,10 @@ const DocumentTemplateInfo = () => {
<ObjectActions <ObjectActions
type='documentTemplate' type='documentTemplate'
id={documentTemplateId} id={documentTemplateId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'DocumentTemplate Information' }, { key: 'info', label: 'DocumentTemplate Information' },
{ key: 'notes', label: 'Notes' }, { key: 'notes', label: 'Notes' },
@ -96,11 +96,11 @@ const DocumentTemplateInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -110,10 +110,10 @@ const DocumentTemplateInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -122,7 +122,7 @@ const DocumentTemplateInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -136,7 +136,7 @@ const DocumentTemplateInfo = () => {
id={documentTemplateId} id={documentTemplateId}
type='documentTemplate' type='documentTemplate'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
console.log('Got edit form state change', state) console.log('Got edit form state change', state)
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
@ -182,7 +182,7 @@ const DocumentTemplateInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

36
src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
View File

@ -26,7 +26,7 @@ log.setLevel(config.logLevel)
const FilamentInfo = () => { const FilamentInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const filamentId = new URLSearchParams(location.search).get('filamentId') const filamentId = new URLSearchParams(location.search).get('filamentId')
const [collapseState, updateCollapseState] = useCollapseState( const [collapseState, updateCollapseState] = useCollapseState(
@ -39,7 +39,7 @@ const FilamentInfo = () => {
} }
) )
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -49,19 +49,19 @@ const FilamentInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.fetchObject?.() objectFormRef?.current?.fetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
} }
} }
@ -82,10 +82,10 @@ const FilamentInfo = () => {
<ObjectActions <ObjectActions
type='filament' type='filament'
id={filamentId} id={filamentId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Filament Information' }, { key: 'info', label: 'Filament Information' },
{ key: 'stocks', label: 'Filament Stocks' }, { key: 'stocks', label: 'Filament Stocks' },
@ -96,11 +96,11 @@ const FilamentInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -110,10 +110,10 @@ const FilamentInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -122,7 +122,7 @@ const FilamentInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -136,7 +136,7 @@ const FilamentInfo = () => {
id={filamentId} id={filamentId}
type='filament' type='filament'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -163,7 +163,7 @@ const FilamentInfo = () => {
onToggle={(expanded) => updateCollapseState('stocks', expanded)} onToggle={(expanded) => updateCollapseState('stocks', expanded)}
collapseKey='stocks' collapseKey='stocks'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable
@ -199,7 +199,7 @@ const FilamentInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

49
src/components/Dashboard/Management/Filaments/NewFilament.jsx
View File

@ -1,19 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'
import ObjectInfo from '../../common/ObjectInfo' import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm' import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons' import WizardView from '../../common/WizardView'
const { Title } = Typography
const NewFilament = ({ onOk }) => { const NewFilament = ({ onOk }) => {
const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<NewObjectForm type={'filament'}> <NewObjectForm type={'filament'}>
{({ handleSubmit, submitLoading, objectData, formValid }) => { {({ handleSubmit, submitLoading, objectData, formValid }) => {
@ -66,43 +56,16 @@ const NewFilament = ({ onOk }) => {
} }
] ]
return ( return (
<Flex gap='middle'> <WizardView
{!isMobile && ( steps={steps}
<div style={{ minWidth: '160px' }}> loading={submitLoading}
<Steps formValid={formValid}
current={currentStep} title='New Filament'
items={steps}
direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)}
{!isMobile && (
<Divider type='vertical' style={{ height: 'unset' }} />
)}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
<Title level={2} style={{ margin: 0 }}>
New Filament
</Title>
<div style={{ minHeight: '260px', marginBottom: 8 }}>
{steps[currentStep].content}
</div>
<NewObjectButtons
currentStep={currentStep}
totalSteps={steps.length}
onPrevious={() => setCurrentStep((prev) => prev - 1)}
onNext={() => setCurrentStep((prev) => prev + 1)}
onSubmit={() => { onSubmit={() => {
handleSubmit() handleSubmit()
onOk() onOk()
}} }}
formValid={formValid}
submitLoading={submitLoading}
/> />
</Flex>
</Flex>
) )
}} }}
</NewObjectForm> </NewObjectForm>

34
src/components/Dashboard/Management/Hosts/HostInfo.jsx
View File

@ -26,7 +26,7 @@ log.setLevel(config.logLevel)
const HostInfo = () => { const HostInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const hostId = new URLSearchParams(location.search).get('hostId') const hostId = new URLSearchParams(location.search).get('hostId')
const [collapseState, updateCollapseState] = useCollapseState('HostInfo', { const [collapseState, updateCollapseState] = useCollapseState('HostInfo', {
@ -37,7 +37,7 @@ const HostInfo = () => {
}) })
const [hostOTPOpen, setHostOTPOpen] = useState(false) const [hostOTPOpen, setHostOTPOpen] = useState(false)
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -47,7 +47,7 @@ const HostInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current.handleFetchObject() objectFormRef?.current.handleFetchObject()
return true return true
}, },
hostOTP: () => { hostOTP: () => {
@ -55,15 +55,15 @@ const HostInfo = () => {
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current.startEditing() objectFormRef?.current.startEditing()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current.cancelEditing() objectFormRef?.current.cancelEditing()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current.handleUpdate() objectFormRef?.current.handleUpdate()
return true return true
} }
} }
@ -84,10 +84,10 @@ const HostInfo = () => {
<ObjectActions <ObjectActions
type='host' type='host'
id={hostId} id={hostId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Host Information' }, { key: 'info', label: 'Host Information' },
{ key: 'notes', label: 'Notes' }, { key: 'notes', label: 'Notes' },
@ -97,11 +97,11 @@ const HostInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -111,10 +111,10 @@ const HostInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -123,7 +123,7 @@ const HostInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -137,7 +137,7 @@ const HostInfo = () => {
id={hostId} id={hostId}
type='host' type='host'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
console.log('Got edit form state change', state) console.log('Got edit form state change', state)
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
@ -179,7 +179,7 @@ const HostInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

301
src/components/Dashboard/Management/Materials/NewMaterial.jsx
View File

@ -1,279 +1,80 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState, useEffect } from 'react' import ObjectInfo from '../../common/ObjectInfo'
import axios from 'axios' import NewObjectForm from '../../common/NewObjectForm'
import { import WizardView from '../../common/WizardView'
Form,
Input,
Button,
message,
Select,
Flex,
Steps,
Divider,
Upload,
Descriptions
} from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import VendorSelect from '../../common/VendorSelect'
import config from '../../../../config' const NewMaterial = ({ onOk }) => {
return (
const initialNewMaterialForm = { <NewObjectForm type={'material'}>
name: '', {({ handleSubmit, submitLoading, objectData, formValid }) => {
vendor: { id: null, name: '' }, const steps = [
category: '',
image: null,
url: '',
barcode: ''
}
const NewMaterial = ({ onSuccess }) => {
const [messageApi, contextHolder] = message.useMessage()
const [newMaterialLoading, setNewMaterialLoading] = useState(false)
const [currentStep, setCurrentStep] = useState(0)
const [nextEnabled, setNextEnabled] = useState(false)
const [newMaterialForm] = Form.useForm()
const [newMaterialFormValues, setNewMaterialFormValues] = useState(
initialNewMaterialForm
)
const [imageList, setImageList] = useState([])
const newMaterialFormUpdateValues = Form.useWatch([], newMaterialForm)
useEffect(() => {
newMaterialForm
.validateFields({
validateOnly: true
})
.then(() => setNextEnabled(true))
.catch(() => setNextEnabled(false))
}, [newMaterialForm, newMaterialFormUpdateValues])
const summaryItems = [
{ {
key: 'name', title: 'Required',
label: 'Name', key: 'required',
children: newMaterialFormValues.name content: (
}, <ObjectInfo
{ type='material'
key: 'vendor', column={1}
label: 'Vendor', bordered={false}
children: newMaterialFormValues.vendor.name isEditing={true}
}, required={true}
{ objectData={objectData}
key: 'category',
label: 'Category',
children: newMaterialFormValues.category
},
{
key: 'image',
label: 'Image',
children: newMaterialFormValues.image && (
<img
src={newMaterialFormValues.image}
style={{ width: 128 }}
alt='Material'
/> />
) )
}, },
{ {
key: 'url', title: 'Optional',
label: 'URL', key: 'optional',
children: newMaterialFormValues.url
},
{
key: 'barcode',
label: 'Barcode',
children: newMaterialFormValues.barcode
}
]
const handleNewMaterial = async () => {
setNewMaterialLoading(true)
try {
await axios.post(
`${config.backendUrl}/materials`,
newMaterialFormValues,
{
withCredentials: true
}
)
messageApi.success('New material created successfully.')
onSuccess()
} catch (error) {
messageApi.error('Error creating new material: ' + error.message)
} finally {
setNewMaterialLoading(false)
}
}
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = (error) => reject(error)
})
}
const handleImageUpload = async ({ file, fileList }) => {
if (fileList.length === 0) {
setImageList(fileList)
newMaterialForm.setFieldsValue({ image: '' })
return
}
const base64 = await getBase64(file)
setNewMaterialFormValues((prevValues) => ({
...prevValues,
image: base64
}))
fileList[0].name = 'Material Image'
setImageList(fileList)
newMaterialForm.setFieldsValue({ image: base64 })
}
const steps = [
{
title: 'Details',
key: 'details',
content: ( content: (
<> <ObjectInfo
<Form.Item type='material'
label='Name' column={1}
name='name' bordered={false}
rules={[ isEditing={true}
{ required={false}
required: true, objectData={objectData}
message: 'Please enter a name.' />
}
]}
>
<Input />
</Form.Item>
<Form.Item
label='Vendor'
name='vendor'
rules={[
{
required: true,
message: 'Please select a vendor.'
}
]}
>
<VendorSelect />
</Form.Item>
<Form.Item
label='Category'
name='category'
rules={[{ required: true, message: 'Please select a category' }]}
>
<Select>
<Select.Option value='Raw Material'>Raw Material</Select.Option>
<Select.Option value='Component'>Component</Select.Option>
<Select.Option value='Consumable'>Consumable</Select.Option>
<Select.Option value='Tool'>Tool</Select.Option>
<Select.Option value='Packaging'>Packaging</Select.Option>
</Select>
</Form.Item>
</>
)
},
{
title: 'Additional Info',
key: 'additional',
content: (
<>
<Form.Item label='Image' name='image'>
<Upload
listType='picture'
maxCount={1}
fileList={imageList}
onChange={handleImageUpload}
beforeUpload={() => false}
>
<Button icon={<UploadOutlined />}>Upload Image</Button>
</Upload>
</Form.Item>
<Form.Item label='URL' name='url'>
<Input />
</Form.Item>
<Form.Item label='Barcode' name='barcode'>
<Input />
</Form.Item>
</>
) )
}, },
{ {
title: 'Summary', title: 'Summary',
key: 'summary', key: 'summary',
content: ( content: (
<> <ObjectInfo
<Descriptions type='material'
title='Material Details'
bordered
column={1} column={1}
items={summaryItems} bordered={false}
visibleProperties={{
_id: false,
createdAt: false,
updatedAt: false
}}
isEditing={false}
objectData={objectData}
/> />
</>
) )
} }
] ]
return ( return (
<> <WizardView
{contextHolder} steps={steps}
<Form loading={submitLoading}
form={newMaterialForm} formValid={formValid}
layout='vertical' title='New Material'
onValuesChange={(changedValues) => { onSubmit={() => {
setNewMaterialFormValues((prevValues) => ({ handleSubmit()
...prevValues, onOk()
...changedValues
}))
}} }}
>
<Steps
current={currentStep}
items={steps.map((item) => ({ title: item.title }))}
style={{ marginBottom: 24 }}
/> />
<div style={{ minHeight: 200 }}>{steps[currentStep].content}</div> )
<Divider /> }}
<Flex justify='space-between'> </NewObjectForm>
<Button
disabled={currentStep === 0}
onClick={() => setCurrentStep((prev) => prev - 1)}
>
Previous
</Button>
{currentStep < steps.length - 1 ? (
<Button
type='primary'
disabled={!nextEnabled}
onClick={() => setCurrentStep((prev) => prev + 1)}
>
Next
</Button>
) : (
<Button
type='primary'
loading={newMaterialLoading}
onClick={handleNewMaterial}
>
Create Material
</Button>
)}
</Flex>
</Form>
</>
) )
} }
NewMaterial.propTypes = { NewMaterial.propTypes = {
onSuccess: PropTypes.func.isRequired onOk: PropTypes.func.isRequired,
reset: PropTypes.bool
} }
export default NewMaterial export default NewMaterial

48
src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx
View File

@ -1,18 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'
import ObjectInfo from '../../common/ObjectInfo' import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm' import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons' import WizardView from '../../common/WizardView'
const { Title } = Typography
const NewNoteType = ({ onOk }) => { const NewNoteType = ({ onOk }) => {
const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<NewObjectForm <NewObjectForm
type={'noteType'} type={'noteType'}
@ -70,43 +61,16 @@ const NewNoteType = ({ onOk }) => {
} }
] ]
return ( return (
<Flex gap='middle'> <WizardView
{!isMobile && ( steps={steps}
<div style={{ minWidth: '160px' }}> loading={submitLoading}
<Steps formValid={formValid}
current={currentStep} title='New Note Type'
items={steps}
direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)}
{!isMobile && (
<Divider type='vertical' style={{ height: 'unset' }} />
)}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
<Title level={2} style={{ margin: 0 }}>
New Note Type
</Title>
<div style={{ minHeight: '260px', marginBottom: 8 }}>
{steps[currentStep].content}
</div>
<NewObjectButtons
currentStep={currentStep}
totalSteps={steps.length}
onPrevious={() => setCurrentStep((prev) => prev - 1)}
onNext={() => setCurrentStep((prev) => prev + 1)}
onSubmit={() => { onSubmit={() => {
handleSubmit() handleSubmit()
onOk() onOk()
}} }}
formValid={formValid}
submitLoading={submitLoading}
/> />
</Flex>
</Flex>
) )
}} }}
</NewObjectForm> </NewObjectForm>

34
src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
View File

@ -18,7 +18,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
const NoteTypeInfo = () => { const NoteTypeInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const noteTypeId = new URLSearchParams(location.search).get('noteTypeId') const noteTypeId = new URLSearchParams(location.search).get('noteTypeId')
const [collapseState, updateCollapseState] = useCollapseState( const [collapseState, updateCollapseState] = useCollapseState(
@ -28,7 +28,7 @@ const NoteTypeInfo = () => {
auditLogs: true auditLogs: true
} }
) )
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -38,19 +38,19 @@ const NoteTypeInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.fetchObject?.() objectFormRef?.current?.fetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
} }
} }
@ -68,10 +68,10 @@ const NoteTypeInfo = () => {
<ObjectActions <ObjectActions
type='noteType' type='noteType'
id={noteTypeId} id={noteTypeId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Note Type Information' }, { key: 'info', label: 'Note Type Information' },
{ key: 'auditLogs', label: 'Audit Logs' } { key: 'auditLogs', label: 'Audit Logs' }
@ -80,11 +80,11 @@ const NoteTypeInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -94,10 +94,10 @@ const NoteTypeInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -105,7 +105,7 @@ const NoteTypeInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -119,7 +119,7 @@ const NoteTypeInfo = () => {
id={noteTypeId} id={noteTypeId}
type='noteType' type='noteType'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -145,7 +145,7 @@ const NoteTypeInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

51
src/components/Dashboard/Management/Notes/NewNote.jsx Normal file
View File

@ -0,0 +1,51 @@
import PropTypes from 'prop-types'
import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm'
import WizardView from '../../common/WizardView'
const NewNote = ({ onOk, defaultValues = {} }) => {
return (
<NewObjectForm type={'note'} defaultValues={defaultValues}>
{({ handleSubmit, submitLoading, objectData, formValid }) => {
const steps = [
{
title: 'Required',
key: 'required',
content: (
<ObjectInfo
type='note'
column={1}
visibleProperties={{ 'parent._id': false }}
bordered={false}
isEditing={true}
required={true}
objectData={objectData}
/>
)
}
]
return (
<WizardView
steps={steps}
showSteps={false}
loading={submitLoading}
formValid={formValid}
title='New Note'
onSubmit={() => {
handleSubmit()
onOk()
}}
/>
)
}}
</NewObjectForm>
)
}
NewNote.propTypes = {
onOk: PropTypes.func.isRequired,
reset: PropTypes.bool,
defaultValues: PropTypes.object
}
export default NewNote

184
src/components/Dashboard/Management/Notes/NoteInfo.jsx Normal file
View File

@ -0,0 +1,184 @@
import { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd'
import loglevel from 'loglevel'
import config from '../../../../config'
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 InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
import ObjectForm from '../../common/ObjectForm'
import EditButtons from '../../common/EditButtons'
import LockIndicator from '../../common/LockIndicator.jsx'
import ActionHandler from '../../common/ActionHandler.jsx'
import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
const log = loglevel.getLogger('NoteInfo')
log.setLevel(config.logLevel)
const NoteInfo = () => {
const location = useLocation()
const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null)
const noteId = new URLSearchParams(location.search).get('noteId')
const [collapseState, updateCollapseState] = useCollapseState('NoteInfo', {
info: true,
notes: true,
auditLogs: true
})
const [objectFormState, setEditFormState] = useState({
isEditing: false,
editLoading: false,
formValid: false,
lock: null,
loading: false
})
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
},
delete: () => {
objectFormRef?.current?.handleDelete?.()
return true
}
}
return (
<>
<Flex
gap='large'
vertical='true'
style={{ maxHeight: '100%', minHeight: 0 }}
>
<Flex justify={'space-between'}>
<Space size='middle'>
<Space size='small'>
<ObjectActions
type='note'
id={noteId}
disabled={objectFormState.loading}
/>
<ViewButton
disabled={objectFormState.loading}
items={[
{ key: 'info', label: 'Note Information' },
{ key: 'notes', label: 'Notes' },
{ key: 'auditLogs', label: 'Audit Logs' }
]}
visibleState={collapseState}
updateVisibleState={updateCollapseState}
/>
</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>
<div style={{ height: '100%', overflow: 'auto' }}>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
loading={objectFormState.loading}
ref={actionHandlerRef}
>
<InfoCollapse
title='Note Information'
icon={<InfoCircleIcon />}
active={collapseState.info}
onToggle={(expanded) => updateCollapseState('info', expanded)}
collapseKey='info'
>
<ObjectForm
id={noteId}
type='note'
style={{ height: '100%' }}
ref={objectFormRef}
onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state }))
}}
>
{({ loading, isEditing, objectData }) => (
<ObjectInfo
loading={loading}
isEditing={isEditing}
type='note'
objectData={objectData}
/>
)}
</ObjectForm>
</InfoCollapse>
</ActionHandler>
<InfoCollapse
title='Notes'
icon={<NoteIcon />}
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<NotesPanel _id={noteId} type='note' />
</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._id': noteId }}
visibleColumns={{ _id: false, 'parent._id': false }}
/>
)}
</InfoCollapse>
</Flex>
</div>
</Flex>
</>
)
}
export default NoteInfo

38
src/components/Dashboard/Management/Parts/PartInfo.jsx
View File

@ -20,7 +20,7 @@ import { ApiServerContext } from '../../context/ApiServerContext'
const PartInfo = () => { const PartInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const partId = new URLSearchParams(location.search).get('partId') const partId = new URLSearchParams(location.search).get('partId')
const { fetchObjectContent } = useContext(ApiServerContext) const { fetchObjectContent } = useContext(ApiServerContext)
@ -30,7 +30,7 @@ const PartInfo = () => {
notes: true, notes: true,
auditLogs: true auditLogs: true
}) })
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -40,24 +40,24 @@ const PartInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.fetchObject?.() objectFormRef?.current?.fetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
}, },
download: () => { download: () => {
if (partId && editFormRef?.current?.getObjectData) { if (partId && objectFormRef?.current?.getObjectData) {
const objectData = editFormRef.current.getObjectData() const objectData = objectFormRef.current.getObjectData()
fetchObjectContent(partId, 'part', `${objectData?.name || 'part'}.stl`) fetchObjectContent(partId, 'part', `${objectData?.name || 'part'}.stl`)
return true return true
} }
@ -77,10 +77,10 @@ const PartInfo = () => {
<ObjectActions <ObjectActions
type='part' type='part'
id={partId} id={partId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Part Information' }, { key: 'info', label: 'Part Information' },
{ key: 'notes', label: 'Notes' }, { key: 'notes', label: 'Notes' },
@ -90,11 +90,11 @@ const PartInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -104,10 +104,10 @@ const PartInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -115,7 +115,7 @@ const PartInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -129,7 +129,7 @@ const PartInfo = () => {
id={partId} id={partId}
type='part' type='part'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -165,7 +165,7 @@ const PartInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

11
src/components/Dashboard/Management/Products/NewProduct.jsx
View File

@ -21,7 +21,6 @@ import {
import { DeleteOutlined, EyeOutlined } from '@ant-design/icons' import { DeleteOutlined, EyeOutlined } from '@ant-design/icons'
import { AuthContext } from '../../context/AuthContext' import { AuthContext } from '../../context/AuthContext'
import PartIcon from '../../../Icons/PartIcon' import PartIcon from '../../../Icons/PartIcon'
import { StlViewer } from 'react-stl-viewer'
import VendorSelect from '../../common/VendorSelect' import VendorSelect from '../../common/VendorSelect'
import config from '../../../../config' import config from '../../../../config'
@ -482,15 +481,7 @@ const NewProduct = ({ onOk, reset }) => {
> >
<Flex style={{ minWidth: '100%', minHeight: '80vh' }}> <Flex style={{ minWidth: '100%', minHeight: '80vh' }}>
{previewFile && !isPreviewLoading ? ( {previewFile && !isPreviewLoading ? (
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}></div>
<StlViewer
url={fileUrls[previewFile.uid]}
orbitControls
shadows
style={{ height: '80vh', width: '100%' }}
modelProps={{ color: '#008675' }}
/>
</div>
) : ( ) : (
<div <div
style={{ style={{

34
src/components/Dashboard/Management/Products/ProductInfo.jsx
View File

@ -20,7 +20,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
const ProductInfo = () => { const ProductInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const productId = new URLSearchParams(location.search).get('productId') const productId = new URLSearchParams(location.search).get('productId')
const [collapseState, updateCollapseState] = useCollapseState('ProductInfo', { const [collapseState, updateCollapseState] = useCollapseState('ProductInfo', {
@ -29,7 +29,7 @@ const ProductInfo = () => {
notes: true, notes: true,
auditLogs: true auditLogs: true
}) })
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -39,19 +39,19 @@ const ProductInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.fetchObject?.() objectFormRef?.current?.fetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
} }
} }
@ -69,10 +69,10 @@ const ProductInfo = () => {
<ObjectActions <ObjectActions
type='product' type='product'
id={productId} id={productId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Product Information' }, { key: 'info', label: 'Product Information' },
{ key: 'parts', label: 'Product Parts' }, { key: 'parts', label: 'Product Parts' },
@ -83,11 +83,11 @@ const ProductInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -97,10 +97,10 @@ const ProductInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -108,7 +108,7 @@ const ProductInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -122,7 +122,7 @@ const ProductInfo = () => {
id={productId} id={productId}
type='product' type='product'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -174,7 +174,7 @@ const ProductInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

34
src/components/Dashboard/Management/Users/UserInfo.jsx
View File

@ -20,7 +20,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
const UserInfo = () => { const UserInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const userId = new URLSearchParams(location.search).get('userId') const userId = new URLSearchParams(location.search).get('userId')
const [collapseState, updateCollapseState] = useCollapseState('UserInfo', { const [collapseState, updateCollapseState] = useCollapseState('UserInfo', {
@ -28,7 +28,7 @@ const UserInfo = () => {
notes: true, notes: true,
auditLogs: true auditLogs: true
}) })
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -38,19 +38,19 @@ const UserInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.fetchObject?.() objectFormRef?.current?.fetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
} }
} }
@ -68,10 +68,10 @@ const UserInfo = () => {
<ObjectActions <ObjectActions
type='user' type='user'
id={userId} id={userId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'User Information' }, { key: 'info', label: 'User Information' },
{ key: 'notes', label: 'Notes' }, { key: 'notes', label: 'Notes' },
@ -81,11 +81,11 @@ const UserInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -95,10 +95,10 @@ const UserInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -106,7 +106,7 @@ const UserInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -120,7 +120,7 @@ const UserInfo = () => {
id={userId} id={userId}
type='user' type='user'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -157,7 +157,7 @@ const UserInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

48
src/components/Dashboard/Management/Vendors/NewVendor.jsx
View File

@ -1,18 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'
import ObjectInfo from '../../common/ObjectInfo' import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm' import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons' import WizardView from '../../common/WizardView'
const { Title } = Typography
const NewVendor = ({ onOk }) => { const NewVendor = ({ onOk }) => {
const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<NewObjectForm type={'vendor'}> <NewObjectForm type={'vendor'}>
{({ handleSubmit, submitLoading, objectData, formValid }) => { {({ handleSubmit, submitLoading, objectData, formValid }) => {
@ -65,43 +56,16 @@ const NewVendor = ({ onOk }) => {
} }
] ]
return ( return (
<Flex gap='middle'> <WizardView
{!isMobile && ( steps={steps}
<div style={{ minWidth: '160px' }}> loading={submitLoading}
<Steps formValid={formValid}
current={currentStep} title='New Vendor'
items={steps}
direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)}
{!isMobile && (
<Divider type='vertical' style={{ height: 'unset' }} />
)}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
<Title level={2} style={{ margin: 0 }}>
New Vendor
</Title>
<div style={{ minHeight: '260px', marginBottom: 8 }}>
{steps[currentStep].content}
</div>
<NewObjectButtons
currentStep={currentStep}
totalSteps={steps.length}
onPrevious={() => setCurrentStep((prev) => prev - 1)}
onNext={() => setCurrentStep((prev) => prev + 1)}
onSubmit={() => { onSubmit={() => {
handleSubmit() handleSubmit()
onOk() onOk()
}} }}
formValid={formValid}
submitLoading={submitLoading}
/> />
</Flex>
</Flex>
) )
}} }}
</NewObjectForm> </NewObjectForm>

36
src/components/Dashboard/Management/Vendors/VendorInfo.jsx
View File

@ -24,7 +24,7 @@ log.setLevel(config.logLevel)
const VendorInfo = () => { const VendorInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const vendorId = new URLSearchParams(location.search).get('vendorId') const vendorId = new URLSearchParams(location.search).get('vendorId')
const [collapseState, updateCollapseState] = useCollapseState('VendorInfo', { const [collapseState, updateCollapseState] = useCollapseState('VendorInfo', {
@ -32,7 +32,7 @@ const VendorInfo = () => {
notes: true, notes: true,
auditLogs: true auditLogs: true
}) })
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -42,23 +42,23 @@ const VendorInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current?.handleFetchObject?.() objectFormRef?.current?.handleFetchObject?.()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current?.startEditing?.() objectFormRef?.current?.startEditing?.()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current?.cancelEditing?.() objectFormRef?.current?.cancelEditing?.()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current?.handleUpdate?.() objectFormRef?.current?.handleUpdate?.()
return true return true
}, },
delete: () => { delete: () => {
editFormRef?.current?.handleDelete?.() objectFormRef?.current?.handleDelete?.()
return true return true
} }
} }
@ -76,10 +76,10 @@ const VendorInfo = () => {
<ObjectActions <ObjectActions
type='vendor' type='vendor'
id={vendorId} id={vendorId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Vendor Information' }, { key: 'info', label: 'Vendor Information' },
{ key: 'notes', label: 'Notes' }, { key: 'notes', label: 'Notes' },
@ -89,11 +89,11 @@ const VendorInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -103,10 +103,10 @@ const VendorInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -114,7 +114,7 @@ const VendorInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -128,7 +128,7 @@ const VendorInfo = () => {
id={vendorId} id={vendorId}
type='vendor' type='vendor'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -164,7 +164,7 @@ const VendorInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

34
src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
View File

@ -28,7 +28,7 @@ log.setLevel(config.logLevel)
const GCodeFileInfo = () => { const GCodeFileInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const gcodeFileId = new URLSearchParams(location.search).get('gcodeFileId') const gcodeFileId = new URLSearchParams(location.search).get('gcodeFileId')
const [collapseState, updateCollapseState] = useCollapseState( const [collapseState, updateCollapseState] = useCollapseState(
@ -41,7 +41,7 @@ const GCodeFileInfo = () => {
} }
) )
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -51,19 +51,19 @@ const GCodeFileInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current.handleFetchObject() objectFormRef?.current.handleFetchObject()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current.startEditing() objectFormRef?.current.startEditing()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current.cancelEditing() objectFormRef?.current.cancelEditing()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current.handleUpdate() objectFormRef?.current.handleUpdate()
return true return true
} }
} }
@ -84,10 +84,10 @@ const GCodeFileInfo = () => {
<ObjectActions <ObjectActions
type='gcodeFile' type='gcodeFile'
id={gcodeFileId} id={gcodeFileId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'GCode File Information' }, { key: 'info', label: 'GCode File Information' },
{ key: 'preview', label: 'GCode File Preview' }, { key: 'preview', label: 'GCode File Preview' },
@ -98,11 +98,11 @@ const GCodeFileInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -112,10 +112,10 @@ const GCodeFileInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -124,14 +124,14 @@ const GCodeFileInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<ObjectForm <ObjectForm
id={gcodeFileId} id={gcodeFileId}
type='gcodeFile' type='gcodeFile'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
console.log('Got edit form state change', state) console.log('Got edit form state change', state)
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
@ -206,7 +206,7 @@ const GCodeFileInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

34
src/components/Dashboard/Production/Jobs/JobInfo.jsx
View File

@ -26,7 +26,7 @@ log.setLevel(config.logLevel)
const JobInfo = () => { const JobInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null) const actionHandlerRef = useRef(null)
const jobId = new URLSearchParams(location.search).get('jobId') const jobId = new URLSearchParams(location.search).get('jobId')
const [collapseState, updateCollapseState] = useCollapseState('JobInfo', { const [collapseState, updateCollapseState] = useCollapseState('JobInfo', {
@ -36,7 +36,7 @@ const JobInfo = () => {
auditLogs: true auditLogs: true
}) })
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -46,19 +46,19 @@ const JobInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current.handleFetchObject() objectFormRef?.current.handleFetchObject()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current.startEditing() objectFormRef?.current.startEditing()
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current.cancelEditing() objectFormRef?.current.cancelEditing()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current.handleUpdate() objectFormRef?.current.handleUpdate()
return true return true
} }
} }
@ -79,10 +79,10 @@ const JobInfo = () => {
<ObjectActions <ObjectActions
type='job' type='job'
id={jobId} id={jobId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Job Information' }, { key: 'info', label: 'Job Information' },
{ key: 'subJobs', label: 'Sub Jobs' }, { key: 'subJobs', label: 'Sub Jobs' },
@ -93,11 +93,11 @@ const JobInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -107,10 +107,10 @@ const JobInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -119,7 +119,7 @@ const JobInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -133,7 +133,7 @@ const JobInfo = () => {
id={jobId} id={jobId}
type='job' type='job'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
}} }}
@ -186,7 +186,7 @@ const JobInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable

34
src/components/Dashboard/Production/Printers/PrinterInfo.jsx
View File

@ -25,7 +25,7 @@ log.setLevel(config.logLevel)
const PrinterInfo = () => { const PrinterInfo = () => {
const location = useLocation() const location = useLocation()
const editFormRef = useRef(null) const objectFormRef = useRef(null)
const actionHandlerRef = 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', {
@ -35,7 +35,7 @@ const PrinterInfo = () => {
auditLogs: true auditLogs: true
}) })
const [editFormState, setEditFormState] = useState({ const [objectFormState, setEditFormState] = useState({
isEditing: false, isEditing: false,
editLoading: false, editLoading: false,
formValid: false, formValid: false,
@ -45,20 +45,20 @@ const PrinterInfo = () => {
const actions = { const actions = {
reload: () => { reload: () => {
editFormRef?.current.handleFetchObject() objectFormRef?.current.handleFetchObject()
return true return true
}, },
edit: () => { edit: () => {
editFormRef?.current.startEditing() objectFormRef?.current.startEditing()
console.log('CALLING START EDITING') console.log('CALLING START EDITING')
return false return false
}, },
cancelEdit: () => { cancelEdit: () => {
editFormRef?.current.cancelEditing() objectFormRef?.current.cancelEditing()
return true return true
}, },
finishEdit: () => { finishEdit: () => {
editFormRef?.current.handleUpdate() objectFormRef?.current.handleUpdate()
return true return true
} }
} }
@ -79,10 +79,10 @@ const PrinterInfo = () => {
<ObjectActions <ObjectActions
type='printer' type='printer'
id={printerId} id={printerId}
disabled={editFormState.loading} disabled={objectFormState.loading}
/> />
<ViewButton <ViewButton
disabled={editFormState.loading} disabled={objectFormState.loading}
items={[ items={[
{ key: 'info', label: 'Printer Information' }, { key: 'info', label: 'Printer Information' },
{ key: 'notes', label: 'Notes' }, { key: 'notes', label: 'Notes' },
@ -92,11 +92,11 @@ const PrinterInfo = () => {
updateVisibleState={updateCollapseState} updateVisibleState={updateCollapseState}
/> />
</Space> </Space>
<LockIndicator lock={editFormState.lock} /> <LockIndicator lock={objectFormState.lock} />
</Space> </Space>
<Space> <Space>
<EditButtons <EditButtons
isEditing={editFormState.isEditing} isEditing={objectFormState.isEditing}
handleUpdate={() => { handleUpdate={() => {
actionHandlerRef.current.callAction('finishEdit') actionHandlerRef.current.callAction('finishEdit')
}} }}
@ -106,10 +106,10 @@ const PrinterInfo = () => {
startEditing={() => { startEditing={() => {
actionHandlerRef.current.callAction('edit') actionHandlerRef.current.callAction('edit')
}} }}
editLoading={editFormState.editLoading} editLoading={objectFormState.editLoading}
formValid={editFormState.formValid} formValid={objectFormState.formValid}
disabled={editFormState.lock?.locked || editFormState.loading} disabled={objectFormState.lock?.locked || objectFormState.loading}
loading={editFormState.editLoading} loading={objectFormState.editLoading}
/> />
</Space> </Space>
</Flex> </Flex>
@ -118,7 +118,7 @@ const PrinterInfo = () => {
<Flex vertical gap={'large'}> <Flex vertical gap={'large'}>
<ActionHandler <ActionHandler
actions={actions} actions={actions}
loading={editFormState.loading} loading={objectFormState.loading}
ref={actionHandlerRef} ref={actionHandlerRef}
> >
<InfoCollapse <InfoCollapse
@ -132,7 +132,7 @@ const PrinterInfo = () => {
id={printerId} id={printerId}
type='printer' type='printer'
style={{ height: '100%' }} style={{ height: '100%' }}
ref={editFormRef} ref={objectFormRef}
onStateChange={(state) => { onStateChange={(state) => {
console.log('Got edit form state change', state) console.log('Got edit form state change', state)
setEditFormState((prev) => ({ ...prev, ...state })) setEditFormState((prev) => ({ ...prev, ...state }))
@ -174,7 +174,7 @@ const PrinterInfo = () => {
} }
collapseKey='auditLogs' collapseKey='auditLogs'
> >
{editFormState.loading ? ( {objectFormState.loading ? (
<InfoCollapsePlaceholder /> <InfoCollapsePlaceholder />
) : ( ) : (
<ObjectTable <ObjectTable