From 30d4019d7d950981b898a91bf1809159554ce83a Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 10 Oct 2023 20:45:01 +0200
Subject: [PATCH] Number inputs now show error if bad value

Previously it just prevented you from inputting it, which was a bit bad UX
---
 client/src/pages/filaments/create.tsx | 28 ++++++++++++++++++++-------
 client/src/pages/filaments/edit.tsx   | 28 ++++++++++++++++++++-------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/client/src/pages/filaments/create.tsx b/client/src/pages/filaments/create.tsx
index 5667374..3d4a4bc 100644
--- a/client/src/pages/filaments/create.tsx
+++ b/client/src/pages/filaments/create.tsx
@@ -102,10 +102,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber precision={2} formatter={numberFormatter} parser={numberParser} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.density")}
@@ -113,10 +115,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
           rules={[
             {
               required: true,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="g/cm³" precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber addonAfter="g/cm³" precision={2} formatter={numberFormatter} parser={numberParser} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.diameter")}
@@ -124,10 +128,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
           rules={[
             {
               required: true,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="mm" precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber addonAfter="mm" precision={2} formatter={numberFormatter} parser={numberParser} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.weight")}
@@ -136,10 +142,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="g" precision={1} />
+          <InputNumber addonAfter="g" precision={1} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.spool_weight")}
@@ -148,10 +156,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="g" precision={1} />
+          <InputNumber addonAfter="g" precision={1} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.settings_extruder_temp")}
@@ -159,10 +169,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="°C" precision={0} />
+          <InputNumber addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.settings_bed_temp")}
@@ -170,10 +182,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="°C" precision={0} />
+          <InputNumber addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.article_number")}
diff --git a/client/src/pages/filaments/edit.tsx b/client/src/pages/filaments/edit.tsx
index 84fe63d..7dba584 100644
--- a/client/src/pages/filaments/edit.tsx
+++ b/client/src/pages/filaments/edit.tsx
@@ -124,10 +124,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber precision={2} formatter={numberFormatter} parser={numberParser} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.density")}
@@ -135,10 +137,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           rules={[
             {
               required: true,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="g/cm³" precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber addonAfter="g/cm³" precision={2} formatter={numberFormatter} parser={numberParser} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.diameter")}
@@ -146,10 +150,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           rules={[
             {
               required: true,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="mm" precision={2} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber addonAfter="mm" precision={2} formatter={numberFormatter} parser={numberParser} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.weight")}
@@ -158,10 +164,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="g" precision={1} />
+          <InputNumber addonAfter="g" precision={1} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.spool_weight")}
@@ -170,10 +178,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="g" precision={1} />
+          <InputNumber addonAfter="g" precision={1} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.settings_extruder_temp")}
@@ -181,10 +191,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="°C" precision={0} />
+          <InputNumber addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.settings_bed_temp")}
@@ -192,10 +204,12 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           rules={[
             {
               required: false,
+              type: "number",
+              min: 0,
             },
           ]}
         >
-          <InputNumber min={0} addonAfter="°C" precision={0} />
+          <InputNumber addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
           label={t("filament.fields.article_number")}