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
2024-12-28 23:03:41 +03:00 · 2023-06-12 12:47:35 +02:00 · 2023-06-12 12:47:35 +02:00 · 05d22c1b06
commit 05d22c1b06
parent 551cd00790
8 changed files with 64 additions and 55 deletions
--- 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;
--- 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<
                  <th
                    key={header.id}
                    style={{
-                      width: `${header.getSize()}px`,
+                      width: header.column.getSize(),
+                      minWidth: header.column.getSize(),
+                      maxWidth: header.column.getSize(),
                    }}
                  >
                    {header.isPlaceholder
@ -171,6 +186,7 @@ export function EntityTable<
                        )}
                  </th>
                ))}
+                <th></th>
              </tr>
            ))}
          </thead>
@ -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<
                    </td>
                  );
                })}
+                <td></td>
              </StyledRow>
            ))}
          </tbody>
--- 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',
--- a/front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx
+++ 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) => (
+      <SelectAllCheckbox
+        checked={table.getIsAllRowsSelected()}
+        indeterminate={table.getIsSomeRowsSelected()}
+        onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
+      />
+    ),
+    cell: (props: CellContext<any, string>) => (
+      <CheckboxCell
+        id={`checkbox-selected-${props.row.original.id}`}
+        name={`checkbox-selected-${props.row.original.id}`}
+        checked={props.row.getIsSelected()}
+        onChange={(newValue) => props.row.toggleSelected(newValue)}
+      />
+    ),
+    size: 32,
+    maxSize: 32,
+  };
+}
--- 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);
--- 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<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: () => (
--- 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,
--- 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<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} />} />