diff --git a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx b/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx index 432ec4899..0d0b1c534 100644 --- a/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx +++ b/apps/client/src/widgets/attribute_widgets/PromotedAttributesDisplay.tsx @@ -5,6 +5,8 @@ import { useTriliumEvent } from "../react/hooks"; import attributes from "../../services/attributes"; import { DefinitionObject } from "../../services/promoted_attribute_definition_parser"; import { formatDateTime } from "../../utils/formatters"; +import { ComponentChildren } from "preact"; +import Icon from "../react/Icon"; interface PromotedAttributesDisplayProps { note: FNote; @@ -26,7 +28,7 @@ export default function PromotedAttributesDisplay({ note, ignoredAttributes }: P {promotedDefinitionAttributes?.map((attr) => { return ( - {attr.friendlyName}: {formatLabelValue(attr)} + {formatLabelValue(attr)} ); } @@ -48,25 +50,27 @@ function useNoteAttributesWithDefinitions(note: FNote, attributesToIgnore: stri return promotedDefinitionAttributes; } -function formatLabelValue(attr: AttributeWithDefinitions): string { +function formatLabelValue(attr: AttributeWithDefinitions): ComponentChildren { let value = attr.value; switch (attr.def.labelType) { case "number": + let formattedValue = value; const numberValue = Number(value); if (attr.def.numberPrecision) { - return numberValue.toFixed(attr.def.numberPrecision); - } else { - return numberValue.toString(); + formattedValue = numberValue.toFixed(attr.def.numberPrecision); } + return <>{attr.friendlyName}: {formattedValue}; case "date": case "datetime": const date = new Date(value); if (isNaN(date.getTime())) return value; const timeFormat = attr.def.labelType === "datetime" ? "short" : "none"; - return formatDateTime(date, "short", timeFormat); + return <>{attr.friendlyName}: {formatDateTime(date, "short", timeFormat)}; + case "boolean": + return <> {attr.friendlyName}; case "text": default: - return value; + return <>{attr.friendlyName}: {value}; } }