Refactor/display input part 2 (#1555)

* Email - Money - Number * Date
2023-09-12 20:04:26 +02:00
parent 9b495ae2e8
commit 9b5e24105b
33 changed files with 348 additions and 295 deletions
--- a/front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx
@ -1,58 +0,0 @@
-import { useRef } from 'react';
-import styled from '@emotion/styled';
-import { Key } from 'ts-key-enum';
-
-import { DateInputEdit } from '@/ui/input/components/DateInputEdit';
-import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-
-import { useEditableCell } from '../../hooks/useEditableCell';
-
-const StyledEditableCellDateEditModeContainer = styled.div`
-  margin-top: -1px;
-  width: 100%;
-`;
-
-export type DateCellEditProps = {
-  value: Date;
-  onSubmit: (date: Date) => void;
-};
-
-export function DateCellEdit({ value, onSubmit }: DateCellEditProps) {
-  const { closeEditableCell } = useEditableCell();
-
-  function handleDateChange(newDate: Date) {
-    onSubmit(newDate);
-
-    closeEditableCell();
-  }
-
-  useScopedHotkeys(
-    Key.Escape,
-    () => {
-      closeEditableCell();
-    },
-    TableHotkeyScope.CellDateEditMode,
-    [closeEditableCell],
-  );
-
-  const containerRef = useRef(null);
-
-  useListenClickOutside({
-    refs: [containerRef],
-    callback: (event) => {
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      event.preventDefault();
-
-      closeEditableCell();
-    },
-  });
-
-  return (
-    <StyledEditableCellDateEditModeContainer ref={containerRef}>
-      <DateInputEdit onChange={handleDateChange} value={value} />
-    </StyledEditableCellDateEditModeContainer>
-  );
-}
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx
@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';

+import { DateDisplay } from '@/ui/content-display/components/DateDisplay';
 import type { ViewFieldDateMetadata } from '@/ui/editable-field/types/ViewField';
-import { DateInputDisplay } from '@/ui/input/components/DateInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
@ -34,7 +34,7 @@ export function GenericEditableDateCell({
      editModeContent={
        <GenericEditableDateCellEditMode columnDefinition={columnDefinition} />
      }
-      nonEditModeContent={<DateInputDisplay value={fieldValue} />}
+      nonEditModeContent={<DateDisplay value={fieldValue} />}
    ></EditableCell>
  );
 }
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx
@ -2,14 +2,16 @@ import { DateTime } from 'luxon';
 import { useRecoilState } from 'recoil';

 import type { ViewFieldDateMetadata } from '@/ui/editable-field/types/ViewField';
+import { DateInput } from '@/ui/input/components/DateInput';
+import { useCellInputEventHandlers } from '@/ui/table/hooks/useCellInputEventHandlers';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
+import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
+import { Nullable } from '~/types/Nullable';

 import type { ColumnDefinition } from '../../../types/ColumnDefinition';

-import { DateCellEdit } from './DateCellEdit';
-
 type OwnProps = {
  columnDefinition: ColumnDefinition<ViewFieldDateMetadata>;
 };
@ -29,12 +31,13 @@ export function GenericEditableDateCellEditMode({

  const updateField = useUpdateEntityField();

-  function handleSubmit(newDate: Date) {
+  // Wrap this into a hook
+  function handleSubmit(newDate: Nullable<Date>) {
    const fieldValueDate = fieldValue
      ? DateTime.fromISO(fieldValue).toJSDate()
      : null;

-    const newDateISO = DateTime.fromJSDate(newDate).toISO();
+    const newDateISO = newDate ? DateTime.fromJSDate(newDate).toISO() : null;

    if (newDate === fieldValueDate || !newDateISO) return;

@ -45,10 +48,18 @@ export function GenericEditableDateCellEditMode({
    }
  }

+  const { handleEnter, handleEscape, handleClickOutside } =
+    useCellInputEventHandlers({
+      onSubmit: handleSubmit,
+    });
+
  return (
-    <DateCellEdit
+    <DateInput
      value={DateTime.fromISO(fieldValue).toJSDate()}
-      onSubmit={handleSubmit}
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      hotkeyScope={TableHotkeyScope.CellEditMode}
    />
  );
 }
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCell.tsx
@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';

+import { EmailDisplay } from '@/ui/content-display/components/EmailDisplay';
 import type { ViewFieldEmailMetadata } from '@/ui/editable-field/types/ViewField';
-import { EmailInputDisplay } from '@/ui/input/components/EmailInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
@ -34,7 +34,7 @@ export function GenericEditableEmailCell({
      editModeContent={
        <GenericEditableEmailCellEditMode columnDefinition={columnDefinition} />
      }
-      nonEditModeContent={<EmailInputDisplay value={fieldValue} />}
+      nonEditModeContent={<EmailDisplay value={fieldValue} />}
    ></EditableCell>
  );
 }
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCell.tsx
@ -1,5 +1,6 @@
 import { useRecoilValue } from 'recoil';

+import { MoneyDisplay } from '@/ui/content-display/components/MoneyDisplay';
 import type { ViewFieldMoneyMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
@ -14,11 +15,6 @@ type OwnProps = {
  editModeHorizontalAlign?: 'left' | 'right';
 };

-function formatNumber(value: number) {
-  // Formats the value to a string and add commas to it ex: 50,000 | 500,000
-  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
 export function GenericEditableMoneyCell({
  columnDefinition,
  editModeHorizontalAlign,
@ -38,9 +34,7 @@ export function GenericEditableMoneyCell({
      editModeContent={
        <GenericEditableMoneyCellEditMode columnDefinition={columnDefinition} />
      }
-      nonEditModeContent={
-        <>{fieldValue ? `$${formatNumber(fieldValue)}` : ''}</>
-      }
+      nonEditModeContent={<MoneyDisplay value={fieldValue} />}
    ></EditableCell>
  );
 }
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx
@ -28,6 +28,7 @@ export function GenericEditableMoneyCellEditMode({

  const updateField = useUpdateEntityField();

+  // TODO: handle this logic in a number input
  function handleSubmit(newText: string) {
    if (newText === fieldValue) return;

@ -64,6 +65,7 @@ export function GenericEditableMoneyCellEditMode({
    onSubmit: handleSubmit,
  });

+  // TODO: use a number input
  return (
    <TextInput
      autoFocus
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx
@ -1,5 +1,6 @@
 import { useRecoilValue } from 'recoil';

+import { TextDisplay } from '@/ui/content-display/components/TextDisplay';
 import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
@ -35,7 +36,7 @@ export function GenericEditableNumberCell({
          columnDefinition={columnDefinition}
        />
      }
-      nonEditModeContent={<>{fieldValue}</>}
+      nonEditModeContent={<TextDisplay text={fieldValue} />}
    ></EditableCell>
  );
 }