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

Client: Fixed incorrect units for some numbers

Browse Source
This commit is contained in:
Donkie
2023-05-17 22:03:19 +02:00
parent 9ae6bafd35
commit 40dc48668b
5 changed files with 68 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/numberField.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from "react";
import { Typography } from "antd";
import { NumberFieldProps } from "@refinedev/antd/dist/components/fields/types";
const { Text } = Typography;
function toLocaleStringSupportsOptions() {
return !!(
typeof Intl == "object" &&
Intl &&
typeof Intl.NumberFormat == "function"
);
}
type Props = NumberFieldProps & {
unit: string;
};
/**
* This field is used to display a number formatted according to the browser locale, right aligned. and uses {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl `Intl`} to display date format.
*
* @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/number} for more details.
*/
export const NumberFieldUnit: React.FC<Props> = ({
value,
locale,
options,
...rest
}) => {
const number = Number(value);
return (
<Text {...rest}>
{toLocaleStringSupportsOptions()
? number.toLocaleString(locale, options)
: number}{" "}
{rest.unit}
</Text>
);
};

26
client/src/pages/filaments/list.tsx
View File

@@ -6,9 +6,9 @@ import {
EditButton,
ShowButton,
DateField,
NumberField,
} from "@refinedev/antd";
import { Table, Space } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const { tableProps } = useTable({
@@ -27,12 +27,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="density"
title="Density"
render={(value) => (
<NumberField
<NumberFieldUnit
value={value}
unit="g/cm³"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 2,
}}
/>
@@ -42,12 +40,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="diameter"
title="Diameter"
render={(value) => (
<NumberField
<NumberFieldUnit
value={value}
unit="mm"
options={{
unitDisplay: "short",
unit: "millimeter",
style: "unit",
maximumFractionDigits: 2,
}}
/>
@@ -61,12 +57,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
return <></>;
}
return (
<NumberField
<NumberFieldUnit
value={value}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
@@ -81,12 +75,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
return <></>;
}
return (
<NumberField
<NumberFieldUnit
value={value}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>

25
client/src/pages/filaments/show.tsx
View File

@@ -2,6 +2,7 @@ import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
const { Title } = Typography;
@@ -26,42 +27,34 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
<Title level={5}>Price</Title>
<NumberField value={record?.price ?? ""} />
<Title level={5}>Density</Title>
<NumberField
<NumberFieldUnit
value={record?.density ?? ""}
unit="g/cm³"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 2,
}}
/>
<Title level={5}>Diameter</Title>
<NumberField
<NumberFieldUnit
value={record?.diameter ?? ""}
unit="mm"
options={{
unitDisplay: "short",
unit: "millimeter",
style: "unit",
maximumFractionDigits: 2,
}}
/>
<Title level={5}>Weight</Title>
<NumberField
<NumberFieldUnit
value={record?.weight ?? ""}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Spool Weight</Title>
<NumberField
<NumberFieldUnit
value={record?.spool_weight ?? ""}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>

14
client/src/pages/spools/list.tsx
View File

@@ -6,10 +6,10 @@ import {
EditButton,
ShowButton,
DateField,
NumberField,
TextField,
} from "@refinedev/antd";
import { Table, Space } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
export const SpoolList: React.FC<IResourceComponentsProps> = () => {
const { tableProps } = useTable({
@@ -34,12 +34,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
title="Used Weight"
render={(value) => {
return (
<NumberField
<NumberFieldUnit
value={value}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
@@ -54,12 +52,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
return <TextField value="Unknown" />;
}
return (
<NumberField
<NumberFieldUnit
value={Math.max(value, 0)}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>

13
client/src/pages/spools/show.tsx
View File

@@ -2,6 +2,7 @@ import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
const { Title } = Typography;
@@ -28,22 +29,18 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
<>{filamentData?.data?.id}</>
)} */}
<Title level={5}>Remaining Weight</Title>
<NumberField
<NumberFieldUnit
value={record?.remaining_weight ?? ""}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Used Weight</Title>
<NumberField
<NumberFieldUnit
value={record?.used_weight ?? ""}
unit="g"
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>