Skip to content

Commit 4d19abe

Browse files
CorepexCorepex
authored
Added support for custom column width (#1477)
1 parent 5ab2a41 commit 4d19abe

File tree

472 files changed

+1409
-999
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

472 files changed

+1409
-999
lines changed

‎assets/js/src/core/components/grid/grid.tsx

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@
1010

1111
/* eslint-disable max-lines */
1212

13+
import { serviceIds } from '@Pimcore/app/config/services/service-ids'
14+
import { useInjection } from '@Pimcore/app/depency-injection'
1315
import { useCssComponentHash } from '@Pimcore/modules/ant-design/hooks/use-css-component-hash'
16+
import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
17+
import type { AssetGetGridApiResponse } from '@Pimcore/modules/asset/asset-api-slice.gen'
18+
import { type DynamicTypeGridCellRegistry } from '@Pimcore/modules/element/dynamic-types/definitions/grid-cell/dynamic-type-grid-cell-registry'
19+
import { type GridProps } from '@Pimcore/types/components/types'
1420
import {
1521
type CellContext,
1622
type Column,
@@ -27,19 +33,16 @@ import {
2733
type TableOptions,
2834
useReactTable
2935
} from '@tanstack/react-table'
30-
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
31-
import { isEmpty } from 'lodash'
36+
import { Checkbox, Skeleton } from 'antd'
3237
import cn from 'classnames'
33-
import { useStyles } from './grid.styles'
34-
import { Resizer } from './resizer/resizer'
35-
import { DefaultCell } from './columns/default-cell'
38+
import { isEmpty, isNumber } from 'lodash'
39+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
3640
import { useTranslation } from 'react-i18next'
37-
import { Checkbox, Skeleton } from 'antd'
38-
import { GridRow } from './grid-cell/grid-row'
3941
import { SortButton, type SortDirection, SortDirections } from '../sort-button/sort-button'
40-
import { type GridProps } from '@Pimcore/types/components/types'
41-
import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
42-
import type { AssetGetGridApiResponse } from '@Pimcore/modules/asset/asset-api-slice.gen'
42+
import { DefaultCell } from './columns/default-cell'
43+
import { GridRow } from './grid-cell/grid-row'
44+
import { useStyles } from './grid.styles'
45+
import { Resizer } from './resizer/resizer'
4346

4447
export interface ColumnMetaType {
4548
editable?: boolean
@@ -51,8 +54,7 @@ export interface ColumnMetaType {
5154

5255
declare module '@tanstack/react-table' {
5356
// eslint-disable-next-line @typescript-eslint/no-unused-vars
54-
export interface ColumnMeta<TData extends RowData, TValue> extends ColumnMetaType {
55-
}
57+
export interface ColumnMeta<TData extends RowData, TValue> extends ColumnMetaType { }
5658

5759
// eslint-disable-next-line @typescript-eslint/no-unused-vars
5860
export interface TableMeta<TData extends RowData> {
@@ -101,6 +103,7 @@ export const Grid = ({
101103
const [internalSorting, setInternalSorting] = useState<SortingState>(sorting ?? [])
102104
const memoModifiedCells = useMemo(() => { return modifiedCells ?? [] }, [JSON.stringify(modifiedCells)])
103105
const autoColumnRef = useRef<HTMLTableCellElement>(null)
106+
const gridCellRegistry = useInjection<DynamicTypeGridCellRegistry>(serviceIds['DynamicTypes/GridCellRegistry'])
104107

105108
useEffect(() => {
106109
onActiveCellChange?.(activeCell)
@@ -137,6 +140,18 @@ export const Grid = ({
137140
[props.isLoading, props.columns]
138141
) as Array<ColumnDef<any>>
139142

143+
columns.forEach(column => {
144+
if (column.meta?.type !== undefined) {
145+
if (isNumber(column.size)) {
146+
return
147+
}
148+
const dynamicType = gridCellRegistry.getDynamicType(column.meta.type, false)
149+
if (dynamicType?.getDefaultGridColumnWidth !== undefined) {
150+
column.size = dynamicType.getDefaultGridColumnWidth(column.meta)
151+
}
152+
}
153+
})
154+
140155
useMemo(() => {
141156
updateRowSelectionColumn()
142157
}, [columns, isRowSelectionEnabled, selectedRows])
@@ -251,7 +266,7 @@ export const Grid = ({
251266
ref={ tableElement }
252267
style={ { width: tableAutoWidth ? '100%' : calculateTableWidth(), minWidth: table.getCenterTotalSize() } }
253268
>
254-
{ !hideColumnHeaders && (
269+
{!hideColumnHeaders && (
255270
<thead className='ant-table-thead'>
256271
{table.getHeaderGroups().map(headerGroup => (
257272
<tr key={ headerGroup.id }>
@@ -261,16 +276,16 @@ export const Grid = ({
261276
key={ header.id }
262277
ref={ header.column.columnDef.meta?.autoWidth === true ? autoColumnRef : null }
263278
style={
264-
header.column.columnDef.meta?.autoWidth === true && !header.column.getIsResizing()
265-
? {
266-
width: 'auto',
267-
minWidth: header.column.getSize()
268-
}
269-
: {
270-
width: header.column.getSize(),
271-
maxWidth: header.column.getSize()
272-
}
273-
}
279+
header.column.columnDef.meta?.autoWidth === true && !header.column.getIsResizing()
280+
? {
281+
width: 'auto',
282+
minWidth: header.column.getSize()
283+
}
284+
: {
285+
width: header.column.getSize(),
286+
maxWidth: header.column.getSize()
287+
}
288+
}
274289
>
275290
<div className='grid__cell-content'>
276291
<span>

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/components/data-object-adapter/types/edit-modal-mode-cell.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { InheritanceLayer } from '../inheritance-layer'
2121
import { Flex } from '@Pimcore/components/flex/flex'
2222
import { useSelectedColumns } from '@Pimcore/modules/element/listing/abstract/configuration-layer/provider/selected-columns/use-selected-columns'
2323
import { META_SUPPORTS_BATCH_APPEND_MODE } from '@Pimcore/modules/data-object/listing/batch-actions/batch-append-mode/batch-append-mode'
24+
import { useTranslation } from 'react-i18next'
2425

2526
export interface EditModalModeCellProps {
2627
objectCellDefinition: WithEditModalGridCellDefinition
@@ -31,6 +32,7 @@ export const EditModalCell = (props: EditModalModeCellProps): React.JSX.Element
3132
const { decodeColumnIdentifier } = useSelectedColumns()
3233
const { isInEditMode, fireOnUpdateCellDataEvent, disableEditMode } = useEditMode(props.cellProps)
3334
const [form] = Form.useForm()
35+
const { t } = useTranslation()
3436

3537
const onFormFinish = (values): void => {
3638
fireOnUpdateCellDataEvent(values.value, {
@@ -62,15 +64,15 @@ export const EditModalCell = (props: EditModalModeCellProps): React.JSX.Element
6264
{props.objectCellDefinition.previewComponent}
6365
</InheritanceLayer>
6466

65-
{ isInEditMode && !isUndefined(props.objectCellDefinition.editModalSettings) && (
67+
{isInEditMode && !isUndefined(props.objectCellDefinition.editModalSettings) && (
6668
<WindowModal
67-
cancelText='Discard'
68-
okText='Apply Changes'
69+
cancelText={ t('edit-modal.discard') }
70+
okText={ t('edit-modal.apply-changes') }
6971
onCancel={ onCancel }
7072
onOk={ () => { form.submit() } }
7173
open={ isInEditMode }
7274
size={ props.objectCellDefinition.editModalSettings.modalSize }
73-
title={ 'Inline edit' }
75+
title={ t('edit-modal.inline-edit') }
7476
>
7577
<FieldWidthProvider>
7678
<FieldCollectionProvider id={ props.cellProps.row.original.id }>
@@ -90,7 +92,7 @@ export const EditModalCell = (props: EditModalModeCellProps): React.JSX.Element
9092
</FieldCollectionProvider>
9193
</FieldWidthProvider>
9294
</WindowModal>
93-
) }
95+
)}
9496
</Flex>
9597
)
9698
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/dynamic-type-grid-cell-abstract.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,21 @@
88
* @license Pimcore Open Core License (POCL)
99
*/
1010

11-
import { type ReactElement } from 'react'
12-
import { DynamicTypeAbstract } from '../../registry/dynamic-type-registry-abstract'
1311
import { type DefaultCellProps } from '@Pimcore/components/grid/columns/default-cell'
12+
import { type ColumnMeta } from '@tanstack/react-table'
1413
import { injectable } from 'inversify'
14+
import { type ReactElement } from 'react'
15+
import { DynamicTypeAbstract } from '../../registry/dynamic-type-registry-abstract'
1516

16-
export interface AbstractGridCellDefinition extends DefaultCellProps {}
17+
export interface AbstractGridCellDefinition extends DefaultCellProps { }
1718

1819
// @todo check for copy and paste handler implementation
1920
@injectable()
2021
export abstract class DynamicTypeGridCellAbstract extends DynamicTypeAbstract {
2122
abstract readonly id: string
2223
abstract getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition>
24+
25+
getDefaultGridColumnWidth (props: ColumnMeta<any, any>): number | undefined {
26+
return undefined
27+
}
2328
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/asset-actions/dynamic-type-grid-cell-asset-preview.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,8 @@ export class DynamicTypeGridCellAssetActions extends DynamicTypeGridCellAbstract
2020
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2121
return <AssetActionsCell { ...props } />
2222
}
23+
24+
getDefaultGridColumnWidth (): number | undefined {
25+
return 100
26+
}
2327
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/asset-link/dynamic-type-grid-cell-asset-link.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@ export class DynamicTypeGridCellAssetLink extends DynamicTypeGridCellAbstract {
2121
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2222
return <ElementCell { ...addColumnConfig(props, { allowedTypes: ['asset'] }) } />
2323
}
24+
25+
getDefaultGridColumnWidth (): number | undefined {
26+
return 350
27+
}
2428
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/asset/dynamic-type-grid-cell-asset.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@ export class DynamicTypeGridCellAsset extends DynamicTypeGridCellAbstract {
2121
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2222
return <ElementCell { ...addColumnConfig(props, { allowedTypes: ['asset'] }) } />
2323
}
24+
25+
getDefaultGridColumnWidth (): number | undefined {
26+
return 350
27+
}
2428
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/boolean/dynamic-type-grid-cell-boolean.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,8 @@ export class DynamicTypeGridCellBoolean extends DynamicTypeGridCellAbstract {
2020
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2121
return <CheckboxCell { ...props } />
2222
}
23+
24+
getDefaultGridColumnWidth (): number | undefined {
25+
return 100
26+
}
2327
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/checkbox/dynamic-type-grid-cell-checkbox.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,17 @@ import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '..
1313
import { injectable } from 'inversify'
1414
import { CheckboxCell } from '../../components/checkbox/checkbox-cell'
1515

16+
export const DEFAULT_CHECKBOX_COLUMN_WIDTH = 100
17+
1618
@injectable()
1719
export class DynamicTypeGridCellCheckbox extends DynamicTypeGridCellAbstract {
1820
readonly id = 'checkbox'
1921

2022
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2123
return <CheckboxCell { ...props } />
2224
}
25+
26+
getDefaultGridColumnWidth (): number | undefined {
27+
return DEFAULT_CHECKBOX_COLUMN_WIDTH
28+
}
2329
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-actions/dynamic-type-grid-cell-data-object-actions.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,8 @@ export class DynamicTypeGridCellDataObjectActions extends DynamicTypeGridCellAbs
2020
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2121
return <DataObjectActionsCell { ...props } />
2222
}
23+
24+
getDefaultGridColumnWidth (): number | undefined {
25+
return 100
26+
}
2327
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-adapter/dynamic-type-grid-cell-data-object-adapter.tsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@
88
* @license Pimcore Open Core License (POCL)
99
*/
1010

11-
import React, { type ReactElement } from 'react'
12-
import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
11+
import { getDefaultGridColumnWidthFromDynamicObjectType } from '@Pimcore/modules/element/dynamic-types/utils/column-helper'
12+
import { type ColumnMeta } from '@tanstack/react-table'
1313
import { injectable } from 'inversify'
14+
import React, { type ReactElement } from 'react'
1415
import { DataObjectAdapterCell } from '../../components/data-object-adapter/data-object-adapter-cell'
16+
import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
17+
import { type AbstractObjectDataDefinition } from '../../../objects/data-related/dynamic-type-object-data-abstract'
18+
import { defaultFieldWidthValues } from '../../../objects/data-related/providers/field-width/field-width-provider'
1519

1620
@injectable()
1721
export class DynamicTypeGridCellDataObjectAdapter extends DynamicTypeGridCellAbstract {
@@ -20,4 +24,14 @@ export class DynamicTypeGridCellDataObjectAdapter extends DynamicTypeGridCellAbs
2024
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2125
return <DataObjectAdapterCell { ...props } />
2226
}
27+
28+
getDefaultGridColumnWidth (props: ColumnMeta<any, any>): number | undefined {
29+
const type = props?.config?.dataObjectType as string | undefined
30+
const objectDataDefinition: AbstractObjectDataDefinition = {
31+
...props.config?.dataObjectConfig.fieldDefinition,
32+
defaultFieldWidth: defaultFieldWidthValues
33+
}
34+
35+
return getDefaultGridColumnWidthFromDynamicObjectType(type, objectDataDefinition)
36+
}
2337
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-object-brick/dynamic-type-grid-cell-data-object-adapter.tsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@
88
* @license Pimcore Open Core License (POCL)
99
*/
1010

11-
import React, { type ReactElement } from 'react'
12-
import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
11+
import { getDefaultGridColumnWidthFromDynamicObjectType } from '@Pimcore/modules/element/dynamic-types/utils/column-helper'
12+
import { type ColumnMeta } from '@tanstack/react-table'
1313
import { injectable } from 'inversify'
14+
import React, { type ReactElement } from 'react'
1415
import { DataObjectAdapterCell } from '../../components/data-object-adapter/data-object-adapter-cell'
16+
import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
17+
import { type AbstractObjectDataDefinition } from '../../../objects/data-related/dynamic-type-object-data-abstract'
18+
import { defaultFieldWidthValues } from '../../../objects/data-related/providers/field-width/field-width-provider'
1519

1620
@injectable()
1721
export class DynamicTypeGridCellDataObjectObjectBrick extends DynamicTypeGridCellAbstract {
@@ -20,4 +24,14 @@ export class DynamicTypeGridCellDataObjectObjectBrick extends DynamicTypeGridCel
2024
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2125
return <DataObjectAdapterCell { ...props } />
2226
}
27+
28+
getDefaultGridColumnWidth (props: ColumnMeta<any, any>): number | undefined {
29+
const type = props?.config?.dataObjectType as string | undefined
30+
const objectDataDefinition: AbstractObjectDataDefinition = {
31+
...props.config?.dataObjectConfig.fieldDefinition,
32+
defaultFieldWidth: defaultFieldWidthValues
33+
}
34+
35+
return getDefaultGridColumnWidthFromDynamicObjectType(type, objectDataDefinition)
36+
}
2337
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/document-link/dynamic-type-grid-cell-document-link.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@ export class DynamicTypeGridCellDocumentLink extends DynamicTypeGridCellAbstract
2121
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2222
return <ElementCell { ...addColumnConfig(props, { allowedTypes: ['document'] }) } />
2323
}
24+
25+
getDefaultGridColumnWidth (): number | undefined {
26+
return 350
27+
}
2428
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/document/dynamic-type-grid-cell-document.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@ export class DynamicTypeGridCellDocument extends DynamicTypeGridCellAbstract {
2121
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2222
return <ElementCell { ...addColumnConfig(props, { allowedTypes: ['document'] }) } />
2323
}
24+
25+
getDefaultGridColumnWidth (): number | undefined {
26+
return 350
27+
}
2428
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/object-link/dynamic-type-grid-cell-object-link.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@ export class DynamicTypeGridCellObjectLink extends DynamicTypeGridCellAbstract {
2121
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2222
return <ElementCell { ...addColumnConfig(props, { allowedTypes: ['data-object'] }) } />
2323
}
24+
25+
getDefaultGridColumnWidth (): number | undefined {
26+
return 350
27+
}
2428
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/object/dynamic-type-grid-cell-object.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@ export class DynamicTypeGridCellObject extends DynamicTypeGridCellAbstract {
2121
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2222
return <ElementCell { ...addColumnConfig(props, { allowedTypes: ['data-object'] }) } />
2323
}
24+
25+
getDefaultGridColumnWidth (): number | undefined {
26+
return 350
27+
}
2428
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/text/dynamic-type-grid-cell-text.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,8 @@ export class DynamicTypeGridCellText extends DynamicTypeGridCellAbstract {
2020
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2121
return <TextCell { ...props } />
2222
}
23+
24+
getDefaultGridColumnWidth (): number | undefined {
25+
return 350
26+
}
2327
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/textarea/dynamic-type-grid-cell-text.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,8 @@ export class DynamicTypeGridCellTextarea extends DynamicTypeGridCellAbstract {
2020
getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
2121
return <TextareaCell { ...props } />
2222
}
23+
24+
getDefaultGridColumnWidth (): number | undefined {
25+
return 400
26+
}
2327
}

‎assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/components/many-to-many-relation/grid.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid
110110
]
111111

112112
columns.push(
113-
114113
columnHelper.accessor('actions', {
115114
header: t('actions'),
116115
size: 110,
@@ -240,7 +239,7 @@ export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid
240239
onUpdateCellData={ props.onUpdateCellData }
241240
resizable
242241
/>
243-
{ props.hint }
242+
{props.hint}
244243
</div>
245244
</Content>
246245
</div>

0 commit comments

Comments
 (0)