Update currency fields to non-number for more consistency

binary-koan · Aug 30, 2023 · ec38bcf · ec38bcf
1 parent 16ad924
commit ec38bcf
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 19 deletions.
diff --git a/web/src/components/categories/CategoryForm.tsx b/web/src/components/categories/CategoryForm.tsx
@@ -1,7 +1,7 @@
 import { createForm, Form, getValue } from "@modular-forms/solid"
 import { repeat } from "lodash"
 import { Component } from "solid-js"
-import { CreateCategoryMutationVariables } from "../../graphql-types"
+import { CreateCategoryMutationVariables, FullCategoryFragment } from "../../graphql-types"
 import { useCurrenciesQuery } from "../../graphql/queries/currenciesQuery"
 import { Button } from "../base/Button"
 import { InputAddon } from "../base/InputGroup"
@@ -15,13 +15,13 @@ type CategoryFormValues = {
   name: string
   color: string
   icon: string
-  budget?: number
+  budget?: string
   budgetCurrencyCode?: string
-  isRegular?: string
+  isRegular?: boolean
 }
 
 const CategoryForm: Component<{
-  category?: any
+  category?: FullCategoryFragment
   onSave: (input: CreateCategoryMutationVariables["input"], id?: string) => void
   loading: boolean
 }> = (props) => {
@@ -31,21 +31,25 @@ const CategoryForm: Component<{
       name: props.category?.name,
       color: props.category?.color,
       icon: props.category?.icon,
-      budget: props.category?.budget?.decimalAmount,
-      budgetCurrencyCode: props.category?.budgetCurrencyCode,
+      budget: props.category?.budget?.decimalAmount.toString(),
+      budgetCurrencyCode: props.category?.budgetCurrency?.code,
       isRegular: props.category?.isRegular != null ? props.category.isRegular : true
     }
   })
 
   const selectedCurrency = () =>
-    currencies()?.currencies.find((currency) => currency.code === getValue(form, "budgetCurrencyCode"))
+    currencies()?.currencies.find(
+      (currency) => currency.code === getValue(form, "budgetCurrencyCode")
+    )
 
   const onSave = (data: CategoryFormValues) => {
     props.onSave(
       {
         ...data,
         budget: data.budget
-          ? Math.floor(data.budget * 10 ** (selectedCurrency()?.decimalDigits || 0))
+          ? Math.floor(
+              parseFloat(data.budget || "0") * 10 ** (selectedCurrency()?.decimalDigits || 0)
+            )
           : null,
         isRegular: Boolean(data.isRegular)
       },
@@ -93,7 +97,7 @@ const CategoryForm: Component<{
         of={form}
         label="Budget"
         name="budget"
-        type="number"
+        inputmode="decimal"
         before={<InputAddon>{selectedCurrency()?.symbol}</InputAddon>}
         step={
           selectedCurrency()?.decimalDigits

diff --git a/web/src/components/transactions/AmountEditor.tsx b/web/src/components/transactions/AmountEditor.tsx
@@ -109,7 +109,7 @@ export const AmountEditor: Component<{
         <InputGroupInput
           ref={input}
           id={id}
-          type="number"
+          inputmode="decimal"
           value={newAmount()}
           step={
             props.transaction.currency.decimalDigits > 0

diff --git a/web/src/components/transactions/NewTransactionModal.tsx b/web/src/components/transactions/NewTransactionModal.tsx
@@ -30,7 +30,11 @@ import FormInput from "../forms/FormInput"
 import FormInputGroup from "../forms/FormInputGroup"
 import { SplitTransactionModal } from "./SplitTransactionModal"
 
-type NewTransactionModalValues = CreateTransactionInput & { amountType: "expense" | "income" }
+type NewTransactionModalValues = Omit<CreateTransactionInput, "amount" | "originalAmount"> & {
+  amountType: "expense" | "income"
+  amount?: string
+  originalAmount?: string
+}
 
 export const NewTransactionModal: Component<{
   initialDate?: Date
@@ -87,7 +91,9 @@ export const NewTransactionModal: Component<{
     const currency = currencies()?.currencies.find(
       (currency) => currency.code === data.currencyCode
     )
-    const integerAmount = Math.round((amount || 0) * 10 ** (currency?.decimalDigits || 0))
+    const integerAmount = Math.round(
+      parseFloat(amount || "0") * 10 ** (currency?.decimalDigits || 0)
+    )
 
     const coercedData: CreateTransactionInput = {
       ...data,
@@ -105,7 +111,7 @@ export const NewTransactionModal: Component<{
         (currency) => currency.code === originalCurrencyCode
       )
       const integerOriginalAmount = Math.round(
-        originalAmount * 10 ** (originalCurrency?.decimalDigits || 0)
+        parseFloat(originalAmount || "0") * 10 ** (originalCurrency?.decimalDigits || 0)
       )
       coercedData.originalAmount =
         amountType === "expense" ? -integerOriginalAmount : integerOriginalAmount
@@ -193,7 +199,7 @@ export const NewTransactionModal: Component<{
                         of={form}
                         label="Amount"
                         name="amount"
-                        type="number"
+                        inputmode="decimal"
                         placeholderLabel={true}
                         validate={minRange(0, "Must be zero or more")}
                         before={<InputAddon>{selectedCurrency()?.symbol}</InputAddon>}
@@ -209,7 +215,7 @@ export const NewTransactionModal: Component<{
                       of={form}
                       label="Original amount"
                       name="originalAmount"
-                      type="number"
+                      inputmode="decimal"
                       placeholderLabel={true}
                       validate={minRange(0, "Must be zero or more")}
                       before={<InputAddon>{selectedOriginalCurrency()?.symbol}</InputAddon>}

diff --git a/web/src/graphql-types.ts b/web/src/graphql-types.ts
@@ -475,7 +475,7 @@ export type UserCredential = {
 
 export type FullAccountFragment = { __typename?: 'Account', id: string, name: string, currencyCode: any };
 
-export type FullCategoryFragment = { __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', formatted: string } | null };
+export type FullCategoryFragment = { __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', decimalAmount: number, formatted: string } | null, budgetCurrency?: { __typename?: 'Currency', code: any } | null };
 
 export type FullCurrencyFragment = { __typename?: 'Currency', code: any, name: string, symbol: string, decimalDigits: number };
 
@@ -619,7 +619,7 @@ export type UpdateCategoryMutationVariables = Exact<{
 }>;
 
 
-export type UpdateCategoryMutation = { __typename?: 'Mutation', updateCategory: { __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', formatted: string } | null } };
+export type UpdateCategoryMutation = { __typename?: 'Mutation', updateCategory: { __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', decimalAmount: number, formatted: string } | null, budgetCurrency?: { __typename?: 'Currency', code: any } | null } };
 
 export type UpdateTransactionMutationVariables = Exact<{
   id: Scalars['String']['input'];
@@ -664,7 +664,7 @@ export type BudgetQuery = { __typename?: 'Query', budget: { __typename?: 'MonthB
 export type CategoriesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type CategoriesQuery = { __typename?: 'Query', categories: Array<{ __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', formatted: string } | null }> };
+export type CategoriesQuery = { __typename?: 'Query', categories: Array<{ __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', decimalAmount: number, formatted: string } | null, budgetCurrency?: { __typename?: 'Currency', code: any } | null }> };
 
 export type CurrenciesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -688,7 +688,7 @@ export type GetCategoryQueryVariables = Exact<{
 }>;
 
 
-export type GetCategoryQuery = { __typename?: 'Query', category?: { __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', formatted: string } | null } | null };
+export type GetCategoryQuery = { __typename?: 'Query', category?: { __typename?: 'Category', id: string, name: string, color: string, icon: string, isRegular: boolean, sortOrder?: number | null, createdAt: any, updatedAt: any, budget?: { __typename?: 'Money', decimalAmount: number, formatted: string } | null, budgetCurrency?: { __typename?: 'Currency', code: any } | null } | null };
 
 export type GetCurrencyQueryVariables = Exact<{
   code: Scalars['String']['input'];

diff --git a/web/src/graphql/fragments/categoryFragments.ts b/web/src/graphql/fragments/categoryFragments.ts
@@ -7,8 +7,12 @@ export const FullCategoryFragment = gql`
     color
     icon
     budget {
+      decimalAmount
       formatted
     }
+    budgetCurrency {
+      code
+    }
     isRegular
     sortOrder
     createdAt