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

Lucas/t 295 fix checkbox column width (#261)

Browse Source 
* 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
This commit is contained in:
Lucas Bordeau
2023-06-12 12:47:35 +02:00
committed by GitHub
parent 551cd00790
commit 05d22c1b06
8 changed files with 64 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
View File

@ -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);

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

@ -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<Company>();
export const useCompaniesColumns = () => {
return useMemo(() => {
return [
{
id: 'select',
header: ({ table }: any) => (
<SelectAllCheckbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
/>
),
cell: (props: CellContext<Company, string>) => (
<CheckboxCell
id={`company-selected-${props.row.original.id}`}
name={`company-selected-${props.row.original.id}`}
checked={props.row.getIsSelected()}
onChange={(newValue) => props.row.toggleSelected(newValue)}
/>
),
size: 25,
},
getCheckBoxColumn(),
columnHelper.accessor('name', {
header: () => (
<ColumnHead viewName="Name" viewIcon={<TbBuilding size={16} />} />
@ -58,7 +39,7 @@ export const useCompaniesColumns = () => {
cell: (props) => (
<CompanyEditableNameChipCell company={props.row.original} />
),
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: () => (

2
front/src/pages/people/__stories__/People.sortBy.stories.tsx
View File

@ -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,

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

@ -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<Person>();
export const usePeopleColumns = () => {
return useMemo(() => {
return [
{
id: 'select',
header: ({ table }: any) => (
<SelectAllCheckbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
/>
),
cell: (props: CellContext<Person, string>) => (
<CheckboxCell
id={`person-selected-${props.row.original.id}`}
name={`person-selected-${props.row.original.id}`}
checked={props.row.getIsSelected()}
onChange={(newValue) => props.row.toggleSelected(newValue)}
/>
),
size: 25,
},
getCheckBoxColumn(),
columnHelper.accessor('firstname', {
header: () => (
<ColumnHead viewName="People" viewIcon={<TbUser size={16} />} />