mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Create consistent ui/input and ui/display for Cell and Fields type : … (#1658)

Browse Source 
* Create consistent ui/input and ui/display for Cell and Fields type : Probability, DoubleText, DoubleTextChip

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Move components to `ui/input`

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Update imports in ProbabilityEditableFieldEditMode

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Create consistent ui/input and ui/display for Cell and Fields type : Probability, DoubleText, DoubleTextChip

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Merge main

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Add more refactors

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
This commit is contained in:
gitstart-twenty
2023-09-25 10:10:14 +01:00
committed by GitHub
parent 1c3897848f
commit f777fa22e9
8 changed files with 242 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
front/src/modules/ui/table/editable-cell/type/components/DoubleTextCellEdit.tsx
View File

@ -1,15 +1,13 @@
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { useEffect, useRef, useState } from 'react';
import { Key } from 'ts-key-enum';
import { DoubleTextInput } from '@/ui/input/components/DoubleTextInput';
import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
import { useRegisterCloseCellHandlers } from '@/ui/table/editable-cell/hooks/useRegisterCloseCellHandlers';
import { useMoveSoftFocus } from '@/ui/table/hooks/useMoveSoftFocus';
import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { StyledInput } from '../../../../input/components/TextInput';
import { useEditableCell } from '../../hooks/useEditableCell';
import { useRegisterCloseCellHandlers } from '../../hooks/useRegisterCloseCellHandlers';
type OwnProps = {
firstValue: string;
secondValue: string;
@ -20,21 +18,6 @@ type OwnProps = {
onCancel?: () => void;
};
const StyledContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
input {
width: ${({ theme }) => theme.spacing(24)};
}
& > input:last-child {
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
padding-left: ${({ theme }) => theme.spacing(2)};
}
`;
export const DoubleTextCellEdit = ({
firstValue,
secondValue,
@ -142,26 +125,17 @@ export const DoubleTextCellEdit = ({
useRegisterCloseCellHandlers(wrapperRef, handleSubmit, handleCancel);
return (
<StyledContainer ref={wrapperRef}>
<StyledInput
autoComplete="off"
autoFocus
placeholder={firstValuePlaceholder}
ref={firstValueInputRef}
value={firstInternalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
handleOnChange(event.target.value, secondInternalValue);
}}
/>
<StyledInput
autoComplete="off"
placeholder={secondValuePlaceholder}
ref={secondValueInputRef}
value={secondInternalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
handleOnChange(firstInternalValue, event.target.value);
}}
/>
</StyledContainer>
<DoubleTextInput
{...{
firstValue,
secondValue,
firstValuePlaceholder,
secondValuePlaceholder,
firstValueInputRef,
secondValueInputRef,
}}
onChange={handleOnChange}
containerRef={wrapperRef}
/>
);
};

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

@ -1,6 +1,6 @@
import { useRecoilValue } from 'recoil';
import { TextDisplay } from '@/ui/content-display/components/TextDisplay';
import { DoubleTextDisplay } from '@/ui/content-display/components/DoubleTextDisplay';
import type { ViewFieldDoubleTextMetadata } from '@/ui/editable-field/types/ViewField';
import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
@ -42,7 +42,7 @@ export const GenericEditableDoubleTextCell = ({
columnDefinition={columnDefinition}
/>
}
nonEditModeContent={<TextDisplay text={displayName} />}
nonEditModeContent={<DoubleTextDisplay text={displayName} />}
></EditableCell>
);
};

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

@ -1,9 +1,7 @@
import { useRecoilState } from 'recoil';
import { CompanyChip } from '@/companies/components/CompanyChip';
import { PersonChip } from '@/people/components/PersonChip';
import { DoubleTextChipDisplay } from '@/ui/content-display/components/DoubleTextChipDisplay';
import type { ViewFieldDoubleTextChipMetadata } 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/selectors/tableEntityFieldFamilySelector';
@ -41,23 +39,12 @@ export const GenericEditableDoubleTextChipCellDisplayMode = ({
const displayName = [firstValue, secondValue].filter(Boolean).join(' ');
switch (columnDefinition.metadata.entityType) {
case Entity.Company: {
return <CompanyChip id={currentRowEntityId ?? ''} name={displayName} />;
}
case Entity.Person: {
return (
<PersonChip
id={currentRowEntityId ?? ''}
name={displayName}
pictureUrl={avatarUrlValue}
/>
);
}
default:
console.warn(
`Unknown relation type: "${columnDefinition.metadata.entityType}" in GenericEditableDoubleTextChipCellDisplayMode`,
);
return <> </>;
}
return (
<DoubleTextChipDisplay
entityType={columnDefinition.metadata.entityType}
displayName={displayName}
entityId={currentRowEntityId}
avatarUrlValue={avatarUrlValue}
/>
);
};