Feat/generic editable board card (#1089)

* Fixed BoardColumnMenu

* Fixed naming

* Optimized board loading

* Added GenericEditableField

* Introduce GenericEditableField for BoardCards

* remove logs

* delete unused files

* fix stories

---------

Co-authored-by: corentin <corentin@twenty.com>

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Key } from 'ts-key-enum';
 
 import { Tag } from '@/ui/tag/components/Tag';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
@@ -77,7 +75,6 @@ const StyledNumChildren = styled.div`
 type OwnProps = {
   color?: string;
   title: string;
-  pipelineStageId?: string;
   onTitleEdit: (title: string) => void;
   onColumnColorEdit: (color: string) => void;
   totalAmount?: number;
@@ -104,13 +101,6 @@ export function BoardColumn({
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  useScopedHotkeys(
-    [Key.Escape, Key.Enter],
-    handleClose,
-    BoardColumnHotkeyScope.BoardColumn,
-    [],
-  );
-
   function handleTitleClick() {
     setIsBoardColumnMenuOpen(true);
     setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
@@ -132,7 +122,7 @@ export function BoardColumn({
       </StyledHeader>
       {isBoardColumnMenuOpen && (
         <BoardColumnMenu
-          onClose={() => setIsBoardColumnMenuOpen(false)}
+          onClose={handleClose}
           onTitleEdit={onTitleEdit}
           onColumnColorEdit={onColumnColorEdit}
           title={title}

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -1,13 +1,17 @@
 import { useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { IconPencil } from '@tabler/icons-react';
+import { Key } from 'ts-key-enum';
 
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { icon } from '@/ui/theme/constants/icon';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
+import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
+
 import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
 
 const StyledMenuContainer = styled.div`
@@ -39,6 +43,13 @@ export function BoardColumnMenu({
     callback: onClose,
   });
 
+  useScopedHotkeys(
+    [Key.Escape, Key.Enter],
+    onClose,
+    BoardColumnHotkeyScope.BoardColumn,
+    [],
+  );
+
   return (
     <StyledMenuContainer ref={boardColumnMenuRef}>
       <DropdownMenu>

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -48,6 +48,7 @@ export function EntityBoard({
   onEditColumnColor: (columnId: string, color: string) => void;
 }) {
   const [boardColumns] = useRecoilState(boardColumnsState);
+
   const theme = useTheme();
   const [updatePipelineProgressStage] =
     useUpdateOnePipelineProgressStageMutation();

front/src/modules/ui/board/components/EntityBoardCard.tsx

@@ -4,19 +4,15 @@ import { BoardOptions } from '../types/BoardOptions';
 
 export function EntityBoardCard({
   boardOptions,
-  pipelineProgressId,
+  cardId,
   index,
 }: {
   boardOptions: BoardOptions;
-  pipelineProgressId: string;
+  cardId: string;
   index: number;
 }) {
   return (
-    <Draggable
-      key={pipelineProgressId}
-      draggableId={pipelineProgressId}
-      index={index}
-    >
+    <Draggable key={cardId} draggableId={cardId} index={index}>
       {(draggableProvided) => (
         <div
           ref={draggableProvided?.innerRef}

front/src/modules/ui/board/components/EntityBoardColumn.tsx

@@ -84,7 +84,6 @@ export function EntityBoardColumn({
           onTitleEdit={handleEditColumnTitle}
           title={column.title}
           color={column.colorCode}
-          pipelineStageId={column.id}
           totalAmount={boardColumnTotal}
           isFirstColumn={column.index === 0}
           numChildren={cardIds.length}
@@ -94,7 +93,7 @@ export function EntityBoardColumn({
               <BoardCardIdContext.Provider value={cardId} key={cardId}>
                 <EntityBoardCard
                   index={index}
-                  pipelineProgressId={cardId}
+                  cardId={cardId}
                   boardOptions={boardOptions}
                 />
               </BoardCardIdContext.Provider>

front/src/modules/ui/board/states/FieldDefinitionContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '../../editable-field/types/ViewField';
+
+export const FieldDefinitionContext =
+  createContext<ViewFieldDefinition<ViewFieldMetadata> | null>(null);

front/src/modules/ui/board/states/fieldsDefinitionsState.ts

@@ -0,0 +1,13 @@
+import { atom } from 'recoil';
+
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '../../editable-field/types/ViewField';
+
+export const fieldsDefinitionsState = atom<
+  ViewFieldDefinition<ViewFieldMetadata>[]
+>({
+  key: 'fieldsDefinitionState',
+  default: [],
+});

front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx

@@ -0,0 +1,49 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDateMetadata,
+  ViewFieldDefinition,
+} from '@/ui/editable-field/types/ViewField';
+import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { parseDate } from '~/utils/date-utils';
+
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+import { EditableField } from './EditableField';
+import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+};
+
+export function GenericEditableDateField({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const internalDateValue = fieldValue
+    ? parseDate(fieldValue).toJSDate()
+    : null;
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        iconLabel={viewField.columnIcon}
+        editModeContent={
+          <GenericEditableDateFieldEditMode viewField={viewField} />
+        }
+        displayModeContent={<DateInputDisplay value={internalDateValue} />}
+        isDisplayModeContentEmpty={!fieldValue}
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx

@@ -0,0 +1,44 @@
+import { useContext } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDateMetadata,
+  ViewFieldDefinition,
+} from '@/ui/editable-field/types/ViewField';
+
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+};
+
+export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const updateField = useUpdateGenericEntityField();
+
+  function handleSubmit(newDateISO: string) {
+    if (newDateISO === fieldValue || !newDateISO) return;
+
+    setFieldValue(newDateISO);
+
+    if (currentEntityId && updateField && newDateISO) {
+      updateField(currentEntityId, viewField, newDateISO);
+    }
+  }
+
+  return (
+    <EditableFieldEditModeDate value={fieldValue} onChange={handleSubmit} />
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableField.tsx

@@ -0,0 +1,35 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+
+import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
+import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
+import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
+
+import { GenericEditableDateField } from './GenericEditableDateField';
+import { GenericEditableNumberField } from './GenericEditableNumberField';
+import { GenericEditableRelationField } from './GenericEditableRelationField';
+import { ProbabilityEditableField } from './ProbabilityEditableField';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldMetadata>;
+};
+
+export function GenericEditableField({ viewField: fieldDefinition }: OwnProps) {
+  if (isViewFieldDate(fieldDefinition)) {
+    return <GenericEditableDateField viewField={fieldDefinition} />;
+  } else if (isViewFieldNumber(fieldDefinition)) {
+    return <GenericEditableNumberField viewField={fieldDefinition} />;
+  } else if (isViewFieldRelation(fieldDefinition)) {
+    return <GenericEditableRelationField viewField={fieldDefinition} />;
+  } else if (isViewFieldProbability(fieldDefinition)) {
+    return <ProbabilityEditableField viewField={fieldDefinition} />;
+  } else {
+    console.warn(
+      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableField`,
+    );
+    return <></>;
+  }
+}

front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldNumberMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+import { EditableField } from './EditableField';
+import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+};
+
+export function GenericEditableNumberField({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        iconLabel={viewField.columnIcon}
+        editModeContent={
+          <GenericEditableNumberFieldEditMode viewField={viewField} />
+        }
+        displayModeContent={fieldValue}
+        isDisplayModeContentEmpty={!fieldValue}
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx

@@ -0,0 +1,78 @@
+import { useContext, useRef, useState } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldNumberMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+import {
+  canBeCastAsIntegerOrNull,
+  castAsIntegerOrNull,
+} from '~/utils/cast-as-integer-or-null';
+
+import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+};
+
+export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<number | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+  const [internalValue, setInternalValue] = useState(
+    fieldValue ? fieldValue.toString() : '',
+  );
+
+  const updateField = useUpdateGenericEntityField();
+
+  function handleSubmit() {
+    if (!canBeCastAsIntegerOrNull(internalValue)) {
+      return;
+    }
+    if (internalValue === fieldValue) return;
+
+    setFieldValue(castAsIntegerOrNull(internalValue));
+
+    if (currentEntityId && updateField) {
+      updateField(
+        currentEntityId,
+        viewField,
+        castAsIntegerOrNull(internalValue),
+      );
+    }
+  }
+
+  function onCancel() {
+    setFieldValue(fieldValue);
+  }
+
+  function handleChange(newValue: string) {
+    setInternalValue(newValue);
+  }
+  const wrapperRef = useRef(null);
+
+  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
+
+  return (
+    <div ref={wrapperRef}>
+      <TextInputEdit
+        autoFocus
+        value={internalValue ? internalValue.toString() : ''}
+        onChange={(newValue: string) => {
+          handleChange(newValue);
+        }}
+      />
+    </div>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx

@@ -0,0 +1,80 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { PersonChip } from '@/people/components/PersonChip';
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+import { EditableField } from './EditableField';
+import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
+};
+
+function RelationChip({
+  fieldDefinition,
+  fieldValue,
+}: {
+  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldValue: any | null;
+}) {
+  switch (fieldDefinition.metadata.relationType) {
+    case Entity.Person: {
+      return (
+        <PersonChip
+          id={fieldValue?.id ?? ''}
+          name={fieldValue?.displayName ?? ''}
+          pictureUrl={fieldValue?.avatarUrl ?? ''}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
+      );
+      return <> </>;
+  }
+}
+
+export function GenericEditableRelationField({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  const fieldValue = useRecoilValue<any | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <RecoilScope>
+        <EditableField
+          useEditButton
+          customEditHotkeyScope={{
+            scope: RelationPickerHotkeyScope.RelationPicker,
+          }}
+          iconLabel={viewField.columnIcon}
+          editModeContent={
+            <GenericEditableRelationFieldEditMode viewField={viewField} />
+          }
+          displayModeContent={
+            <RelationChip fieldDefinition={viewField} fieldValue={fieldValue} />
+          }
+          isDisplayModeContentEmpty={!fieldValue}
+          isDisplayModeFixHeight
+        />
+      </RecoilScope>
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx

@@ -0,0 +1,102 @@
+import { useContext } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { PeoplePicker } from '@/people/components/PeoplePicker';
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+  ViewFieldRelationValue,
+} from '@/ui/editable-field/types/ViewField';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+import { useEditableField } from '../hooks/useEditableField';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+const RelationPickerContainer = styled.div`
+  left: 0px;
+  position: absolute;
+  top: -8px;
+`;
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
+};
+
+function RelationPicker({
+  fieldDefinition,
+  fieldValue,
+  handleEntitySubmit,
+  handleCancel,
+}: {
+  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldValue: ViewFieldRelationValue;
+  handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
+  handleCancel: () => void;
+}) {
+  switch (fieldDefinition.metadata.relationType) {
+    case Entity.Person: {
+      return (
+        <PeoplePicker
+          personId={fieldValue?.id ?? null}
+          onSubmit={handleEntitySubmit}
+          onCancel={handleCancel}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
+      );
+      return <> </>;
+  }
+}
+
+export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<any | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const updateField = useUpdateGenericEntityField();
+  const { closeEditableField } = useEditableField();
+
+  function handleSubmit(newRelation: EntityForSelect | null) {
+    if (newRelation?.id === fieldValue?.id) return;
+
+    setFieldValue({
+      id: newRelation?.id ?? null,
+      displayName: newRelation?.name ?? null,
+      avatarUrl: newRelation?.avatarUrl ?? null,
+    });
+
+    if (currentEntityId && updateField) {
+      updateField(currentEntityId, viewField, newRelation);
+    }
+
+    closeEditableField();
+  }
+
+  function handleCancel() {
+    closeEditableField();
+  }
+
+  return (
+    <RelationPickerContainer>
+      <RelationPicker
+        fieldDefinition={viewField}
+        fieldValue={fieldValue}
+        handleEntitySubmit={handleSubmit}
+        handleCancel={handleCancel}
+      />
+    </RelationPickerContainer>
+  );
+}

front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx

@@ -0,0 +1,28 @@
+import { EditableField } from '@/ui/editable-field/components/EditableField';
+import { FieldContext } from '@/ui/editable-field/states/FieldContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldProbabilityMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
+};
+
+export function ProbabilityEditableField({ viewField }: OwnProps) {
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        iconLabel={viewField.columnIcon}
+        displayModeContent={
+          <ProbabilityEditableFieldEditMode viewField={viewField} />
+        }
+        displayModeContentOnly
+        disableHoverEffect
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx

@@ -0,0 +1,136 @@
+import { useContext, useState } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
+
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import {
+  ViewFieldDefinition,
+  ViewFieldProbabilityMetadata,
+} from '../types/ViewField';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 100%;
+`;
+
+const StyledProgressBarItemContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(4)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledProgressBarItem = styled.div<{
+  isFirst: boolean;
+  isLast: boolean;
+  isActive: boolean;
+}>`
+  background-color: ${({ theme, isActive }) =>
+    isActive
+      ? theme.font.color.secondary
+      : theme.background.transparent.medium};
+  border-bottom-left-radius: ${({ theme, isFirst }) =>
+    isFirst ? theme.border.radius.sm : theme.border.radius.xs};
+  border-bottom-right-radius: ${({ theme, isLast }) =>
+    isLast ? theme.border.radius.sm : theme.border.radius.xs};
+  border-top-left-radius: ${({ theme, isFirst }) =>
+    isFirst ? theme.border.radius.sm : theme.border.radius.xs};
+  border-top-right-radius: ${({ theme, isLast }) =>
+    isLast ? theme.border.radius.sm : theme.border.radius.xs};
+  height: ${({ theme }) => theme.spacing(2)};
+  width: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledProgressBarContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 100%;
+`;
+
+const StyledLabel = styled.div`
+  width: ${({ theme }) => theme.spacing(12)};
+`;
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
+};
+
+const PROBABILITY_VALUES = [
+  { label: '0%', value: 0 },
+  { label: '25%', value: 25 },
+  { label: '50%', value: 50 },
+  { label: '75%', value: 75 },
+  { label: '100%', value: 100 },
+];
+
+export function ProbabilityEditableFieldEditMode({ viewField }: OwnProps) {
+  const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
+    number | null
+  >(null);
+  const currentEntityId = useContext(BoardCardIdContext);
+  const [fieldValue, setFieldValue] = useRecoilState<number>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const probabilityIndex = Math.ceil(fieldValue / 25);
+  const { closeEditableField } = useEditableField();
+
+  const updateField = useUpdateGenericEntityField();
+
+  function handleChange(newValue: number) {
+    setFieldValue(newValue);
+    if (currentEntityId && updateField && newValue) {
+      updateField(currentEntityId, viewField, newValue);
+    }
+    closeEditableField();
+  }
+
+  console.log(probabilityIndex);
+
+  return (
+    <StyledContainer>
+      <StyledLabel>
+        {
+          PROBABILITY_VALUES[
+            nextProbabilityIndex || nextProbabilityIndex === 0
+              ? nextProbabilityIndex
+              : probabilityIndex
+          ].label
+        }
+      </StyledLabel>
+      <StyledProgressBarContainer>
+        {PROBABILITY_VALUES.map((probability, i) => (
+          <StyledProgressBarItemContainer
+            key={i}
+            onClick={() => handleChange(probability.value)}
+            onMouseEnter={() => setNextProbabilityIndex(i)}
+            onMouseLeave={() => setNextProbabilityIndex(null)}
+          >
+            <StyledProgressBarItem
+              isActive={
+                nextProbabilityIndex || nextProbabilityIndex === 0
+                  ? i <= nextProbabilityIndex
+                  : i <= probabilityIndex
+              }
+              key={probability.label}
+              isFirst={i === 0}
+              isLast={i === PROBABILITY_VALUES.length - 1}
+            />
+          </StyledProgressBarItemContainer>
+        ))}
+      </StyledProgressBarContainer>
+    </StyledContainer>
+  );
+}

front/src/modules/ui/editable-field/hooks/useCurrentEntityId.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { EntityIdContext } from '../states/EntityIdContext';
+
+export function useCurrentEntityId() {
+  return useContext(EntityIdContext);
+}

front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts

@@ -0,0 +1,246 @@
+import { useContext } from 'react';
+
+import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
+import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
+
+import { isViewFieldChipValue } from '../types/guards/isViewFieldChipValue';
+import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { isViewFieldDateValue } from '../types/guards/isViewFieldDateValue';
+import { isViewFieldDoubleText } from '../types/guards/isViewFieldDoubleText';
+import { isViewFieldDoubleTextChip } from '../types/guards/isViewFieldDoubleTextChip';
+import { isViewFieldDoubleTextChipValue } from '../types/guards/isViewFieldDoubleTextChipValue';
+import { isViewFieldDoubleTextValue } from '../types/guards/isViewFieldDoubleTextValue';
+import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
+import { isViewFieldNumberValue } from '../types/guards/isViewFieldNumberValue';
+import { isViewFieldPhone } from '../types/guards/isViewFieldPhone';
+import { isViewFieldPhoneValue } from '../types/guards/isViewFieldPhoneValue';
+import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
+import { isViewFieldProbabilityValue } from '../types/guards/isViewFieldProbabilityValue';
+import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
+import { isViewFieldRelationValue } from '../types/guards/isViewFieldRelationValue';
+import { isViewFieldText } from '../types/guards/isViewFieldText';
+import { isViewFieldTextValue } from '../types/guards/isViewFieldTextValue';
+import { isViewFieldURL } from '../types/guards/isViewFieldURL';
+import { isViewFieldURLValue } from '../types/guards/isViewFieldURLValue';
+import {
+  ViewFieldChipMetadata,
+  ViewFieldChipValue,
+  ViewFieldDateMetadata,
+  ViewFieldDateValue,
+  ViewFieldDefinition,
+  ViewFieldDoubleTextChipMetadata,
+  ViewFieldDoubleTextChipValue,
+  ViewFieldDoubleTextMetadata,
+  ViewFieldDoubleTextValue,
+  ViewFieldMetadata,
+  ViewFieldNumberMetadata,
+  ViewFieldNumberValue,
+  ViewFieldPhoneMetadata,
+  ViewFieldPhoneValue,
+  ViewFieldProbabilityMetadata,
+  ViewFieldProbabilityValue,
+  ViewFieldRelationMetadata,
+  ViewFieldRelationValue,
+  ViewFieldTextMetadata,
+  ViewFieldTextValue,
+  ViewFieldURLMetadata,
+  ViewFieldURLValue,
+} from '../types/ViewField';
+
+export function useUpdateGenericEntityField() {
+  const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);
+
+  const [updateEntity] = useUpdateEntityMutation();
+
+  return function updatePeopleField<
+    MetadataType extends ViewFieldMetadata,
+    ValueType extends MetadataType extends ViewFieldDoubleTextMetadata
+      ? ViewFieldDoubleTextValue
+      : MetadataType extends ViewFieldTextMetadata
+      ? ViewFieldTextValue
+      : MetadataType extends ViewFieldPhoneMetadata
+      ? ViewFieldPhoneValue
+      : MetadataType extends ViewFieldURLMetadata
+      ? ViewFieldURLValue
+      : MetadataType extends ViewFieldNumberMetadata
+      ? ViewFieldNumberValue
+      : MetadataType extends ViewFieldDateMetadata
+      ? ViewFieldDateValue
+      : MetadataType extends ViewFieldChipMetadata
+      ? ViewFieldChipValue
+      : MetadataType extends ViewFieldDoubleTextChipMetadata
+      ? ViewFieldDoubleTextChipValue
+      : MetadataType extends ViewFieldRelationMetadata
+      ? ViewFieldRelationValue
+      : MetadataType extends ViewFieldProbabilityMetadata
+      ? ViewFieldProbabilityValue
+      : unknown,
+  >(
+    currentEntityId: string,
+    viewField: ViewFieldDefinition<MetadataType>,
+    newFieldValue: ValueType,
+  ) {
+    const newFieldValueUnknown = newFieldValue as unknown;
+    // TODO: improve type guards organization, maybe with a common typeguard for all view fields
+    //    taking an object of options as parameter ?
+    //
+    // The goal would be to check that the view field value not only is valid,
+    //    but also that it is validated against the corresponding view field type
+
+    // Relation
+    if (
+      isViewFieldRelation(viewField) &&
+      isViewFieldRelationValue(newFieldValueUnknown)
+    ) {
+      const newSelectedEntity = newFieldValueUnknown;
+
+      const fieldName = viewField.metadata.fieldName;
+
+      if (!newSelectedEntity) {
+        updateEntity({
+          variables: {
+            where: { id: currentEntityId },
+            data: {
+              [fieldName]: {
+                disconnect: true,
+              },
+            },
+          },
+        });
+      } else {
+        updateEntity({
+          variables: {
+            where: { id: currentEntityId },
+            data: {
+              [fieldName]: {
+                connect: { id: newSelectedEntity.id },
+              },
+            },
+          },
+        });
+      }
+      // Chip
+    } else if (
+      isViewFieldChip(viewField) &&
+      isViewFieldChipValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.contentFieldName]: newContent },
+        },
+      });
+      // Text
+    } else if (
+      isViewFieldText(viewField) &&
+      isViewFieldTextValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Double text
+    } else if (
+      isViewFieldDoubleText(viewField) &&
+      isViewFieldDoubleTextValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: {
+            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+          },
+        },
+      });
+      //  Double Text Chip
+    } else if (
+      isViewFieldDoubleTextChip(viewField) &&
+      isViewFieldDoubleTextChipValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: {
+            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+          },
+        },
+      });
+      // Phone
+    } else if (
+      isViewFieldPhone(viewField) &&
+      isViewFieldPhoneValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // URL
+    } else if (
+      isViewFieldURL(viewField) &&
+      isViewFieldURLValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Number
+    } else if (
+      isViewFieldNumber(viewField) &&
+      isViewFieldNumberValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Date
+    } else if (
+      isViewFieldDate(viewField) &&
+      isViewFieldDateValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+    } else if (
+      isViewFieldProbability(viewField) &&
+      isViewFieldProbabilityValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+    }
+  };
+}

front/src/modules/ui/editable-field/states/EditableFieldContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EditableFieldContext = createContext<string | null>(null);

front/src/modules/ui/editable-field/states/EntityIdContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EntityIdContext = createContext<string | null>(null);

front/src/modules/ui/editable-field/states/genericEntitiesFamilyState.ts

@@ -0,0 +1,9 @@
+import { atomFamily } from 'recoil';
+
+export const genericEntitiesFamilyState = atomFamily<
+  Record<string, unknown> | null,
+  string
+>({
+  key: 'genericEntitiesFamilyState',
+  default: null,
+});

front/src/modules/ui/editable-field/states/genericEntityFieldFamilySelector.ts

@@ -0,0 +1,18 @@
+import { selectorFamily } from 'recoil';
+
+import { genericEntitiesFamilyState } from './genericEntitiesFamilyState';
+
+export const genericEntityFieldFamilySelector = selectorFamily({
+  key: 'genericEntityFieldFamilySelector',
+  get:
+    <T>({ fieldName, entityId }: { fieldName: string; entityId: string }) =>
+    ({ get }) =>
+      get(genericEntitiesFamilyState(entityId))?.[fieldName] as T,
+  set:
+    <T>({ fieldName, entityId }: { fieldName: string; entityId: string }) =>
+    ({ set }, newValue: T) =>
+      set(genericEntitiesFamilyState(entityId), (prevState) => ({
+        ...prevState,
+        [fieldName]: newValue,
+      })),
+});

front/src/modules/ui/editable-field/types/ViewField.ts

@@ -10,7 +10,8 @@ export type ViewFieldType =
   | 'number'
   | 'date'
   | 'phone'
-  | 'url';
+  | 'url'
+  | 'probability';
 
 export type ViewFieldTextMetadata = {
   type: 'text';
@@ -72,6 +73,11 @@ export type ViewFieldDoubleTextChipMetadata = {
   entityType: Entity;
 };
 
+export type ViewFieldProbabilityMetadata = {
+  type: 'probability';
+  fieldName: string;
+};
+
 export type ViewFieldMetadata = { type: ViewFieldType } & (
   | ViewFieldTextMetadata
   | ViewFieldRelationMetadata
@@ -82,6 +88,7 @@ export type ViewFieldMetadata = { type: ViewFieldType } & (
   | ViewFieldURLMetadata
   | ViewFieldNumberMetadata
   | ViewFieldDateMetadata
+  | ViewFieldProbabilityMetadata
 );
 
 export type ViewFieldDefinition<T extends ViewFieldMetadata | unknown> = {
@@ -101,7 +108,8 @@ export type ViewFieldChipValue = string;
 export type ViewFieldDateValue = string;
 export type ViewFieldPhoneValue = string;
 export type ViewFieldURLValue = string;
-export type ViewFieldNumberValue = number;
+export type ViewFieldNumberValue = number | null;
+export type ViewFieldProbabilityValue = number;
 
 export type ViewFieldDoubleTextValue = {
   firstValue: string;

front/src/modules/ui/editable-field/types/guards/isViewFieldProbability.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldProbabilityMetadata,
+} from '../ViewField';
+
+export function isViewFieldProbability(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldProbabilityMetadata> {
+  return field.metadata.type === 'probability';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldProbabilityValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldProbabilityValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldProbabilityValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldProbabilityValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'number'
+  );
+}

front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
@@ -16,49 +14,29 @@ type OwnProps = {
 };
 
 export function DateEditableField({ icon, value, label, onSubmit }: OwnProps) {
-  const [internalValue, setInternalValue] = useState(value);
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
   async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-
     onSubmit?.(newValue);
   }
 
-  async function handleSubmit() {
-    if (!internalValue) return;
-
-    onSubmit?.(internalValue);
-  }
-
-  async function handleCancel() {
-    setInternalValue(value);
-  }
-
-  const internalDateValue = internalValue
-    ? parseDate(internalValue).toJSDate()
-    : null;
+  const internalDateValue = value ? parseDate(value).toJSDate() : null;
 
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
+        // onSubmit={handleSubmit}
+        // onCancel={handleCancel}
         iconLabel={icon}
         label={label}
         editModeContent={
           <EditableFieldEditModeDate
-            value={internalValue || new Date().toISOString()}
+            value={value || new Date().toISOString()}
             onChange={(newValue: string) => {
               handleChange(newValue);
             }}
           />
         }
         displayModeContent={<DateInputDisplay value={internalDateValue} />}
-        isDisplayModeContentEmpty={!internalValue}
+        isDisplayModeContentEmpty={!value}
       />
     </RecoilScope>
   );

front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { parseDate } from '~/utils/date-utils';
@@ -11,6 +13,12 @@ type OwnProps = {
 };
 
 export function EditableFieldEditModeDate({ value, onChange }: OwnProps) {
+  const [internalValue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
   const { closeEditableField } = useEditableField();
 
   function handleChange(newValue: string) {
@@ -20,7 +28,7 @@ export function EditableFieldEditModeDate({ value, onChange }: OwnProps) {
 
   return (
     <DateInputEdit
-      value={parseDate(value).toJSDate()}
+      value={internalValue ? parseDate(internalValue).toJSDate() : new Date()}
       onChange={(newDate: Date) => {
         handleChange(newDate.toISOString());
       }}

front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx

@@ -1,73 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { EditableField } from '@/ui/editable-field/components/EditableField';
-import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import {
-  canBeCastAsIntegerOrNull,
-  castAsIntegerOrNull,
-} from '~/utils/cast-as-integer-or-null';
-
-type OwnProps = {
-  icon?: React.ReactNode;
-  placeholder?: string;
-  value: number | null | undefined;
-  onSubmit?: (newValue: number | null) => void;
-};
-
-export function NumberEditableField({
-  icon,
-  placeholder,
-  value,
-  onSubmit,
-}: OwnProps) {
-  const [internalValue, setInternalValue] = useState(value?.toString());
-
-  useEffect(() => {
-    setInternalValue(value?.toString());
-  }, [value]);
-
-  async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-  }
-
-  async function handleSubmit() {
-    if (!canBeCastAsIntegerOrNull(internalValue)) {
-      handleCancel();
-      return;
-    }
-
-    const valueCastedAsNumberOrNull = castAsIntegerOrNull(internalValue);
-
-    onSubmit?.(valueCastedAsNumberOrNull);
-
-    setInternalValue(valueCastedAsNumberOrNull?.toString());
-  }
-
-  async function handleCancel() {
-    setInternalValue(value?.toString());
-  }
-
-  return (
-    <RecoilScope SpecificContext={FieldContext}>
-      <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
-        iconLabel={icon}
-        editModeContent={
-          <TextInputEdit
-            placeholder={placeholder ?? ''}
-            autoFocus
-            value={internalValue ?? ''}
-            onChange={(newValue: string) => {
-              handleChange(newValue);
-            }}
-          />
-        }
-        displayModeContent={internalValue}
-        isDisplayModeContentEmpty={!(internalValue !== '' && internalValue)}
-      />
-    </RecoilScope>
-  );
-}

front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { IconCurrencyDollar } from '@tabler/icons-react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { NumberEditableField } from '../NumberEditableField';
-
-const meta: Meta<typeof NumberEditableField> = {
-  title: 'UI/EditableField/NumberEditableField',
-  component: NumberEditableField,
-  decorators: [ComponentDecorator],
-  argTypes: {
-    icon: {
-      type: 'boolean',
-      mapping: {
-        true: <IconCurrencyDollar />,
-        false: undefined,
-      },
-    },
-    value: { control: { type: 'number' } },
-  },
-  args: {
-    value: 10,
-    icon: true,
-    placeholder: 'Number',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof NumberEditableField>;
-
-export const Default: Story = {};

front/src/modules/ui/filter-n-sort/states/AvailableFiltersContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { FilterDefinition } from '../types/FilterDefinition';
+
+export const AvailableFiltersContext = createContext<FilterDefinition[]>([]);

front/src/modules/ui/table/components/EntityTableColumnMenu.tsx

@@ -12,7 +12,7 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import type {
   ViewFieldDefinition,
   ViewFieldMetadata,
-} from '../types/ViewField';
+} from '../../editable-field/types/ViewField';
 
 const StyledColumnMenu = styled(DropdownMenu)`
   font-weight: ${({ theme }) => theme.font.weight.regular};

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -13,6 +13,10 @@ import {
   useUpdateViewFieldMutation,
 } from '~/generated/graphql';
 
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '../../editable-field/types/ViewField';
 import { toViewFieldInput } from '../hooks/useLoadView';
 import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
 import {
@@ -21,10 +25,6 @@ import {
   viewFieldsState,
   visibleViewFieldsState,
 } from '../states/viewFieldsState';
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '../types/ViewField';
 
 import { ColumnHead } from './ColumnHead';
 import { EntityTableColumnMenu } from './EntityTableColumnMenu';

front/src/modules/ui/table/components/GenericEntityTableData.tsx

@@ -1,10 +1,10 @@
 import { defaultOrderBy } from '@/people/queries';
-import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
-import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
 import {
   ViewFieldDefinition,
   ViewFieldMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
+import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
 
 import { useLoadView } from '../hooks/useLoadView';
 

front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx

@@ -1,17 +1,17 @@
+import { isViewFieldDate } from '@/ui/editable-field/types/guards/isViewFieldDate';
+import { isViewFieldDoubleText } from '@/ui/editable-field/types/guards/isViewFieldDoubleText';
+import { isViewFieldDoubleTextChip } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChip';
+import { isViewFieldNumber } from '@/ui/editable-field/types/guards/isViewFieldNumber';
+import { isViewFieldPhone } from '@/ui/editable-field/types/guards/isViewFieldPhone';
+import { isViewFieldRelation } from '@/ui/editable-field/types/guards/isViewFieldRelation';
+import { isViewFieldText } from '@/ui/editable-field/types/guards/isViewFieldText';
+import { isViewFieldURL } from '@/ui/editable-field/types/guards/isViewFieldURL';
 import {
   ViewFieldDefinition,
   ViewFieldMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
 
-import { isViewFieldChip } from '../../types/guards/isViewFieldChip';
-import { isViewFieldDate } from '../../types/guards/isViewFieldDate';
-import { isViewFieldDoubleText } from '../../types/guards/isViewFieldDoubleText';
-import { isViewFieldDoubleTextChip } from '../../types/guards/isViewFieldDoubleTextChip';
-import { isViewFieldNumber } from '../../types/guards/isViewFieldNumber';
-import { isViewFieldPhone } from '../../types/guards/isViewFieldPhone';
-import { isViewFieldRelation } from '../../types/guards/isViewFieldRelation';
-import { isViewFieldText } from '../../types/guards/isViewFieldText';
-import { isViewFieldURL } from '../../types/guards/isViewFieldURL';
+import { isViewFieldChip } from '../../../editable-field/types/guards/isViewFieldChip';
 import { GenericEditableChipCell } from '../type/components/GenericEditableChipCell';
 import { GenericEditableDateCell } from '../type/components/GenericEditableDateCell';
 import { GenericEditableDoubleTextCell } from '../type/components/GenericEditableDoubleTextCell';

front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx

@@ -1,8 +1,8 @@
-import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import {
   ViewFieldChipMetadata,
   ViewFieldDefinition,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 
 import { GenericEditableChipCellDisplayMode } from './GenericEditableChipCellDisplayMode';
 import { GenericEditableChipCellEditMode } from './GenericEditableChipCellEditMode';

front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 
 import { CompanyChip } from '@/companies/components/CompanyChip';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldChipMetadata,
   ViewFieldDefinition,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import { getLogoUrlFromDomainName } from '~/utils';
 
 type OwnProps = {

front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx

@@ -1,12 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldChipMetadata,
   ViewFieldDefinition,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { TextCellEdit } from './TextCellEdit';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 
+import {
+  ViewFieldDateMetadata,
+  ViewFieldDefinition,
+} from '@/ui/editable-field/types/ViewField';
 import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import {
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-} from '@/ui/table/types/ViewField';
 
 import { GenericEditableDateCellEditMode } from './GenericEditableDateCellEditMode';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx

@@ -1,13 +1,13 @@
 import { DateTime } from 'luxon';
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDateMetadata,
   ViewFieldDefinition,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { DateCellEdit } from './DateCellEdit';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 
+import {
+  ViewFieldDefinition,
+  ViewFieldDoubleTextMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import {
-  ViewFieldDefinition,
-  ViewFieldDoubleTextMetadata,
-} from '@/ui/table/types/ViewField';
 
 import { GenericEditableDoubleTextCellEditMode } from './GenericEditableDoubleTextCellEditMode';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx

@@ -1,12 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldDoubleTextMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { DoubleTextCellEdit } from './DoubleTextCellEdit';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCell.tsx

@@ -1,9 +1,9 @@
-import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
-import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
 import {
   ViewFieldDefinition,
   ViewFieldDoubleTextChipMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
+import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
 
 import { GenericEditableDoubleTextChipCellDisplayMode } from './GenericEditableDoubleTextChipCellDisplayMode';
 import { GenericEditableDoubleTextChipCellEditMode } from './GenericEditableDoubleTextChipCellEditMode';

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx

@@ -2,13 +2,13 @@ import { useRecoilState } from 'recoil';
 
 import { CompanyChip } from '@/companies/components/CompanyChip';
 import { PersonChip } from '@/people/components/PersonChip';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldDoubleTextChipMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 type OwnProps = {
   viewField: ViewFieldDefinition<ViewFieldDoubleTextChipMetadata>;

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx

@@ -1,12 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldDoubleTextChipMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { DoubleTextCellEdit } from './DoubleTextCellEdit';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx

@@ -1,12 +1,12 @@
 import { useRecoilValue } from 'recoil';
 
-import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldNumberMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { GenericEditableNumberCellEditMode } from './GenericEditableNumberCellEditMode';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx

@@ -1,12 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldNumberMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { TextCellEdit } from './TextCellEdit';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 
+import {
+  ViewFieldDefinition,
+  ViewFieldPhoneMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import {
-  ViewFieldDefinition,
-  ViewFieldPhoneMetadata,
-} from '@/ui/table/types/ViewField';
 
 import { GenericEditablePhoneCellEditMode } from './GenericEditablePhoneCellEditMode';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx

@@ -1,12 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldPhoneMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { TextCellEdit } from './TextCellEdit';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCell.tsx

@@ -1,9 +1,9 @@
-import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import {
   ViewFieldDefinition,
   ViewFieldRelationMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 
 import { GenericEditableRelationCellDisplayMode } from './GenericEditableRelationCellDisplayMode';
 import { GenericEditableRelationCellEditMode } from './GenericEditableRelationCellEditMode';

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 
 import { CompanyChip } from '@/companies/components/CompanyChip';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldRelationMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import { UserChip } from '@/users/components/UserChip';
 import { getLogoUrlFromDomainName } from '~/utils';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx

@@ -1,16 +1,16 @@
 import { useRecoilState } from 'recoil';
 
 import { CompanyPickerCell } from '@/companies/components/CompanyPickerCell';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import {
-  ViewFieldDefinition,
-  ViewFieldRelationMetadata,
-} from '@/ui/table/types/ViewField';
 import { UserPicker } from '@/users/components/UserPicker';
 
 type OwnProps = {

front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 
+import {
+  ViewFieldDefinition,
+  ViewFieldTextMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import {
-  ViewFieldDefinition,
-  ViewFieldTextMetadata,
-} from '@/ui/table/types/ViewField';
 
 import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx

@@ -1,12 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldTextMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { TextCellEdit } from './TextCellEdit';
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 
+import {
+  ViewFieldDefinition,
+  ViewFieldURLMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { InplaceInputURLDisplayMode } from '@/ui/input/url/components/URLTextInputDisplay';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import {
-  ViewFieldDefinition,
-  ViewFieldURLMetadata,
-} from '@/ui/table/types/ViewField';
 import { sanitizeURL } from '~/utils';
 
 import { GenericEditableURLCellEditMode } from './GenericEditableURLCellEditMode';

front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx

@@ -1,12 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
-import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 import {
   ViewFieldDefinition,
   ViewFieldURLMetadata,
-} from '@/ui/table/types/ViewField';
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
 import { TextCellEdit } from './TextCellEdit';
 

front/src/modules/ui/table/hooks/useLoadView.ts

@@ -8,13 +8,13 @@ import {
   useGetViewFieldsQuery,
 } from '~/generated/graphql';
 
-import { entityTableDimensionsState } from '../states/entityTableDimensionsState';
-import { viewFieldsState } from '../states/viewFieldsState';
 import type {
   ViewFieldDefinition,
   ViewFieldMetadata,
   ViewFieldTextMetadata,
-} from '../types/ViewField';
+} from '../../editable-field/types/ViewField';
+import { entityTableDimensionsState } from '../states/entityTableDimensionsState';
+import { viewFieldsState } from '../states/viewFieldsState';
 
 const DEFAULT_VIEW_FIELD_METADATA: ViewFieldTextMetadata = {
   type: 'text',

front/src/modules/ui/table/hooks/useUpdateEntityField.ts

@@ -1,25 +1,25 @@
 import { useContext } from 'react';
 
+import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
+import { isViewFieldDate } from '@/ui/editable-field/types/guards/isViewFieldDate';
+import { isViewFieldDateValue } from '@/ui/editable-field/types/guards/isViewFieldDateValue';
+import { isViewFieldDoubleText } from '@/ui/editable-field/types/guards/isViewFieldDoubleText';
+import { isViewFieldDoubleTextChip } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChip';
+import { isViewFieldDoubleTextChipValue } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChipValue';
+import { isViewFieldDoubleTextValue } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextValue';
+import { isViewFieldNumber } from '@/ui/editable-field/types/guards/isViewFieldNumber';
+import { isViewFieldNumberValue } from '@/ui/editable-field/types/guards/isViewFieldNumberValue';
+import { isViewFieldPhone } from '@/ui/editable-field/types/guards/isViewFieldPhone';
+import { isViewFieldPhoneValue } from '@/ui/editable-field/types/guards/isViewFieldPhoneValue';
+import { isViewFieldRelation } from '@/ui/editable-field/types/guards/isViewFieldRelation';
+import { isViewFieldRelationValue } from '@/ui/editable-field/types/guards/isViewFieldRelationValue';
+import { isViewFieldText } from '@/ui/editable-field/types/guards/isViewFieldText';
+import { isViewFieldTextValue } from '@/ui/editable-field/types/guards/isViewFieldTextValue';
+import { isViewFieldURL } from '@/ui/editable-field/types/guards/isViewFieldURL';
+import { isViewFieldURLValue } from '@/ui/editable-field/types/guards/isViewFieldURLValue';
 import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
-import { isViewFieldChip } from '@/ui/table/types/guards/isViewFieldChip';
-import { isViewFieldRelation } from '@/ui/table/types/guards/isViewFieldRelation';
-import { isViewFieldText } from '@/ui/table/types/guards/isViewFieldText';
 
-import { isViewFieldChipValue } from '../types/guards/isViewFieldChipValue';
-import { isViewFieldDate } from '../types/guards/isViewFieldDate';
-import { isViewFieldDateValue } from '../types/guards/isViewFieldDateValue';
-import { isViewFieldDoubleText } from '../types/guards/isViewFieldDoubleText';
-import { isViewFieldDoubleTextChip } from '../types/guards/isViewFieldDoubleTextChip';
-import { isViewFieldDoubleTextChipValue } from '../types/guards/isViewFieldDoubleTextChipValue';
-import { isViewFieldDoubleTextValue } from '../types/guards/isViewFieldDoubleTextValue';
-import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
-import { isViewFieldNumberValue } from '../types/guards/isViewFieldNumberValue';
-import { isViewFieldPhone } from '../types/guards/isViewFieldPhone';
-import { isViewFieldPhoneValue } from '../types/guards/isViewFieldPhoneValue';
-import { isViewFieldRelationValue } from '../types/guards/isViewFieldRelationValue';
-import { isViewFieldTextValue } from '../types/guards/isViewFieldTextValue';
-import { isViewFieldURL } from '../types/guards/isViewFieldURL';
-import { isViewFieldURLValue } from '../types/guards/isViewFieldURLValue';
+import { isViewFieldChipValue } from '../../editable-field/types/guards/isViewFieldChipValue';
 import {
   ViewFieldChipMetadata,
   ViewFieldChipValue,
@@ -41,7 +41,7 @@ import {
   ViewFieldTextValue,
   ViewFieldURLMetadata,
   ViewFieldURLValue,
-} from '../types/ViewField';
+} from '../../editable-field/types/ViewField';
 
 export function useUpdateEntityField() {
   const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);

front/src/modules/ui/table/states/ViewFieldContext.ts

@@ -1,6 +1,9 @@
 import { createContext } from 'react';
 
-import { ViewFieldDefinition, ViewFieldMetadata } from '../types/ViewField';
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '../../editable-field/types/ViewField';
 
 export const ViewFieldContext =
   createContext<ViewFieldDefinition<ViewFieldMetadata> | null>(null);

front/src/modules/ui/table/states/viewFieldsState.ts

@@ -6,7 +6,7 @@ import { peopleViewFields } from '@/people/constants/peopleViewFields';
 import type {
   ViewFieldDefinition,
   ViewFieldMetadata,
-} from '../types/ViewField';
+} from '../../editable-field/types/ViewField';
 
 export const viewFieldsState = atom<{
   objectName: 'company' | 'person' | '';