Add checkbox data object data type (#818)

assets/js/src/core/app/config/services/index.ts

@@ -98,6 +98,7 @@ import { DynamicTypeObjectDataLastname } from '@Pimcore/modules/element/dynamic-
 import { DynamicTypeObjectDataEmail } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-email'
 import { DynamicTypeObjectDataGender } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-gender'
 import { DynamicTypeObjectDataRgbaColor } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-rgba-color'
+import { DynamicTypeObjectDataCheckbox } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-checkbox'
 import { DynamicTypeObjectDataDate } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-date'
 import { DynamicTypeObjectDataDatetime } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-datetime'
 import { DynamicTypeObjectDataDateRange } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-date-range'
@@ -243,6 +244,7 @@ container.bind(serviceIds['DynamicTypes/ObjectData/Lastname']).to(DynamicTypeObj
 container.bind(serviceIds['DynamicTypes/ObjectData/Email']).to(DynamicTypeObjectDataEmail).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Gender']).to(DynamicTypeObjectDataGender).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/RgbaColor']).to(DynamicTypeObjectDataRgbaColor).inSingletonScope()
+container.bind(serviceIds['DynamicTypes/ObjectData/Checkbox']).to(DynamicTypeObjectDataCheckbox).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Date']).to(DynamicTypeObjectDataDate).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Datetime']).to(DynamicTypeObjectDataDatetime).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/DateRange']).to(DynamicTypeObjectDataDateRange).inSingletonScope()

assets/js/src/core/app/config/services/service-ids.ts

@@ -133,6 +133,7 @@ export const serviceIds = {
   'DynamicTypes/ObjectData/Email': 'DynamicTypes/ObjectData/Email',
   'DynamicTypes/ObjectData/Gender': 'DynamicTypes/ObjectData/Gender',
   'DynamicTypes/ObjectData/RgbaColor': 'DynamicTypes/ObjectData/RgbaColor',
+  'DynamicTypes/ObjectData/Checkbox': 'DynamicTypes/ObjectData/Checkbox',
   'DynamicTypes/ObjectData/Date': 'DynamicTypes/ObjectData/Date',
   'DynamicTypes/ObjectData/Datetime': 'DynamicTypes/ObjectData/Datetime',
   'DynamicTypes/ObjectData/DateRange': 'DynamicTypes/ObjectData/DateRange',

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/checkbox/checkbox.tsx

@@ -0,0 +1,64 @@
+/**
+* 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, { useContext, useEffect, useState } from 'react'
+import { Checkbox as AntCheckbox, type CheckboxProps as AntCheckboxProps, Tooltip } from 'antd'
+import { useDataObjectDraft } from '@Pimcore/modules/data-object/hooks/use-data-object-draft'
+import { DataObjectContext } from '@Pimcore/modules/data-object/data-object-provider'
+import { Flex } from '@Pimcore/components/flex/flex'
+import { IconButton } from '@Pimcore/components/icon-button/icon-button'
+import { useTranslation } from 'react-i18next'
+
+export interface CheckboxProps extends Omit<AntCheckboxProps, 'value' | 'onChange'> {
+  value?: boolean | null
+  onChange?: (value?: boolean | null) => void
+}
+
+export const Checkbox = (props: CheckboxProps): React.JSX.Element => {
+  const [value, setValue] = useState<boolean | null>(props.value ?? null)
+  const { id } = useContext(DataObjectContext)
+  const { dataObject } = useDataObjectDraft(id)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (props.onChange !== undefined) {
+      props.onChange(value)
+    }
+  }, [value])
+
+  const onChange = (e): void => {
+    const newValue = Boolean(e.nativeEvent.target.checked)
+    setValue(newValue ?? null)
+    props.onChange?.(newValue)
+  }
+
+  const showClearButton = value !== null && dataObject?.allowInheritance === true && props.disabled !== true
+
+  return (
+    <Flex gap="extra-small">
+      <AntCheckbox
+        { ...props }
+        checked={ value ?? false }
+        onChange={ onChange }
+      />
+      { showClearButton && (
+        <Tooltip title={ t('set-to-null') }>
+          <IconButton
+            icon={ { value: 'trash' } }
+            onClick={ () => { setValue(null) } }
+          />
+        </Tooltip>
+      )}
+    </Flex>
+  )
+}

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-checkbox.tsx

@@ -0,0 +1,34 @@
+/**
+* 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 from 'react'
+import {
+  type AbstractObjectDataDefinition, DynamicTypeObjectDataAbstract
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/dynamic-type-object-data-abstract'
+import {
+  Checkbox
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/checkbox/checkbox'
+
+export type CheckboxObjectDataDefinition = AbstractObjectDataDefinition
+
+export class DynamicTypeObjectDataCheckbox extends DynamicTypeObjectDataAbstract {
+  id: string = 'checkbox'
+
+  getObjectDataComponent (props: CheckboxObjectDataDefinition): React.ReactElement<AbstractObjectDataDefinition> {
+    return (
+      <Checkbox
+        disabled={ props.noteditable === true }
+      />
+    )
+  }
+}

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-many-to-many-relation.tsx

@@ -19,9 +19,6 @@ import {
   ManyToManyRelation, type ManyToManyRelationClassDefinitionProps
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/many-to-many-relation/many-to-many-relation'
 import type { FormItemProps } from 'antd/es/form/FormItem'
-import {
-  type RgbaColorObjectDataDefinition
-} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-rgba-color'
 import {
   ManyToManyRelationLabel
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/many-to-many-relation/components/label/label'
@@ -39,7 +36,7 @@ export class DynamicTypeObjectDataManyToManyRelation extends DynamicTypeObjectDa
     )
   }
 
-  getObjectDataFormItemProps (props: RgbaColorObjectDataDefinition): FormItemProps {
+  getObjectDataFormItemProps (props: ManyToManyRelationObjectDataDefinition): FormItemProps {
     return {
       ...super.getObjectDataFormItemProps(props),
       label: <ManyToManyRelationLabel label={ props.title } />

assets/js/src/core/modules/element/dynamic-types/index.ts

@@ -86,6 +86,7 @@ import { type DynamicTypeObjectDataLastname } from '@Pimcore/modules/element/dyn
 import { type DynamicTypeObjectDataEmail } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-email'
 import { type DynamicTypeObjectDataGender } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-gender'
 import { type DynamicTypeObjectDataRgbaColor } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-rgba-color'
+import { type DynamicTypeObjectDataCheckbox } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-checkbox'
 import { type DynamicTypeObjectDataDate } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-date'
 import { type DynamicTypeObjectDataDatetime } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-datetime'
 import { type DynamicTypeObjectDataDateRange } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-date-range'
@@ -211,6 +212,7 @@ moduleSystem.registerModule({
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataEmail>(serviceIds['DynamicTypes/ObjectData/Email']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataGender>(serviceIds['DynamicTypes/ObjectData/Gender']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataRgbaColor>(serviceIds['DynamicTypes/ObjectData/RgbaColor']))
+    objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataCheckbox>(serviceIds['DynamicTypes/ObjectData/Checkbox']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataDate>(serviceIds['DynamicTypes/ObjectData/Date']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataDatetime>(serviceIds['DynamicTypes/ObjectData/Datetime']))
     objectDataRegistry.registerDynamicType(container.get<DynamicTypeObjectDataDateRange>(serviceIds['DynamicTypes/ObjectData/DateRange']))

public/build/41c305ca-0743-480f-b594-68a48854a039/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/41c305ca-0743-480f-b594-68a48854a039/vendor.js"
+      ]
+    }
+  }
+}

public/build/41c305ca-0743-480f-b594-68a48854a039/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/41c305ca-0743-480f-b594-68a48854a039/vendor.js": "/bundles/pimcorestudioui/build/41c305ca-0743-480f-b594-68a48854a039/vendor.js"
+}

public/build/b6cb9a55-1aa8-45e5-86ae-a94677be0726/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/b6cb9a55-1aa8-45e5-86ae-a94677be0726/main.js"
+      ]
+    }
+  }
+}

public/build/b6cb9a55-1aa8-45e5-86ae-a94677be0726/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/b6cb9a55-1aa8-45e5-86ae-a94677be0726/main.js": "/bundles/pimcorestudioui/build/b6cb9a55-1aa8-45e5-86ae-a94677be0726/main.js"
+}

public/build/ed594057-67db-489a-bd70-1ad2e2ea76c2/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/ed594057-67db-489a-bd70-1ad2e2ea76c2/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/ed594057-67db-489a-bd70-1ad2e2ea76c2/core-dll.js"
+      ]
+    }
+  }
+}