Currency setting is now utilized in filament/spool lists, edit pages etc

client/src/pages/spools/create.tsx

@@ -13,6 +13,7 @@ import "../../utils/overrides.css";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldFormItem, StringifiedExtras } from "../../components/extraFields";
 import utc from "dayjs/plugin/utc";
+import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 
 dayjs.extend(utc);
 
@@ -23,6 +24,7 @@ interface CreateOrCloneProps {
 export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
   const t = useTranslate();
   const extraFields = useGetFields(EntityType.spool);
+  const currency = useCurrency();
 
   const { form, formProps, formLoading, onFinish, redirect } = useForm<
     ISpool,
@@ -245,7 +247,12 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             },
           ]}
         >
-          <InputNumber precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber
+            addonAfter={getCurrencySymbol(undefined, currency)}
+            precision={2}
+            formatter={numberFormatter}
+            parser={numberParser}
+          />
         </Form.Item>
         <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
           <InputNumber value={usedWeight} />

client/src/pages/spools/edit.tsx

@@ -12,6 +12,7 @@ import { message } from "antd/lib";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldFormItem, StringifiedExtras } from "../../components/extraFields";
 import { ParsedExtras } from "../../components/extraFields";
+import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 
 /*
 The API returns the extra fields as JSON values, but we need to parse them into their real types
@@ -31,6 +32,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const [messageApi, contextHolder] = message.useMessage();
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.spool);
+  const currency = useCurrency();
 
   const { form, formProps, saveButtonProps } = useForm<ISpool, HttpError, ISpool, ISpool>({
     liveMode: "manual",
@@ -229,7 +231,12 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
             },
           ]}
         >
-          <InputNumber precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber
+            addonAfter={getCurrencySymbol(undefined, currency)}
+            precision={2}
+            formatter={numberFormatter}
+            parser={numberParser}
+          />
         </Form.Item>
         <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
           <InputNumber value={usedWeight} />

client/src/pages/spools/list.tsx

@@ -37,6 +37,7 @@ import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useNavigate } from "react-router-dom";
+import { useCurrency } from "../../utils/settings";
 
 dayjs.extend(utc);
 
@@ -100,6 +101,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const invalidate = useInvalidate();
   const navigate = useNavigate();
   const extraFields = useGetFields(EntityType.spool);
+  const currency = useCurrency();
 
   const allColumnsWithExtraFields = [...allColumns, ...(extraFields.data?.map((field) => "extra." + field.key) ?? [])];
 
@@ -356,6 +358,14 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             id: "price",
             i18ncat: "spool",
             width: 80,
+            render: (_, obj: ISpoolCollapsed) => {
+              return obj.price?.toLocaleString(undefined, {
+                style: "currency",
+                currencyDisplay: "narrowSymbol",
+                currency: currency,
+                notation: "compact",
+              });
+            },
           }),
           NumberColumn({
             ...commonProps,

client/src/pages/spools/show.tsx

@@ -10,6 +10,7 @@ import { enrichText } from "../../utils/parsing";
 import { IFilament } from "../filaments/model";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldDisplay } from "../../components/extraFields";
+import { useCurrency } from "../../utils/settings";
 
 dayjs.extend(utc);
 
@@ -18,6 +19,7 @@ const { Title } = Typography;
 export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
   const extraFields = useGetFields(EntityType.spool);
+  const currency = useCurrency();
 
   const { queryResult } = useShow<ISpool>({
     liveMode: "auto",
@@ -71,7 +73,15 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>{t("spool.fields.filament")}</Title>
       <TextField value={record ? filamentURL(record?.filament) : ""} />
       <Title level={5}>{t("spool.fields.price")}</Title>
-      <NumberField value={record ? spoolPrice(record) : ""} />
+      <NumberField
+        value={record ? spoolPrice(record) : ""}
+        options={{
+          style: "currency",
+          currency: currency,
+          currencyDisplay: "narrowSymbol",
+          notation: "compact",
+        }}
+      />
       <Title level={5}>{t("spool.fields.registered")}</Title>
       <DateField
         value={dayjs.utc(record?.registered).local()}