Add first version of data object data save process

assets/js/src/core/modules/data-object/data-object-draft-slice.tsx

@@ -26,8 +26,12 @@ import {
 } from '@Pimcore/modules/element/draft/hooks/use-tabs'
 import { type SchedulesDraft, useSchedulesReducers } from '@Pimcore/modules/element/draft/hooks/use-schedules'
 import { type DataObject } from '@Pimcore/modules/data-object/data-object-api-slice-enhanced'
+import {
+  type ModifiedObjectDataDraft,
+  useModifiedObjectDataReducers
+} from '@Pimcore/modules/data-object/draft/hooks/use-modified-object-data'
 
-export interface DataObjectDraft extends DataObject, PropertiesDraft, SchedulesDraft, TrackableChangesDraft, TabsDraft {
+export interface DataObjectDraft extends DataObject, PropertiesDraft, SchedulesDraft, TrackableChangesDraft, TabsDraft, ModifiedObjectDataDraft {
 }
 
 export const dataObjectsAdapter: EntityAdapter<DataObjectDraft, number> = createEntityAdapter<DataObjectDraft>({})
@@ -40,6 +44,7 @@ export const slice = createSlice({
     schedule: [],
     changes: {},
     modifiedCells: {},
+    modifiedObjectData: {},
     ...initialTabsStateValue
   }),
   reducers: {
@@ -57,7 +62,8 @@ export const slice = createSlice({
     ...useTrackableChangesReducers(dataObjectsAdapter),
     ...usePropertiesReducers(dataObjectsAdapter),
     ...useSchedulesReducers(dataObjectsAdapter),
-    ...useTabsReducers(dataObjectsAdapter)
+    ...useTabsReducers(dataObjectsAdapter),
+    ...useModifiedObjectDataReducers(dataObjectsAdapter)
   }
 })
 
@@ -81,7 +87,9 @@ export const {
   setSchedules: setSchedulesForDataObject,
   updateSchedule: updateScheduleForDataObject,
   resetSchedulesChanges: resetSchedulesChangesForDataObject,
-  setActiveTab: setActiveTabForDataObject
+  setActiveTab: setActiveTabForDataObject,
+
+  trackModifiedObjectData
 
 } = slice.actions
 export const { selectById: selectDataObjectById } = dataObjectsAdapter.getSelectors((state: RootState) => state['data-object-draft'])

assets/js/src/core/modules/data-object/draft/hooks/use-modified-object-data.ts

@@ -0,0 +1,88 @@
+/**
+* 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 type { ActionCreatorWithPayload, PayloadAction } from '@reduxjs/toolkit'
+import type { EntityAdapter, EntityState } from '@reduxjs/toolkit/src/entities/models'
+
+import { useAppDispatch } from '@Pimcore/app/store'
+
+import { type TrackableChangesDraft } from '@Pimcore/modules/element/draft/hooks/use-trackable-changes'
+import _ from 'lodash'
+
+export interface ModifiedObjectDataAction {
+  id: number
+  values: any
+}
+
+export interface ModifiedObjectDataDraft extends TrackableChangesDraft {
+  modifiedObjectData: Record<string, any>
+}
+
+interface UseModifiedObjectDataReturn {
+  trackModifiedObjectData: (state: EntityState<ModifiedObjectDataDraft, number>, action: PayloadAction<ModifiedObjectDataAction>) => void
+}
+
+export const useModifiedObjectDataReducers = (entityAdapter: EntityAdapter<ModifiedObjectDataDraft, number>): UseModifiedObjectDataReturn => {
+  const trackModifiedObjectData = (state: EntityState<ModifiedObjectDataDraft, number>, action: PayloadAction<ModifiedObjectDataAction>): void => {
+    modifyDraft(state, action.payload.id, (draft: ModifiedObjectDataDraft): ModifiedObjectDataDraft => {
+      draft.modifiedObjectData = _.merge({}, draft.modifiedObjectData, action.payload.values)
+
+      markedAsModified(draft)
+      return draft
+    })
+  }
+
+  const modifyDraft = (state: EntityState<ModifiedObjectDataDraft, number>, id: number, modification: (draft: ModifiedObjectDataDraft) => ModifiedObjectDataDraft): void => {
+    const draft = entityAdapter.getSelectors().selectById(state, id)
+    if (draft === undefined) {
+      console.error(`Object draft with id ${id} not found`)
+      return
+    }
+
+    state.entities[id] = modification({ ...draft })
+  }
+
+  const markedAsModified = (draft: ModifiedObjectDataDraft): void => {
+    draft.modified = true
+
+    draft.changes = {
+      ...draft.changes,
+      objectData: true
+    }
+  }
+
+  return {
+    trackModifiedObjectData
+  }
+}
+
+export interface UseModifiedObjectDataDraftReturn {
+  modifiedObjectData: Record<string, any>
+  trackModifiedObjectData: (values: any) => void
+}
+
+export const useModifiedObjectDataDraft = (
+  id: number,
+  draft: ModifiedObjectDataDraft,
+  trackModifiedObjectDataAction: ActionCreatorWithPayload<ModifiedObjectDataAction>
+): UseModifiedObjectDataDraftReturn => {
+  const dispatch = useAppDispatch()
+
+  return {
+    modifiedObjectData: draft?.modifiedObjectData ?? {},
+
+    trackModifiedObjectData: (values: any): void => {
+      dispatch(trackModifiedObjectDataAction({ id, values }))
+    }
+  }
+}

assets/js/src/core/modules/data-object/editor/toolbar/toolbar.tsx

@@ -114,6 +114,10 @@ export const Toolbar = (): React.JSX.Element => {
       update.properties = propertyUpdate?.filter((property) => !property.inherited)
     }
 
+    if (dataObject.changes.objectData) {
+      update.editableData = dataObject.modifiedObjectData
+    }
+
     const saveDataObjectPromise = saveDataObject({
       id,
       body: {

assets/js/src/core/modules/data-object/editor/types/object/tab-manager/tabs/edit/components/root-component.tsx

@@ -11,11 +11,14 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React from 'react'
+import React, { useCallback, useRef } from 'react'
 import { ObjectComponent } from './object-component'
 import { Form } from '@Pimcore/components/form/form'
 import { Button, ConfigProvider } from 'antd'
 import { type DataObjectGetLayoutByIdApiResponse } from '@Pimcore/modules/data-object/data-object-api-slice.gen'
+import { useDataObjectDraft } from '@Pimcore/modules/data-object/hooks/use-data-object-draft'
+import { useElementContext } from '@Pimcore/modules/element/hooks/use-element-context'
+import { debounce } from 'lodash'
 
 interface RootComponentProps {
   layout: DataObjectGetLayoutByIdApiResponse
@@ -24,24 +27,43 @@ interface RootComponentProps {
 }
 
 export const RootComponent = ({ layout, data, className }: RootComponentProps): React.JSX.Element => {
+  const { id } = useElementContext()
+  const { trackModifiedObjectData } = useDataObjectDraft(id)
+  const modifiedDataObjectAttributesRef = useRef({})
+
+  const debouncedTrackModifiedDataObjectAttribute = useCallback(
+    debounce((currentAttributes: Record<string, any>) => {
+      commitToDraft(currentAttributes)
+    }, 300),
+    [trackModifiedObjectData]
+  )
+
+  const handleValuesChange = (changedValues: Record<string, any>): void => {
+    modifiedDataObjectAttributesRef.current = { ...modifiedDataObjectAttributesRef.current, ...changedValues }
+    debouncedTrackModifiedDataObjectAttribute({ ...modifiedDataObjectAttributesRef.current })
+  }
+
+  const handleSubmit = (values: any): void => {
+    commitToDraft(modifiedDataObjectAttributesRef.current)
+    console.log(values)
+  }
+
+  const commitToDraft = (changedValues: Record<string, any>): void => {
+    trackModifiedObjectData({ ...changedValues })
+    modifiedDataObjectAttributesRef.current = {}
+  }
+
   return (
-    <ConfigProvider theme={ {
-      components: {
-        Form: {
-          itemMarginBottom: 0
-        }
-      }
-    } }
-    >
+    <ConfigProvider theme={ { components: { Form: { itemMarginBottom: 0 } } } }>
       <Form
         className={ className }
         initialValues={ data }
         layout='vertical'
-        onFinish={ onFinish }
+        onFinish={ handleSubmit }
+        onValuesChange={ handleValuesChange }
         preserve
       >
         <ObjectComponent { ...layout } />
-
         <Form.Item style={ { margin: 12 } }>
           <Button
             htmlType="submit"
@@ -51,8 +73,4 @@ export const RootComponent = ({ layout, data, className }: RootComponentProps):
       </Form>
     </ConfigProvider>
   )
-
-  function onFinish (values: any): void {
-    console.log(values)
-  }
 }

assets/js/src/core/modules/data-object/hooks/use-data-object-draft.ts

@@ -28,7 +28,8 @@ import {
   setPropertiesForDataObject,
   setSchedulesForDataObject,
   updatePropertyForDataObject,
-  updateScheduleForDataObject
+  updateScheduleForDataObject,
+  trackModifiedObjectData
 } from '../data-object-draft-slice'
 import { useEffect, useState } from 'react'
 import { usePropertiesDraft, type UsePropertiesDraftReturn } from '@Pimcore/modules/element/draft/hooks/use-properties'
@@ -41,11 +42,16 @@ import type { ElementEditorType, TypeRegistryInterface } from '@Pimcore/modules/
 import { useInjection } from '@Pimcore/app/depency-injection'
 import { serviceIds } from '@Pimcore/app/config/services/service-ids'
 import { initialTabsStateValue, useTabsDraft, type UseTabsDraftReturn } from '@Pimcore/modules/element/draft/hooks/use-tabs'
+import {
+  useModifiedObjectDataDraft,
+  type UseModifiedObjectDataDraftReturn
+} from '@Pimcore/modules/data-object/draft/hooks/use-modified-object-data'
 
 export interface UseDataObjectDraftReturn extends
   UsePropertiesDraftReturn,
   UseSchedulesDraftReturn,
   UseTabsDraftReturn,
+  UseModifiedObjectDataDraftReturn,
   UseTrackableChangesDraftReturn {
   isLoading: boolean
   isError: boolean
@@ -97,6 +103,7 @@ export const useDataObjectDraft = (id: number): UseDataObjectDraftReturn => {
         schedules: [],
         changes: {},
         modifiedCells: {},
+        modifiedObjectData: {},
         ...initialTabsStateValue
       }
 
@@ -150,6 +157,12 @@ export const useDataObjectDraft = (id: number): UseDataObjectDraftReturn => {
     setActiveTabForDataObject
   )
 
+  const modifiedObjectDataActions = useModifiedObjectDataDraft(
+    id,
+    dataObject,
+    trackModifiedObjectData
+  )
+
   const editorType = dataObject?.type === undefined
     ? undefined
     : (typeRegistry.get(dataObject.type) ?? typeRegistry.get('object'))
@@ -164,6 +177,7 @@ export const useDataObjectDraft = (id: number): UseDataObjectDraftReturn => {
     ...trackableChangesActions,
     ...propertyActions,
     ...schedulesActions,
-    ...tabsActions
+    ...tabsActions,
+    ...modifiedObjectDataActions
   }
 }

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

@@ -75,8 +75,6 @@ export const StructuredTableGrid = (props: StructuredTableGridProps): React.JSX.
     )
   })
 
-  console.log('columns', columns, props.cols)
-
   const rows = props.rows.map((row) => {
     const rowData = {
       rowLabel: t(row.label)

public/build/5563c535-9ad4-4f27-bf9c-393e49169cf5/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/5563c535-9ad4-4f27-bf9c-393e49169cf5/main.js"
+      ]
+    }
+  }
+}

public/build/5563c535-9ad4-4f27-bf9c-393e49169cf5/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/5563c535-9ad4-4f27-bf9c-393e49169cf5/main.js": "/bundles/pimcorestudioui/build/5563c535-9ad4-4f27-bf9c-393e49169cf5/main.js"
+}

public/build/631e5985-0cef-4866-a148-c22c75aafc6c/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/631e5985-0cef-4866-a148-c22c75aafc6c/vendor.js"
+      ]
+    }
+  }
+}

public/build/631e5985-0cef-4866-a148-c22c75aafc6c/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/631e5985-0cef-4866-a148-c22c75aafc6c/vendor.js": "/bundles/pimcorestudioui/build/631e5985-0cef-4866-a148-c22c75aafc6c/vendor.js"
+}

public/build/78fa4eb8-c29f-448a-b3fc-ee3e1c501047/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/78fa4eb8-c29f-448a-b3fc-ee3e1c501047/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/78fa4eb8-c29f-448a-b3fc-ee3e1c501047/core-dll.js"
+      ]
+    }
+  }
+}