admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor/inplace input (#541)

Browse Source 
* wip

* Changed all other components

* Removed console log

* Console.log

* lint

* Removed internal state

* Fix

* Lint
This commit is contained in:
Lucas Bordeau
2023-07-09 01:45:52 +02:00
committed by GitHub
parent b3d0061e0d
commit e03d5ed8a7
47 changed files with 680 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/companies/components/CompanyEditableNameCell.tsx
View File

@ -1,6 +1,6 @@
import { CellCommentChip } from '@/comments/components/CellCommentChip';
import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
import EditableChip from '@/ui/components/editable-cell/types/EditableChip';
import { EditableCellChip } from '@/ui/components/editable-cell/types/EditableChip';
import { getLogoUrlFromDomainName } from '@/utils/utils';
import {
CommentableType,
@ -34,7 +34,7 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
}
return (
<EditableChip
<EditableCellChip
value={company.name || ''}
placeholder="Name"
picture={getLogoUrlFromDomainName(company.domainName)}

2
front/src/modules/hotkeys/types/internal/InternalHotkeysScope.ts
View File

@ -5,6 +5,8 @@ export enum InternalHotkeysScope {
Table = 'table',
TableSoftFocus = 'table-soft-focus',
CellEditMode = 'cell-edit-mode',
CellDateEditMode = 'cell-date-edit-mode',
BoardCardFieldEditMode = 'board-card-field-edit-mode',
RightDrawer = 'right-drawer',
TableHeaderDropdownButton = 'table-header-dropdown-button',
RelationPicker = 'relation-picker',

4
front/src/modules/people/components/EditablePeopleFullName.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { CellCommentChip } from '@/comments/components/CellCommentChip';
import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
import { EditableCellDoubleText } from '@/ui/components/editable-cell/types/EditableCellDoubleText';
import { CommentableType, Person } from '~/generated/graphql';
import { PersonChip } from './PersonChip';
@ -52,7 +52,7 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
}
return (
<EditableDoubleText
<EditableCellDoubleText
firstValue={firstNameValue}
secondValue={lastNameValue}
firstValuePlaceholder="First name"

8
front/src/modules/pipeline-progress/components/Board.tsx
View File

@ -9,14 +9,14 @@ import {
} from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
import { useRecoilState } from 'recoil';
import { BoardColumn } from '@/ui/components/board/BoardColumn';
import { BoardColumn } from '@/ui/board/components/BoardColumn';
import { Company, PipelineProgress } from '~/generated/graphql';
import {
Column,
getOptimisticlyUpdatedBoard,
StyledBoard,
} from '../../ui/components/board/Board';
} from '../../ui/board/components/Board';
import { boardColumnsState } from '../states/boardColumnsState';
import { boardItemsState } from '../states/boardItemsState';
import { selectedBoardItemsState } from '../states/selectedBoardItemsState';
@ -81,6 +81,10 @@ export function Board({
);
const [isInitialBoardLoaded, setIsInitialBoardLoaded] = useState(false);
useEffect(() => {
setBoardItems(initialItems);
}, [initialItems, setBoardItems]);
useEffect(() => {
if (isInitialBoardLoaded) return;
setBoard(initialBoard);

60
front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx
View File

@ -2,11 +2,8 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCurrencyDollar } from '@tabler/icons-react';
import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { CellContext } from '@/ui/tables/states/CellContext';
import { RowContext } from '@/ui/tables/states/RowContext';
import { BoardCardEditableFieldDate } from '@/ui/board-card-field-inputs/components/BoardCardEditableFieldDate';
import { BoardCardEditableFieldText } from '@/ui/board-card-field-inputs/components/BoardCardEditableFieldText';
import { Company, PipelineProgress } from '../../../generated/graphql';
import { Checkbox } from '../../ui/components/form/Checkbox';
@ -72,17 +69,6 @@ type PipelineProgressProp = Pick<
'id' | 'amount' | 'closeDate'
>;
// TODO: Remove when refactoring EditableCell into EditableField
function HackScope({ children }: { children: React.ReactNode }) {
return (
<RecoilScope>
<RecoilScope SpecificContext={RowContext}>
<RecoilScope SpecificContext={CellContext}>{children}</RecoilScope>
</RecoilScope>
</RecoilScope>
);
}
export function CompanyBoardCard({
company,
pipelineProgress,
@ -112,32 +98,28 @@ export function CompanyBoardCard({
<StyledBoardCardBody>
<span>
<IconCurrencyDollar size={theme.icon.size.md} />
<HackScope>
<EditableText
content={pipelineProgress.amount?.toString() || ''}
placeholder="Opportunity amount"
changeHandler={(value) =>
onCardUpdate({
...pipelineProgress,
amount: parseInt(value),
})
}
/>
</HackScope>
<BoardCardEditableFieldText
value={pipelineProgress.amount?.toString() || ''}
placeholder="Opportunity amount"
onChange={(value) =>
onCardUpdate({
...pipelineProgress,
amount: parseInt(value),
})
}
/>
</span>
<span>
<IconCalendarEvent size={theme.icon.size.md} />
<HackScope>
<EditableDate
value={new Date(pipelineProgress.closeDate || Date.now())}
changeHandler={(value) => {
onCardUpdate({
...pipelineProgress,
closeDate: value.toISOString(),
});
}}
/>
</HackScope>
<BoardCardEditableFieldDate
value={new Date(pipelineProgress.closeDate || Date.now())}
onChange={(value) => {
onCardUpdate({
...pipelineProgress,
closeDate: value.toISOString(),
});
}}
/>
</span>
</StyledBoardCardBody>
</StyledBoardCard>

4
front/src/modules/pipeline-progress/components/NewButton.tsx
View File

@ -3,8 +3,8 @@ import { useRecoilState } from 'recoil';
import { v4 as uuidv4 } from 'uuid';
import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
import { Column } from '@/ui/components/board/Board';
import { NewButton as UINewButton } from '@/ui/components/board/NewButton';
import { Column } from '@/ui/board/components/Board';
import { NewButton as UINewButton } from '@/ui/board/components/NewButton';
import {
Company,
PipelineProgressableType,

2
front/src/modules/pipeline-progress/components/__stories__/mock-data.ts
View File

@ -1,4 +1,4 @@
import { Column } from '@/ui/components/board/Board';
import { Column } from '@/ui/board/components/Board';
import { mockedCompaniesData } from '~/testing/mock-data/companies';
import { CompanyProgressDict } from '../Board';

2
front/src/modules/pipeline-progress/hooks/useBoard.ts
View File

@ -4,7 +4,7 @@ import {
useGetCompaniesQuery,
useGetPipelinesQuery,
} from '../../../generated/graphql';
import { Column } from '../../ui/components/board/Board';
import { Column } from '../../ui/board/components/Board';
type ItemCompany = Pick<Company, 'id' | 'name' | 'domainName'>;
type ItemPipelineProgress = Pick<

2
front/src/modules/pipeline-progress/states/boardColumnsState.ts
View File

@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { Column } from '@/ui/components/board/Board';
import { Column } from '@/ui/board/components/Board';
export const boardColumnsState = atom<Column[]>({
key: 'boardColumnsState',

26
front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDate.tsx Normal file
View File

@ -0,0 +1,26 @@
import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
import { InplaceInputDateDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputDateDisplayMode';
import { BoardCardEditableFieldDateEditMode } from './BoardCardEditableFieldDateEditMode';
type OwnProps = {
value: Date;
onChange: (newValue: Date) => void;
editModeHorizontalAlign?: 'left' | 'right';
};
export function BoardCardEditableFieldDate({
value,
onChange,
editModeHorizontalAlign,
}: OwnProps) {
return (
<BoardCardEditableField
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<BoardCardEditableFieldDateEditMode value={value} onChange={onChange} />
}
nonEditModeContent={<InplaceInputDateDisplayMode value={value} />}
></BoardCardEditableField>
);
}

21
front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDateEditMode.tsx Normal file
View File

@ -0,0 +1,21 @@
import { useBoardCardField } from '@/ui/board-card-field/hooks/useBoardCardField';
import { InplaceInputDateEditMode } from '@/ui/inplace-inputs/components/InplaceInputDateEditMode';
type OwnProps = {
value: Date;
onChange: (newValue: Date) => void;
};
export function BoardCardEditableFieldDateEditMode({
value,
onChange,
}: OwnProps) {
const { closeBoardCardField } = useBoardCardField();
function handleDateChange(newDate: Date) {
onChange(newDate);
closeBoardCardField();
}
return <InplaceInputDateEditMode value={value} onChange={handleDateChange} />;
}

38
front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldText.tsx Normal file
View File

@ -0,0 +1,38 @@
import { ChangeEvent } from 'react';
import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode';
import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
type OwnProps = {
placeholder?: string;
value: string;
onChange: (newValue: string) => void;
editModeHorizontalAlign?: 'left' | 'right';
};
export function BoardCardEditableFieldText({
value,
placeholder,
onChange,
editModeHorizontalAlign,
}: OwnProps) {
return (
<BoardCardEditableField
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<InplaceInputTextEditMode
placeholder={placeholder || ''}
autoFocus
value={value}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
onChange(event.target.value);
}}
/>
}
nonEditModeContent={
<InplaceInputTextDisplayMode>{value}</InplaceInputTextDisplayMode>
}
></BoardCardEditableField>
);
}

24
front/src/modules/ui/board-card-field/components/BoardCardEditableField.tsx Normal file
View File

@ -0,0 +1,24 @@
import { ReactElement } from 'react';
import { HotkeysScopeStackItem } from '@/hotkeys/types/internal/HotkeysScopeStackItems';
import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
import { BoardCardFieldContext } from '../states/BoardCardFieldContext';
import { BoardCardEditableFieldInternal } from './BoardCardEditableFieldInternal';
type OwnProps = {
editModeContent: ReactElement;
nonEditModeContent: ReactElement;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
editHotkeysScope?: HotkeysScopeStackItem;
};
export function BoardCardEditableField(props: OwnProps) {
return (
<RecoilScope SpecificContext={BoardCardFieldContext}>
<BoardCardEditableFieldInternal {...props} />
</RecoilScope>
);
}

32
front/src/modules/ui/board-card-field/components/BoardCardEditableFieldDisplayMode.tsx Normal file
View File

@ -0,0 +1,32 @@
import styled from '@emotion/styled';
export const BoardCardFieldDisplayModeOuterContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
overflow: hidden;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};
width: 100%;
`;
export const BoardCardFieldDisplayModeInnerContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
overflow: hidden;
width: 100%;
`;
export function BoardCardEditableFieldDisplayMode({
children,
}: React.PropsWithChildren<unknown>) {
return (
<BoardCardFieldDisplayModeOuterContainer>
<BoardCardFieldDisplayModeInnerContainer>
{children}
</BoardCardFieldDisplayModeInnerContainer>
</BoardCardFieldDisplayModeOuterContainer>
);
}

78
front/src/modules/ui/board-card-field/components/BoardCardEditableFieldEditMode.tsx Normal file
View File

@ -0,0 +1,78 @@
import { ReactElement, useRef } from 'react';
import styled from '@emotion/styled';
import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
import { overlayBackground } from '@/ui/themes/effects';
import { useBoardCardField } from '../hooks/useBoardCardField';
export const BoardCardFieldEditModeContainer = styled.div<OwnProps>`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
margin-left: -2px;
min-height: 100%;
min-width: calc(100% + 20px);
position: absolute;
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
z-index: 1;
${overlayBackground}
`;
type OwnProps = {
children: ReactElement;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
onOutsideClick?: () => void;
};
export function BoardCardEditableFieldEditMode({
editModeHorizontalAlign,
editModeVerticalPosition,
children,
}: OwnProps) {
const wrapperRef = useRef(null);
const { closeBoardCardField } = useBoardCardField();
useListenClickOutsideArrayOfRef([wrapperRef], () => {
closeBoardCardField();
});
useScopedHotkeys(
'enter',
() => {
closeBoardCardField();
},
InternalHotkeysScope.BoardCardFieldEditMode,
[closeBoardCardField],
);
useScopedHotkeys(
'esc',
() => {
closeBoardCardField();
},
InternalHotkeysScope.BoardCardFieldEditMode,
[closeBoardCardField],
);
return (
<BoardCardFieldEditModeContainer
data-testid="editable-cell-edit-mode-container"
ref={wrapperRef}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{children}
</BoardCardFieldEditModeContainer>
);
}

71
front/src/modules/ui/board-card-field/components/BoardCardEditableFieldInternal.tsx Normal file
View File

@ -0,0 +1,71 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
import { HotkeysScopeStackItem } from '@/hotkeys/types/internal/HotkeysScopeStackItems';
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
import { useBoardCardField } from '../hooks/useBoardCardField';
import { BoardCardEditableFieldDisplayMode } from './BoardCardEditableFieldDisplayMode';
import { BoardCardEditableFieldEditMode } from './BoardCardEditableFieldEditMode';
export const BoardCardFieldContainer = styled.div`
align-items: center;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 32px;
position: relative;
user-select: none;
width: 100%;
`;
type OwnProps = {
editModeContent: ReactElement;
nonEditModeContent: ReactElement;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
editHotkeysScope?: HotkeysScopeStackItem;
};
export function BoardCardEditableFieldInternal({
editModeHorizontalAlign = 'left',
editModeVerticalPosition = 'over',
editModeContent,
nonEditModeContent,
editHotkeysScope,
}: OwnProps) {
const { openBoardCardField, isBoardCardFieldInEditMode } =
useBoardCardField();
const addToHotkeysScopeStack = useAddToHotkeysScopeStack();
function handleOnClick() {
if (!isBoardCardFieldInEditMode) {
openBoardCardField();
addToHotkeysScopeStack(
editHotkeysScope ?? {
scope: InternalHotkeysScope.BoardCardFieldEditMode,
},
);
}
}
return (
<BoardCardFieldContainer onClick={handleOnClick}>
{isBoardCardFieldInEditMode ? (
<BoardCardEditableFieldEditMode
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{editModeContent}
</BoardCardEditableFieldEditMode>
) : (
<BoardCardEditableFieldDisplayMode>
{nonEditModeContent}
</BoardCardEditableFieldDisplayMode>
)}
</BoardCardFieldContainer>
);
}

26
front/src/modules/ui/board-card-field/hooks/useBoardCardField.ts Normal file
View File

@ -0,0 +1,26 @@
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
import { BoardCardFieldContext } from '../states/BoardCardFieldContext';
import { isBoardCardFieldInEditModeScopedState } from '../states/isBoardCardFieldInEditModeScopedState';
export function useBoardCardField() {
const [isBoardCardFieldInEditMode, setIsBoardCardFieldInEditMode] =
useRecoilScopedState(
isBoardCardFieldInEditModeScopedState,
BoardCardFieldContext,
);
function openBoardCardField() {
setIsBoardCardFieldInEditMode(true);
}
function closeBoardCardField() {
setIsBoardCardFieldInEditMode(false);
}
return {
isBoardCardFieldInEditMode,
openBoardCardField,
closeBoardCardField,
};
}

3
front/src/modules/ui/board-card-field/states/BoardCardFieldContext.ts Normal file
View File

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

9
front/src/modules/ui/board-card-field/states/isBoardCardFieldInEditModeScopedState.ts Normal file
View File

@ -0,0 +1,9 @@
import { atomFamily } from 'recoil';
export const isBoardCardFieldInEditModeScopedState = atomFamily<
boolean,
string
>({
key: 'isBoardCardFieldInEditModeScopedState',
default: false,
});

0
front/src/modules/ui/components/board/Board.tsx → front/src/modules/ui/board/components/Board.tsx
View File

0
front/src/modules/ui/components/board/BoardColumn.tsx → front/src/modules/ui/board/components/BoardColumn.tsx
View File

0
front/src/modules/ui/components/board/NewButton.tsx → front/src/modules/ui/board/components/NewButton.tsx
View File

10
front/src/modules/ui/components/board/__tests__/Board.test.ts → front/src/modules/ui/board/components/__tests__/Board.test.ts
View File

@ -1,14 +1,14 @@
import { DropResult } from '@hello-pangea/dnd';
import { BoardItemKey, getOptimisticlyUpdatedBoard } from '../Board';
import { getOptimisticlyUpdatedBoard } from '../Board';
describe('getOptimisticlyUpdatedBoard', () => {
it('should return a new board with the updated cell', () => {
const initialColumn1: BoardItemKey[] = ['item-1', 'item-2', 'item-3'];
const initialColumn2: BoardItemKey[] = ['item-4', 'item-5'];
const initialColumn1: string[] = ['item-1', 'item-2', 'item-3'];
const initialColumn2: string[] = ['item-4', 'item-5'];
const finalColumn1: BoardItemKey[] = ['item-2', 'item-3'];
const finalColumn2: BoardItemKey[] = ['item-4', 'item-1', 'item-5'];
const finalColumn1: string[] = ['item-2', 'item-3'];
const finalColumn2: string[] = ['item-4', 'item-1', 'item-5'];
const dropResult = {
source: {

10
front/src/modules/ui/components/editable-cell/EditableCell.tsx
View File

@ -1,14 +1,13 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
import { HotkeysScopeStackItem } from '@/hotkeys/types/internal/HotkeysScopeStackItems';
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
import { useEditableCell } from './hooks/useCloseEditableCell';
import { useCurrentCellEditMode } from './hooks/useCurrentCellEditMode';
import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
import { useSoftFocusOnCurrentCell } from './hooks/useSetSoftFocusOnCurrentCell';
import { useSetSoftFocusOnCurrentCell } from './hooks/useSetSoftFocusOnCurrentCell';
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
import { EditableCellEditMode } from './EditableCellEditMode';
import { EditableCellSoftFocusMode } from './EditableCellSoftFocusMode';
@ -41,14 +40,12 @@ export function EditableCell({
}: OwnProps) {
const { isCurrentCellInEditMode } = useCurrentCellEditMode();
const setSoftFocusOnCurrentCell = useSoftFocusOnCurrentCell();
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
const { openEditableCell } = useEditableCell();
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
const addToHotkeysScopeStack = useAddToHotkeysScopeStack();
// TODO: we might have silent problematic behavior because of the setTimeout in openEditableCell, investigate
// Maybe we could build a switchEditableCell to handle the case where we go from one cell to another.
// See https://github.com/twentyhq/twenty/issues/446
@ -58,8 +55,7 @@ export function EditableCell({
}
if (hasSoftFocus) {
openEditableCell();
addToHotkeysScopeStack(
openEditableCell(
editHotkeysScope ?? {
scope: InternalHotkeysScope.CellEditMode,
},

12
front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
import { HotkeysScopeStackItem } from '@/hotkeys/types/internal/HotkeysScopeStackItems';
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@ -14,20 +13,18 @@ export function EditableCellSoftFocusMode({
editHotkeysScope,
}: React.PropsWithChildren<{ editHotkeysScope?: HotkeysScopeStackItem }>) {
const { closeEditableCell, openEditableCell } = useEditableCell();
const addToHotkeysScopeStack = useAddToHotkeysScopeStack();
useScopedHotkeys(
'enter',
() => {
openEditableCell();
addToHotkeysScopeStack(
openEditableCell(
editHotkeysScope ?? {
scope: InternalHotkeysScope.CellEditMode,
},
);
},
InternalHotkeysScope.TableSoftFocus,
[closeEditableCell],
[closeEditableCell, editHotkeysScope],
);
useScopedHotkeys(
@ -42,15 +39,14 @@ export function EditableCellSoftFocusMode({
return;
}
openEditableCell();
addToHotkeysScopeStack(
openEditableCell(
editHotkeysScope ?? {
scope: InternalHotkeysScope.CellEditMode,
},
);
},
InternalHotkeysScope.TableSoftFocus,
[openEditableCell, addToHotkeysScopeStack, editHotkeysScope],
[openEditableCell, editHotkeysScope],
{
preventDefault: false,
},

10
front/src/modules/ui/components/editable-cell/hooks/useCloseEditableCell.ts
View File

@ -1,6 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
import { useRemoveHighestHotkeysScopeStackItem } from '@/hotkeys/hooks/useRemoveHighestHotkeysScopeStackItem';
import { HotkeysScopeStackItem } from '@/hotkeys/types/internal/HotkeysScopeStackItems';
import { useCloseCurrentCellInEditMode } from '@/ui/tables/hooks/useClearCellInEditMode';
import { isSoftFocusActiveState } from '@/ui/tables/states/isSoftFocusActiveState';
import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
@ -10,6 +12,8 @@ import { useCurrentCellEditMode } from './useCurrentCellEditMode';
export function useEditableCell() {
const { setCurrentCellInEditMode } = useCurrentCellEditMode();
const addToHotkeysScopeStack = useAddToHotkeysScopeStack();
const closeCurrentCellInEditMode = useCloseCurrentCellInEditMode();
const removeHighestHotkeysScopedStackItem =
@ -22,7 +26,7 @@ export function useEditableCell() {
const openEditableCell = useRecoilCallback(
({ snapshot, set }) =>
() => {
(hotkeysScopeStackItem: HotkeysScopeStackItem) => {
const isSomeInputInEditMode = snapshot
.getLoadable(isSomeInputInEditModeState)
.valueOrThrow();
@ -32,9 +36,11 @@ export function useEditableCell() {
set(isSoftFocusActiveState, false);
setCurrentCellInEditMode();
addToHotkeysScopeStack(hotkeysScopeStackItem);
}
},
[setCurrentCellInEditMode],
[setCurrentCellInEditMode, addToHotkeysScopeStack],
);
return {

2
front/src/modules/ui/components/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts
View File

@ -12,7 +12,7 @@ import { isSoftFocusActiveState } from '@/ui/tables/states/isSoftFocusActiveStat
import { RowContext } from '@/ui/tables/states/RowContext';
import { CellPosition } from '@/ui/tables/types/CellPosition';
export function useSoftFocusOnCurrentCell() {
export function useSetSoftFocusOnCurrentCell() {
const setSoftFocusPosition = useSetSoftFocusPosition();
const [currentRowNumber] = useRecoilScopedState(
currentRowNumberScopedState,

29
front/src/modules/ui/components/editable-cell/types/EditableCellDate.tsx Normal file
View File

@ -0,0 +1,29 @@
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
import { InplaceInputDateDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputDateDisplayMode';
import { EditableCell } from '../EditableCell';
import { EditableCellDateEditMode } from './EditableCellDateEditMode';
export type EditableDateProps = {
value: Date;
onChange: (date: Date) => void;
editModeHorizontalAlign?: 'left' | 'right';
};
export function EditableCellDate({
value,
onChange,
editModeHorizontalAlign,
}: EditableDateProps) {
return (
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<EditableCellDateEditMode onChange={onChange} value={value} />
}
nonEditModeContent={<InplaceInputDateDisplayMode value={value} />}
editHotkeysScope={{ scope: InternalHotkeysScope.CellDateEditMode }}
></EditableCell>
);
}

22
front/src/modules/ui/components/editable-cell/types/EditableCellDateEditMode.tsx Normal file
View File

@ -0,0 +1,22 @@
import { InplaceInputDateEditMode } from '@/ui/inplace-inputs/components/InplaceInputDateEditMode';
import { useEditableCell } from '../hooks/useCloseEditableCell';
export type EditableDateProps = {
value: Date;
onChange: (date: Date) => void;
};
export function EditableCellDateEditMode({
value,
onChange,
}: EditableDateProps) {
const { closeEditableCell } = useEditableCell();
function handleDateChange(newDate: Date) {
onChange(newDate);
closeEditableCell();
}
return <InplaceInputDateEditMode onChange={handleDateChange} value={value} />;
}

6
front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx → front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx
View File

@ -4,7 +4,7 @@ import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysSc
import { EditableCell } from '../EditableCell';
import { EditableDoubleTextEditMode } from './EditableDoubleTextEditMode';
import { EditableCellDoubleTextEditMode } from './EditableCellDoubleTextEditMode';
type OwnProps = {
firstValue: string;
@ -15,7 +15,7 @@ type OwnProps = {
onChange: (firstValue: string, secondValue: string) => void;
};
export function EditableDoubleText({
export function EditableCellDoubleText({
firstValue,
secondValue,
firstValuePlaceholder,
@ -27,7 +27,7 @@ export function EditableDoubleText({
<EditableCell
editHotkeysScope={{ scope: InternalHotkeysScope.CellDoubleTextInput }}
editModeContent={
<EditableDoubleTextEditMode
<EditableCellDoubleTextEditMode
firstValue={firstValue}
secondValue={secondValue}
firstValuePlaceholder={firstValuePlaceholder}

18
front/src/modules/ui/components/editable-cell/types/EditableDoubleTextEditMode.tsx → front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx
View File

@ -4,8 +4,8 @@ import { Key } from 'ts-key-enum';
import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
import { useMoveSoftFocus } from '@/ui/tables/hooks/useMoveSoftFocus';
import { textInputStyle } from '@/ui/themes/effects';
import { useEditableCell } from '../hooks/useCloseEditableCell';
@ -28,15 +28,7 @@ const StyledContainer = styled.div`
}
`;
const StyledEditInplaceInput = styled.input`
height: 18px;
margin: 0;
width: 45%;
${textInputStyle}
`;
export function EditableDoubleTextEditMode({
export function EditableCellDoubleTextEditMode({
firstValue,
secondValue,
firstValuePlaceholder,
@ -77,7 +69,7 @@ export function EditableDoubleTextEditMode({
useScopedHotkeys(
'tab',
async (keyboardEvent, hotkeyEvent) => {
() => {
if (focusPosition === 'left') {
setFocusPosition('right');
secondValueInputRef.current?.focus();
@ -107,7 +99,7 @@ export function EditableDoubleTextEditMode({
return (
<StyledContainer>
<StyledEditInplaceInput
<InplaceInputTextEditMode
autoFocus
placeholder={firstValuePlaceholder}
ref={firstValueInputRef}
@ -116,7 +108,7 @@ export function EditableDoubleTextEditMode({
onChange(event.target.value, secondValue);
}}
/>
<StyledEditInplaceInput
<InplaceInputTextEditMode
placeholder={secondValuePlaceholder}
ref={secondValueInputRef}
value={secondValue}

39
front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx Normal file
View File

@ -0,0 +1,39 @@
import { ChangeEvent, useRef, useState } from 'react';
import { InplaceInputPhoneDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputPhoneDisplayMode';
import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
import { EditableCell } from '../EditableCell';
type OwnProps = {
placeholder?: string;
value: string;
changeHandler: (updated: string) => void;
};
export function EditableCellPhone({
value,
placeholder,
changeHandler,
}: OwnProps) {
const inputRef = useRef<HTMLInputElement>(null);
const [inputValue, setInputValue] = useState(value);
return (
<EditableCell
editModeContent={
<InplaceInputTextEditMode
autoFocus
placeholder={placeholder || ''}
ref={inputRef}
value={inputValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value);
changeHandler(event.target.value);
}}
/>
}
nonEditModeContent={<InplaceInputPhoneDisplayMode value={inputValue} />}
/>
);
}

2
front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx → front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
export const EditableRelationCreateButton = styled.button`
export const EditableCellRelationCreateButton = styled.button`
align-items: center;
background: none;
border: none;

39
front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx Normal file
View File

@ -0,0 +1,39 @@
import { ChangeEvent } from 'react';
import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode';
import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
import { EditableCell } from '../EditableCell';
type OwnProps = {
placeholder?: string;
value: string;
onChange: (newValue: string) => void;
editModeHorizontalAlign?: 'left' | 'right';
};
export function EditableCellText({
value,
placeholder,
onChange,
editModeHorizontalAlign,
}: OwnProps) {
return (
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<InplaceInputTextEditMode
placeholder={placeholder || ''}
autoFocus
value={value}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
onChange(event.target.value);
}}
/>
}
nonEditModeContent={
<InplaceInputTextDisplayMode>{value}</InplaceInputTextDisplayMode>
}
></EditableCell>
);
}

5
front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
View File

@ -39,7 +39,8 @@ const RightContainer = styled.div`
margin-left: ${(props) => props.theme.spacing(1)};
`;
function EditableChip({
// TODO: move right end content in EditableCell
export function EditableCellChip({
value,
placeholder,
changeHandler,
@ -89,5 +90,3 @@ function EditableChip({
/>
);
}
export default EditableChip;

81
front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
View File

@ -1,81 +0,0 @@
import { forwardRef, useState } from 'react';
import styled from '@emotion/styled';
import { humanReadableDate } from '@/utils/utils';
import DatePicker from '../../form/DatePicker';
import { EditableCell } from '../EditableCell';
export type EditableDateProps = {
value: Date;
changeHandler: (date: Date) => void;
editModeHorizontalAlign?: 'left' | 'right';
};
const StyledContainer = styled.div`
align-items: center;
display: flex;
margin: 0px ${({ theme }) => theme.spacing(2)};
`;
export type StyledCalendarContainerProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: -10px;
position: absolute;
top: 10px;
z-index: 1;
`;
export function EditableDate({
value,
changeHandler,
editModeHorizontalAlign,
}: EditableDateProps) {
const [inputValue, setInputValue] = useState(value);
type DivProps = React.HTMLProps<HTMLDivElement>;
const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
({ value, onClick }, ref) => (
<div onClick={onClick} ref={ref}>
{value && humanReadableDate(new Date(value as string))}
</div>
),
);
type DatePickerContainerProps = {
children: React.ReactNode;
};
const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
};
return (
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<StyledContainer>
<DatePicker
date={inputValue}
onChangeHandler={(date: Date) => {
changeHandler(date);
setInputValue(date);
}}
customInput={<DateDisplay />}
customCalendarContainer={DatePickerContainer}
/>
</StyledContainer>
}
nonEditModeContent={
<div>{inputValue && humanReadableDate(inputValue)}</div>
}
></EditableCell>
);
}

70
front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
View File

@ -1,70 +0,0 @@
import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
import { textInputStyle } from '@/ui/themes/effects';
import { RawLink } from '../../links/RawLink';
import { EditableCell } from '../EditableCell';
type OwnProps = {
placeholder?: string;
value: string;
changeHandler: (updated: string) => void;
};
const StyledRawLink = styled(RawLink)`
overflow: hidden;
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`;
// TODO: refactor
const StyledEditInplaceInput = styled.input`
margin: 0;
width: 100%;
${textInputStyle}
`;
export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {
const inputRef = useRef<HTMLInputElement>(null);
const [inputValue, setInputValue] = useState(value);
return (
<EditableCell
editModeContent={
<StyledEditInplaceInput
autoFocus
placeholder={placeholder || ''}
ref={inputRef}
value={inputValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value);
changeHandler(event.target.value);
}}
/>
}
nonEditModeContent={
<>
{isValidPhoneNumber(inputValue) ? (
<StyledRawLink
href={parsePhoneNumber(inputValue, 'FR')?.getURI()}
onClick={(event: MouseEvent<HTMLElement>) => {
event.stopPropagation();
}}
>
{parsePhoneNumber(inputValue, 'FR')?.formatInternational() ||
inputValue}
</StyledRawLink>
) : (
<StyledRawLink href="#">{inputValue}</StyledRawLink>
)}
</>
}
/>
);
}

56
front/src/modules/ui/components/editable-cell/types/EditableText.tsx
View File

@ -1,56 +0,0 @@
import { ChangeEvent, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell';
type OwnProps = {
placeholder?: string;
content: string;
changeHandler: (updated: string) => void;
editModeHorizontalAlign?: 'left' | 'right';
};
// TODO: refactor
const StyledInplaceInput = styled.input`
margin: 0;
width: 100%;
${textInputStyle}
`;
const StyledNoEditText = styled.div`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
`;
export function EditableText({
content,
placeholder,
changeHandler,
editModeHorizontalAlign,
}: OwnProps) {
const inputRef = useRef<HTMLInputElement>(null);
const [inputValue, setInputValue] = useState(content);
return (
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<StyledInplaceInput
placeholder={placeholder || ''}
autoFocus
ref={inputRef}
value={inputValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value);
changeHandler(event.target.value);
}}
/>
}
nonEditModeContent={<StyledNoEditText>{inputValue}</StyledNoEditText>}
></EditableCell>
);
}

9
front/src/modules/ui/inplace-inputs/components/InplaceInputDateDisplayMode.tsx Normal file
View File

@ -0,0 +1,9 @@
import { humanReadableDate } from '@/utils/utils';
type OwnProps = {
value: Date;
};
export function InplaceInputDateDisplayMode({ value }: OwnProps) {
return <div>{value && humanReadableDate(value)}</div>;
}

62
front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx Normal file
View File

@ -0,0 +1,62 @@
import { forwardRef } from 'react';
import styled from '@emotion/styled';
import DatePicker from '@/ui/components/form/DatePicker';
import { humanReadableDate } from '@/utils/utils';
const StyledContainer = styled.div`
align-items: center;
display: flex;
margin: 0px ${({ theme }) => theme.spacing(2)};
`;
export type StyledCalendarContainerProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: -10px;
position: absolute;
top: 10px;
z-index: 1;
`;
type DivProps = React.HTMLProps<HTMLDivElement>;
const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
({ value, onClick }, ref) => (
<div onClick={onClick} ref={ref}>
{value && humanReadableDate(new Date(value as string))}
</div>
),
);
type DatePickerContainerProps = {
children: React.ReactNode;
};
const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
};
type OwnProps = {
value: Date;
onChange: (newDate: Date) => void;
};
export function InplaceInputDateEditMode({ onChange, value }: OwnProps) {
return (
<StyledContainer>
<DatePicker
date={value}
onChangeHandler={onChange}
customInput={<DateDisplay />}
customCalendarContainer={DatePickerContainer}
/>
</StyledContainer>
);
}

34
front/src/modules/ui/inplace-inputs/components/InplaceInputPhoneDisplayMode.tsx Normal file
View File

@ -0,0 +1,34 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
import { RawLink } from '@/ui/components/links/RawLink';
const StyledRawLink = styled(RawLink)`
overflow: hidden;
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`;
type OwnProps = {
value: string;
};
export function InplaceInputPhoneDisplayMode({ value }: OwnProps) {
return isValidPhoneNumber(value) ? (
<StyledRawLink
href={parsePhoneNumber(value, 'FR')?.getURI()}
onClick={(event: MouseEvent<HTMLElement>) => {
event.stopPropagation();
}}
>
{parsePhoneNumber(value, 'FR')?.formatInternational() || value}
</StyledRawLink>
) : (
<StyledRawLink href="#">{value}</StyledRawLink>
);
}

8
front/src/modules/ui/inplace-inputs/components/InplaceInputTextDisplayMode.tsx Normal file
View File

@ -0,0 +1,8 @@
import styled from '@emotion/styled';
export const InplaceInputTextDisplayMode = styled.div`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
`;

9
front/src/modules/ui/inplace-inputs/components/InplaceInputTextEditMode.tsx Normal file
View File

@ -0,0 +1,9 @@
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/themes/effects';
export const InplaceInputTextEditMode = styled.input`
margin: 0;
width: 100%;
${textInputStyle}
`;

1
front/src/modules/ui/tables/hooks/useClearCellInEditMode.ts
View File

@ -13,6 +13,7 @@ export function useCloseCurrentCellInEditMode() {
set(isCellInEditModeFamilyState(currentCellInEditModePosition), false);
// TODO: find a way to remove this
await new Promise((resolve) => setTimeout(resolve, 20));
set(isSomeInputInEditModeState, false);

26
front/src/pages/companies/companies-columns.tsx
View File

@ -3,8 +3,8 @@ import { createColumnHelper } from '@tanstack/react-table';
import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import {
IconBuildingSkyscraper,
@ -44,10 +44,10 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="URL" viewIcon={<IconLink size={16} />} />
),
cell: (props) => (
<EditableText
content={props.row.original.domainName || ''}
<EditableCellText
value={props.row.original.domainName || ''}
placeholder="Domain name"
changeHandler={(value) => {
onChange={(value) => {
const company = { ...props.row.original };
company.domainName = value;
updateCompany({
@ -66,10 +66,10 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="Employees" viewIcon={<IconUsers size={16} />} />
),
cell: (props) => (
<EditableText
content={props.row.original.employees?.toString() || ''}
<EditableCellText
value={props.row.original.employees?.toString() || ''}
placeholder="Employees"
changeHandler={(value) => {
onChange={(value) => {
const company = { ...props.row.original };
updateCompany({
@ -89,10 +89,10 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="Address" viewIcon={<IconMap size={16} />} />
),
cell: (props) => (
<EditableText
content={props.row.original.address || ''}
<EditableCellText
value={props.row.original.address || ''}
placeholder="Address"
changeHandler={(value) => {
onChange={(value) => {
const company = { ...props.row.original };
company.address = value;
updateCompany({
@ -114,13 +114,13 @@ export const useCompaniesColumns = () => {
/>
),
cell: (props) => (
<EditableDate
<EditableCellDate
value={
props.row.original.createdAt
? new Date(props.row.original.createdAt)
: new Date()
}
changeHandler={(value: Date) => {
onChange={(value: Date) => {
const company = { ...props.row.original };
company.createdAt = value.toISOString();
updateCompany({

6
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,8 +1,10 @@
import { useCallback, useMemo } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import { BoardActionBarButtonDeletePipelineProgress } from '@/pipeline-progress/components/BoardActionBarButtonDeletePipelineProgress';
import { EntityBoardActionBar } from '@/pipeline-progress/components/EntityBoardActionBar';
import { GET_PIPELINES } from '@/pipeline-progress/queries';
import { IconTargetArrow } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
@ -23,6 +25,7 @@ export function Opportunities() {
const pipelineId = pipelines.data?.findManyPipeline[0].id;
const { initialBoard, items } = useBoard(pipelineId || '');
const columns = useMemo(
() =>
initialBoard?.map(({ id, colorCode, title }) => ({
@ -40,12 +43,13 @@ export function Opportunities() {
async (
pipelineProgress: Pick<PipelineProgress, 'id' | 'amount' | 'closeDate'>,
) => {
updatePipelineProgress({
await updatePipelineProgress({
variables: {
id: pipelineProgress.id,
amount: pipelineProgress.amount,
closeDate: pipelineProgress.closeDate || null,
},
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
},
[updatePipelineProgress],

24
front/src/pages/people/people-columns.tsx
View File

@ -3,9 +3,9 @@ import { createColumnHelper } from '@tanstack/react-table';
import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
import { EditableCellPhone } from '@/ui/components/editable-cell/types/EditableCellPhone';
import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import {
IconBuildingSkyscraper,
@ -55,10 +55,10 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="Email" viewIcon={<IconMail size={16} />} />
),
cell: (props) => (
<EditableText
<EditableCellText
placeholder="Email"
content={props.row.original.email || ''}
changeHandler={async (value: string) => {
value={props.row.original.email || ''}
onChange={async (value: string) => {
const person = props.row.original;
await updatePerson({
variables: {
@ -87,7 +87,7 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="Phone" viewIcon={<IconPhone size={16} />} />
),
cell: (props) => (
<EditablePhone
<EditableCellPhone
placeholder="Phone"
value={props.row.original.phone || ''}
changeHandler={async (value: string) => {
@ -112,13 +112,13 @@ export const usePeopleColumns = () => {
/>
),
cell: (props) => (
<EditableDate
<EditableCellDate
value={
props.row.original.createdAt
? new Date(props.row.original.createdAt)
: new Date()
}
changeHandler={async (value: Date) => {
onChange={async (value: Date) => {
const person = { ...props.row.original };
await updatePerson({
variables: {
@ -137,11 +137,11 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="City" viewIcon={<IconMap size={16} />} />
),
cell: (props) => (
<EditableText
<EditableCellText
editModeHorizontalAlign="right"
placeholder="City"
content={props.row.original.city || ''}
changeHandler={async (value: string) => {
value={props.row.original.city || ''}
onChange={async (value: string) => {
const person = { ...props.row.original };
await updatePerson({
variables: {