-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add advanced many to many object relation data object type (#910)
- Loading branch information
1 parent
0f50592
commit f3d035d
Showing
41 changed files
with
2,231 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
...namic-types/defintinitions/grid-cell/components/multi-select/multi-select-cell.styles.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| /** | ||
| * Pimcore | ||
| * | ||
| * This source file is available under two different licenses: | ||
| * - Pimcore Open Core License (POCL) | ||
| * - Pimcore Commercial License (PCL) | ||
| * Full copyright and license information is available in | ||
| * LICENSE.md which is distributed with this source code. | ||
| * | ||
| * @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org) | ||
| * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL | ||
| */ | ||
|
|
||
| import { createStyles } from 'antd-style' | ||
|
|
||
| export const useStyles = createStyles(({ css }) => { | ||
| return { | ||
| 'multi-select-cell': css` | ||
| padding: 4px; | ||
| .ant-select, .studio-select { | ||
| width: 100%; | ||
| } | ||
| ` | ||
| } | ||
| }) |
85 changes: 85 additions & 0 deletions
85
...ment/dynamic-types/defintinitions/grid-cell/components/multi-select/multi-select-cell.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /** | ||
| * Pimcore | ||
| * | ||
| * This source file is available under two different licenses: | ||
| * - Pimcore Open Core License (POCL) | ||
| * - Pimcore Commercial License (PCL) | ||
| * Full copyright and license information is available in | ||
| * LICENSE.md which is distributed with this source code. | ||
| * | ||
| * @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org) | ||
| * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL | ||
| */ | ||
|
|
||
| import React, { useEffect, useRef, useState } from 'react' | ||
| import { type RefSelectProps } from 'antd/es/select' | ||
| import cn from 'classnames' | ||
| import { useEditMode } from '@Pimcore/components/grid/edit-mode/use-edit-mode' | ||
| import { Select } from '@Pimcore/components/select/select' | ||
| import { useStyles } from './multi-select-cell.styles' | ||
| import { type DefaultCellProps } from '@Pimcore/components/grid/columns/default-cell' | ||
| import { | ||
| type SelectOptionType | ||
| } from '@Pimcore/modules/element/dynamic-types/defintinitions/grid-cell/components/select/select-cell' | ||
|
|
||
| export interface MultiSelectCellConfig { | ||
| options: string[] | SelectOptionType[] | ||
| } | ||
| export const MultiSelectCell = (props: DefaultCellProps): React.JSX.Element => { | ||
| const { styles } = useStyles() | ||
| const { column, getValue } = props | ||
| const { isInEditMode, disableEditMode, fireOnUpdateCellDataEvent } = useEditMode(props) | ||
| const [open, setOpen] = useState<boolean>(false) | ||
| const config = column.columnDef.meta?.config as MultiSelectCellConfig | undefined | ||
| const element = useRef<RefSelectProps>(null) | ||
|
|
||
| useEffect(() => { | ||
| if (isInEditMode) { | ||
| element.current?.focus() | ||
| setOpen(true) | ||
| } | ||
| }, [isInEditMode]) | ||
|
|
||
| const value: [] = Array.isArray(getValue()) ? getValue() : [] | ||
|
|
||
| if (config === undefined) { | ||
| return <>{ value.join(', ') }</> | ||
| } | ||
|
|
||
| const options: SelectOptionType[] = config.options.map((value: string | object) => ( | ||
| typeof value === 'object' ? value : { label: value, value } | ||
| )) | ||
|
|
||
| const displayOptions = value.map((value: string) => { | ||
| const option = options.find((option: SelectOptionType) => option.value === value) | ||
| return option?.displayValue ?? option?.label ?? value | ||
| }) | ||
| const displayValue = displayOptions.join(', ') | ||
|
|
||
| if (!isInEditMode) { | ||
| return ( | ||
| <div className={ [styles['multi-select-cell'], 'default-cell__content'].join(' ') }> | ||
| { displayValue } | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div className={ cn(styles['multi-select-cell'], 'default-cell__content') }> | ||
| <Select | ||
| mode="multiple" | ||
| onBlur={ disableEditMode } | ||
| onChange={ onChange } | ||
| open={ open } | ||
| options={ options } | ||
| popupMatchSelectWidth={ false } | ||
| ref={ element } | ||
| value={ value } | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| function onChange (value: string): void { | ||
| fireOnUpdateCellDataEvent(value) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
...types/defintinitions/grid-cell/types/multi-select/dynamic-type-grid-cell-multi-select.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| /** | ||
| * Pimcore | ||
| * | ||
| * This source file is available under two different licenses: | ||
| * - Pimcore Open Core License (POCL) | ||
| * - Pimcore Commercial License (PCL) | ||
| * Full copyright and license information is available in | ||
| * LICENSE.md which is distributed with this source code. | ||
| * | ||
| * @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org) | ||
| * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL | ||
| */ | ||
|
|
||
| import React, { type ReactElement } from 'react' | ||
| import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract' | ||
| import { injectable } from 'inversify' | ||
| import { | ||
| MultiSelectCell | ||
| } from '@Pimcore/modules/element/dynamic-types/defintinitions/grid-cell/components/multi-select/multi-select-cell' | ||
|
|
||
| @injectable() | ||
| export class DynamicTypeGridCellMultiSelect extends DynamicTypeGridCellAbstract { | ||
| readonly id = 'multi-select' | ||
|
|
||
| getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> { | ||
| return <MultiSelectCell { ...props } /> | ||
| } | ||
| } |
92 changes: 92 additions & 0 deletions
92
...omponents/advanced-many-to-many-object-relation/advanced-many-to-many-object-relation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| /** | ||
| * Pimcore | ||
| * | ||
| * This source file is available under two different licenses: | ||
| * - Pimcore Open Core License (POCL) | ||
| * - Pimcore Commercial License (PCL) | ||
| * Full copyright and license information is available in | ||
| * LICENSE.md which is distributed with this source code. | ||
| * | ||
| * @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org) | ||
| * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL | ||
| */ | ||
|
|
||
| import React, { useEffect } from 'react' | ||
| import { | ||
| ManyToManyObjectRelation, | ||
| type VisibleFieldDefinition | ||
| } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/many-to-many-object-relation/many-to-many-object-relation' | ||
| import type { | ||
| ManyToManyRelationValue, | ||
| ManyToManyRelationValueItem | ||
| } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/many-to-many-relation/hooks/use-value' | ||
| import _ from 'lodash' | ||
| import { Alert } from '@Pimcore/components/alert/alert' | ||
| import { | ||
| type AdvancedManyToManyRelationValue | ||
| } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/relations/types/advanced-many-to-many-relation' | ||
| import { | ||
| useConvertRelationEditableColumns | ||
| } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/relations/hooks/use-convert-relation-editable-columns' | ||
|
|
||
| export interface AdvancedManyToManyObjectRelationClassDefinitionProps { | ||
| allowToClearRelation: boolean | ||
| allowMultipleAssignments: boolean | ||
| maxItems: number | null | ||
| pathFormatterClass: string | null | ||
| width: number | string | null | ||
| height: number | string | null | ||
| visibleFieldDefinitions?: Record<string, VisibleFieldDefinition> | null | ||
| allowedClassId: string | null | ||
| columns?: RelationColumnDefinition[] | null | ||
| name: string[] | ||
| } | ||
|
|
||
| export interface RelationColumnDefinition { | ||
| type?: string | ||
| position: number | ||
| key: string | ||
| label?: string | ||
| width?: number | ||
| value?: string | ||
| } | ||
|
|
||
| export interface AdvancedManyToManyObjectRelationProps extends AdvancedManyToManyObjectRelationClassDefinitionProps { | ||
| disabled?: boolean | ||
| value?: AdvancedManyToManyRelationValue | null | ||
| onChange?: (value?: AdvancedManyToManyRelationValue | null) => void | ||
| enrichRowData?: (row: ManyToManyRelationValueItem) => ManyToManyRelationValueItem & Record<string, any> | ||
| } | ||
|
|
||
| export const AdvancedManyToManyObjectRelation = (props: AdvancedManyToManyObjectRelationProps): React.JSX.Element => { | ||
| const fieldName = props.name[props.name.length - 1] | ||
| const { columnDefinition, onUpdateCellData, convertToManyToManyRelationValue, convertToAdvancedManyToManyRelationValue } = useConvertRelationEditableColumns(props.columns ?? [], fieldName, props.value, props.onChange) | ||
|
|
||
| useEffect(() => { | ||
| }, [props.value]) | ||
|
|
||
| if (_.isEmpty(props.allowedClassId)) { | ||
| return ( | ||
| <Alert | ||
| message="Allowed class definition is missing in field configuration." | ||
| type="warning" | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const onChange = (value?: ManyToManyRelationValue | null): void => { | ||
| props.onChange?.(convertToAdvancedManyToManyRelationValue(value)) | ||
| } | ||
|
|
||
| return ( | ||
| <ManyToManyObjectRelation | ||
| { ...props } | ||
| allowedClasses={ [String(props.allowedClassId)] } | ||
| columnDefinition={ columnDefinition } | ||
| dataObjectsAllowed | ||
| onChange={ onChange } | ||
| onUpdateCellData={ onUpdateCellData } | ||
| value={ convertToManyToManyRelationValue(props.value) } | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.