fix: zero showing in record cell and page (#7384)

This PR fixes zero being displayed as empty in record cell and show page in currency field #6802 I checked graphql resquests and the data is stored in the correct form (0 or null). The problem only lies in the front end and how the field is null checked. --------- Co-authored-by: Félix Malfait <[email protected]>
twentyhq · Oct 3, 2024 · da69317 · da69317
1 parent b8e406c
commit da69317
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/...src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx b/...src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx
@@ -7,6 +7,7 @@ import { CurrencyInput } from '@/ui/field/input/components/CurrencyInput';
 import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
 import { useCurrencyField } from '../../hooks/useCurrencyField';
 
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 import { FieldInputEvent } from './DateTimeFieldInput';
 
 type CurrencyFieldInputProps = {
@@ -108,7 +109,7 @@ export const CurrencyFieldInput = ({
 
   const handleSelect = (newValue: string) => {
     setDraftValue({
-      amount: draftValue?.amount ?? '',
+      amount: isUndefinedOrNull(draftValue?.amount) ? '' : draftValue?.amount,
       currencyCode: newValue as CurrencyCode,
     });
   };

diff --git a/...nty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts b/...nty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts
@@ -9,6 +9,7 @@ import { isFieldRelation } from '@/object-record/record-field/types/guards/isFie
 import { computeEmptyDraftValue } from '@/object-record/record-field/utils/computeEmptyDraftValue';
 import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldValueEmpty';
 import { isDefined } from '~/utils/isDefined';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 type computeDraftValueFromFieldValueParams<FieldValue> = {
   fieldDefinition: Pick<FieldDefinition<FieldMetadata>, 'type'>;
@@ -32,7 +33,9 @@ export const computeDraftValueFromFieldValue = <FieldValue>({
     }
 
     return {
-      amount: fieldValue?.amountMicros ? fieldValue.amountMicros / 1000000 : '',
+      amount: isUndefinedOrNull(fieldValue?.amountMicros)
+        ? ''
+        : (fieldValue.amountMicros / 1000000).toString(),
       currencyCode: fieldValue?.currencyCode ?? '',
     } as unknown as FieldInputDraftValue<FieldValue>;
   }

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
@@ -29,7 +29,10 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
     ? SETTINGS_FIELD_CURRENCY_CODES[currencyValue?.currencyCode]?.Icon
     : null;
 
-  const amountToDisplay = (currencyValue?.amountMicros ?? 0) / 1000000;
+  const amountToDisplay =
+    currencyValue?.amountMicros != null
+      ? currencyValue?.amountMicros / 1000000
+      : null;
 
   if (!shouldDisplayCurrency) {
     return <StyledEllipsisDisplay>{0}</StyledEllipsisDisplay>;
@@ -46,7 +49,7 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
           />{' '}
         </>
       )}
-      {amountToDisplay !== 0 ? formatAmount(amountToDisplay) : ''}
+      {amountToDisplay !== null ? formatAmount(amountToDisplay) : ''}
     </StyledEllipsisDisplay>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { IMaskInput, IMaskInputProps } from 'react-imask';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { IMaskInput, IMaskInputProps } from 'react-imask';
 import { IconComponent, TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
@@ -138,7 +138,6 @@ export const CurrencyInput = ({
         mask={Number}
         thousandsSeparator={','}
         radix="."
-        unmask="typed"
         onAccept={(value: string) => handleChange(value)}
         inputRef={wrapperRef}
         autoComplete="off"