dbm 1.2.0 → 1.2.2

package/flow/updatefunctions/thirdparty/google/maps/AutoComplete.js

@@ -0,0 +1,132 @@
+import Dbm from "../../../../../index.js";
+
+export default class AutoComplete extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("text", "");
+        this.input.register("countries", []);
+        this.input.register("types", ["geocode"]);
+        this.input.register("language", "en");
+
+        this._loadedScript = false;
+        this._currentText = "";
+
+        this.output.register("updated", true);
+        this.output.register("results", []);
+    }
+
+    loadScript() {
+        let key = Dbm.getRepositoryItem("googleMapsApi").apiKey;
+        let scriptLoader = Dbm.loading.loadScript("https://maps.googleapis.com/maps/api/js?key=" + key + "&libraries=places");
+
+        if(scriptLoader.item.properties.status === 1) {
+            this._scriptLoaded();
+        }
+        else {
+            Dbm.flow.addUpdateCommandWhenMatched(scriptLoader.item.properties.status, 1, Dbm.commands.callFunction(this._scriptLoaded.bind(this)));
+        }
+
+        return this;
+    }
+
+    _scriptLoaded() {
+        console.log("_scriptLoaded");
+        if(!this._loadedScript) {
+            this._loadedScript = true;
+            this._update();
+        }
+    }
+
+    setLanguage(aLanguageCode) {
+        this.input.language = aLanguageCode;
+
+        return this;
+    }
+
+    setCountryRestrictions(aCountryCode) {
+        this.input.countries = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(aCountryCode);
+
+        return this;
+    }
+
+    _update() {
+        console.log("_update");
+
+        
+        let text = this.input.text;
+        this._currentText = text;
+        this.output.updated = false;
+
+        if(text) {
+            this.output.properties.results.isDirty = false;
+            this.output.properties.updated.isDirty = false;
+
+            if(this._loadedScript) {
+                
+                let requestData = {
+                    input: text,
+                    language: this.input.language,
+                };
+
+                if(this.input.countries) {
+                    requestData["includedRegionCodes"] = this.input.countries;
+                }
+                if(this.input.types) {
+                    requestData["includedPrimaryTypes"] = this.input.types;
+                }
+
+                let request = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(requestData);
+
+                request.then((aResult) => {
+                    let suggestions = aResult.suggestions;
+                    this._resultsLoaded(text, Dbm.utils.ArrayFunctions.mapField(suggestions, "placePrediction"));
+                });
+            }
+            else {
+                this.loadScript();
+            }
+        }
+        else {
+            this.output.results = [];
+            this.output.updated = true;
+        }
+        
+        
+    }
+
+    _getResultDetails(aPlaceId) {
+
+        let place = new google.maps.places.Place({"id": aPlaceId});
+
+        let loadPromise = place.fetchFields({"fields": ["addressComponents"]});
+
+        loadPromise.then((aResult) => {
+            //console.log(place);
+        })
+    }
+
+    _resultsLoaded(aText, aPredictions) {
+        console.log("_resultsLoaded");
+        /*
+        for(let i = 0; i < aPredictions.length; i++) {
+            let currentPredition = aPredictions[i];
+            
+            //console.log(currentPredition.text.text, currentPredition.mainText.text, currentPredition.secondaryText.text, currentPredition.placeId);
+            this._getResultDetails(currentPredition.placeId);
+            break;
+        }
+        */
+
+        //console.log(this.isDirty, this.output.properties.results.isDirty, this._currentText, aText);
+
+        if(this._currentText === aText) {
+            this.output.properties.results._internal_setValueInFlowOutsideOfUpdate(aPredictions);
+            this.output.properties.updated._internal_setValueInFlowOutsideOfUpdate(true);
+        }
+    }
+}
+
+
+

package/flow/updatefunctions/thirdparty/google/maps/PlaceDetails.js

@@ -0,0 +1,80 @@
+import Dbm from "../../../../../index.js";
+
+export default class PlaceDetails extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("id", null);
+        this.input.register("fields", ["addressComponents", "location"]);
+
+        //reviews
+
+        this._loadedScript = false;
+        this._currentId = "";
+
+        this.output.register("updated", true);
+        this.output.register("data", null);
+    }
+
+    loadScript() {
+        console.log("loadScript");
+        let key = Dbm.getRepositoryItem("googleMapsApi").apiKey;
+        let scriptLoader = Dbm.loading.loadScript("https://maps.googleapis.com/maps/api/js?key=" + key + "&libraries=places");
+
+        console.log(scriptLoader.item.properties.status, scriptLoader);
+        if(scriptLoader.item.status === 1) {
+            this._scriptLoaded();
+        }
+        else {
+            Dbm.flow.addUpdateCommandWhenMatched(scriptLoader.item.properties.status, 1, Dbm.commands.callFunction(this._scriptLoaded.bind(this)));
+        }
+
+        return this;
+    }
+
+    _scriptLoaded() {
+        console.log("_scriptLoaded");
+        if(!this._loadedScript) {
+            this._loadedScript = true;
+            this._update();
+        }
+    }
+
+    _update() {
+        console.log("_update");
+
+        
+        let id = this.input.id;
+        this._currentId = id;
+        this.output.updated = false;
+
+        if(id) {
+            this.output.properties.data.isDirty = false;
+            this.output.properties.updated.isDirty = false;
+
+            if(this._loadedScript) {
+
+                let place = new google.maps.places.Place({"id": this.input.id});
+                console.log(place);
+
+                let loadPromise = place.fetchFields({"fields": this.input.fields});
+
+                loadPromise.then((aResult) => {
+                    console.log(id, place, aResult);
+                    this.output.properties.data._internal_setValueInFlowOutsideOfUpdate(place);
+                })
+            }
+            else {
+                this.loadScript();
+            }
+        }
+        else {
+            this.output.data = null;
+            this.output.updated = true;
+        }
+    }
+}
+
+
+

package/flow/updatefunctions/thirdparty/google/maps/index.js

@@ -0,0 +1,4 @@
+import Dbm from "../../../../../index.js";
+
+export {default as AutoComplete} from "./AutoComplete.js";
+export {default as PlaceDetails} from "./PlaceDetails.js";

package/flow/updatefunctions/thirdparty/index.js

@@ -1 +1,2 @@
-export * as threejs from "./threejs/index.js";
+export * as threejs from "./threejs/index.js";
+export * as google from "./google/index.js";

package/graphapi/webclient/ApiConnection.js

@@ -28,6 +28,7 @@ export default class ApiConnection extends Dbm.core.BaseObject {
 
     requestRange(aSelect, aEncode) {
         let item = this._getRequestItem();
+        item.requireProperty("items", []);
 
         let selectArray = [];
         let encodeString = aEncode.join(",");
@@ -76,6 +77,7 @@ export default class ApiConnection extends Dbm.core.BaseObject {
 
     requestData(aFunctionName, aData) {
         let item = this._getRequestItem();
+        item.requireProperty("data", null);
 
         let parametersArray = [];
 

package/graphapi/webclient/WebSocketConnection.js

@@ -94,6 +94,7 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     requestData(aFunctionName, aData) {
         //console.log("requestData");
         let item = this._getRequestItem();
+        item.requireProperty("data", null);
         item.setValue("requestData", {"type": "data", "functionName": aFunctionName, "data": aData, "requestId": item.id});
         this._runRequest(item);
         

package/graphapi/webclient/admin/EditorGroup.js

@@ -18,7 +18,7 @@ export default class EditorGroup extends Dbm.core.BaseObject {
         let itemEditor = this.item["editor_" + aId];
         if(!itemEditor) {
             itemEditor = new Dbm.graphapi.webclient.admin.ItemEditor();
-            itemEditor.item.setValue("editedItem", Dbm.getInstance().repository.getItem(aId));
+            itemEditor.item.setValue("editedItem", Dbm.getRepositoryItem(aId));
             this.item.setValue("editor_" + aId, itemEditor); 
             this.item.editors = [].concat(this.item.editors, itemEditor);
             this.item.anyChange.addCheck(itemEditor.item.properties.changed);

package/graphapi/webclient/admin/ItemEditor.js

@@ -42,6 +42,18 @@ export default class ItemEditor extends Dbm.core.BaseObject {
         return this.addEditor(aField, aInitialValue, Dbm.graphapi.webclient.admin.SaveFunctions.setField, aUpdateEncoding);
     }
 
+    addFieldTranslationEditor(aField, aLanguage, aInitialValue, aUpdateEncoding = null) {
+        let name = "translation_" + aField + "_" + aLanguage;
+        let valueEditor = this.item["editor_" + name];
+        if(!valueEditor) {
+            valueEditor = this.addEditor(name, aInitialValue, Dbm.graphapi.webclient.admin.SaveFunctions.setFieldTranslation, aUpdateEncoding);
+            valueEditor.item.setValue("name", aField);
+            valueEditor.item.setValue("language", aLanguage);
+        }
+        
+        return valueEditor;
+    }
+
     _addRelationEditor(aName, aType, aObjectType, aInitialValue, aSaveFunction, aUpdateEncoding = null) {
         let valueEditor = this.item["editor_relation_" + aName];
         if(!valueEditor) {
@@ -104,6 +116,33 @@ export default class ItemEditor extends Dbm.core.BaseObject {
         return this._addMultipleRelationsEditor(name, aType, aObjectType, aInitialValue, Dbm.graphapi.webclient.admin.SaveFunctions.multipleOutgoingRelations, aUpdateEncoding);
     }
 
+    getAdminMultipleIncomingRelationsEditor(aType, aObjectType) {
+        let name = "in_" + aType + "_" + aObjectType;
+        let valueEditor = this.item["editor_relation_" + name];
+        if(!valueEditor) {
+            let relations = Dbm.utils.ArrayFunctions.filterByField(Dbm.objectPath(this.item.editedItem, "relations/in." + aType + ".objects"), "objectTypes", aObjectType, "arrayContains");
+            let ids = Dbm.utils.ArrayFunctions.mapField(relations, "id");
+
+            valueEditor = this.addMultipleIncomingRelationsEditor(aType, aObjectType, ids, "relations");
+        }
+
+        return valueEditor;
+    }
+
+    getAdminMultipleOutgoingRelationsEditor(aType, aObjectType) {
+        let name = "out_" + aType + "_" + aObjectType;
+        let valueEditor = this.item["editor_relation_" + name];
+        if(!valueEditor) {
+            let relations = Dbm.utils.ArrayFunctions.filterByField(Dbm.objectPath(this.item.editedItem, "relations/in." + aType + ".objects"), "objectTypes", aObjectType, "arrayContains");
+            let ids = Dbm.utils.ArrayFunctions.mapField(relations, "id");
+
+            valueEditor = this.addMultipleOutgoingRelationsEditor(aType, aObjectType, ids, "relations");
+        }
+
+        return valueEditor;
+    }
+    
+
     getVisibilityEditor(aInitialValue) {
         let name = "visibility";
         let valueEditor = this.item["visibility"];

package/graphapi/webclient/admin/ItemSaveData.js

@@ -28,6 +28,12 @@ export default class ItemSaveData extends Dbm.core.BaseObject {
 
         return this;
     }
+
+    setFieldTranslation(aField, aLanguage, aValue) {
+        this.createChange("setFieldTranslation", {"value": aValue, "language": aLanguage, "field": aField});
+
+        return this;
+    }
     
     addUpdateEncoding(aEncoding) {
         this._updateEncodings.push(aEncoding);

package/graphapi/webclient/admin/SaveFunctions.js

@@ -4,6 +4,10 @@ export const setField = function(aEditor, aItemSaveData) {
     aItemSaveData.setField(aEditor.item.name, aEditor.item.editValue.getValue());
 }
 
+export const setFieldTranslation = function(aEditor, aItemSaveData) {
+    aItemSaveData.setFieldTranslation(aEditor.item.name, aEditor.item.language, aEditor.item.editValue.getValue());
+}
+
 export const setUrl = function(aEditor, aItemSaveData) {
     aItemSaveData.createChange("setUrl", {"value": aEditor.item.editValue.getValue()});
 }

package/graphapi/webclient/admin/ValueEditor.js

@@ -14,6 +14,21 @@ export default class ValueEditor extends Dbm.core.BaseObject {
         this.item.requireProperty("changed", false).connectInput(editValue.item.properties.changed);
     }
 
+    get value() {
+        return this.valueProperty.value;
+    }
+
+    set value(aValue) {
+        
+        this.valueProperty.value = aValue;
+
+        return aValue;
+    }
+
+    get valueProperty() {
+        return this.item.editValue.value;
+    }
+
     addSaveCommand(aCommand) {
 
         this.item.saveCommands = [].concat(this.item.saveCommands, aCommand);

package/graphapi/webclient/decode/DecodeBaseObject.js

@@ -49,5 +49,9 @@ export default class DecodeBaseObject extends Dbm.core.BaseObject {
                 }
             }
         }
+
+        if(this.item.setupCommands) {
+            Dbm.commands.performCommands(this.item.setupCommands, this, {"item": aItem});
+        }
     }
 }

package/graphapi/webclient/decode/index.js

@@ -3,6 +3,20 @@ import Dbm from "../../../index.js";
 export {default as DecodeBaseObject} from "./DecodeBaseObject.js";
 export {default as Relations} from "./Relations.js";
 
+export const setupDefaultDecoder = function(aName, aFields = [], aSingleLinks = [], aMultipleLinks = [], aSetupCommands = []) {
+    let decodePrefix = "graphApi/decode/";
+
+    let decoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+    decoder.item.setValue("copyFields", aFields);
+    decoder.item.setValue("copyLink", aSingleLinks);
+    decoder.item.setValue("copyLinks", aMultipleLinks);
+    decoder.item.setValue("setupCommands", aSetupCommands);
+    decoder.item.setValue("encodingType", aName);
+    decoder.item.register(decodePrefix + aName);
+
+    return decoder;
+}
+
 export const fullSetup = function() {
     let decodePrefix = "graphApi/decode/";
 
@@ -60,7 +74,7 @@ export const fullSetup = function() {
         let name = "urlRequest";
         let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
         currentDecoder.item.setValue("copyFields", ["meta/description", "seo/noIndex", "seo/noFollow", "publishDate"]);
-        currentDecoder.item.setValue("copyLink", ["category"]);
+        currentDecoder.item.setValue("copyLink", ["category", "translations"]);
         currentDecoder.item.setValue("copyLinks", ["categories"]);
         currentDecoder.item.setValue("encodingType", name);
         currentDecoder.item.register(decodePrefix + name);
@@ -185,4 +199,21 @@ export const fullSetup = function() {
         currentDecoder.item.setValue("encodingType", name);
         currentDecoder.item.register(decodePrefix + name);
     }
+
+    setupDefaultDecoder("linkPreview", ["title", "description", "link", "linkText"], ["page"]);
+    setupDefaultDecoder("publishDate", ["publishDate"], []);
+    setupDefaultDecoder("language", [], ["language"]);
+    setupDefaultDecoder("admin_fieldTranslations", ["fields/translations"], []);
+    setupDefaultDecoder("translationGroup", [], [], ["pages"]);
+
+    let connectTranslations = function(aItem, aTranslationsName, aOutputName, aDefaultFieldName) {
+
+        let updateFunction = Dbm.flow.updatefunctions.basic.propertyOfWithDefault(aItem.getProperty(aTranslationsName), Dbm.getRepositoryItem("site").properties.currentLanguageCode, aItem.getProperty(aDefaultFieldName));
+        aItem.requireProperty(aOutputName, null).connectInput(updateFunction.output.properties.value);
+
+        aItem.requireProperty(aOutputName + "/update", updateFunction);
+    }
+
+    setupDefaultDecoder("name_translations", ["name/translations"], [], [], [Dbm.commands.callFunction(connectTranslations, [Dbm.core.source.event("item"), "name/translations", "name/translated", "name"])]);
+    setupDefaultDecoder("title_translations", ["title/translations"], [], [], [Dbm.commands.callFunction(connectTranslations, [Dbm.core.source.event("item"), "title/translations", "title/translated", "title"])]);
 }

package/graphapi/webclient/index.js

@@ -24,4 +24,45 @@ export const setup = function(aWsPath, aApiPath) {
 
     let cachedRequests = new Dbm.graphapi.webclient.CachedRequests();
     cachedRequests.item.register("cachedGraphApi");
+}
+
+export const requireObjectEncoding = function(aObject, aEncoding, aCommand) {
+    console.log("requireObjectEncoding");
+    if(aObject["has/encoding/" + aEncoding]) {
+        console.log(aObject, aEncoding);
+        if(aCommand) {
+            aCommand.perform(null, null);
+        }
+    }
+    else {
+        let graphApi = Dbm.getRepositoryItem("cachedGraphApi").controller;
+        
+        let request = graphApi.requestItem(aObject.id, [aEncoding]);
+        
+        if(aCommand) {
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, aCommand);
+        }
+    }
+}
+
+export const loadData = function(aType, aData, aCallback = null) {
+    let request = Dbm.getGraphApi().requestData(aType, aData);
+
+    if(aCallback) {
+        let callbackCommand = Dbm.commands.callFunction(aCallback, [Dbm.core.source.staticObject(request, "data")]);
+        Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, callbackCommand);
+    }
+    
+    return request.properties.data;
+}
+
+export const performAction = function(aType, aData, aCallback = null) {
+    let request = Dbm.getGraphApi().performAction(aType, aData);
+
+    if(aCallback) {
+        let callbackCommand = Dbm.commands.callFunction(aCallback, [Dbm.core.source.staticObject(request, "data")]);
+        Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, callbackCommand);
+    }
+    
+    return request.properties.data;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "index.js",
   "type": "module",
   "scripts": {},

package/react/admin/EditObject.js

@@ -0,0 +1,52 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class EditObject extends Dbm.react.BaseObject {
+    _constructAfterProps() {
+        super._constructAfterProps();
+
+        let editorGroup = this.context.editorGroup;
+        if(!editorGroup) {
+            editorGroup = new Dbm.graphapi.webclient.admin.EditorGroup();
+        }
+        this.item.setValue("editorGroup", editorGroup);
+        
+
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+        
+        let item = this.getPropValue("item");
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
+        this.item.requireProperty("loaded", false);
+
+        {
+            let request = graphApi.requestRange(
+                [
+                    {"type": "includePrivate"},
+                    {"type": "includeDraft"},
+                    {"type": "idSelection", "ids": [item.id]},
+                ],
+                ["admin_fields", "admin_fieldTranslations", "relations"]
+            );
+            allLoaded.addCheck(request.properties.status);
+        }
+
+        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
+    }
+
+    _renderMainElement() {
+
+        let item = this.getPropValue("item");
+        let itemEditor = this.item.editorGroup.getItemEditor(item.id);
+
+        let children = this.getPropValue("children");
+
+        return React.createElement(React.Fragment, {},
+            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+                React.createElement(Dbm.react.context.AddContextVariables, {values: {"editorGroup": this.item.editorGroup, "item": item, "itemEditor": itemEditor}},
+                    children
+                )
+            )
+        );
+    }
+}

package/react/admin/EditObjectById.js

@@ -15,7 +15,6 @@ export default class EditObjectById extends Dbm.react.BaseObject {
         let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
         
         let id = this.getPropValue("id");
-        console.log(id);
 
         let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
         this.item.requireProperty("loaded", false);
@@ -27,7 +26,7 @@ export default class EditObjectById extends Dbm.react.BaseObject {
                     {"type": "includeDraft"},
                     {"type": "idSelection", "ids": [id]},
                 ],
-                ["admin_fields", "relations"]
+                ["admin_fields", "admin_fieldTranslations", "relations"]
             );
             allLoaded.addCheck(request.properties.status);
         }
@@ -43,7 +42,7 @@ export default class EditObjectById extends Dbm.react.BaseObject {
 
         let children = this.getPropValue("children");
 
-        return React.createElement("div", {},
+        return React.createElement(React.Fragment, {},
             React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
                 React.createElement(Dbm.react.context.AddContextVariables, {values: {"editorGroup": this.item.editorGroup, "item": item, "itemEditor": itemEditor}},
                     children

package/react/admin/EditPage.js

@@ -19,6 +19,8 @@ export default class EditPage extends Dbm.react.BaseObject {
         itemEditor.addFieldEditor("content", page.content, "content");
         itemEditor.addFieldEditor("publishDate", page.publishDate, "urlRequest");
         itemEditor.addOutgoingRelationEditor("in", "group/pageCategory", page.category ? page.category.id : 0, "urlRequest");
+        itemEditor.addIncomingRelationEditor("for", "language", page.language ? page.language.id : 0, "urlRequest");
+        itemEditor.addOutgoingRelationEditor("in", "group/translationGroup", page.translations ? page.translations.id : 0, "urlRequest");
         itemEditor.addEditor("url", page.url, Dbm.graphapi.webclient.admin.SaveFunctions.setUrl, "url");
 
         let descriptionEditor = itemEditor.addFieldEditor("meta/description", page["meta/description"], "meta/description");
@@ -55,6 +57,8 @@ export default class EditPage extends Dbm.react.BaseObject {
         itemSaveData.setField("contentPreloadTags", preloadImages);
         itemSaveData.setField("lastModified", (new Date()).toISOString());
         itemSaveData.createChange("clearCache", {});
+        itemSaveData.createChange("addAction", {"type": "pageUpdates/updateCategoryListing"});
+        
 
         saveData.save();
     }
@@ -214,6 +218,20 @@ export default class EditPage extends Dbm.react.BaseObject {
                             ),
                             React.createElement(Dbm.react.form.GraphApiObjectSelection, {"value": itemEditor.getEditor("relation_out_in_group/pageCategory").item.editValue.value, objectType: "group/pageCategory", className: "standard-field standard-field-padding full-width"}),
                         ),
+                        React.createElement("div", {className: "spacing standard"}),
+                        React.createElement("div", {},
+                            React.createElement("label", {className: "standard-field-label"},
+                                "Language"
+                            ),
+                            React.createElement(Dbm.react.form.GraphApiObjectSelection, {"value": itemEditor.getEditor("relation_in_for_language").item.editValue.value, objectType: "language", className: "standard-field standard-field-padding full-width"}),
+                        ),
+                        React.createElement("div", {className: "spacing standard"}),
+                        React.createElement("div", {},
+                            React.createElement("label", {className: "standard-field-label"},
+                                "Translations"
+                            ),
+                            React.createElement(Dbm.react.form.GraphApiObjectSelection, {"value": itemEditor.getEditor("relation_out_in_group/translationGroup").item.editValue.value, objectType: "group/translationGroup", className: "standard-field standard-field-padding full-width"}),
+                        ),
                     ),
                     React.createElement("div", {className: "spacing standard"}),
                     React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},

package/react/admin/EditorGroup.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class EditorGroup extends Dbm.react.BaseObject {
+    _constructAfterProps() {
+        super._constructAfterProps();
+
+        let editorGroup = this.context.editorGroup;
+        if(!editorGroup) {
+            editorGroup = new Dbm.graphapi.webclient.admin.EditorGroup();
+        }
+        this.item.setValue("editorGroup", editorGroup);
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children");
+
+        return React.createElement(Dbm.react.context.AddContextVariables, {values: {"editorGroup": this.item.editorGroup}},
+            children
+        );
+    }
+}

package/react/admin/SaveAllButton.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class SaveAllButton extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _save() {
+        console.log("_save");
+
+        let editorGroup = this.context.editorGroup;
+
+        let saveData = editorGroup.getSaveData();
+
+        saveData.save();
+    }
+
+    _renderMainElement() {
+        
+        let editorGroup = this.context.editorGroup;
+        
+        return React.createElement("div", {},   
+            React.createElement("div", {className: "save-all-position"},
+                React.createElement(Dbm.react.area.OpenCloseExpandableArea, {open: editorGroup.item.properties.changed},
+                    React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._save()}},
+                        "Save all changes"
+                    )
+                )
+            )
+        );
+    }
+}
+

package/react/admin/editorsgroup/EditField.js

@@ -2,8 +2,8 @@ import React from "react";
 import Dbm from "../../../index.js";
 
 export default class EditField extends Dbm.react.BaseObject {
-    _construct() {
-        super._construct();
+    _constructAfterProps() {
+        super._constructAfterProps();
 
         let item = this.context.item;
         let itemEditor = this.context.itemEditor;