Refactor ObjectProperty component and introduce StateDisplay

- Removed unused components (PrinterState, SubJobState, JobState, FilamentStockState). - Added new StateDisplay component for handling state representation. - Enhanced ObjectProperty to support new properties and rendering logic for code blocks and object types. - Updated import paths and prop types accordingly for improved clarity and functionality.
2025-08-18 00:58:10 +01:00 · 2025-08-18 00:58:10 +01:00 · a9a2801e27
commit a9a2801e27
parent a6a52fa81b
4 changed files with 83 additions and 207 deletions
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/src/components/Dashboard/common/ObjectProperty.jsx
@ -20,14 +20,10 @@ import CountrySelect from './CountrySelect'
 import TagsDisplay from './TagsDisplay'
 import TagsInput from './TagsInput'
 import BoolDisplay from './BoolDisplay'
-import PrinterState from './PrinterState'
-import SubJobState from './SubJobState'
-import JobState from './JobState'
 import ColorSelector from './ColorSelector'
 import SecretDisplay from './SecretDisplay'
 import EyeIcon from '../../Icons/EyeIcon'
 import EyeSlashIcon from '../../Icons/EyeSlashIcon'
-import FilamentStockState from './FilamentStockState'
 import { getPropertyValue } from '../../../database/ObjectModels'
 import PropertyChanges from './PropertyChanges'
 import NetGrossDisplay from './NetGrossDisplay'
@ -38,6 +34,10 @@ import OperationDisplay from './OperationDisplay'
 import MarkdownDisplay from './MarkdownDisplay'
 import ObjectSelect from './ObjectSelect'
 import ObjectDisplay from './ObjectDisplay'
+import ObjectTypeSelect from './ObjectTypeSelect'
+import ObjectTypeDisplay from './ObjectTypeDisplay'
+import CodeBlockEditor from './CodeBlockEditor'
+import StateDisplay from './StateDisplay'

 const { Text } = Typography

@ -65,11 +65,16 @@ const ObjectProperty = ({
  name,
  label,
  showLabel = false,
+  masterFilter = {},
+  language = '',
  objectData = null,
  objectType = 'unknown',
  readOnly = false,
  disabled = false,
+  empty = false,
  initial = false,
+  height = 'auto',
+  minimal = false,
  ...rest
 }) => {
  if (value && typeof value == 'function' && objectData) {
@ -84,6 +89,10 @@ const ObjectProperty = ({
    disabled = disabled(objectData)
  }

+  if (empty && typeof empty == 'function' && objectData) {
+    empty = empty(objectData)
+  }
+
  if (difference && typeof difference == 'function' && objectData) {
    difference = difference(objectData)
  }
@ -114,6 +123,9 @@ const ObjectProperty = ({
  }

  const renderProperty = () => {
+    if (empty == true) {
+      return <Text type='secondary'>n/a</Text>
+    }
    if (!isEditing || (readOnly && !initial)) {
      switch (type) {
        case 'netGross':
@ -256,6 +268,24 @@ const ObjectProperty = ({
              </Text>
            )
          }
+        case 'codeBlock':
+          if (value != null && value != '') {
+            return (
+              <CodeBlockEditor
+                code={value}
+                language={language}
+                height={height}
+                readOnly={true}
+                minimal={minimal}
+              />
+            )
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
        case 'markdown':
          if (value != null && value != '') {
            return <MarkdownDisplay content={value} />
@ -297,27 +327,23 @@ const ObjectProperty = ({
            )
          }
        }
+        case 'objectType': {
+          if (value) {
+            return <ObjectTypeDisplay objectType={value} />
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
+        }
        case 'objectList': {
          return <ObjectList value={value} objectType={objectType} />
        }
        case 'state': {
          if (value && value?.type) {
-            switch (objectType) {
-              case 'printer':
-                return <PrinterState state={value} {...rest} />
-              case 'job':
-                return <JobState state={value} {...rest} />
-              case 'subJob':
-                return <SubJobState state={value} {...rest} />
-              case 'filamentStock':
-                return <FilamentStockState state={value} {...rest} />
-              default:
-                return (
-                  <Text type='secondary' {...textParams}>
-                    No Object Type Specified
-                  </Text>
-                )
-            }
+            return <StateDisplay {...rest} state={value} />
          } else {
            return (
              <Text type='secondary' {...textParams}>
@ -566,6 +592,18 @@ const ObjectProperty = ({
            />
          </Form.Item>
        )
+      case 'codeBlock':
+        return (
+          <Form.Item name={formItemName} {...mergedFormItemProps}>
+            <CodeBlockEditor
+              code={value}
+              language={language}
+              disabled={disabled}
+              height={height}
+              minimal={minimal}
+            />
+          </Form.Item>
+        )
      case 'material':
        return (
          <Form.Item name={formItemName} {...mergedFormItemProps}>
@ -590,13 +628,23 @@ const ObjectProperty = ({
      case 'object':
        return (
          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <ObjectSelect type={objectType} />
+            <ObjectSelect
+              type={objectType}
+              disabled={disabled}
+              masterFilter={masterFilter}
+            />
+          </Form.Item>
+        )
+      case 'objectType':
+        return (
+          <Form.Item name={formItemName} {...mergedFormItemProps}>
+            <ObjectTypeSelect disabled={disabled} />
          </Form.Item>
        )
      case 'objectList':
        return (
          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <ObjectSelect type={objectType} multiple />
+            <ObjectSelect type={objectType} multiple disabled={disabled} />
          </Form.Item>
        )
      case 'tags':
@ -624,8 +672,10 @@ ObjectProperty.propTypes = {
  value: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
  isEditing: PropTypes.bool,
  formItemProps: PropTypes.object,
+  masterFilter: PropTypes.object,
  required: PropTypes.bool,
  name: PropTypes.string,
+  language: PropTypes.string,
  prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  min: PropTypes.number,
@ -635,8 +685,10 @@ ObjectProperty.propTypes = {
  objectType: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  readOnly: PropTypes.bool,
  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  empty: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  difference: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
-  objectData: PropTypes.object
+  objectData: PropTypes.object,
+  height: PropTypes.string
 }

 export default ObjectProperty
--- a/src/components/Dashboard/common/StateDisplay.jsx
+++ b/src/components/Dashboard/common/StateDisplay.jsx
@ -4,7 +4,7 @@ import { Progress, Flex, Space } from 'antd'
 import React from 'react'
 import StateTag from './StateTag'

-const PrinterState = ({ state, showProgress = true, showState = true }) => {
+const StateDisplay = ({ state, showProgress = true, showState = true }) => {
  const currentState = state || {
    type: 'unknown',
    progress: 0
@ -17,9 +17,7 @@ const PrinterState = ({ state, showProgress = true, showState = true }) => {
          <StateTag state={currentState.type} />
        </Space>
      )}
-      {showProgress &&
-      (currentState.type === 'printing' ||
-        currentState.type === 'deploying') ? (
+      {showProgress && currentState?.progress && currentState?.progress > 0 ? (
        <Progress
          percent={Math.round(currentState.progress * 100)}
          status='active'
@ -30,10 +28,10 @@ const PrinterState = ({ state, showProgress = true, showState = true }) => {
  )
 }

-PrinterState.propTypes = {
+StateDisplay.propTypes = {
  state: PropTypes.object,
  showProgress: PropTypes.bool,
  showState: PropTypes.bool
 }

-export default PrinterState
+export default StateDisplay
--- a/src/components/Dashboard/common/SubJobState.jsx
+++ b/src/components/Dashboard/common/SubJobState.jsx
@ -1,147 +0,0 @@
-import PropTypes from 'prop-types'
-import { Progress, Flex, Button, Space, Tooltip } from 'antd' // eslint-disable-line
-import { CaretLeftOutlined } from '@ant-design/icons' // eslint-disable-line
-import React, { useContext } from 'react'
-import { PrintServerContext } from '../context/PrintServerContext'
-import IdDisplay from './IdDisplay'
-import StateTag from './StateTag'
-import XMarkIcon from '../../Icons/XMarkIcon'
-import PauseIcon from '../../Icons/PauseIcon'
-import BinIcon from '../../Icons/BinIcon'
-import config from '../../../config'
-import loglevel from 'loglevel'
-const logger = loglevel.getLogger('SubJobState')
-logger.setLevel(config.logLevel)
-
-const SubJobState = ({
-  state,
-  showStatus = true,
-  showId = true,
-  showProgress = true,
-  showControls = true //eslint-disable-line
-}) => {
-  const { printServer } = useContext(PrintServerContext)
-  const currentState = state || {
-    type: 'unknown',
-    progress: 0
-  }
-  return (
-    <Flex gap='small' align={'center'}>
-      {showId && state?._id && (
-        <IdDisplay
-          id={state._id}
-          showCopy={false}
-          type='subjob'
-          longId={false}
-        />
-      )}
-      {showStatus && (
-        <Space>
-          <StateTag state={currentState?.type} />
-        </Space>
-      )}
-      {showProgress &&
-      (currentState.type === 'printing' ||
-        currentState.type === 'processing') ? (
-        <Progress
-          percent={Math.round(currentState.progress * 100)}
-          status='active'
-          style={{ width: '150px', marginBottom: '2px' }}
-        />
-      ) : null}
-      {showControls &&
-      (currentState.type === 'printing' || currentState.type === 'paused') &&
-      state?.printer ? (
-        <Space.Compact>
-          <Tooltip
-            title={currentState.type === 'printing' ? 'Pause' : 'Resume'}
-            arrow={false}
-          >
-            <Button
-              onClick={() => {
-                if (currentState.type === 'printing') {
-                  printServer.emit('printer.print.pause', {
-                    printerId: state.printer
-                  })
-                } else {
-                  printServer.emit('printer.print.resume', {
-                    printerId: state.printer
-                  })
-                }
-              }}
-              style={{ height: '22px' }}
-              type='text'
-              icon={
-                currentState.type === 'printing' ? (
-                  <PauseIcon
-                    style={{ fontSize: '12px', marginBottom: '3px' }}
-                  />
-                ) : (
-                  <CaretLeftOutlined
-                    style={{ fontSize: '10px', marginBottom: '3px' }}
-                  />
-                )
-              }
-            ></Button>
-          </Tooltip>
-          <Tooltip title='Cancel' arrow={false}>
-            <Button
-              onClick={() => {
-                printServer.emit('printer.print.cancel', {
-                  printerId: state.printer
-                })
-              }}
-              type='text'
-              style={{ height: '22px' }}
-              icon={
-                <XMarkIcon style={{ fontSize: '12px', marginBottom: '3px' }} />
-              }
-            />
-          </Tooltip>
-        </Space.Compact>
-      ) : null}
-      {showControls && currentState.type === 'queued' && state?._id ? (
-        <Tooltip title='Cancel' arrow={false}>
-          <Button
-            onClick={() => {
-              printServer.emit('server.job_queue.cancel', {
-                subJobId: state._id
-              })
-            }}
-            style={{ height: '22px' }}
-            type='text'
-            icon={
-              <XMarkIcon style={{ fontSize: '12px', marginBottom: '3px' }} />
-            }
-          />
-        </Tooltip>
-      ) : null}
-      {showControls && currentState.type === 'draft' ? (
-        <Space>
-          <Tooltip title='Delete' arrow={false}>
-            <Button
-              onClick={() => {
-                logger.debug('Hello')
-              }}
-              type='text'
-              style={{ height: 'unset' }}
-              icon={
-                <BinIcon style={{ fontSize: '14px', marginBottom: '2px' }} />
-              }
-            />
-          </Tooltip>
-        </Space>
-      ) : null}
-    </Flex>
-  )
-}
-
-SubJobState.propTypes = {
-  state: PropTypes.object,
-  showProgress: PropTypes.bool,
-  showControls: PropTypes.bool,
-  showId: PropTypes.bool,
-  showStatus: PropTypes.bool
-}
-
-export default SubJobState
--- a/src/components/Dashboard/context/SpotlightContext.js
+++ b/src/components/Dashboard/context/SpotlightContext.js
@ -14,8 +14,7 @@ import axios from 'axios'
 import { LoadingOutlined } from '@ant-design/icons'
 import PropTypes from 'prop-types'
 import { useNavigate } from 'react-router-dom'
-import PrinterState from '../common/PrinterState'
-import JobState from '../common/JobState'
+import StateDisplay from '../common/StateDisplay'
 import IdDisplay from '../common/IdDisplay'

 import config from '../../../config'
@ -24,8 +23,6 @@ import {
  getModelByPrefix
 } from '../../../database/ObjectModels'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
-import FilamentStockState from '../common/FilamentStockState'
-import SubJobState from '../common/SubJobState'

 const SpotlightContext = createContext()

@ -469,38 +466,14 @@ const SpotlightProvider = ({ children }) => {
                              {item.name}
                            </Text>
                          ) : null}
-                          {model.type == 'printer' ? (
-                            <PrinterState
-                              printer={item}
+                          {item?.state ? (
+                            <StateDisplay
+                              state={item.state}
                              showName={false}
                              showProgress={false}
                              showId={false}
                            />
                          ) : null}
-                          {model.type == 'job' ? (
-                            <JobState
-                              job={item}
-                              showQuantity={false}
-                              showProgress={false}
-                              showId={false}
-                            />
-                          ) : null}
-                          {model.type == 'subjob' ? (
-                            <SubJobState
-                              subJob={item}
-                              showProgress={false}
-                              showId={false}
-                            />
-                          ) : null}
-                          {model.type == 'filamentstock' ? (
-                            <Flex gap={'small'}>
-                              <FilamentStockState
-                                filamentStock={item}
-                                showId={false}
-                                showProgress={false}
-                              />
-                            </Flex>
-                          ) : null}
                          <IdDisplay id={item._id} type={type} longId={false} />
                        </Flex>
                        <Flex gap={'small'}>