From 47010601a5190050e84f4bebc1d84e9d51a386b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20ROU=C3=8BN=C3=89?= Date: Fri, 13 Dec 2024 09:29:28 +0100 Subject: [PATCH] [4305] Restore table support as a form widget MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/4305 Signed-off-by: Florian ROUËNÉ --- CHANGELOG.adoc | 1 + .../TableWidgetPropertySection.tsx | 7 +- .../sirius-components-tables/src/index.ts | 3 +- .../representation/TableRepresentation.tsx | 4 +- .../src/table/ClientSideTableContent.tsx | 67 +++++++++++++++++++ ...Content.tsx => ServerSideTableContent.tsx} | 12 ++-- .../src/table/TableContent.types.ts | 9 ++- 7 files changed, 87 insertions(+), 16 deletions(-) create mode 100644 packages/tables/frontend/sirius-components-tables/src/table/ClientSideTableContent.tsx rename packages/tables/frontend/sirius-components-tables/src/table/{TableContent.tsx => ServerSideTableContent.tsx} (95%) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index a1c5fe5045..a4afd14e3a 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -58,6 +58,7 @@ This provider is in charge of getting the icon list of the representation. - https://github.com/eclipse-sirius/sirius-web/issues/1062[#1062] [explorer] It is now possible to expand or collapse items in the explorer without selecting them by clicking directly on the expand/collapse arrow icon. This was first fixed in 2022.3.0 but broken in 2024.3.0; it is now fixed again. - https://github.com/eclipse-sirius/sirius-web/issues/4280[#4280] Fix direct edit with F2 when the palette is opened +- https://github.com/eclipse-sirius/sirius-web/issues/4305[#4305] [table] Restore table support as a form widget === New Features diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/TableWidgetPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/TableWidgetPropertySection.tsx index 2d68d13b69..a59c57640f 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/TableWidgetPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/TableWidgetPropertySection.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { TableContent } from '@eclipse-sirius/sirius-components-tables'; +import { ClientSideTableContent } from '@eclipse-sirius/sirius-components-tables'; import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLTableWidget } from '../form/FormEventFragments.types'; @@ -33,14 +33,11 @@ export const TableWidgetPropertySection: PropertySectionComponent - {}} - onGlobalFilterChange={() => {}} - onColumnFiltersChange={() => {}} /> ); diff --git a/packages/tables/frontend/sirius-components-tables/src/index.ts b/packages/tables/frontend/sirius-components-tables/src/index.ts index 27f4f65731..9306d09e41 100644 --- a/packages/tables/frontend/sirius-components-tables/src/index.ts +++ b/packages/tables/frontend/sirius-components-tables/src/index.ts @@ -13,5 +13,6 @@ export * from './actions/SettingsButtonExtensionPoints'; export type { SettingsButtonMenuEntryProps } from './actions/SettingsButtonExtensionPoints.types'; export { TableRepresentation } from './representation/TableRepresentation'; -export { TableContent } from './table/TableContent'; +export { ClientSideTableContent } from './table/ClientSideTableContent'; +export { ServerSideTableContent } from './table/ServerSideTableContent'; export * from './table/TableContent.types'; diff --git a/packages/tables/frontend/sirius-components-tables/src/representation/TableRepresentation.tsx b/packages/tables/frontend/sirius-components-tables/src/representation/TableRepresentation.tsx index a35eed9778..3c85fdf647 100644 --- a/packages/tables/frontend/sirius-components-tables/src/representation/TableRepresentation.tsx +++ b/packages/tables/frontend/sirius-components-tables/src/representation/TableRepresentation.tsx @@ -14,7 +14,7 @@ import { RepresentationComponentProps } from '@eclipse-sirius/sirius-components- import Typography from '@mui/material/Typography'; import { useState } from 'react'; import { makeStyles } from 'tss-react/mui'; -import { TableContent } from '../table/TableContent'; +import { ServerSideTableContent } from '../table/ServerSideTableContent'; import { ColumnFilter } from '../table/TableContent.types'; import { tableIdProvider } from './tableIdProvider'; import { TableRepresentationState } from './TableRepresentation.types'; @@ -75,7 +75,7 @@ export const TableRepresentation = ({ editingContextId, representationId, readOn return (
{table !== null && !complete ? ( - { + const { selection, setSelection } = useSelection(); + const [linesState, setLinesState] = useState(table.lines); + + useEffect(() => { + setLinesState([...table.lines]); + }, [table]); + + const { columns } = useTableColumns(editingContextId, representationId, table, readOnly); + + const tableOptions: MRT_TableOptions = { + columns, + data: linesState, + editDisplayMode: 'cell', + enableEditing: !readOnly, + enableStickyHeader: true, + rowCount: linesState.length, + muiTableBodyRowProps: ({ row }) => { + return { + onClick: () => { + const newSelection: Selection = { entries: [{ id: row.original.targetObjectId, kind: 'Object' }] }; + setSelection(newSelection); + }, + selected: selection.entries.map((entry) => entry.id).includes(row.original.targetObjectId), + sx: { + backgroundColor: 'transparent', // required to remove the default mui backgroundColor that is defined as !important + cursor: 'pointer', + height: row.original.height, + }, + }; + }, + renderTopToolbarCustomActions: () => ( + + + + ), + }; + + const muiTable = useMaterialReactTable(tableOptions); + return ( +
+ +
+ ); + } +); diff --git a/packages/tables/frontend/sirius-components-tables/src/table/TableContent.tsx b/packages/tables/frontend/sirius-components-tables/src/table/ServerSideTableContent.tsx similarity index 95% rename from packages/tables/frontend/sirius-components-tables/src/table/TableContent.tsx rename to packages/tables/frontend/sirius-components-tables/src/table/ServerSideTableContent.tsx index f13c6ff623..8dfd206b53 100644 --- a/packages/tables/frontend/sirius-components-tables/src/table/TableContent.tsx +++ b/packages/tables/frontend/sirius-components-tables/src/table/ServerSideTableContent.tsx @@ -22,11 +22,11 @@ import { ResizeRowHandler } from '../rows/ResizeRowHandler'; import { RowHeader } from '../rows/RowHeader'; import { useResetRowsMutation } from '../rows/useResetRows'; import { CursorBasedPagination } from './CursorBasedPagination'; -import { GQLLine, TablePaginationState, TableProps } from './TableContent.types'; +import { GQLLine, TablePaginationState, ServerSideTableProps } from './TableContent.types'; import { useGlobalFilter } from './useGlobalFilter'; import { useTableColumns } from './useTableColumns'; -export const TableContent = memo( +export const ServerSideTableContent = memo( ({ editingContextId, representationId, @@ -35,7 +35,7 @@ export const TableContent = memo( onPaginationChange, onGlobalFilterChange, onColumnFiltersChange, - }: TableProps) => { + }: ServerSideTableProps) => { const { selection, setSelection } = useSelection(); const { columns } = useTableColumns(editingContextId, representationId, table, readOnly); @@ -104,8 +104,6 @@ export const TableContent = memo( onPaginationChange(pagination.cursor, pagination.direction, pagination.size); }, [pagination.cursor, pagination.size, pagination.direction]); - const serverSidePagination: boolean = onPaginationChange !== undefined; - const handleRowHeightChange = (rowId, height) => { setLinesState((prev) => prev.map((line) => (line.id === rowId ? { ...line, height } : line))); }; @@ -127,8 +125,8 @@ export const TableContent = memo( enableEditing: !readOnly, onColumnFiltersChange: setColumnFilters, enableStickyHeader: true, - enablePagination: !serverSidePagination, - manualPagination: serverSidePagination, + enablePagination: false, + manualPagination: true, rowCount: table.paginationData.totalRowCount, enableRowActions: true, enableSorting: false, diff --git a/packages/tables/frontend/sirius-components-tables/src/table/TableContent.types.ts b/packages/tables/frontend/sirius-components-tables/src/table/TableContent.types.ts index 884fffe38b..063628803e 100644 --- a/packages/tables/frontend/sirius-components-tables/src/table/TableContent.types.ts +++ b/packages/tables/frontend/sirius-components-tables/src/table/TableContent.types.ts @@ -12,7 +12,7 @@ *******************************************************************************/ import { GQLColumnFilter } from '../columns/useTableColumnFiltering.types'; -export interface TableProps { +export interface ServerSideTableProps { editingContextId: string; representationId: string; table: GQLTable; @@ -22,6 +22,13 @@ export interface TableProps { onColumnFiltersChange: (columFilters: ColumnFilter[]) => void; } +export interface ClientSideTableProps { + editingContextId: string; + representationId: string; + table: GQLTable; + readOnly: boolean; +} + export interface TablePaginationState { cursor: string | null; direction: 'PREV' | 'NEXT';