custom field monetary

ui2/src/features/document/components/DocumentDetails/CustomFields.tsx

@@ -3,7 +3,10 @@ import {useContext, useEffect, useState} from "react"
 
 import PanelContext from "@/contexts/PanelContext"
 import {useGetDocumentQuery} from "@/features/document/apiSlice"
-import {CustomFieldDate} from "@/features/document/components/customFields"
+import {
+  CustomFieldDate,
+  CustomFieldMonetary
+} from "@/features/document/components/customFields"
 import {skipToken} from "@reduxjs/toolkit/query"
 
 import {
@@ -237,6 +240,10 @@ function GenericCustomField({
     return <CustomFieldDate customField={customField} onChange={onChange} />
   }
 
+  if (customField.data_type == "monetary") {
+    return <CustomFieldMonetary customField={customField} onChange={onChange} />
+  }
+
   return (
     <TextInput
       label={customField.name}

ui2/src/features/document/components/customFields/CustomFieldDate.tsx → ui2/src/features/document/components/customFields/Date.tsx

@@ -1,23 +1,14 @@
-import type {DocumentCustomFieldValue} from "@/types"
 import {rem} from "@mantine/core"
 import {DatePickerInput, DateValue} from "@mantine/dates"
 import {IconCalendar} from "@tabler/icons-react"
 import dayjs from "dayjs"
 import {useEffect, useState} from "react"
+import {CustomFieldArgs} from "./types"
 
-type onChangeArgs = {
-  customField: DocumentCustomFieldValue
-  value: string
-}
-
-type onChangeType = ({customField, value}: onChangeArgs) => void
-
-interface Args {
-  customField: DocumentCustomFieldValue
-  onChange: onChangeType
-}
-
-export default function CustomFieldDate({customField, onChange}: Args) {
+export default function CustomFieldDate({
+  customField,
+  onChange
+}: CustomFieldArgs) {
   const [value, setValue] = useState<Date | null>(null)
   const icon = (
     <IconCalendar style={{width: rem(18), height: rem(18)}} stroke={1.5} />

ui2/src/features/document/components/customFields/Monetary.tsx

@@ -0,0 +1,45 @@
+import {NumberInput} from "@mantine/core"
+import {useState} from "react"
+import {CustomFieldArgs} from "./types"
+
+type MonetaryExtraDataType = {
+  currency: string
+}
+
+function getCurrency(extraData?: string): string | undefined {
+  if (!extraData) {
+    return
+  }
+
+  const extra_data = JSON.parse(extraData) as MonetaryExtraDataType
+
+  if (extra_data) {
+    return extra_data.currency
+  }
+
+  return
+}
+
+export default function CustomFieldMonetary({
+  customField,
+  onChange
+}: CustomFieldArgs) {
+  const [value, setValue] = useState<string | number>(customField.value)
+  const currency = getCurrency(customField.extra_data)
+
+  const onLocalChange = (v: number | string) => {
+    setValue(v)
+    onChange({customField, value: v.toString()})
+  }
+
+  return (
+    <NumberInput
+      label={customField.name}
+      decimalScale={2}
+      fixedDecimalScale
+      suffix={` ${currency}`} // one space
+      onChange={onLocalChange}
+      value={value}
+    />
+  )
+}

ui2/src/features/document/components/customFields/index.tsx

@@ -1,3 +1,4 @@
-import CustomFieldDate from "./CustomFieldDate"
+import CustomFieldDate from "./Date"
+import CustomFieldMonetary from "./Monetary"
 
-export {CustomFieldDate}
+export {CustomFieldDate, CustomFieldMonetary}

ui2/src/features/document/components/customFields/types.ts

@@ -0,0 +1,13 @@
+import type {DocumentCustomFieldValue} from "@/types"
+
+export type onChangeArgs = {
+  customField: DocumentCustomFieldValue
+  value: string
+}
+
+export type onChangeType = ({customField, value}: onChangeArgs) => void
+
+export interface CustomFieldArgs {
+  customField: DocumentCustomFieldValue
+  onChange: onChangeType
+}