diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx index d221ea543d..3598deada7 100644 --- a/src/frontend/src/components/details/Details.tsx +++ b/src/frontend/src/components/details/Details.tsx @@ -465,10 +465,12 @@ function CopyField({ value }: Readonly<{ value: string }>) { export function DetailsTableField({ item, - field + field, + showIcons = true }: Readonly<{ item: any; field: DetailsField; + showIcons?: boolean; }>) { function getFieldType(type: string) { switch (type) { @@ -502,10 +504,12 @@ export function DetailsTableField({ - - {field.label} + {showIcons && ( + + )} + {field.label} ) { const visibleFields = useMemo(() => { return fields.filter((field) => !field.hidden); @@ -553,7 +559,12 @@ export function DetailsTable({ {visibleFields.map((field: DetailsField, index: number) => ( - + ))}
diff --git a/src/frontend/src/components/details/ParameterDetailsGrid.tsx b/src/frontend/src/components/details/ParameterDetailsGrid.tsx new file mode 100644 index 0000000000..4849dcc25a --- /dev/null +++ b/src/frontend/src/components/details/ParameterDetailsGrid.tsx @@ -0,0 +1,58 @@ +import { ApiEndpoints } from '@lib/enums/ApiEndpoints'; +import type { ModelType } from '@lib/enums/ModelType'; +import { apiUrl } from '@lib/functions/Api'; +import { t } from '@lingui/core/macro'; +import { useQuery } from '@tanstack/react-query'; +import { useMemo } from 'react'; +import { useApi } from '../../contexts/ApiContext'; +import { type DetailsField, DetailsTable } from './Details'; + +export function ParameterDetailsGrid({ + model_type, + model_id +}: Readonly<{ + model_type: ModelType; + model_id: number | string | undefined; +}>) { + const api = useApi(); + + const { data: parameters = [] } = useQuery({ + queryKey: ['parameter-details', model_type, model_id], + enabled: !!model_id && !!model_type, + queryFn: () => + api + .get(apiUrl(ApiEndpoints.parameter_list), { + params: { model_type, model_id, limit: 100 } + }) + .then((res) => res.data?.results ?? []) + }); + + const { fields, item } = useMemo(() => { + const item: Record = {}; + const fields: DetailsField[] = parameters.map((param: any) => { + const key = `param_${param.pk}`; + const value = + param.data + + (param.template_detail?.units ? ` ${param.template_detail.units}` : ''); + item[key] = value; + return { + type: 'string' as const, + name: key, + label: param.template_detail?.name ?? String(param.pk), + copy: true + }; + }); + return { fields, item }; + }, [parameters]); + + if (fields.length === 0) return null; + + return ( + + ); +} diff --git a/src/frontend/src/pages/part/PartDetailsPanel.tsx b/src/frontend/src/pages/part/PartDetailsPanel.tsx index 320513dbfa..4f83264447 100644 --- a/src/frontend/src/pages/part/PartDetailsPanel.tsx +++ b/src/frontend/src/pages/part/PartDetailsPanel.tsx @@ -14,6 +14,7 @@ import { } from '../../components/details/Details'; import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; +import { ParameterDetailsGrid } from '../../components/details/ParameterDetailsGrid'; import { formatPriceRange } from '../../defaults/formatters'; import { useInstance } from '../../hooks/UseInstance'; @@ -355,6 +356,10 @@ export function PartDetailsPanel({ + ); }