From 05d22c1b0659eff7cfa35a07de72be31a9e75cf5 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 12 Jun 2023 12:47:35 +0200 Subject: [PATCH] Lucas/t 295 fix checkbox column width (#261) * wip * Fixed table and column width * Use last resizable column instead of table width 100% * Removed comments * Fix lint * Fixed table theme * Removed left clickable margin * Removed overflow * Added table width --- .../ui/components/table/CheckboxCell.tsx | 3 -- .../ui/components/table/EntityTable.tsx | 28 +++++++++++++++-- front/src/modules/ui/layout/styles/themes.ts | 1 + .../ui/tables/utils/getCheckBoxColumn.tsx | 27 ++++++++++++++++ .../__stories__/Companies.sortBy.stories.tsx | 2 +- .../src/pages/companies/companies-columns.tsx | 31 ++++--------------- .../__stories__/People.sortBy.stories.tsx | 2 +- front/src/pages/people/people-columns.tsx | 25 ++------------- 8 files changed, 64 insertions(+), 55 deletions(-) create mode 100644 front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx diff --git a/front/src/modules/ui/components/table/CheckboxCell.tsx b/front/src/modules/ui/components/table/CheckboxCell.tsx index 10ec08327..42ab35120 100644 --- a/front/src/modules/ui/components/table/CheckboxCell.tsx +++ b/front/src/modules/ui/components/table/CheckboxCell.tsx @@ -15,10 +15,7 @@ type OwnProps = { }; const StyledContainer = styled.div` - width: 32px; height: 32px; - margin-left: -${(props) => props.theme.table.horizontalCellMargin}; - padding-left: ${(props) => props.theme.table.horizontalCellMargin}; display: flex; align-items: center; diff --git a/front/src/modules/ui/components/table/EntityTable.tsx b/front/src/modules/ui/components/table/EntityTable.tsx index 478d6c24d..f0115f66e 100644 --- a/front/src/modules/ui/components/table/EntityTable.tsx +++ b/front/src/modules/ui/components/table/EntityTable.tsx @@ -39,8 +39,8 @@ type OwnProps< }; const StyledTable = styled.table` - min-width: 1000px; - width: calc(100% - 2 * ${(props) => props.theme.table.horizontalCellMargin}); + width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2); + border-radius: 4px; border-spacing: 0; border-collapse: collapse; @@ -54,11 +54,17 @@ const StyledTable = styled.table` padding: 0; border: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; + :last-child { border-right-color: transparent; } :first-of-type { border-left-color: transparent; + border-right-color: transparent; + } + :last-of-type { + width: 100%; + min-width: 0; } } @@ -67,12 +73,19 @@ const StyledTable = styled.table` color: ${(props) => props.theme.text80}; padding: 0; border: 1px solid ${(props) => props.theme.tertiaryBackground}; + text-align: left; + :last-child { border-right-color: transparent; } :first-of-type { border-left-color: transparent; + border-right-color: transparent; + } + :last-of-type { + width: 100%; + min-width: 0; } } `; @@ -160,7 +173,9 @@ export function EntityTable< {header.isPlaceholder @@ -171,6 +186,7 @@ export function EntityTable< )} ))} + ))} @@ -188,6 +204,11 @@ export function EntityTable< onContextMenu={(event) => handleContextMenu(event, row.original.id) } + style={{ + width: cell.column.getSize(), + minWidth: cell.column.getSize(), + maxWidth: cell.column.getSize(), + }} > {flexRender( cell.column.columnDef.cell, @@ -196,6 +217,7 @@ export function EntityTable< ); })} + ))} diff --git a/front/src/modules/ui/layout/styles/themes.ts b/front/src/modules/ui/layout/styles/themes.ts index 30047daac..c8c1feeb1 100644 --- a/front/src/modules/ui/layout/styles/themes.ts +++ b/front/src/modules/ui/layout/styles/themes.ts @@ -21,6 +21,7 @@ const commonTheme = { table: { horizontalCellMargin: '8px', + checkboxColumnWidth: '32px', }, borderRadius: '4px', diff --git a/front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx b/front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx new file mode 100644 index 000000000..224b5e48f --- /dev/null +++ b/front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx @@ -0,0 +1,27 @@ +import { CellContext } from '@tanstack/react-table'; + +import { CheckboxCell } from '@/ui/components/table/CheckboxCell'; +import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox'; + +export function getCheckBoxColumn() { + return { + id: 'select', + header: ({ table }: any) => ( + table.toggleAllRowsSelected(newValue)} + /> + ), + cell: (props: CellContext) => ( + props.row.toggleSelected(newValue)} + /> + ), + size: 32, + maxSize: 32, + }; +} diff --git a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx b/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx index ca31d66fc..fae83e435 100644 --- a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx +++ b/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx @@ -33,7 +33,7 @@ export const SortByName: Story = { (await canvas.findAllByRole('checkbox')).map((item) => { return item.getAttribute('id'); })[1], - ).toStrictEqual('company-selected-89bb825c-171e-4bcc-9cf7-43448d6fb278'); + ).toStrictEqual('checkbox-selected-89bb825c-171e-4bcc-9cf7-43448d6fb278'); const cancelButton = canvas.getByText('Cancel'); await userEvent.click(cancelButton); diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx index eab2ccd85..14a920f6d 100644 --- a/front/src/pages/companies/companies-columns.tsx +++ b/front/src/pages/companies/companies-columns.tsx @@ -7,7 +7,7 @@ import { TbSum, TbUser, } from 'react-icons/tb'; -import { CellContext, createColumnHelper } from '@tanstack/react-table'; +import { createColumnHelper } from '@tanstack/react-table'; import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell'; import { Company } from '@/companies/interfaces/company.interface'; @@ -21,9 +21,8 @@ import { SEARCH_USER_QUERY } from '@/search/services/search'; 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'; +import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn'; import { mapToUser, User } from '@/users/interfaces/user.interface'; import { QueryMode } from '~/generated/graphql'; @@ -32,25 +31,7 @@ const columnHelper = createColumnHelper(); export const useCompaniesColumns = () => { return useMemo(() => { return [ - { - id: 'select', - header: ({ table }: any) => ( - table.toggleAllRowsSelected(newValue)} - /> - ), - cell: (props: CellContext) => ( - props.row.toggleSelected(newValue)} - /> - ), - size: 25, - }, + getCheckBoxColumn(), columnHelper.accessor('name', { header: () => ( } /> @@ -58,7 +39,7 @@ export const useCompaniesColumns = () => { cell: (props) => ( ), - size: 120, + size: 180, }), columnHelper.accessor('domainName', { header: () => ( @@ -98,7 +79,7 @@ export const useCompaniesColumns = () => { }} /> ), - size: 70, + size: 150, }), columnHelper.accessor('address', { header: () => ( @@ -131,7 +112,7 @@ export const useCompaniesColumns = () => { }} /> ), - size: 70, + size: 150, }), columnHelper.accessor('accountOwner', { header: () => ( diff --git a/front/src/pages/people/__stories__/People.sortBy.stories.tsx b/front/src/pages/people/__stories__/People.sortBy.stories.tsx index 70a5f1346..4d747caf4 100644 --- a/front/src/pages/people/__stories__/People.sortBy.stories.tsx +++ b/front/src/pages/people/__stories__/People.sortBy.stories.tsx @@ -35,7 +35,7 @@ export const Email: Story = { (await canvas.findAllByRole('checkbox')).map((item) => { return item.getAttribute('id'); })[1], - ).toStrictEqual('person-selected-7dfbc3f7-6e5e-4128-957e-8d86808cdf6b'); + ).toStrictEqual('checkbox-selected-7dfbc3f7-6e5e-4128-957e-8d86808cdf6b'); }, parameters: { msw: graphqlMocks, diff --git a/front/src/pages/people/people-columns.tsx b/front/src/pages/people/people-columns.tsx index 97d42d2aa..afedcd4f8 100644 --- a/front/src/pages/people/people-columns.tsx +++ b/front/src/pages/people/people-columns.tsx @@ -7,7 +7,7 @@ import { TbPhone, TbUser, } from 'react-icons/tb'; -import { CellContext, createColumnHelper } from '@tanstack/react-table'; +import { createColumnHelper } from '@tanstack/react-table'; import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName'; import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell'; @@ -16,34 +16,15 @@ import { updatePerson } from '@/people/services'; 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'; +import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn'; const columnHelper = createColumnHelper(); export const usePeopleColumns = () => { return useMemo(() => { return [ - { - id: 'select', - header: ({ table }: any) => ( - table.toggleAllRowsSelected(newValue)} - /> - ), - cell: (props: CellContext) => ( - props.row.toggleSelected(newValue)} - /> - ), - size: 25, - }, + getCheckBoxColumn(), columnHelper.accessor('firstname', { header: () => ( } />