Refactor PrinterInfo component for improved state management and UI consistency

- Updated the PrinterInfo component to utilize React hooks for managing edit form state and actions.
- Replaced the previous job-related collapsible sections with a unified audit logs section for better clarity.
- Enhanced the layout and structure of the component to improve user experience and maintainability.
- Updated imports to ensure consistency with file extensions and component organization.

src/components/Dashboard/Production/Printers/PrinterInfo.jsx

@@ -1,81 +1,77 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Space, Flex, Card } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
-import useCollapseState from '../../hooks/useCollapseState'
+import loglevel from 'loglevel'
-import NotesPanel from '../../common/NotesPanel'
+import config from '../../../../config.js'
-import InfoCollapse from '../../common/InfoCollapse'
+import useCollapseState from '../../hooks/useCollapseState.js'
-import ObjectInfo from '../../common/ObjectInfo'
+import NotesPanel from '../../common/NotesPanel.jsx'
-import ViewButton from '../../common/ViewButton'
+import InfoCollapse from '../../common/InfoCollapse.jsx'
-import EditObjectForm from '../../common/EditObjectForm'
+import ObjectInfo from '../../common/ObjectInfo.jsx'
-import EditButtons from '../../common/EditButtons'
+import ViewButton from '../../common/ViewButton.jsx'
-import LockIndicator from '../../common/LockIndicator.jsx'
-import PrinterJobsTree from '../../common/PrinterJobsTree'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
-import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
-import ActionHandler from '../../common/ActionHandler'
+import EditObjectForm from '../../common/EditObjectForm.jsx'
+import EditButtons from '../../common/EditButtons.jsx'
+import LockIndicator from '../../common/LockIndicator.jsx'
+import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 
+const log = loglevel.getLogger('PrinterInfo')
+log.setLevel(config.logLevel)
+
 const PrinterInfo = () => {
   const location = useLocation()
+  const editFormRef = useRef(null)
+  const actionHandlerRef = useRef(null)
   const printerId = new URLSearchParams(location.search).get('printerId')
   const [collapseState, updateCollapseState] = useCollapseState('PrinterInfo', {
     info: true,
-    jobs: true,
+    stocks: true,
     notes: true,
-    auditLogsParent: true,
+    auditLogs: true
-    auditLogsOwner: true
+  })
+
+  const [editFormState, setEditFormState] = useState({
+    isEditing: false,
+    editLoading: false,
+    formValid: false,
+    locked: false,
+    loading: false
   })
 
-  return (
-    <EditObjectForm
-      id={printerId}
-      type='printer'
-      style={{ height: 'calc(var(--unit-100vh) - 155px)', minHeight: 0 }}
-    >
-      {({
-        loading,
-        isEditing,
-        startEditing,
-        cancelEditing,
-        handleUpdate,
-        formValid,
-        objectData,
-        editLoading,
-        lock,
-        fetchObject
-      }) => {
-        // Define actions for ActionHandler
   const actions = {
     reload: () => {
-            fetchObject()
+      editFormRef?.current.handleFetchObject()
       return true
     },
     edit: () => {
-            startEditing()
+      editFormRef?.current.startEditing()
+      console.log('CALLING START EDITING')
       return false
     },
     cancelEdit: () => {
-            cancelEditing()
+      editFormRef?.current.cancelEditing()
       return true
     },
     finishEdit: () => {
-            handleUpdate()
+      editFormRef?.current.handleUpdate()
       return true
     }
   }
 
   return (
-          <ActionHandler actions={actions} loading={loading}>
+    <>
-            {({ callAction }) => (
       <Flex
         gap='large'
         vertical='true'
-                style={{ height: '100%', minHeight: 0 }}
+        style={{
+          height: 'calc(var(--unit-100vh) - 155px)',
+          minHeight: 0
+        }}
       >
         <Flex justify={'space-between'}>
           <Space size='middle'>
@@ -83,60 +79,67 @@ const PrinterInfo = () => {
               <ObjectActions
                 type='printer'
                 id={printerId}
-                        disabled={loading}
+                disabled={editFormState.loading}
               />
               <ViewButton
-                        disabled={loading}
+                disabled={editFormState.loading}
                 items={[
                   { key: 'info', label: 'Printer Information' },
-                          { key: 'jobs', label: 'Printer Jobs' },
                   { key: 'notes', label: 'Notes' },
-                          {
+                  { key: 'auditLogs', label: 'Audit Logs' }
-                            key: 'auditLogsParent',
-                            label: 'Audit Logs (By Parent)'
-                          },
-                          {
-                            key: 'auditLogsOwner',
-                            label: 'Audit Logs (By Owner)'
-                          }
                 ]}
                 visibleState={collapseState}
                 updateVisibleState={updateCollapseState}
               />
             </Space>
-                    <LockIndicator lock={lock} />
+            <LockIndicator lock={editFormState.lock} />
           </Space>
           <Space>
             <EditButtons
-                      isEditing={isEditing}
+              isEditing={editFormState.isEditing}
               handleUpdate={() => {
-                        callAction('finishEdit')
+                actionHandlerRef.current.callAction('finishEdit')
               }}
               cancelEditing={() => {
-                        callAction('cancelEdit')
+                actionHandlerRef.current.callAction('cancelEdit')
               }}
               startEditing={() => {
-                        callAction('edit')
+                actionHandlerRef.current.callAction('edit')
               }}
-                      editLoading={editLoading}
+              editLoading={editFormState.editLoading}
-                      formValid={formValid}
+              formValid={editFormState.formValid}
-                      disabled={lock?.locked || loading}
+              disabled={editFormState.lock?.locked || editFormState.loading}
-                      loading={editLoading}
+              loading={editFormState.editLoading}
             />
           </Space>
         </Flex>
 
-                <div style={{ height: '100%', overflow: 'auto' }}>
+        <div style={{ height: '100%', overflowY: 'scroll' }}>
           <Flex vertical gap={'large'}>
+            <ActionHandler
+              actions={actions}
+              loading={editFormState.loading}
+              ref={actionHandlerRef}
+            >
               <InfoCollapse
                 title='Printer Information'
                 icon={<InfoCircleIcon />}
                 active={collapseState.info}
-                      onToggle={(expanded) =>
+                onToggle={(expanded) => updateCollapseState('info', expanded)}
-                        updateCollapseState('info', expanded)
-                      }
                 collapseKey='info'
               >
+                <EditObjectForm
+                  id={printerId}
+                  type='printer'
+                  style={{ height: '100%' }}
+                  ref={editFormRef}
+                  onStateChange={(state) => {
+                    console.log('Got edit form state change', state)
+                    setEditFormState((prev) => ({ ...prev, ...state }))
+                  }}
+                >
+                  {({ loading, isEditing, objectData }) => {
+                    return (
                       <ObjectInfo
                         loading={loading}
                         indicator={<LoadingOutlined />}
@@ -144,30 +147,17 @@ const PrinterInfo = () => {
                         type='printer'
                         objectData={objectData}
                       />
+                    )
+                  }}
+                </EditObjectForm>
               </InfoCollapse>
-
+            </ActionHandler>
-                    <InfoCollapse
-                      title='Printer Jobs'
-                      icon={<PrinterIcon />}
-                      active={collapseState.jobs}
-                      onToggle={(expanded) =>
-                        updateCollapseState('jobs', expanded)
-                      }
-                      collapseKey='jobs'
-                    >
-                      <PrinterJobsTree
-                        subJobs={objectData?.subJobs}
-                        loading={loading}
-                      />
-                    </InfoCollapse>
 
             <InfoCollapse
               title='Notes'
               icon={<NoteIcon />}
               active={collapseState.notes}
-                      onToggle={(expanded) =>
+              onToggle={(expanded) => updateCollapseState('notes', expanded)}
-                        updateCollapseState('notes', expanded)
-                      }
               collapseKey='notes'
             >
               <Card>
@@ -176,15 +166,15 @@ const PrinterInfo = () => {
             </InfoCollapse>
 
             <InfoCollapse
-                      title='Audit Logs (By Parent)'
+              title='Audit Logs'
               icon={<AuditLogIcon />}
-                      active={collapseState.auditLogsParent}
+              active={collapseState.auditLogs}
               onToggle={(expanded) =>
-                        updateCollapseState('auditLogsParent', expanded)
+                updateCollapseState('auditLogs', expanded)
               }
               collapseKey='auditLogs'
             >
-                      {loading ? (
+              {editFormState.loading ? (
                 <InfoCollapsePlaceholder />
               ) : (
                 <ObjectTable
@@ -194,33 +184,10 @@ const PrinterInfo = () => {
                 />
               )}
             </InfoCollapse>
-                    <InfoCollapse
-                      title='Audit Logs (By Owner)'
-                      icon={<AuditLogIcon />}
-                      active={collapseState.auditLogsOwner}
-                      onToggle={(expanded) =>
-                        updateCollapseState('auditLogsOwner', expanded)
-                      }
-                      collapseKey='auditLogs'
-                    >
-                      {loading ? (
-                        <InfoCollapsePlaceholder />
-                      ) : (
-                        <ObjectTable
-                          type='auditLog'
-                          masterFilter={{ 'owner._id': printerId }}
-                          visibleColumns={{ _id: false, 'owner._id': false }}
-                        />
-                      )}
-                    </InfoCollapse>
           </Flex>
         </div>
       </Flex>
-            )}
+    </>
-          </ActionHandler>
-        )
-      }}
-    </EditObjectForm>
   )
 }