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

Feat: First column style update (#1746)

Browse Source 
reimplemented as per suggestions by lucas
This commit is contained in:
Ayush Agrawal
2023-10-04 13:55:43 +05:30
committed by GitHub
parent 5915189a5b
commit 3336144245
17 changed files with 148 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx
View File

@ -1,5 +1,5 @@
import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
import { IconArrowUpRight } from '@/ui/icon';
import { IconArrowUpRight, IconPencil } from '@/ui/icon';
import { InlineCellContainer } from '@/ui/inline-cell/components/InlineCellContainer';
import { FieldRecoilScopeContext } from '@/ui/inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
@ -24,7 +24,7 @@ export const ActivityRelationEditableField = ({ activity }: OwnProps) => {
<RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
<RecoilScope>
<InlineCellContainer
useEditButton
buttonIcon={IconPencil}
customEditHotkeyScope={{
scope: RelationPickerHotkeyScope.RelationPicker,
}}

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

@ -169,7 +169,7 @@ export const CompanyBoardCard = () => {
Icon: viewField.Icon,
type: viewField.type,
metadata: viewField.metadata,
useEditButton: viewField.useEditButton,
buttonIcon: viewField.buttonIcon,
},
useUpdateEntityMutation: useUpdateOnePipelineProgressMutation,
hotkeyScope: InlineCellHotkeyScope.InlineCell,

10
front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx
View File

@ -10,6 +10,7 @@ import {
FieldURLMetadata,
} from '@/ui/field/types/FieldMetadata';
import {
IconArrowUpRight,
IconBrandLinkedin,
IconBrandX,
IconBuildingSkyscraper,
@ -17,6 +18,7 @@ import {
IconLink,
IconMap,
IconMoneybag,
IconPencil,
IconTarget,
IconUserCircle,
IconUsers,
@ -40,6 +42,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'Company Name',
},
isVisible: true,
buttonIcon: IconArrowUpRight,
basePathToShowPage: '/companies/',
} satisfies ColumnDefinition<FieldChipMetadata>,
{
key: 'domainName',
@ -53,7 +57,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'example.com',
},
isVisible: true,
useEditButton: true,
buttonIcon: IconPencil,
} satisfies ColumnDefinition<FieldURLMetadata>,
{
key: 'accountOwner',
@ -106,7 +110,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'LinkedIn URL',
},
isVisible: true,
useEditButton: true,
buttonIcon: IconPencil,
} satisfies ColumnDefinition<FieldURLMetadata>,
{
key: 'address',
@ -157,6 +161,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'X',
},
isVisible: false,
useEditButton: true,
buttonIcon: IconPencil,
} satisfies ColumnDefinition<FieldURLMetadata>,
];

12
front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx
View File

@ -9,6 +9,7 @@ import {
FieldURLMetadata,
} from '@/ui/field/types/FieldMetadata';
import {
IconArrowUpRight,
IconBrandLinkedin,
IconBrandX,
IconBriefcase,
@ -16,6 +17,7 @@ import {
IconCalendarEvent,
IconMail,
IconMap,
IconPencil,
IconPhone,
IconUser,
} from '@/ui/icon/index';
@ -39,6 +41,8 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
avatarUrlFieldName: 'avatarUrl',
entityType: Entity.Person,
},
buttonIcon: IconArrowUpRight,
basePathToShowPage: '/person/',
} satisfies ColumnDefinition<FieldDoubleTextChipMetadata>,
{
key: 'email',
@ -51,7 +55,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'email',
placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies ColumnDefinition<FieldEmailMetadata>,
{
key: 'company',
@ -76,7 +80,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'phone',
placeHolder: 'Phon​e', // Hack: Fake character to prevent password-manager from filling the field
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies ColumnDefinition<FieldPhoneMetadata>,
{
key: 'createdAt',
@ -124,7 +128,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'linkedinUrl',
placeHolder: 'LinkedIn',
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies ColumnDefinition<FieldURLMetadata>,
{
key: 'x',
@ -137,6 +141,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'xUrl',
placeHolder: 'X',
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies ColumnDefinition<FieldURLMetadata>,
];

3
front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx
View File

@ -9,6 +9,7 @@ import {
import {
IconCalendarEvent,
IconCurrencyDollar,
IconPencil,
IconProgressCheck,
IconUser,
} from '@/ui/icon';
@ -62,6 +63,6 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
useEditButton: true,
},
isVisible: true,
useEditButton: true,
buttonIcon: IconPencil,
} satisfies BoardFieldDefinition<FieldRelationMetadata>,
];

37
front/src/modules/ui/field/states/selectors/isEntityFieldEmptyFamilySelector.ts
View File

@ -2,7 +2,9 @@ import { selectorFamily } from 'recoil';
import { FieldDefinition } from '../../types/FieldDefinition';
import { FieldMetadata } from '../../types/FieldMetadata';
import { isFieldChip } from '../../types/guards/isFieldChip';
import { isFieldDate } from '../../types/guards/isFieldDate';
import { isFieldDoubleTextChip } from '../../types/guards/isFieldDoubleTextChip';
import { isFieldEmail } from '../../types/guards/isFieldEmail';
import { isFieldMoney } from '../../types/guards/isFieldMoney';
import { isFieldNumber } from '../../types/guards/isFieldNumber';
@ -51,6 +53,41 @@ export const isEntityFieldEmptyFamilySelector = selectorFamily({
if (isFieldRelationValue(fieldValue)) {
return fieldValue === null || fieldValue === undefined;
}
} else if (isFieldChip(fieldDefinition)) {
const contentFieldName = fieldDefinition.metadata.contentFieldName;
const contentFieldValue = get(entityFieldsFamilyState(entityId))?.[
contentFieldName
] as string | null;
return (
contentFieldValue === null ||
contentFieldValue === undefined ||
contentFieldValue === ''
);
} else if (isFieldDoubleTextChip(fieldDefinition)) {
const firstValueFieldName =
fieldDefinition.metadata.firstValueFieldName;
const secondValueFieldName =
fieldDefinition.metadata.secondValueFieldName;
const contentFieldFirstValue = get(entityFieldsFamilyState(entityId))?.[
firstValueFieldName
] as string | null;
const contentFieldSecondValue = get(
entityFieldsFamilyState(entityId),
)?.[secondValueFieldName] as string | null;
return (
(contentFieldFirstValue === null ||
contentFieldFirstValue === undefined ||
contentFieldFirstValue === '') &&
(contentFieldSecondValue === null ||
contentFieldSecondValue === undefined ||
contentFieldSecondValue === '')
);
}
return false;

3
front/src/modules/ui/field/types/FieldDefinition.ts
View File

@ -9,5 +9,6 @@ export type FieldDefinition<T extends FieldMetadata> = {
Icon?: IconComponent;
type: FieldType;
metadata: T;
useEditButton?: boolean;
buttonIcon?: IconComponent;
basePathToShowPage?: string;
};

2
front/src/modules/ui/inline-cell/components/InlineCell.tsx
View File

@ -57,7 +57,7 @@ export const InlineCell = () => {
return (
<InlineCellContainer
useEditButton={fieldDefinition.useEditButton}
buttonIcon={fieldDefinition.buttonIcon}
customEditHotkeyScope={
isFieldRelation(fieldDefinition)
? {

13
front/src/modules/ui/inline-cell/components/InlineCellContainer.tsx
View File

@ -9,7 +9,7 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useInlineCell } from '../hooks/useInlineCell';
import { InlineCellDisplayMode } from './InlineCellDisplayMode';
import { InlineCellEditButton } from './InlineCellEditButton';
import { InlineCellButton } from './InlineCellEditButton';
import { InlineCellEditMode } from './InlineCellEditMode';
const StyledIconContainer = styled.div`
@ -76,7 +76,7 @@ type OwnProps = {
IconLabel?: IconComponent;
label?: string;
labelFixedWidth?: number;
useEditButton?: boolean;
buttonIcon?: IconComponent;
editModeContent?: React.ReactNode;
editModeContentOnly?: boolean;
displayModeContent: React.ReactNode;
@ -90,7 +90,7 @@ export const InlineCellContainer = ({
IconLabel,
label,
labelFixedWidth,
useEditButton,
buttonIcon,
editModeContent,
displayModeContent,
customEditHotkeyScope,
@ -118,10 +118,7 @@ export const InlineCellContainer = ({
};
const showEditButton =
!isInlineCellInEditMode &&
isHovered &&
useEditButton &&
!editModeContentOnly;
buttonIcon && !isInlineCellInEditMode && isHovered && !editModeContentOnly;
const theme = useTheme();
@ -171,7 +168,7 @@ export const InlineCellContainer = ({
transition={{ duration: 0.1 }}
whileHover={{ scale: 1.04 }}
>
<InlineCellEditButton />
<InlineCellButton Icon={buttonIcon} />
</StyledEditButtonContainer>
)}
</StyledClickableContainer>

6
front/src/modules/ui/inline-cell/components/InlineCellEditButton.tsx
View File

@ -1,9 +1,9 @@
import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
import { IconPencil } from '@/ui/icon';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { useInlineCell } from '../hooks/useInlineCell';
export const InlineCellEditButton = () => {
export const InlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
const { openInlineCell } = useInlineCell();
const handleClick = () => {
@ -14,7 +14,7 @@ export const InlineCellEditButton = () => {
<FloatingIconButton
size="small"
onClick={handleClick}
Icon={IconPencil}
Icon={Icon}
data-testid="inline-cell-edit-mode-container"
/>
);

2
front/src/modules/ui/table/table-cell/components/TableCell.tsx
View File

@ -68,7 +68,7 @@ export const TableCell = ({
/>
}
nonEditModeContent={<FieldDisplay />}
useEditButton={fieldDefinition.useEditButton}
buttonIcon={fieldDefinition.buttonIcon}
></TableCellContainer>
);
};

26
front/src/modules/ui/table/table-cell/components/TableCellButton.tsx Normal file
View File

@ -0,0 +1,26 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
import { IconComponent } from '@/ui/icon/types/IconComponent';
const StyledEditButtonContainer = styled(motion.div)`
position: absolute;
right: 5px;
`;
type TableCellButtonProps = {
onClick?: () => void;
Icon: IconComponent;
};
export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => (
<StyledEditButtonContainer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.1 }}
whileHover={{ scale: 1.04 }}
>
<FloatingIconButton size="small" onClick={onClick} Icon={Icon} />
</StyledEditButtonContainer>
);

33
front/src/modules/ui/table/table-cell/components/TableCellContainer.tsx
View File

@ -1,18 +1,21 @@
import { ReactElement, useState } from 'react';
import { ReactElement, useContext, useState } from 'react';
import styled from '@emotion/styled';
import { useIsFieldEmpty } from '@/ui/field/hooks/useIsFieldEmpty';
import { useIsFieldInputOnly } from '@/ui/field/hooks/useIsFieldInputOnly';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellButton } from './TableCellButton';
import { TableCellDisplayMode } from './TableCellDisplayMode';
import { TableCellEditButton } from './TableCellEditButton';
import { TableCellEditMode } from './TableCellEditMode';
import { TableCellSoftFocusMode } from './TableCellSoftFocusMode';
@ -34,7 +37,7 @@ export type EditableCellProps = {
editHotkeyScope?: HotkeyScope;
transparent?: boolean;
maxContentWidth?: number;
useEditButton?: boolean;
buttonIcon?: IconComponent;
onSubmit?: () => void;
onCancel?: () => void;
};
@ -51,16 +54,17 @@ export const TableCellContainer = ({
editHotkeyScope,
transparent = false,
maxContentWidth,
useEditButton,
buttonIcon,
}: EditableCellProps) => {
const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
const [isHovered, setIsHovered] = useState(false);
const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
const { openTableCell } = useTableCell();
const handlePenClick = () => {
const handleButtonClick = () => {
setSoftFocusOnCurrentTableCell();
openTableCell();
};
@ -75,11 +79,16 @@ export const TableCellContainer = ({
const editModeContentOnly = useIsFieldInputOnly();
const showEditButton =
useEditButton &&
const isFirstColumnCell = useContext(ColumnIndexContext) === 0;
const isEmpty = useIsFieldEmpty();
const showButton =
buttonIcon &&
isHovered &&
!isCurrentTableCellInEditMode &&
!editModeContentOnly;
!editModeContentOnly &&
(!isFirstColumnCell || !isEmpty);
const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
@ -102,14 +111,18 @@ export const TableCellContainer = ({
</TableCellEditMode>
) : hasSoftFocus ? (
<>
{showEditButton && <TableCellEditButton onClick={handlePenClick} />}
{showButton && (
<TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
)}
<TableCellSoftFocusMode>
{editModeContentOnly ? editModeContent : nonEditModeContent}
</TableCellSoftFocusMode>
</>
) : (
<>
{showEditButton && <TableCellEditButton onClick={handlePenClick} />}
{showButton && (
<TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
)}
<TableCellDisplayMode isHovered={isHovered}>
{editModeContentOnly ? editModeContent : nonEditModeContent}
</TableCellDisplayMode>

11
front/src/modules/ui/table/table-cell/components/TableCellEditButton.tsx
View File

@ -2,26 +2,25 @@ import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
import { IconPencil } from '@/ui/icon';
import { IconComponent } from '@/ui/icon/types/IconComponent';
const StyledEditButtonContainer = styled(motion.div)`
position: absolute;
right: 5px;
`;
type EditableCellEditButtonProps = {
type TableCellButtonProps = {
onClick?: () => void;
Icon: IconComponent;
};
export const TableCellEditButton = ({
onClick,
}: EditableCellEditButtonProps) => (
export const TableCellButton = ({ onClick, Icon }: TableCellButtonProps) => (
<StyledEditButtonContainer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.1 }}
whileHover={{ scale: 1.04 }}
>
<FloatingIconButton size="small" onClick={onClick} Icon={IconPencil} />
<FloatingIconButton size="small" onClick={onClick} Icon={Icon} />
</StyledEditButtonContainer>
);

17
front/src/modules/ui/table/table-cell/hooks/useTableCell.ts
View File

@ -1,10 +1,14 @@
import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { FieldContext } from '@/ui/field/contexts/FieldContext';
import { useIsFieldEmpty } from '@/ui/field/hooks/useIsFieldEmpty';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { useCloseCurrentTableCellInEditMode } from '../../hooks/useCloseCurrentTableCellInEditMode';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@ -30,7 +34,20 @@ export const useTableCell = () => {
setHotkeyScope(TableHotkeyScope.TableSoftFocus);
};
const navigate = useNavigate();
const isFirstColumnCell = useContext(ColumnIndexContext) === 0;
const isEmpty = useIsFieldEmpty();
const { entityId, fieldDefinition } = useContext(FieldContext);
const openTableCell = () => {
if (isFirstColumnCell && !isEmpty && fieldDefinition.basePathToShowPage) {
navigate(`${fieldDefinition.basePathToShowPage}${entityId}`);
return;
}
setDragSelectionStartEnabled(false);
setCurrentTableCellInEditMode();

5
front/src/pages/companies/constants/companyShowFieldDefinition.tsx
View File

@ -13,6 +13,7 @@ import {
IconCalendar,
IconLink,
IconMap,
IconPencil,
IconTarget,
IconUserCircle,
IconUsers,
@ -29,7 +30,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'domainName',
placeHolder: 'URL',
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'accountOwner',
@ -79,7 +80,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'xUrl',
placeHolder: 'X',
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'createdAt',

9
front/src/pages/people/constants/personShowFieldDefinition.tsx
View File

@ -15,6 +15,7 @@ import {
IconCalendar,
IconMail,
IconMap,
IconPencil,
IconPhone,
} from '@/ui/icon';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
@ -35,7 +36,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
name: 'Company',
Icon: IconBuildingSkyscraper,
type: 'relation',
useEditButton: true,
buttonIcon: IconPencil,
metadata: {
fieldName: 'company',
relationType: Entity.Company,
@ -50,7 +51,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'phone',
placeHolder: 'Phone',
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldPhoneMetadata>,
{
key: 'jobTitle',
@ -81,7 +82,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'linkedinUrl',
placeHolder: 'Linkedin URL',
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'xUrl',
@ -92,7 +93,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'xUrl',
placeHolder: 'X URL',
},
useEditButton: true,
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'createdAt',