From a3be91b89c870cc30df31f0d199461ef939bd65e Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Mon, 25 Nov 2024 20:39:24 +0100
Subject: [PATCH] Fixed not being able to clear price field

Resolves #525
---
 client/src/pages/filaments/create.tsx |  6 +++---
 client/src/pages/filaments/edit.tsx   |  4 ++--
 client/src/pages/spools/create.tsx    |  4 ++--
 client/src/pages/spools/edit.tsx      |  4 ++--
 client/src/utils/parsing.tsx          | 27 +++++++++++++++++++++++++--
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/filaments/create.tsx b/client/src/pages/filaments/create.tsx
index 6163fbf..75ec761 100644
--- a/client/src/pages/filaments/create.tsx
+++ b/client/src/pages/filaments/create.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { FilamentImportModal } from "../../components/filamentImportModal";
 import { MultiColorPicker } from "../../components/multiColorPicker";
-import { numberFormatter, numberParser } from "../../utils/parsing";
+import { numberFormatter, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
 import { ExternalFilament } from "../../utils/queryExternalDB";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
@@ -73,7 +73,7 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
       invalidates: ["list", "detail"],
     });
 
-    setColorType(filament.color_hexes ? "multi" : "single")
+    setColorType(filament.color_hexes ? "multi" : "single");
 
     form.setFieldsValue({
       name: filament.name,
@@ -251,7 +251,7 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
             addonAfter={getCurrencySymbol(undefined, currency)}
             precision={2}
             formatter={numberFormatter}
-            parser={numberParser}
+            parser={numberParserAllowEmpty}
           />
         </Form.Item>
         <Form.Item
diff --git a/client/src/pages/filaments/edit.tsx b/client/src/pages/filaments/edit.tsx
index 53e7810..7dde3d8 100644
--- a/client/src/pages/filaments/edit.tsx
+++ b/client/src/pages/filaments/edit.tsx
@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 import React, { useEffect, useState } from "react";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { MultiColorPicker } from "../../components/multiColorPicker";
-import { numberFormatter, numberParser } from "../../utils/parsing";
+import { numberFormatter, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 import { IVendor } from "../vendors/model";
@@ -226,7 +226,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
             addonAfter={getCurrencySymbol(undefined, currency)}
             precision={2}
             formatter={numberFormatter}
-            parser={numberParser}
+            parser={numberParserAllowEmpty}
           />
         </Form.Item>
         <Form.Item
diff --git a/client/src/pages/spools/create.tsx b/client/src/pages/spools/create.tsx
index 070cbeb..64c53a4 100644
--- a/client/src/pages/spools/create.tsx
+++ b/client/src/pages/spools/create.tsx
@@ -10,7 +10,7 @@ import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../compo
 import { useSpoolmanLocations } from "../../components/otherModels";
 import { searchMatches } from "../../utils/filtering";
 import "../../utils/overrides.css";
-import { numberFormatter, numberParser } from "../../utils/parsing";
+import { numberFormatter, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 import { createFilamentFromExternal } from "../filaments/functions";
@@ -331,7 +331,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             addonAfter={getCurrencySymbol(undefined, currency)}
             precision={2}
             formatter={numberFormatter}
-            parser={numberParser}
+            parser={numberParserAllowEmpty}
           />
         </Form.Item>
         <Form.Item
diff --git a/client/src/pages/spools/edit.tsx b/client/src/pages/spools/edit.tsx
index ff1b40e..f593b8e 100644
--- a/client/src/pages/spools/edit.tsx
+++ b/client/src/pages/spools/edit.tsx
@@ -9,7 +9,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { useSpoolmanLocations } from "../../components/otherModels";
 import { searchMatches } from "../../utils/filtering";
-import { numberFormatter, numberParser } from "../../utils/parsing";
+import { numberFormatter, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 import { createFilamentFromExternal } from "../filaments/functions";
@@ -321,7 +321,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
             addonAfter={getCurrencySymbol(undefined, currency)}
             precision={2}
             formatter={numberFormatter}
-            parser={numberParser}
+            parser={numberParserAllowEmpty}
           />
         </Form.Item>
         <Form.Item
diff --git a/client/src/utils/parsing.tsx b/client/src/utils/parsing.tsx
index fc18d6f..c4583b5 100644
--- a/client/src/utils/parsing.tsx
+++ b/client/src/utils/parsing.tsx
@@ -30,7 +30,8 @@ export function formatNumberWithSpaceSeparator(input: string): string {
  * @param value
  * @returns
  */
-export function numberFormatter(value: number | undefined): string {
+export function numberFormatter(value: number | string | undefined): string {
+  console.log("numberformatter input: ", value);
   const formattedValue = value
     ? Number(value).toLocaleString(undefined, {
         useGrouping: false, // Disable thousands separator and do it manually instead so it's always spaces
@@ -45,7 +46,7 @@ export function numberFormatter(value: number | undefined): string {
  * @param value
  * @returns
  */
-export function numberParser(value: string | undefined) {
+export function numberParser(value: string | undefined): number {
   // Convert comma to dot
   value = value?.replace(",", ".");
 
@@ -56,6 +57,28 @@ export function numberParser(value: string | undefined) {
   return parseFloat(value || "0");
 }
 
+/**
+ * Number parser that supports both comma and dot as decimal separator
+ * Same as numberParser but allows empty values. numberParser will always return a valid number
+ * this one returns an empty string if the value is empty
+ * @param value
+ * @returns
+ */
+export function numberParserAllowEmpty(value: string | undefined): number | string {
+  // Convert comma to dot
+  value = value?.replace(",", ".");
+
+  // Remove all non-digit characters
+  value = value?.replace(/[^\d.-]/g, "");
+
+  if (value === "" || value === undefined) {
+    return "";
+  }
+
+  // Parse as float
+  return parseFloat(value);
+}
+
 /**
  * Enrich text with links
  * @param text