From f828e75b72f2ee853c9211c437e515bd038367d6 Mon Sep 17 00:00:00 2001 From: Marie <51697796+ijreilly@users.noreply.github.com> Date: Wed, 15 Jan 2025 15:25:10 +0100 Subject: [PATCH] Aggregate queries follow up (#9636) In this PR - [X] Fix missing IconCheck for count all on kanban headers: https://discord.com/channels/1130383047699738754/1319330910361096242/1319330910361096242 - [X] Fix aggregate cell height: https://discord.com/channels/1130383047699738754/1328749516488441997/1328749516488441997 - [X] Fix aggregate bar should extend fully to the right: https://discord.com/channels/1130383047699738754/1328750532193681569/1328750532193681569 - [X] Fix first aggregate cell should fully spread to the left: https://discord.com/channels/1130383047699738754/1326614678788374638/1326614678788374638 --- ...umnHeaderAggregateDropdownOptionsContent.tsx | 16 +++++++++++++++- .../components/RecordTableBody.tsx | 3 ++- .../components/RecordTableTd.tsx | 6 ++++-- .../components/RecordTableAggregateFooter.tsx | 17 +++-------------- .../RecordTableAggregateFooterCell.tsx | 3 +++ ...ecordTableColumnAggregateFooterValueCell.tsx | 15 +++++++++++---- 6 files changed, 38 insertions(+), 22 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx index 1affb3a38e4d..33768f1d1f51 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx @@ -7,6 +7,7 @@ import { RecordBoardColumnHeaderAggregateDropdownMenuItem } from '@/object-recor import { aggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/aggregateOperationComponentState'; import { availableFieldIdsForAggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/availableFieldIdsForAggregateOperationComponentState'; import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel'; +import { recordIndexKanbanAggregateOperationState } from '@/object-record/record-index/states/recordIndexKanbanAggregateOperationState'; import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations'; import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations'; import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope'; @@ -17,8 +18,9 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate'; import isEmpty from 'lodash.isempty'; +import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconChevronLeft } from 'twenty-ui'; +import { IconCheck, IconChevronLeft } from 'twenty-ui'; export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({ availableAggregations, @@ -50,6 +52,10 @@ export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({ const { updateViewAggregate } = useUpdateViewAggregate(); + const recordIndexKanbanAggregateOperation = useRecoilValue( + recordIndexKanbanAggregateOperationState, + ); + return ( <> @@ -95,6 +101,14 @@ export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({ ? false : true } + RightIcon={ + availableAggregationOperation === + AGGREGATE_OPERATIONS.count && + recordIndexKanbanAggregateOperation?.operation === + AGGREGATE_OPERATIONS.count + ? IconCheck + : undefined + } /> ), )} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx index d121d7b76ef8..26b1fa747ba9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx @@ -15,7 +15,8 @@ const StyledTbody = styled.tbody` z-index: 5; transition: 0.3s ease; } - td:nth-of-type(3) { + tr:not(:last-child) td:nth-of-type(3) { + // Last row is aggregate footer position: sticky; left: 43px; z-index: 5; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx index a5460f16d379..5cddb1d8d53f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx @@ -5,6 +5,8 @@ import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; +export const RECORD_TABLE_TD_WIDTH = '32px'; + const StyledTd = styled.td<{ zIndex?: number; backgroundColor: string; @@ -44,8 +46,8 @@ const StyledTd = styled.td<{ ${({ freezeFirstColumns }) => freezeFirstColumns ? `@media (max-width: ${MOBILE_VIEWPORT}px) { - width: 32px; - max-width: 32px; + width: ${RECORD_TABLE_TD_WIDTH}; + max-width: ${RECORD_TABLE_TD_WIDTH}; }` : ''} `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx index 99201bd53a1c..9ea23e64ee51 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx @@ -30,21 +30,8 @@ const StyledTableRow = styled.tr<{ border-right-color: ${({ theme }) => theme.background.primary}; } &.first-columns-sticky { - td:nth-of-type(1) { - position: sticky; - left: 0; - z-index: 5; - transition: 0.3s ease; - } td:nth-of-type(2) { position: sticky; - left: 11px; - z-index: 5; - transition: 0.3s ease; - } - td:nth-of-type(3) { - position: sticky; - left: 43px; z-index: 5; transition: 0.3s ease; &::after { @@ -115,7 +102,6 @@ export const RecordTableAggregateFooter = ({ endOfTableSticky={endOfTableSticky} hasHorizontalOverflow={hasHorizontalOverflow} > - {visibleTableColumns.map((column, index) => { return ( @@ -133,6 +119,9 @@ export const RecordTableAggregateFooter = ({ ); })} + + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx index 053ba4becd35..fcb32ab3dac5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx @@ -11,6 +11,7 @@ const COLUMN_MIN_WIDTH = 104; const StyledColumnFooterCell = styled.td<{ columnWidth: number; + isFirstCell?: boolean; }>` background-color: ${({ theme }) => theme.background.primary}; color: ${({ theme }) => theme.font.color.tertiary}; @@ -74,6 +75,8 @@ export const RecordTableAggregateFooterCell = ({ tableColumnsByKey[fieldMetadataId].size + 24, COLUMN_MIN_WIDTH, )} + colSpan={isFirstCell ? 2 : undefined} + isFirstCell={isFirstCell} > ` +const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>` align-items: center; display: flex; flex-direction: row; @@ -18,11 +19,11 @@ const StyledCell = styled.div<{ isUnfolded: boolean }>` font-weight: ${({ theme }) => theme.font.weight.medium}; gap: ${({ theme }) => theme.spacing(1)}; - height: ${({ theme }) => theme.spacing(7)}; + height: ${({ theme }) => theme.spacing(8)}; justify-content: space-between; min-width: ${({ theme }) => theme.spacing(7)}; flex-grow: 1; - width: 100%; + max-width: 100%; background: ${({ theme, isUnfolded }) => isUnfolded ? theme.background.transparent.light : theme.background.primary}; @@ -33,6 +34,12 @@ const StyledCell = styled.div<{ isUnfolded: boolean }>` ? theme.background.transparent.medium : theme.background.transparent.light}; } + + ${({ isFirstCell }) => + isFirstCell && + ` + padding-left: ${RECORD_TABLE_TD_WIDTH}; + `} `; const StyledIcon = styled(IconChevronDown)` @@ -76,7 +83,7 @@ export const RecordTableColumnAggregateFooterValueCell = ({ }} onMouseLeave={() => setIsHovered(false)} > - + {isHovered || isDropdownOpen || hasAggregateOperationForViewField ||