From 9a406bb7df8c46edf709ad33234f3d0523b88a42 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 18 Aug 2025 01:03:17 +0100
Subject: [PATCH] Add ObjectTypeDisplay and ObjectTypeSelect components for
 enhanced object type management

- Introduced ObjectTypeDisplay component to visually represent object types with optional icons and labels.
- Created ObjectTypeSelect component to allow users to select object types from a dropdown, utilizing ObjectTypeDisplay for rendering options.
- Implemented prop types for both components to ensure proper type checking and documentation clarity.
---
 .../Dashboard/common/ObjectTypeDisplay.jsx    | 47 ++++++++++++++++
 .../Dashboard/common/ObjectTypeSelect.jsx     | 56 +++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 src/components/Dashboard/common/ObjectTypeDisplay.jsx
 create mode 100644 src/components/Dashboard/common/ObjectTypeSelect.jsx

diff --git a/src/components/Dashboard/common/ObjectTypeDisplay.jsx b/src/components/Dashboard/common/ObjectTypeDisplay.jsx
new file mode 100644
index 0000000..0dc0bda
--- /dev/null
+++ b/src/components/Dashboard/common/ObjectTypeDisplay.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Tag, Typography } from 'antd'
+import { getModelByName } from '../../../database/ObjectModels'
+
+const { Text } = Typography
+
+const ObjectTypeDisplay = ({
+  objectType,
+  showIcon = true,
+  showLabel = true,
+  style,
+  color = 'default'
+}) => {
+  if (!objectType) {
+    return <Text type='secondary'>n/a</Text>
+  }
+
+  const model = getModelByName(objectType)
+
+  if (!model || model.name === 'unknown') {
+    return <Text type='secondary'>Unknown type</Text>
+  }
+
+  const Icon = model.icon
+
+  return (
+    <Tag
+      color={color}
+      style={{ margin: 0, ...style }}
+      icon={showIcon && Icon ? <Icon /> : undefined}
+    >
+      {showLabel && model.label && model.label}
+    </Tag>
+  )
+}
+
+ObjectTypeDisplay.propTypes = {
+  objectType: PropTypes.string,
+  showIcon: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  showPrefix: PropTypes.bool,
+  style: PropTypes.object,
+  color: PropTypes.string
+}
+
+export default ObjectTypeDisplay
diff --git a/src/components/Dashboard/common/ObjectTypeSelect.jsx b/src/components/Dashboard/common/ObjectTypeSelect.jsx
new file mode 100644
index 0000000..f5ed483
--- /dev/null
+++ b/src/components/Dashboard/common/ObjectTypeSelect.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { Select } from 'antd'
+import PropTypes from 'prop-types'
+import { objectModels } from '../../../database/ObjectModels'
+import ObjectTypeDisplay from './ObjectTypeDisplay'
+
+const ObjectTypeSelect = ({
+  value,
+  onChange,
+  style,
+  placeholder = 'Select object type...',
+  showSearch = true,
+  allowClear = true,
+  disabled = false
+}) => {
+  // Create options from object models
+  const options = objectModels
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .map((model) => ({
+      value: model.name,
+      label: <ObjectTypeDisplay objectType={model.name} />
+    }))
+
+  console.log('VALUE', value)
+
+  return (
+    <Select
+      showSearch={showSearch}
+      style={{ width: '100%', ...style }}
+      placeholder={placeholder}
+      optionFilterProp='children'
+      value={value}
+      onChange={onChange}
+      allowClear={allowClear}
+      disabled={disabled}
+      filterOption={(input, option) =>
+        option.label.props.children[1].props.children
+          .toLowerCase()
+          .indexOf(input.toLowerCase()) >= 0
+      }
+      options={options}
+    />
+  )
+}
+
+ObjectTypeSelect.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  style: PropTypes.object,
+  placeholder: PropTypes.string,
+  showSearch: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  disabled: PropTypes.bool
+}
+
+export default ObjectTypeSelect