148 lines
4.4 KiB
JavaScript
148 lines
4.4 KiB
JavaScript
// SpotlightTooltip.js
|
|
import PropTypes from 'prop-types'
|
|
import { Descriptions, Card, Flex, Typography, Skeleton, Spin } from 'antd'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
import { useEffect, useState, useContext, useCallback } from 'react'
|
|
import { AuthContext } from '../context/AuthContext'
|
|
import ObjectProperty from './ObjectProperty'
|
|
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
|
|
import { ApiServerContext } from '../context/ApiServerContext'
|
|
|
|
const { Text } = Typography
|
|
|
|
const SpotlightTooltip = ({ query, type }) => {
|
|
const [spotlightData, setSpotlightData] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [initialized, setInitialized] = useState(false)
|
|
|
|
const { token } = useContext(AuthContext)
|
|
const { fetchSpotlightData } = useContext(ApiServerContext)
|
|
|
|
const fetchSpotlight = useCallback(async () => {
|
|
setLoading(true)
|
|
const data = await fetchSpotlightData(query)
|
|
setSpotlightData(data)
|
|
setLoading(false)
|
|
}, [query, fetchSpotlightData])
|
|
|
|
useEffect(() => {
|
|
if (token != null && initialized == false) {
|
|
fetchSpotlight()
|
|
console.log('Fetching spotlight...')
|
|
setInitialized(true)
|
|
}
|
|
}, [token, fetchSpotlight, initialized])
|
|
|
|
if (!spotlightData && !loading) {
|
|
return (
|
|
<Card className='spotlight-tooltip'>
|
|
<Flex
|
|
justify='center'
|
|
gap={'small'}
|
|
style={{ height: '100%', minWidth: '270px' }}
|
|
align='center'
|
|
>
|
|
<Text type='secondary'>
|
|
<InfoCircleIcon />
|
|
</Text>
|
|
<Text type='secondary'>No spotlight data.</Text>
|
|
</Flex>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// Helper to determine property type based on key and value
|
|
const getPropertyType = (key, value) => {
|
|
if (key === '_id') {
|
|
return 'id'
|
|
}
|
|
if (key === 'createdAt' || key === 'updatedAt') {
|
|
return 'dateTime'
|
|
}
|
|
if (typeof value === 'boolean') {
|
|
return 'bool'
|
|
}
|
|
return key
|
|
}
|
|
|
|
// Map of property names to user-friendly labels
|
|
const LABEL_MAP = {
|
|
name: 'Name',
|
|
state: 'State',
|
|
tags: 'Tags',
|
|
email: 'Email',
|
|
updatedAt: 'Updated At',
|
|
_id: 'ID'
|
|
// Add more mappings as needed
|
|
}
|
|
|
|
return (
|
|
<div className='spotlight-tooltip'>
|
|
<Spin indicator={<LoadingOutlined />} spinning={loading}>
|
|
<Descriptions bordered column={1} size='small'>
|
|
{loading ? (
|
|
<>
|
|
<Descriptions.Item
|
|
label={
|
|
<Skeleton.Input active size='small' style={{ width: 80 }} />
|
|
}
|
|
>
|
|
<Skeleton.Input active size='small' style={{ width: 120 }} />
|
|
</Descriptions.Item>
|
|
<Descriptions.Item
|
|
label={
|
|
<Skeleton.Input active size='small' style={{ width: 80 }} />
|
|
}
|
|
>
|
|
<Skeleton.Input active size='small' style={{ width: 120 }} />
|
|
</Descriptions.Item>
|
|
<Descriptions.Item
|
|
label={
|
|
<Skeleton.Input active size='small' style={{ width: 80 }} />
|
|
}
|
|
>
|
|
<Skeleton.Input active size='small' style={{ width: 120 }} />
|
|
</Descriptions.Item>
|
|
</>
|
|
) : (
|
|
Object.entries(spotlightData).map(([key, value]) =>
|
|
value !== undefined &&
|
|
value !== null &&
|
|
value !== '' &&
|
|
key !== 'objectType' ? (
|
|
<Descriptions.Item
|
|
key={key}
|
|
label={
|
|
LABEL_MAP[key] || key.charAt(0).toUpperCase() + key.slice(1)
|
|
}
|
|
>
|
|
<ObjectProperty
|
|
type={getPropertyType(key)}
|
|
value={value}
|
|
objectData={spotlightData}
|
|
objectType={type}
|
|
isEditing={false}
|
|
longId={false}
|
|
showSpotlight={false}
|
|
showLabel={false}
|
|
showName={false}
|
|
showId={false}
|
|
showQuantity={false}
|
|
/>
|
|
</Descriptions.Item>
|
|
) : null
|
|
)
|
|
)}
|
|
</Descriptions>
|
|
</Spin>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
SpotlightTooltip.propTypes = {
|
|
query: PropTypes.string.isRequired,
|
|
type: PropTypes.string.isRequired
|
|
}
|
|
|
|
export default SpotlightTooltip
|