tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client: Better locale comma support

Browse Source
This commit is contained in:
Donkie
2023-06-27 22:51:22 +02:00
parent d4afc56173
commit 43a3e3f1f2
5 changed files with 66 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/pages/filaments/create.tsx
View File

@@ -4,6 +4,7 @@ import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, Select, InputNumber, ColorPicker } from "antd"; import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import { IVendor } from "../vendors/model"; import { IVendor } from "../vendors/model";
import { numberFormatter, numberParser } from "../../utils/parsing";
interface CreateOrCloneProps { interface CreateOrCloneProps {
mode: "create" | "clone"; mode: "create" | "clone";
@@ -90,7 +91,12 @@ export const FilamentCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} /> <InputNumber
min={0}
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Density" label="Density"
@@ -101,7 +107,13 @@ export const FilamentCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="g/cm³" /> <InputNumber
min={0}
addonAfter="g/cm³"
precision={3}
formatter={numberFormatter}
parser={numberParser}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Diameter" label="Diameter"
@@ -112,7 +124,13 @@ export const FilamentCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="mm" /> <InputNumber
min={0}
addonAfter="mm"
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Weight" label="Weight"
@@ -124,7 +142,7 @@ export const FilamentCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="g" /> <InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Spool Weight" label="Spool Weight"
@@ -136,7 +154,7 @@ export const FilamentCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="g" /> <InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Override Extruder Temperature" label="Override Extruder Temperature"
@@ -148,7 +166,7 @@ export const FilamentCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="°C" /> <InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Override Bed Temperature" label="Override Bed Temperature"
@@ -160,7 +178,7 @@ export const FilamentCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="°C" /> <InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Article Number" label="Article Number"

32
client/src/pages/filaments/edit.tsx
View File

@@ -12,6 +12,7 @@ import {
import dayjs from "dayjs"; import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import { IVendor } from "../vendors/model"; import { IVendor } from "../vendors/model";
import { numberFormatter, numberParser } from "../../utils/parsing";
export const FilamentEdit: React.FC<IResourceComponentsProps> = () => { export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps } = useForm(); const { formProps, saveButtonProps } = useForm();
@@ -120,7 +121,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<InputNumber min={0} /> <InputNumber
min={0}
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Density" label="Density"
@@ -131,7 +137,13 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="g/cm³" /> <InputNumber
min={0}
addonAfter="g/cm³"
precision={3}
formatter={numberFormatter}
parser={numberParser}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Diameter" label="Diameter"
@@ -142,7 +154,13 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="mm" /> <InputNumber
min={0}
addonAfter="mm"
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Weight" label="Weight"
@@ -154,7 +172,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="g" /> <InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Spool Weight" label="Spool Weight"
@@ -166,7 +184,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="g" /> <InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Override Extruder Temperature" label="Override Extruder Temperature"
@@ -178,7 +196,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="°C" /> <InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Override Bed Temperature" label="Override Bed Temperature"
@@ -190,7 +208,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="°C" /> <InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Article Number" label="Article Number"

2
client/src/pages/spools/create.tsx
View File

@@ -98,7 +98,7 @@ export const SpoolCreate: React.FC<
}, },
]} ]}
> >
<InputNumber min={0} addonAfter="g" /> <InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Location" label="Location"

7
client/src/pages/spools/edit.tsx
View File

@@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { IResourceComponentsProps } from "@refinedev/core"; import { IResourceComponentsProps } from "@refinedev/core";
import { Edit, useForm, useSelect } from "@refinedev/antd"; import { Edit, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select } from "antd"; import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs"; import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import { IFilament } from "../filaments/model"; import { IFilament } from "../filaments/model";
@@ -108,7 +108,10 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
}, },
]} ]}
> >
<Input min={0} addonAfter="g" /> <InputNumber min={0} addonAfter="g" precision={0} />
{/* TODO: Allow higher precision here.
However, that requires that we can handle the , -> . replacement in the number parser
more elegantly for locales which use , as a thousands separator. */}
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Location" label="Location"

10
client/src/utils/parsing.ts Normal file
View File

@@ -0,0 +1,10 @@
// Number formatter that nicely formats numbers with correct decimal separator
export function numberFormatter(value: number | undefined) {
return value ? Number(value).toLocaleString() : "";
}
// Number parser that supports both comma and dot as decimal separator
export function numberParser(value: string | undefined) {
return Number(value?.replace(",", ".") ?? 0);
}