Compare commits

..

3 Commits

Author SHA1 Message Date
e730e2c832 Update columnWidth properties across multiple models for consistency
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Increased the columnWidth from 250 or 120 to 260 in various models including DocumentJob, DocumentPrinter, FilamentStock, Host, Invoice, Job, and others.
- This change ensures a uniform width for better alignment and presentation in the UI.
2026-07-26 20:03:00 +01:00
084d807c95 Enhance SpotlightTooltip component with model property integration
- Added the getModelProperty function to SpotlightTooltip for improved property handling.
- Updated ObjectProperty component to utilize dynamic properties based on the model type, enhancing flexibility in data representation.
2026-07-26 20:02:51 +01:00
8319d3d7b3 Enhance ObjectDisplay and StateTag components for improved state representation
- Integrated StateTag into ObjectDisplay to display the object's state conditionally.
- Updated gap handling in ObjectDisplay to account for both color and state properties.
- Modified StateTag to include a new 'showTag' prop for conditional rendering of the tag, enhancing flexibility in state display.
2026-07-26 20:02:44 +01:00
23 changed files with 44 additions and 32 deletions

View File

@ -9,6 +9,7 @@ import { AuthContext } from '../context/AuthContext'
import merge from 'lodash/merge' import merge from 'lodash/merge'
import IdDisplay from './IdDisplay' import IdDisplay from './IdDisplay'
import SpotlightTooltip from './SpotlightTooltip' import SpotlightTooltip from './SpotlightTooltip'
import StateTag from './StateTag'
const { Text, Link } = Typography const { Text, Link } = Typography
@ -255,7 +256,7 @@ const ObjectDisplay = ({
className='object-display-tag' className='object-display-tag'
> >
<Flex <Flex
gap={objectData?.color ? 'small' : '5px'} gap={objectData?.color || objectData?.state ? 'small' : '5px'}
align='center' align='center'
style={{ minWidth: 0, height: '24px' }} style={{ minWidth: 0, height: '24px' }}
> >
@ -267,6 +268,13 @@ const ObjectDisplay = ({
style={{ marginBottom: '1.5px' }} style={{ marginBottom: '1.5px' }}
/> />
) : null} ) : null}
{objectData?.state ? (
<StateTag
state={objectData?.state.type}
showTag={false}
style={{ marginBottom: '1.5px' }}
/>
) : null}
<div style={{ minWidth: 0 }}> <div style={{ minWidth: 0 }}>
{renderNameDisplay()} {renderNameDisplay()}

View File

@ -8,7 +8,10 @@ import ObjectProperty from './ObjectProperty'
import InfoCircleIcon from '../../Icons/InfoCircleIcon' import InfoCircleIcon from '../../Icons/InfoCircleIcon'
import { ApiServerContext } from '../context/ApiServerContext' import { ApiServerContext } from '../context/ApiServerContext'
import merge from 'lodash/merge' import merge from 'lodash/merge'
import { getModelByName } from '../../../database/ObjectModels' import {
getModelByName,
getModelProperty
} from '../../../database/ObjectModels'
const { Text } = Typography const { Text } = Typography
@ -128,7 +131,7 @@ const SpotlightTooltip = ({ query, type }) => {
return ( return (
<Descriptions.Item key={prop.name} label={prop.label}> <Descriptions.Item key={prop.name} label={prop.label}>
<ObjectProperty <ObjectProperty
type={prop.type} {...getModelProperty(type, prop.name)}
value={value} value={value}
objectData={spotlightData} objectData={spotlightData}
objectType={prop.objectType || type} objectType={prop.objectType || type}

View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
import { Badge, Flex, Tag } from 'antd' import { Badge, Flex, Tag } from 'antd'
import { useMemo } from 'react' import { useMemo } from 'react'
const StateTag = ({ state, showBadge = true, style = {} }) => { const StateTag = ({ state, showBadge = true, showTag = true, style = {} }) => {
const { badgeStatus, badgeText } = useMemo(() => { const { badgeStatus, badgeText } = useMemo(() => {
let status = 'default' let status = 'default'
let text = 'Unknown' let text = 'Unknown'
@ -196,6 +196,10 @@ const StateTag = ({ state, showBadge = true, style = {} }) => {
badgeProps = { color: badgeStatus } badgeProps = { color: badgeStatus }
} }
if (showTag == false) {
return <Badge {...badgeProps} style={{ ...style }} />
}
return ( return (
<Tag color={badgeStatus} style={{ marginRight: 0, ...style }}> <Tag color={badgeStatus} style={{ marginRight: 0, ...style }}>
<Flex gap={6}> <Flex gap={6}>
@ -209,7 +213,8 @@ const StateTag = ({ state, showBadge = true, style = {} }) => {
StateTag.propTypes = { StateTag.propTypes = {
state: PropTypes.string, state: PropTypes.string,
showBadge: PropTypes.bool, showBadge: PropTypes.bool,
style: PropTypes.object style: PropTypes.object,
showTag: PropTypes.bool
} }
export default StateTag export default StateTag

View File

@ -111,7 +111,7 @@ export const DocumentJob = {
objectType: 'printer', objectType: 'printer',
showName: false, showName: false,
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'objectType', name: 'objectType',

View File

@ -113,7 +113,7 @@ export const DocumentPrinter = {
objectType: 'printer', objectType: 'printer',
showName: false, showName: false,
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'connectedAt', name: 'connectedAt',

View File

@ -79,7 +79,7 @@ export const FilamentStock = {
type: 'state', type: 'state',
objectType: 'filamentStock', objectType: 'filamentStock',
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'filament', name: 'filament',

View File

@ -132,7 +132,7 @@ export const Host = {
objectType: 'host', objectType: 'host',
showName: false, showName: false,
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'online', name: 'online',

View File

@ -191,7 +191,7 @@ export const Invoice = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'issuedAt', name: 'issuedAt',

View File

@ -132,7 +132,7 @@ export const Job = {
showProgress: true, showProgress: true,
showId: false, showId: false,
showQuantity: false, showQuantity: false,
columnWidth: 250, columnWidth: 260,
readOnly: true readOnly: true
}, },
{ {

View File

@ -248,7 +248,7 @@ export const Listing = {
type: 'state', type: 'state',
objectType: 'listing', objectType: 'listing',
readOnly: true, readOnly: true,
columnWidth: 130 columnWidth: 260
}, },
{ {
name: 'price', name: 'price',

View File

@ -185,7 +185,7 @@ export const ListingVarient = {
type: 'state', type: 'state',
objectType: 'listingVarient', objectType: 'listingVarient',
readOnly: true, readOnly: true,
columnWidth: 130 columnWidth: 260
}, },
{ {
name: 'price', name: 'price',

View File

@ -234,7 +234,7 @@ export const Marketplace = {
type: 'state', type: 'state',
objectType: 'marketplace', objectType: 'marketplace',
readOnly: true, readOnly: true,
columnWidth: 130 columnWidth: 260
}, },
{ {
name: 'active', name: 'active',

View File

@ -165,7 +165,7 @@ export const OrderItem = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'receivedAt', name: 'receivedAt',
@ -374,15 +374,11 @@ export const OrderItem = {
if (!totalAmount) return 0 if (!totalAmount) return 0
if (objectData?.taxRate?.rateType == 'percentage') { if (objectData?.taxRate?.rateType == 'percentage') {
return ( return (
( (totalAmount * (1 + objectData?.taxRate?.rate / 100)).toFixed(2) ||
totalAmount * 0
(1 + objectData?.taxRate?.rate / 100)
).toFixed(2) || 0
) )
} else if (objectData?.taxRate?.rateType == 'amount') { } else if (objectData?.taxRate?.rateType == 'amount') {
return ( return (totalAmount + objectData?.taxRate?.rate).toFixed(2) || 0
(totalAmount + objectData?.taxRate?.rate).toFixed(2) || 0
)
} }
return totalAmount return totalAmount
} }

View File

@ -62,7 +62,7 @@ export const PartStock = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 120 columnWidth: 260
}, },
{ {
name: 'updatedAt', name: 'updatedAt',

View File

@ -184,7 +184,7 @@ export const Payment = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'postedAt', name: 'postedAt',

View File

@ -286,7 +286,7 @@ export const Printer = {
objectType: 'printer', objectType: 'printer',
showName: false, showName: false,
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'online', name: 'online',

View File

@ -129,7 +129,7 @@ export const ProductStock = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 120 columnWidth: 260
}, },
{ {
name: 'postedAt', name: 'postedAt',

View File

@ -248,7 +248,7 @@ export const PurchaseOrder = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'postedAt', name: 'postedAt',

View File

@ -230,7 +230,7 @@ export const SalesOrder = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {
name: 'postedAt', name: 'postedAt',

View File

@ -184,7 +184,7 @@ export const Shipment = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 250 columnWidth: 260
}, },
{ {

View File

@ -54,7 +54,7 @@ export const StockAudit = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 120 columnWidth: 260
}, },
{ {
name: 'updatedAt', name: 'updatedAt',

View File

@ -136,7 +136,7 @@ export const StockTransfer = {
label: 'State', label: 'State',
type: 'state', type: 'state',
readOnly: true, readOnly: true,
columnWidth: 120 columnWidth: 260
}, },
{ {
name: 'postedAt', name: 'postedAt',

View File

@ -86,7 +86,7 @@ export const SubJob = {
showProgress: true, showProgress: true,
showId: false, showId: false,
showQuantity: false, showQuantity: false,
columnWidth: 250, columnWidth: 260,
readOnly: true readOnly: true
}, },
{ {