From aee3370b6de5d99578b6976313a92bfc8a7d510e Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Sun, 31 Aug 2025 21:29:46 +0100 Subject: [PATCH] Refactor object form. --- .../FilamentStocks/FilamentStockInfo.jsx | 36 +- .../DocumentSizes/DocumentSizeInfo.jsx | 34 +- .../DocumentTemplateDesign.jsx | 32 +- .../DocumentTemplateInfo.jsx | 34 +- .../Management/Filaments/FilamentInfo.jsx | 36 +- .../Management/Filaments/NewFilament.jsx | 59 +-- .../Dashboard/Management/Hosts/HostInfo.jsx | 34 +- .../Management/Materials/NewMaterial.jsx | 339 ++++-------------- .../Management/NoteTypes/NewNoteType.jsx | 58 +-- .../Management/NoteTypes/NoteTypeInfo.jsx | 34 +- .../Dashboard/Management/Notes/NewNote.jsx | 51 +++ .../Dashboard/Management/Notes/NoteInfo.jsx | 184 ++++++++++ .../Dashboard/Management/Parts/PartInfo.jsx | 38 +- .../Management/Products/NewProduct.jsx | 11 +- .../Management/Products/ProductInfo.jsx | 34 +- .../Dashboard/Management/Users/UserInfo.jsx | 34 +- .../Management/Vendors/NewVendor.jsx | 58 +-- .../Management/Vendors/VendorInfo.jsx | 36 +- .../Production/GCodeFiles/GCodeFileInfo.jsx | 34 +- .../Dashboard/Production/Jobs/JobInfo.jsx | 34 +- .../Production/Printers/PrinterInfo.jsx | 34 +- 21 files changed, 581 insertions(+), 663 deletions(-) create mode 100644 src/components/Dashboard/Management/Notes/NewNote.jsx create mode 100644 src/components/Dashboard/Management/Notes/NoteInfo.jsx diff --git a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx index 51853c7..a61b642 100644 --- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx +++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx @@ -20,7 +20,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder' const FilamentStockInfo = () => { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const filamentStockId = new URLSearchParams(location.search).get( 'filamentStockId' @@ -34,7 +34,7 @@ const FilamentStockInfo = () => { auditLogs: true } ) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -44,19 +44,19 @@ const FilamentStockInfo = () => { const actions = { reload: () => { - editFormRef?.current?.fetchObject?.() + objectFormRef?.current?.fetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true } } @@ -74,10 +74,10 @@ const FilamentStockInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -102,10 +102,10 @@ const FilamentStockInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -113,7 +113,7 @@ const FilamentStockInfo = () => { { id={filamentStockId} type='filamentStock' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -150,7 +150,7 @@ const FilamentStockInfo = () => { onToggle={(expanded) => updateCollapseState('events', expanded)} collapseKey='events' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const documentSizeId = new URLSearchParams(location.search).get( 'documentSizeId' @@ -38,7 +38,7 @@ const DocumentSizeInfo = () => { auditLogs: true } ) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -48,19 +48,19 @@ const DocumentSizeInfo = () => { const actions = { reload: () => { - editFormRef?.current?.fetchObject?.() + objectFormRef?.current?.fetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true } } @@ -78,10 +78,10 @@ const DocumentSizeInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -105,10 +105,10 @@ const DocumentSizeInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -116,7 +116,7 @@ const DocumentSizeInfo = () => { { id={documentSizeId} type='documentSize' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -167,7 +167,7 @@ const DocumentSizeInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const documentTemplateId = new URLSearchParams(location.search).get( 'documentTemplateId' @@ -36,7 +36,7 @@ const DocumentTemplateDesign = () => { } ) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -46,19 +46,19 @@ const DocumentTemplateDesign = () => { const actions = { reload: () => { - editFormRef?.current.handleFetchObject() + objectFormRef?.current.handleFetchObject() return true }, edit: () => { - editFormRef?.current.startEditing() + objectFormRef?.current.startEditing() return false }, cancelEdit: () => { - editFormRef?.current.cancelEditing() + objectFormRef?.current.cancelEditing() return true }, finishEdit: () => { - editFormRef?.current.handleUpdate() + objectFormRef?.current.handleUpdate() return true } } @@ -78,11 +78,11 @@ const DocumentTemplateDesign = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -113,10 +113,10 @@ const DocumentTemplateDesign = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -125,14 +125,14 @@ const DocumentTemplateDesign = () => { { console.log('Got edit form state change', state) setEditFormState((prev) => ({ ...prev, ...state })) diff --git a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx index acec110..f087f73 100644 --- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx +++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx @@ -25,7 +25,7 @@ log.setLevel(config.logLevel) const DocumentTemplateInfo = () => { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const documentTemplateId = new URLSearchParams(location.search).get( 'documentTemplateId' @@ -40,7 +40,7 @@ const DocumentTemplateInfo = () => { } ) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -50,19 +50,19 @@ const DocumentTemplateInfo = () => { const actions = { reload: () => { - editFormRef?.current.handleFetchObject() + objectFormRef?.current.handleFetchObject() return true }, edit: () => { - editFormRef?.current.startEditing() + objectFormRef?.current.startEditing() return false }, cancelEdit: () => { - editFormRef?.current.cancelEditing() + objectFormRef?.current.cancelEditing() return true }, finishEdit: () => { - editFormRef?.current.handleUpdate() + objectFormRef?.current.handleUpdate() return true } } @@ -83,10 +83,10 @@ const DocumentTemplateInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -110,10 +110,10 @@ const DocumentTemplateInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -122,7 +122,7 @@ const DocumentTemplateInfo = () => { { id={documentTemplateId} type='documentTemplate' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { console.log('Got edit form state change', state) setEditFormState((prev) => ({ ...prev, ...state })) @@ -182,7 +182,7 @@ const DocumentTemplateInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const filamentId = new URLSearchParams(location.search).get('filamentId') const [collapseState, updateCollapseState] = useCollapseState( @@ -39,7 +39,7 @@ const FilamentInfo = () => { } ) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -49,19 +49,19 @@ const FilamentInfo = () => { const actions = { reload: () => { - editFormRef?.current?.fetchObject?.() + objectFormRef?.current?.fetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true } } @@ -82,10 +82,10 @@ const FilamentInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -110,10 +110,10 @@ const FilamentInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -122,7 +122,7 @@ const FilamentInfo = () => { { id={filamentId} type='filament' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -163,7 +163,7 @@ const FilamentInfo = () => { onToggle={(expanded) => updateCollapseState('stocks', expanded)} collapseKey='stocks' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { - const [currentStep, setCurrentStep] = useState(0) - - const isMobile = useMediaQuery({ maxWidth: 768 }) - return ( {({ handleSubmit, submitLoading, objectData, formValid }) => { @@ -66,43 +56,16 @@ const NewFilament = ({ onOk }) => { } ] return ( - - {!isMobile && ( -
- -
- )} - - {!isMobile && ( - - )} - - - - New Filament - -
- {steps[currentStep].content} -
- setCurrentStep((prev) => prev - 1)} - onNext={() => setCurrentStep((prev) => prev + 1)} - onSubmit={() => { - handleSubmit() - onOk() - }} - formValid={formValid} - submitLoading={submitLoading} - /> - - + { + handleSubmit() + onOk() + }} + /> ) }} diff --git a/src/components/Dashboard/Management/Hosts/HostInfo.jsx b/src/components/Dashboard/Management/Hosts/HostInfo.jsx index b665c37..4a0c147 100644 --- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx +++ b/src/components/Dashboard/Management/Hosts/HostInfo.jsx @@ -26,7 +26,7 @@ log.setLevel(config.logLevel) const HostInfo = () => { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const hostId = new URLSearchParams(location.search).get('hostId') const [collapseState, updateCollapseState] = useCollapseState('HostInfo', { @@ -37,7 +37,7 @@ const HostInfo = () => { }) const [hostOTPOpen, setHostOTPOpen] = useState(false) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -47,7 +47,7 @@ const HostInfo = () => { const actions = { reload: () => { - editFormRef?.current.handleFetchObject() + objectFormRef?.current.handleFetchObject() return true }, hostOTP: () => { @@ -55,15 +55,15 @@ const HostInfo = () => { return true }, edit: () => { - editFormRef?.current.startEditing() + objectFormRef?.current.startEditing() return false }, cancelEdit: () => { - editFormRef?.current.cancelEditing() + objectFormRef?.current.cancelEditing() return true }, finishEdit: () => { - editFormRef?.current.handleUpdate() + objectFormRef?.current.handleUpdate() return true } } @@ -84,10 +84,10 @@ const HostInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -111,10 +111,10 @@ const HostInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -123,7 +123,7 @@ const HostInfo = () => { { id={hostId} type='host' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { console.log('Got edit form state change', state) setEditFormState((prev) => ({ ...prev, ...state })) @@ -179,7 +179,7 @@ const HostInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { - 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', - label: 'Name', - children: newMaterialFormValues.name - }, - { - key: 'vendor', - label: 'Vendor', - children: newMaterialFormValues.vendor.name - }, - { - key: 'category', - label: 'Category', - children: newMaterialFormValues.category - }, - { - key: 'image', - label: 'Image', - children: newMaterialFormValues.image && ( - Material - ) - }, - { - key: 'url', - label: 'URL', - 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: ( - <> - - - - - - - - - - - ) - }, - { - title: 'Additional Info', - key: 'additional', - content: ( - <> - - false} - > - - - - - - - - - - - ) - }, - { - title: 'Summary', - key: 'summary', - content: ( - <> - - - ) - } - ] +import ObjectInfo from '../../common/ObjectInfo' +import NewObjectForm from '../../common/NewObjectForm' +import WizardView from '../../common/WizardView' +const NewMaterial = ({ onOk }) => { return ( - <> - {contextHolder} -
{ - setNewMaterialFormValues((prevValues) => ({ - ...prevValues, - ...changedValues - })) - }} - > - ({ title: item.title }))} - style={{ marginBottom: 24 }} - /> -
{steps[currentStep].content}
- - - - {currentStep < steps.length - 1 ? ( - - ) : ( - - )} - - - + + {({ handleSubmit, submitLoading, objectData, formValid }) => { + const steps = [ + { + title: 'Required', + key: 'required', + content: ( + + ) + }, + { + title: 'Optional', + key: 'optional', + content: ( + + ) + }, + { + title: 'Summary', + key: 'summary', + content: ( + + ) + } + ] + return ( + { + handleSubmit() + onOk() + }} + /> + ) + }} + ) } NewMaterial.propTypes = { - onSuccess: PropTypes.func.isRequired + onOk: PropTypes.func.isRequired, + reset: PropTypes.bool } export default NewMaterial diff --git a/src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx b/src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx index dae63e9..670bb20 100644 --- a/src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx +++ b/src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx @@ -1,18 +1,9 @@ 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 NewObjectForm from '../../common/NewObjectForm' -import NewObjectButtons from '../../common/NewObjectButtons' - -const { Title } = Typography +import WizardView from '../../common/WizardView' const NewNoteType = ({ onOk }) => { - const [currentStep, setCurrentStep] = useState(0) - const isMobile = useMediaQuery({ maxWidth: 768 }) - return ( { } ] return ( - - {!isMobile && ( -
- -
- )} - - {!isMobile && ( - - )} - - - - New Note Type - -
- {steps[currentStep].content} -
- setCurrentStep((prev) => prev - 1)} - onNext={() => setCurrentStep((prev) => prev + 1)} - onSubmit={() => { - handleSubmit() - onOk() - }} - formValid={formValid} - submitLoading={submitLoading} - /> - - + { + handleSubmit() + onOk() + }} + /> ) }} diff --git a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx index c3fc45f..ac850c3 100644 --- a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx +++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx @@ -18,7 +18,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx' const NoteTypeInfo = () => { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const noteTypeId = new URLSearchParams(location.search).get('noteTypeId') const [collapseState, updateCollapseState] = useCollapseState( @@ -28,7 +28,7 @@ const NoteTypeInfo = () => { auditLogs: true } ) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -38,19 +38,19 @@ const NoteTypeInfo = () => { const actions = { reload: () => { - editFormRef?.current?.fetchObject?.() + objectFormRef?.current?.fetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true } } @@ -68,10 +68,10 @@ const NoteTypeInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -94,10 +94,10 @@ const NoteTypeInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} />
@@ -105,7 +105,7 @@ const NoteTypeInfo = () => { { id={noteTypeId} type='noteType' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -145,7 +145,7 @@ const NoteTypeInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { + return ( + + {({ handleSubmit, submitLoading, objectData, formValid }) => { + const steps = [ + { + title: 'Required', + key: 'required', + content: ( + + ) + } + ] + return ( + { + handleSubmit() + onOk() + }} + /> + ) + }} + + ) +} + +NewNote.propTypes = { + onOk: PropTypes.func.isRequired, + reset: PropTypes.bool, + defaultValues: PropTypes.object +} + +export default NewNote diff --git a/src/components/Dashboard/Management/Notes/NoteInfo.jsx b/src/components/Dashboard/Management/Notes/NoteInfo.jsx new file mode 100644 index 0000000..8481c18 --- /dev/null +++ b/src/components/Dashboard/Management/Notes/NoteInfo.jsx @@ -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 ( + <> + + + + + + + + + + + { + 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} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' + > + { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + + )} + + + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {objectFormState.loading ? ( + + ) : ( + + )} + + +
+ + + ) +} + +export default NoteInfo diff --git a/src/components/Dashboard/Management/Parts/PartInfo.jsx b/src/components/Dashboard/Management/Parts/PartInfo.jsx index 1554df0..f90130f 100644 --- a/src/components/Dashboard/Management/Parts/PartInfo.jsx +++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx @@ -20,7 +20,7 @@ import { ApiServerContext } from '../../context/ApiServerContext' const PartInfo = () => { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const partId = new URLSearchParams(location.search).get('partId') const { fetchObjectContent } = useContext(ApiServerContext) @@ -30,7 +30,7 @@ const PartInfo = () => { notes: true, auditLogs: true }) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -40,24 +40,24 @@ const PartInfo = () => { const actions = { reload: () => { - editFormRef?.current?.fetchObject?.() + objectFormRef?.current?.fetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true }, download: () => { - if (partId && editFormRef?.current?.getObjectData) { - const objectData = editFormRef.current.getObjectData() + if (partId && objectFormRef?.current?.getObjectData) { + const objectData = objectFormRef.current.getObjectData() fetchObjectContent(partId, 'part', `${objectData?.name || 'part'}.stl`) return true } @@ -77,10 +77,10 @@ const PartInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -104,10 +104,10 @@ const PartInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -115,7 +115,7 @@ const PartInfo = () => { { id={partId} type='part' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -165,7 +165,7 @@ const PartInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { > {previewFile && !isPreviewLoading ? ( -
- -
+
) : (
{ const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const productId = new URLSearchParams(location.search).get('productId') const [collapseState, updateCollapseState] = useCollapseState('ProductInfo', { @@ -29,7 +29,7 @@ const ProductInfo = () => { notes: true, auditLogs: true }) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -39,19 +39,19 @@ const ProductInfo = () => { const actions = { reload: () => { - editFormRef?.current?.fetchObject?.() + objectFormRef?.current?.fetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true } } @@ -69,10 +69,10 @@ const ProductInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -97,10 +97,10 @@ const ProductInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -108,7 +108,7 @@ const ProductInfo = () => { { id={productId} type='product' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -174,7 +174,7 @@ const ProductInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const userId = new URLSearchParams(location.search).get('userId') const [collapseState, updateCollapseState] = useCollapseState('UserInfo', { @@ -28,7 +28,7 @@ const UserInfo = () => { notes: true, auditLogs: true }) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -38,19 +38,19 @@ const UserInfo = () => { const actions = { reload: () => { - editFormRef?.current?.fetchObject?.() + objectFormRef?.current?.fetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true } } @@ -68,10 +68,10 @@ const UserInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -95,10 +95,10 @@ const UserInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -106,7 +106,7 @@ const UserInfo = () => { { id={userId} type='user' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -157,7 +157,7 @@ const UserInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { - const [currentStep, setCurrentStep] = useState(0) - const isMobile = useMediaQuery({ maxWidth: 768 }) - return ( {({ handleSubmit, submitLoading, objectData, formValid }) => { @@ -65,43 +56,16 @@ const NewVendor = ({ onOk }) => { } ] return ( - - {!isMobile && ( -
- -
- )} - - {!isMobile && ( - - )} - - - - New Vendor - -
- {steps[currentStep].content} -
- setCurrentStep((prev) => prev - 1)} - onNext={() => setCurrentStep((prev) => prev + 1)} - onSubmit={() => { - handleSubmit() - onOk() - }} - formValid={formValid} - submitLoading={submitLoading} - /> - - + { + handleSubmit() + onOk() + }} + /> ) }} diff --git a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx index c07ca8c..3b2eb56 100644 --- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx +++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx @@ -24,7 +24,7 @@ log.setLevel(config.logLevel) const VendorInfo = () => { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const vendorId = new URLSearchParams(location.search).get('vendorId') const [collapseState, updateCollapseState] = useCollapseState('VendorInfo', { @@ -32,7 +32,7 @@ const VendorInfo = () => { notes: true, auditLogs: true }) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -42,23 +42,23 @@ const VendorInfo = () => { const actions = { reload: () => { - editFormRef?.current?.handleFetchObject?.() + objectFormRef?.current?.handleFetchObject?.() return true }, edit: () => { - editFormRef?.current?.startEditing?.() + objectFormRef?.current?.startEditing?.() return false }, cancelEdit: () => { - editFormRef?.current?.cancelEditing?.() + objectFormRef?.current?.cancelEditing?.() return true }, finishEdit: () => { - editFormRef?.current?.handleUpdate?.() + objectFormRef?.current?.handleUpdate?.() return true }, delete: () => { - editFormRef?.current?.handleDelete?.() + objectFormRef?.current?.handleDelete?.() return true } } @@ -76,10 +76,10 @@ const VendorInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -103,10 +103,10 @@ const VendorInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -114,7 +114,7 @@ const VendorInfo = () => { { id={vendorId} type='vendor' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -164,7 +164,7 @@ const VendorInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const gcodeFileId = new URLSearchParams(location.search).get('gcodeFileId') const [collapseState, updateCollapseState] = useCollapseState( @@ -41,7 +41,7 @@ const GCodeFileInfo = () => { } ) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -51,19 +51,19 @@ const GCodeFileInfo = () => { const actions = { reload: () => { - editFormRef?.current.handleFetchObject() + objectFormRef?.current.handleFetchObject() return true }, edit: () => { - editFormRef?.current.startEditing() + objectFormRef?.current.startEditing() return false }, cancelEdit: () => { - editFormRef?.current.cancelEditing() + objectFormRef?.current.cancelEditing() return true }, finishEdit: () => { - editFormRef?.current.handleUpdate() + objectFormRef?.current.handleUpdate() return true } } @@ -84,10 +84,10 @@ const GCodeFileInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -112,10 +112,10 @@ const GCodeFileInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -124,14 +124,14 @@ const GCodeFileInfo = () => { { console.log('Got edit form state change', state) setEditFormState((prev) => ({ ...prev, ...state })) @@ -206,7 +206,7 @@ const GCodeFileInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const jobId = new URLSearchParams(location.search).get('jobId') const [collapseState, updateCollapseState] = useCollapseState('JobInfo', { @@ -36,7 +36,7 @@ const JobInfo = () => { auditLogs: true }) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -46,19 +46,19 @@ const JobInfo = () => { const actions = { reload: () => { - editFormRef?.current.handleFetchObject() + objectFormRef?.current.handleFetchObject() return true }, edit: () => { - editFormRef?.current.startEditing() + objectFormRef?.current.startEditing() return false }, cancelEdit: () => { - editFormRef?.current.cancelEditing() + objectFormRef?.current.cancelEditing() return true }, finishEdit: () => { - editFormRef?.current.handleUpdate() + objectFormRef?.current.handleUpdate() return true } } @@ -79,10 +79,10 @@ const JobInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -107,10 +107,10 @@ const JobInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -119,7 +119,7 @@ const JobInfo = () => { { id={jobId} type='job' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { setEditFormState((prev) => ({ ...prev, ...state })) }} @@ -186,7 +186,7 @@ const JobInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : ( { const location = useLocation() - const editFormRef = useRef(null) + const objectFormRef = useRef(null) const actionHandlerRef = useRef(null) const printerId = new URLSearchParams(location.search).get('printerId') const [collapseState, updateCollapseState] = useCollapseState('PrinterInfo', { @@ -35,7 +35,7 @@ const PrinterInfo = () => { auditLogs: true }) - const [editFormState, setEditFormState] = useState({ + const [objectFormState, setEditFormState] = useState({ isEditing: false, editLoading: false, formValid: false, @@ -45,20 +45,20 @@ const PrinterInfo = () => { const actions = { reload: () => { - editFormRef?.current.handleFetchObject() + objectFormRef?.current.handleFetchObject() return true }, edit: () => { - editFormRef?.current.startEditing() + objectFormRef?.current.startEditing() console.log('CALLING START EDITING') return false }, cancelEdit: () => { - editFormRef?.current.cancelEditing() + objectFormRef?.current.cancelEditing() return true }, finishEdit: () => { - editFormRef?.current.handleUpdate() + objectFormRef?.current.handleUpdate() return true } } @@ -79,10 +79,10 @@ const PrinterInfo = () => { { updateVisibleState={updateCollapseState} /> - + { actionHandlerRef.current.callAction('finishEdit') }} @@ -106,10 +106,10 @@ const PrinterInfo = () => { startEditing={() => { actionHandlerRef.current.callAction('edit') }} - editLoading={editFormState.editLoading} - formValid={editFormState.formValid} - disabled={editFormState.lock?.locked || editFormState.loading} - loading={editFormState.editLoading} + editLoading={objectFormState.editLoading} + formValid={objectFormState.formValid} + disabled={objectFormState.lock?.locked || objectFormState.loading} + loading={objectFormState.editLoading} /> @@ -118,7 +118,7 @@ const PrinterInfo = () => { { id={printerId} type='printer' style={{ height: '100%' }} - ref={editFormRef} + ref={objectFormRef} onStateChange={(state) => { console.log('Got edit form state change', state) setEditFormState((prev) => ({ ...prev, ...state })) @@ -174,7 +174,7 @@ const PrinterInfo = () => { } collapseKey='auditLogs' > - {editFormState.loading ? ( + {objectFormState.loading ? ( ) : (