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

Refactor Editable Cell (#191)

Browse Source
This commit is contained in:
Charles Bochet
2023-06-04 22:47:49 +02:00
committed by GitHub
parent 7b858fd7c9
commit d3684b34c5
23 changed files with 123 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx
View File

@ -1,7 +1,6 @@
import styled from '@emotion/styled';
import type { Meta, StoryObj } from '@storybook/react';
import { CellBaseContainer } from '@/ui/components/editable-cell/CellBaseContainer';
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
import { CellCommentChip } from '../CellCommentChip';
@ -46,10 +45,8 @@ export const TooManyComments: Story = {
export const InCellDefault: Story = {
render: getRenderWrapperForComponent(
<TestCellContainer>
<CellBaseContainer>
<StyledFakeCellText>Fake short text</StyledFakeCellText>
<CellCommentChip count={12} />
</CellBaseContainer>
<StyledFakeCellText>Fake short text</StyledFakeCellText>
<CellCommentChip count={12} />
</TestCellContainer>,
),
};
@ -57,12 +54,10 @@ export const InCellDefault: Story = {
export const InCellOverlappingBlur: Story = {
render: getRenderWrapperForComponent(
<TestCellContainer>
<CellBaseContainer>
<StyledFakeCellText>
Fake long text to demonstrate blur effect
</StyledFakeCellText>
<CellCommentChip count={12} />
</CellBaseContainer>
<StyledFakeCellText>
Fake long text to demonstrate blur effect
</StyledFakeCellText>
<CellCommentChip count={12} />
</TestCellContainer>,
),
};

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

@ -1,5 +1,5 @@
import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
import EditableChip from '@/ui/components/editable-cell/EditableChip';
import EditableChip from '@/ui/components/editable-cell/types/EditableChip';
import { getLogoUrlFromDomainName } from '@/utils/utils';
import { Company } from '../interfaces/company.interface';

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

@ -2,7 +2,7 @@ import { useState } from 'react';
import styled from '@emotion/styled';
import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
import { EditableDoubleText } from '@/ui/components/editable-cell/EditableDoubleText';
import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
import { PersonChip } from './PersonChip';

2
front/src/modules/people/components/PeopleCompanyCell.tsx
View File

@ -10,7 +10,7 @@ import {
} from '@/companies/interfaces/company.interface';
import { SearchConfigType } from '@/search/interfaces/interface';
import { SEARCH_COMPANY_QUERY } from '@/search/services/search';
import { EditableRelation } from '@/ui/components/editable-cell/EditableRelation';
import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
import { getLogoUrlFromDomainName } from '@/utils/utils';
import {
QueryMode,

20
front/src/modules/people/components/PeopleCompanyCreateCell.tsx
View File

@ -1,8 +1,6 @@
import { useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { CellBaseContainer } from '@/ui/components/editable-cell/CellBaseContainer';
import { CellEditModeContainer } from '@/ui/components/editable-cell/CellEditModeContainer';
import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput';
import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
@ -43,16 +41,12 @@ export function PeopleCompanyCreateCell({
}
return (
<CellBaseContainer ref={containerRef}>
<CellEditModeContainer editModeVerticalPosition="over">
<DoubleTextInput
leftValue={companyDomainName}
rightValue={companyName}
leftValuePlaceholder="URL"
rightValuePlaceholder="Name"
onChange={handleDoubleTextChange}
/>
</CellEditModeContainer>
</CellBaseContainer>
<DoubleTextInput
leftValue={companyDomainName}
rightValue={companyName}
leftValuePlaceholder="URL"
rightValuePlaceholder="Name"
onChange={handleDoubleTextChange}
/>
);
}

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

@ -1,12 +0,0 @@
import styled from '@emotion/styled';
export const CellBaseContainer = styled.div`
position: relative;
box-sizing: border-box;
height: 32px;
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
user-select: none;
`;

29
front/src/modules/ui/components/editable-cell/CellEditModeContainer.tsx
View File

@ -1,29 +0,0 @@
import styled from '@emotion/styled';
import { overlayBackground } from '../../layout/styles/themes';
type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
};
export const CellEditModeContainer = styled.div<OwnProps>`
display: flex;
align-items: center;
min-width: 100%;
min-height: 100%;
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
margin-left: -2px;
position: absolute;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
border: 1px solid ${(props) => props.theme.primaryBorder};
z-index: 1;
border-radius: 4px;
${overlayBackground}
`;

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

@ -1,12 +0,0 @@
import styled from '@emotion/styled';
export const CellNormalModeContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
`;

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

@ -1,12 +1,23 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
import { CellBaseContainer } from './CellBaseContainer';
import { CellNormalModeContainer } from './CellNormalModeContainer';
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
import { EditableCellEditMode } from './EditableCellEditMode';
export const CellBaseContainer = styled.div`
position: relative;
box-sizing: border-box;
height: 32px;
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
user-select: none;
`;
type OwnProps = {
editModeContent: ReactElement;
nonEditModeContent: ReactElement;
@ -42,16 +53,15 @@ export function EditableCell({
<CellBaseContainer onClick={handleOnClick}>
{isEditMode ? (
<EditableCellEditMode
editModeContent={editModeContent}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
isEditMode={isEditMode}
onOutsideClick={onOutsideClick}
/>
>
{editModeContent}
</EditableCellEditMode>
) : (
<CellNormalModeContainer>
<>{nonEditModeContent}</>
</CellNormalModeContainer>
<EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
)}
</CellBaseContainer>
);

35
front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx Normal file
View File

@ -0,0 +1,35 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
export const EditableCellNormalModeOuterContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
`;
export const EditableCellNormalModeInnerContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
`;
type OwnProps = {
children: ReactElement;
};
export function EditableCellDisplayMode({ children }: OwnProps) {
return (
<EditableCellNormalModeOuterContainer>
<EditableCellNormalModeInnerContainer>
{children}
</EditableCellNormalModeInnerContainer>
</EditableCellNormalModeOuterContainer>
);
}

31
front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx
View File

@ -1,16 +1,35 @@
import { ReactElement, useMemo, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { debounce } from '@/utils/debounce';
import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
import { overlayBackground } from '../../layout/styles/themes';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
import { CellEditModeContainer } from './CellEditModeContainer';
export const EditableCellEditModeContainer = styled.div<OwnProps>`
display: flex;
align-items: center;
min-width: calc(100% + 20px);
min-height: 100%;
margin-left: -2px;
position: absolute;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
border: 1px solid ${(props) => props.theme.primaryBorder};
z-index: 1;
border-radius: 4px;
${overlayBackground}
`;
type OwnProps = {
editModeContent: ReactElement;
children: ReactElement;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
isEditMode?: boolean;
@ -21,7 +40,7 @@ type OwnProps = {
export function EditableCellEditMode({
editModeHorizontalAlign,
editModeVerticalPosition,
editModeContent,
children,
isEditMode,
onOutsideClick,
}: OwnProps) {
@ -77,13 +96,13 @@ export function EditableCellEditMode({
);
return (
<CellEditModeContainer
<EditableCellEditModeContainer
data-testid="editable-cell-edit-mode-container"
ref={wrapperRef}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{editModeContent}
</CellEditModeContainer>
{children}
</EditableCellEditModeContainer>
);
}

67
front/src/modules/ui/components/editable-cell/EditableCellMenu.tsx
View File

@ -1,67 +0,0 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
import { CellBaseContainer } from './CellBaseContainer';
import { EditableCellMenuEditMode } from './EditableCellMenuEditMode';
const EditableCellMenuNormalModeContainer = styled.div`
display: flex;
align-items: center;
width: calc(100% - ${(props) => props.theme.spacing(5)});
height: 100%;
overflow: hidden;
`;
type OwnProps = {
editModeContent: ReactElement;
nonEditModeContent: ReactElement;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
isEditMode?: boolean;
isCreateMode?: boolean;
onOutsideClick?: () => void;
onInsideClick?: () => void;
};
// TODO: refactor
export function EditableCellMenu({
editModeContent,
nonEditModeContent,
editModeHorizontalAlign = 'left',
editModeVerticalPosition = 'over',
isEditMode = false,
onOutsideClick,
onInsideClick,
}: OwnProps) {
const [isSomeInputInEditMode, setIsSomeInputInEditMode] = useRecoilState(
isSomeInputInEditModeState,
);
function handleOnClick() {
if (!isSomeInputInEditMode) {
onInsideClick?.();
setIsSomeInputInEditMode(true);
}
}
return (
<CellBaseContainer onClick={handleOnClick}>
<EditableCellMenuNormalModeContainer>
{nonEditModeContent}
</EditableCellMenuNormalModeContainer>
{isEditMode && (
<EditableCellMenuEditMode
editModeContent={editModeContent}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
isEditMode={isEditMode}
onOutsideClick={onOutsideClick}
onInsideClick={onInsideClick}
/>
)}
</CellBaseContainer>
);
}

88
front/src/modules/ui/components/editable-cell/EditableCellMenuEditMode.tsx
View File

@ -1,88 +0,0 @@
import { ReactElement, useMemo, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useRecoilState } from 'recoil';
import { debounce } from '@/utils/debounce';
import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
import { EditableCellMenuEditModeContainer } from './EditableCellMenuEditModeContainer';
type OwnProps = {
editModeContent: ReactElement;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
isEditMode?: boolean;
onOutsideClick?: () => void;
onInsideClick?: () => void;
};
export function EditableCellMenuEditMode({
editModeHorizontalAlign,
editModeVerticalPosition,
editModeContent,
isEditMode,
onOutsideClick,
}: OwnProps) {
const wrapperRef = useRef(null);
const [, setIsSomeInputInEditMode] = useRecoilState(
isSomeInputInEditModeState,
);
const debouncedSetIsSomeInputInEditMode = useMemo(() => {
return debounce(setIsSomeInputInEditMode, 20);
}, [setIsSomeInputInEditMode]);
useListenClickOutsideArrayOfRef([wrapperRef], () => {
if (isEditMode) {
debouncedSetIsSomeInputInEditMode(false);
onOutsideClick?.();
}
});
useHotkeys(
'esc',
() => {
if (isEditMode) {
onOutsideClick?.();
debouncedSetIsSomeInputInEditMode(false);
}
},
{
preventDefault: true,
enableOnContentEditable: true,
enableOnFormTags: true,
},
[isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode],
);
useHotkeys(
'enter',
() => {
if (isEditMode) {
onOutsideClick?.();
debouncedSetIsSomeInputInEditMode(false);
}
},
{
preventDefault: true,
enableOnContentEditable: true,
enableOnFormTags: true,
},
[isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode],
);
return (
<EditableCellMenuEditModeContainer
ref={wrapperRef}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{editModeContent}
</EditableCellMenuEditModeContainer>
);
}

27
front/src/modules/ui/components/editable-cell/EditableCellMenuEditModeContainer.tsx
View File

@ -1,27 +0,0 @@
import styled from '@emotion/styled';
import { overlayBackground } from '../../layout/styles/themes';
type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
};
// TODO: refactor
export const EditableCellMenuEditModeContainer = styled.div<OwnProps>`
display: flex;
align-items: center;
min-width: 100%;
min-height: 100%;
position: absolute;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '-1px'};
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
border: 1px solid ${(props) => props.theme.primaryBorder};
z-index: 1;
border-radius: 4px;
${overlayBackground}
`;

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

@ -2,10 +2,9 @@ import { ChangeEvent, ComponentType, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '../../layout/styles/themes';
import { EditableCell } from './EditableCell';
import { EditableCell } from '../EditableCell';
export type EditableChipProps = {
placeholder?: string;
@ -30,11 +29,6 @@ const StyledInplaceInput = styled.input`
const StyledInplaceShow = styled.div`
display: flex;
width: 100%;
&::placeholder {
font-weight: 'bold';
color: props.theme.text20;
}
`;
function EditableChip({

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

@ -3,9 +3,8 @@ import styled from '@emotion/styled';
import { humanReadableDate } from '@/utils/utils';
import DatePicker from '../form/DatePicker';
import { EditableCell } from './EditableCell';
import DatePicker from '../../form/DatePicker';
import { EditableCell } from '../EditableCell';
export type EditableDateProps = {
value: Date;
@ -16,6 +15,7 @@ export type EditableDateProps = {
const StyledContainer = styled.div`
display: flex;
align-items: center;
margin: 0px ${(props) => props.theme.spacing(2)};
`;
export type StyledCalendarContainerProps = {
@ -78,9 +78,7 @@ export function EditableDate({
</StyledContainer>
}
nonEditModeContent={
<StyledContainer>
<div>{inputValue && humanReadableDate(inputValue)}</div>
</StyledContainer>
<div>{inputValue && humanReadableDate(inputValue)}</div>
}
></EditableCell>
);

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

@ -1,9 +1,9 @@
import { ChangeEvent, ReactElement, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '../../layout/styles/themes';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { EditableCell } from './EditableCell';
import { EditableCell } from '../EditableCell';
type OwnProps = {
firstValue: string;
@ -28,6 +28,7 @@ const StyledContainer = styled.div`
const StyledEditInplaceInput = styled.input`
width: 45%;
height: 18px;
margin: 0px ${(props) => props.theme.spacing(2)};
${textInputStyle}
`;

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

@ -2,9 +2,10 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
import Link from '../link/Link';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { EditableCell } from './EditableCell';
import Link from '../../link/Link';
import { EditableCell } from '../EditableCell';
type OwnProps = {
placeholder?: string;
@ -19,13 +20,8 @@ type StyledEditModeProps = {
// TODO: refactor
const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
width: 100%;
border: none;
outline: none;
&::placeholder {
font-weight: bold;
color: ${(props) => props.theme.text20};
}
margin: 0px ${(props) => props.theme.spacing(2)};
${textInputStyle}
`;
export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {

17
front/src/modules/ui/components/editable-cell/EditableRelation.tsx → front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx
View File

@ -5,22 +5,19 @@ import { useRecoilState } from 'recoil';
import { SearchConfigType } from '@/search/interfaces/interface';
import { useSearch } from '@/search/services/search';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
import { AnyEntity } from '@/utils/interfaces/generic.interface';
import { isDefined } from '@/utils/type-guards/isDefined';
import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
import { textInputStyle } from '../../layout/styles/themes';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
import { EditableCell } from '../EditableCell';
import { HoverableMenuItem } from '../HoverableMenuItem';
import { CellNormalModeContainer } from './CellNormalModeContainer';
import { EditableCellMenu } from './EditableCellMenu';
import { EditableRelationCreateButton } from './EditableRelationCreateButton';
import { HoverableMenuItem } from './HoverableMenuItem';
const StyledEditModeContainer = styled.div`
width: 200px;
// margin-left: calc(-1 * ${(props) => props.theme.spacing(2)});
// margin-right: calc(-1 * ${(props) => props.theme.spacing(2)});
`;
const StyledEditModeSelectedContainer = styled.div`
@ -144,7 +141,7 @@ export function EditableRelation<
return (
<>
<EditableCellMenu
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
isEditMode={isEditMode}
onOutsideClick={() => setIsEditMode(false)}
@ -207,13 +204,13 @@ export function EditableRelation<
</StyledEditModeContainer>
}
nonEditModeContent={
<CellNormalModeContainer>
<>
{relation ? (
<ChipComponent {...chipComponentPropsMapper(relation)} />
) : (
<></>
)}
</CellNormalModeContainer>
</>
}
/>
</>

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

@ -16,9 +16,4 @@ export const EditableRelationCreateButton = styled.button`
height: 31px;
background: none;
gap: 8px;
// :hover {
// background: rgba(0, 0, 0, 0.04);
// color: ${(props) => props.theme.text100};
// }
// margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
`;

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

@ -1,9 +1,9 @@
import { ChangeEvent, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '../../layout/styles/themes';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { EditableCell } from './EditableCell';
import { EditableCell } from '../EditableCell';
type OwnProps = {
placeholder?: string;
@ -19,6 +19,7 @@ type StyledEditModeProps = {
// TODO: refactor
const StyledInplaceInput = styled.input<StyledEditModeProps>`
width: 100%;
margin: 0px ${(props) => props.theme.spacing(2)};
${textInputStyle}
`;

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

@ -18,9 +18,9 @@ import {
} from '@/people/components/PersonChip';
import { SearchConfigType } from '@/search/interfaces/interface';
import { SEARCH_USER_QUERY } from '@/search/services/search';
import { EditableDate } from '@/ui/components/editable-cell/EditableDate';
import { EditableRelation } from '@/ui/components/editable-cell/EditableRelation';
import { EditableText } from '@/ui/components/editable-cell/EditableText';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';

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

@ -13,9 +13,9 @@ import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullNa
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
import { Person } from '@/people/interfaces/person.interface';
import { updatePerson } from '@/people/services';
import { EditableDate } from '@/ui/components/editable-cell/EditableDate';
import { EditablePhone } from '@/ui/components/editable-cell/EditablePhone';
import { EditableText } from '@/ui/components/editable-cell/EditableText';
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 { CheckboxCell } from '@/ui/components/table/CheckboxCell';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';