dbm 1.2.2 → 1.2.4

package/commands/CommandBaseObject.js

@@ -9,7 +9,7 @@ export default class CommandBaseObject extends Dbm.core.BaseObject {
         //MENOTE: should be overridden
     }
 
-    _resolveSource(aValueOrSource) {
+    _resolveSource(aValueOrSource, aFromObject = null, aData = null) {
         if(aValueOrSource) {
             if(aValueOrSource.isFlowProperty) {
                 return aValueOrSource.value;
@@ -22,7 +22,7 @@ export default class CommandBaseObject extends Dbm.core.BaseObject {
         return aValueOrSource;
     }
 
-    _resolveSourceWithoutFlow(aValueOrSource) {
+    _resolveSourceWithoutFlow(aValueOrSource, aFromObject = null, aData = null) {
         if(aValueOrSource && aValueOrSource.isSource) {
             return aValueOrSource.getSource(aFromObject, aData);
         }

package/commands/SetProperty.js

@@ -13,6 +13,6 @@ export default class SetProperty extends CommandBaseObject {
 		
         let value = this.getInput("value");
         
-        this._resolveSourceWithoutFlow(this.item.property).value = value;
+        this._resolveSourceWithoutFlow(this.item.property, aFromObject, aData).value = value;
     }
 }

package/core/source/SourceCommand.js

@@ -0,0 +1,17 @@
+import Dbm from "../../index.js";
+
+export default class SourceCommand extends Dbm.core.source.SourceBaseObject {
+	
+    _construct() {
+        super._construct();
+
+        this.item.setValue("object", null);
+    }
+	
+	getBaseObject(aFromObject, aEventData) {
+
+        let command = this.item.object;
+
+		return command.perform(aFromObject, aEventData);
+	}
+}

package/core/source/index.js

@@ -5,6 +5,7 @@ export {default as EventSource} from "./EventSource.js";
 export {default as FromObject} from "./FromObject.js";
 export {default as StaticSource} from "./StaticSource.js";
 export {default as FirstSource} from "./FirstSource.js";
+export {default as SourceCommand} from "./SourceCommand.js";
 
 export const event = function(aPath = null) {
 	let newSource = new Dbm.core.source.EventSource();
@@ -50,3 +51,17 @@ export const firstWithDefault = function(...aSourcesAndDefault) {
 	
 	return newSource;
 }
+
+export const command = function(aCommand) {
+	let newSource = new Dbm.core.source.SourceCommand();
+
+	newSource.item.object = aCommand;
+	
+	return newSource;
+}
+
+export const callFunction = function(aFunction, aArguments = []) {
+	let functionCommand = Dbm.commands.callFunction(aFunction, aArguments);
+
+	return command(functionCommand);
+}

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

@@ -20,13 +20,7 @@ export default class AutoComplete extends Dbm.flow.FlowUpdateFunction {
     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)));
-        }
+        Dbm.flow.runWhenMatched(scriptLoader.item.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._scriptLoaded.bind(this)));
 
         return this;
     }
@@ -54,7 +48,6 @@ export default class AutoComplete extends Dbm.flow.FlowUpdateFunction {
     _update() {
         console.log("_update");
 
-        
         let text = this.input.text;
         this._currentText = text;
         this.output.updated = false;

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

@@ -21,14 +21,7 @@ export default class PlaceDetails extends Dbm.flow.FlowUpdateFunction {
         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)));
-        }
+        Dbm.flow.runWhenMatched(scriptLoader.item.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._scriptLoaded.bind(this)));
 
         return this;
     }

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

@@ -0,0 +1,71 @@
+import Dbm from "../../../../../index.js";
+
+export default class PlaceDetailsDetailsFromQuery extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("query", null);
+        this.input.register("fields", ["addressComponents", "location"]);
+
+        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");
+        Dbm.flow.runWhenMatched(scriptLoader.item.properties.status, Dbm.loading.LoadingStatus.LOADED, 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 query = this.input.query;
+        this._currentQuery = query;
+        this.output.updated = false;
+
+        if(query) {
+            this.output.properties.data.isDirty = false;
+            this.output.properties.updated.isDirty = false;
+
+            if(this._loadedScript) {
+
+                let loadPromise = google.maps.places.Place.searchByText({
+                    textQuery: query,
+                    fields: this.input.fields,
+                });
+
+                loadPromise.then((aResponse) => {
+                    let place = aResponse.places[0];
+                    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

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

package/graphapi/webclient/admin/ItemEditor.js

@@ -118,7 +118,7 @@ export default class ItemEditor extends Dbm.core.BaseObject {
 
     getAdminMultipleIncomingRelationsEditor(aType, aObjectType) {
         let name = "in_" + aType + "_" + aObjectType;
-        let valueEditor = this.item["editor_relation_" + name];
+        let valueEditor = this.item["editor_multipleRelations_" + 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");
@@ -131,7 +131,7 @@ export default class ItemEditor extends Dbm.core.BaseObject {
 
     getAdminMultipleOutgoingRelationsEditor(aType, aObjectType) {
         let name = "out_" + aType + "_" + aObjectType;
-        let valueEditor = this.item["editor_relation_" + name];
+        let valueEditor = this.item["editor_multipleRelations_" + 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");

package/package.json

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

package/react/BaseObject.js

@@ -130,7 +130,18 @@ export default class BaseObject extends Component {
     }
 
     render() {
-        return this._renderMainElement();
+        let returnObject;
+
+        //METODO: add switch for if it should be safe
+        try {
+            returnObject = this._renderMainElement();
+        }
+        catch(theError) {
+            console.error("Error while rendering", theError);
+            returnObject = React.createElement("div", {}, "Error");
+        }
+
+        return returnObject;
     }
 
     _renderMainElement() {

package/react/admin/objects/itemeditors/Field.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class Field extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let fieldName = this.getPropValue("fieldName");
+
+        let fieldNameSource = Dbm.react.source.contextVariable("fieldName");
+        let editorValueSource = Dbm.react.source.contextVariable("valueEditor.editValue.value");
+
+        return React.createElement("div", {},
+            React.createElement("label", {className: "standard-field-label"}, label),
+            React.createElement(Dbm.react.context.AddContextVariables, {values: {"fieldName": fieldName}},
+                React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldNameSource},
+                    React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/FieldWithTranslations.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class FieldWithTranslations extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let fieldName = this.getPropValue("fieldName");
+
+        let fieldNameSource = Dbm.react.source.contextVariable("fieldName");
+        let editorValueSource = Dbm.react.source.contextVariable("valueEditor.editValue.value");
+
+        return React.createElement("div", {},
+            React.createElement("label", {className: "standard-field-label"}, label),
+            React.createElement(Dbm.react.context.AddContextVariables, {values: {"fieldName": fieldName}},
+                React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldNameSource},
+                    React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                ),
+                React.createElement(Dbm.react.area.List, {items: Dbm.getRepositoryItem("site").properties.availableLanguages, as: "language"},
+                    React.createElement("div", {className: "flex-row small-item-spacing vertically-center-items"},
+                        React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                            Dbm.react.text.text(Dbm.react.source.contextVariable("language.code"))
+                        ),
+                        React.createElement("div", {className: "flex-row-item flex-resize"},
+                            React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": Dbm.react.source.contextVariable("language.code")},
+                                React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                            ),
+                        )
+                    )
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/Name.js

@@ -8,19 +8,6 @@ export default class Name extends Dbm.react.BaseObject {
 
     _renderMainElement() {
 
-        /*
-                    React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": "sv"},
-                        React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
-                    ),
-                    React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": "en"},
-                        React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
-                    ),
-                    React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": "fi"},
-                        React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
-                    )
-                    
-        */
-
         let label = "Name";
         let fieldName = "name";
 
@@ -33,15 +20,18 @@ export default class Name extends Dbm.react.BaseObject {
                 React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldNameSource},
                     React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
                 ),
-                React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": "sv"},
-                        React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
-                    ),
-                    React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": "en"},
-                        React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
-                    ),
-                    React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": "fi"},
-                        React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                React.createElement(Dbm.react.area.List, {items: Dbm.getRepositoryItem("site").properties.availableLanguages, as: "language"},
+                    React.createElement("div", {className: "flex-row small-item-spacing vertically-center-items"},
+                        React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                            Dbm.react.text.text(Dbm.react.source.contextVariable("language.code"))
+                        ),
+                        React.createElement("div", {className: "flex-row-item flex-resize"},
+                            React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": Dbm.react.source.contextVariable("language.code")},
+                                React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                            ),
+                        )
                     )
+                )
             )
         )
     }

package/react/admin/objects/itemeditors/PageRepresentation.js

@@ -34,7 +34,7 @@ export default class PageRepresentation extends Dbm.react.BaseObject {
         return React.createElement("div", {},
             
             React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
-                React.createElement(Dbm.react.form.LabelledArea, {label: "Represening page"}, 
+                React.createElement(Dbm.react.form.LabelledArea, {label: "Representing page"}, 
                     React.createElement(Dbm.react.admin.editorsgroup.EditRelation, {"direction": "in", "relationType": "pageRepresentationFor", "objectType": "page"},
                         React.createElement(Dbm.react.form.GraphApiObjectSelection, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), "objectType": "page", "encoding": "title", nameField: "title", className: "standard-field standard-field-padding full-width"})
                     )

package/react/admin/objects/itemeditors/Title.js

@@ -4,43 +4,35 @@ import Dbm from "../../../../index.js";
 export default class Title extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
-
-        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
-
-        let id = this.context.item.id;
-
-        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": [id]},
-                ],
-                ["title"]
-            );
-            allLoaded.addCheck(request.properties.status);
-        }
-
-        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
     }
 
     _renderMainElement() {
 
-        let id = this.context.item.id;
+        let label = "Title";
+        let fieldName = "title";
+
+        let fieldNameSource = Dbm.react.source.contextVariable("fieldName");
+        let editorValueSource = Dbm.react.source.contextVariable("valueEditor.editValue.value");
 
         return React.createElement("div", {},
-            
-            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
-                React.createElement(Dbm.react.form.LabelledArea, {label: "Title"}, 
-                    React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": "title", "initialDataPath": "title"},
-                        React.createElement(Dbm.react.form.FormField, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width"})
+            React.createElement("label", {className: "standard-field-label"}, label),
+            React.createElement(Dbm.react.context.AddContextVariables, {values: {"fieldName": fieldName}},
+                React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldNameSource},
+                    React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                ),
+                React.createElement(Dbm.react.area.List, {items: Dbm.getRepositoryItem("site").properties.availableLanguages, as: "language"},
+                    React.createElement("div", {className: "flex-row small-item-spacing vertically-center-items"},
+                        React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                            Dbm.react.text.text(Dbm.react.source.contextVariable("language.code"))
+                        ),
+                        React.createElement("div", {className: "flex-row-item flex-resize"},
+                            React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": Dbm.react.source.contextVariable("language.code")},
+                                React.createElement(Dbm.react.form.FormField, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                            ),
+                        )
                     )
                 )
             )
-            
         )
     }
 }

package/react/admin/objects/itemeditors/index.js

@@ -9,4 +9,5 @@ export {default as RichDescription} from "./RichDescription.js";
 export {default as PageRepresentation} from "./PageRepresentation.js";
 export {default as MainImage} from "./MainImage.js";
 export {default as Identifier} from "./Identifier.js";
-export {default as SingleRelation} from "./SingleRelation.js";
+export {default as SingleRelation} from "./SingleRelation.js";
+export {default as Field} from "./Field.js";

package/react/area/SwitchableArea.js

@@ -0,0 +1,39 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class SwitchableArea extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let childrenProperty = this.getDynamicPropWithoutState("children", []);
+        let areaProperty = this.getDynamicPropWithoutState("area", null);
+
+        this.item.requireProperty("element", null);
+
+        Dbm.flow.addUpdateCommand(childrenProperty, Dbm.commands.callFunction(this._updateSlots.bind(this)));
+        Dbm.flow.addUpdateCommand(areaProperty, Dbm.commands.callFunction(this._updateSlots.bind(this)));
+    }
+
+    _updateSlots() {
+        let area = this.getPropValue("area");
+        let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+
+        let slots = Dbm.react.ChildFunctions.splitIntoSlots(children);
+        
+        let slotElement = slots[area];
+        let mainChildren = slots.main;
+
+        if(!slotElement) {
+            slotElement = mainChildren;
+        }
+
+        this.item.element = React.createElement(React.Fragment, {key: slotElement}, slotElement);
+    }
+
+    _renderMainElement() {
+        let areaProperty = this.getDynamicPropWithoutState("area", null);
+        
+        return React.createElement(Dbm.react.context.AddContextVariables, {values: {area: areaProperty}}, React.createElement(Dbm.react.area.InsertElement, {"element": this.item.properties.element}));
+    }
+}
+

package/react/area/index.js

@@ -8,6 +8,7 @@ export {default as OpenCloseExpandableArea} from "./OpenCloseExpandableArea.js";
 export {default as ResponsiveLayout} from "./ResponsiveLayout.js";
 export {default as List} from "./List.js";
 export {default as FixedWidthInfiniteSlideshow} from "./FixedWidthInfiniteSlideshow.js";
+export {default as SwitchableArea} from "./SwitchableArea.js";
 
 export const responsiveLayout = function(aDefaultLayout) {
     let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();

package/react/blocks/index.js

@@ -395,6 +395,18 @@ export let registerAllBlocks = function() {
         objectTypeEditor.editors = newArray;
     }
 
+    {
+        let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/group");
+        if(!objectTypeEditor.editors) {
+            objectTypeEditor.setValue("editors", []);
+        }
+
+        let newArray = [].concat(objectTypeEditor.editors);
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/name"));
+        
+        objectTypeEditor.editors = newArray;
+    }
+
 
     let admin = Dbm.getInstance().repository.getItem("admin");
     admin.requireProperty("pageEditors", []);

package/react/cookies/CookieBar.js

@@ -184,7 +184,7 @@ export default class CookieBar extends Dbm.react.BaseObject {
 
     _renderMainElement() {
 
-        return this._createMainElement("div", {className: "cookie-bar-position no-pointer-events", ref: this.createRef("widthElement")},
+        return this._createMainElement("div", {className: "cookie-bar-position no-pointer-events", "data-non-static": 1, ref: this.createRef("widthElement")},
             React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.inDom},
                 React.createElement("div", {className: "overflow-hidden"},	
                     React.createElement(Dbm.react.BaseObject, {style: this.item.properties.style},

package/react/interaction/ClickOutsideTrigger.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class ClickOutsideTrigger extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._callback_clickBound = this._callback_click.bind(this);
+        document.body.addEventListener("click", this._callback_clickBound, true);
+	}
+	
+	_callback_click(aEvent) {
+		
+		let commands = this.getPropValue("commands");
+        if(!commands) {
+            commands = this.getPropValue("command");
+        }
+        if(commands) {
+            let currentElement = this.item["mainElement"];
+            if(!currentElement.contains(aEvent.srcElement)) {
+                commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
+                let currentArray = commands;
+                let currentArrayLength = currentArray.length;
+                for(let i = 0; i < currentArrayLength; i++) {
+                    let command = currentArray[i];
+                    try {
+                        command.perform(this, aEvent);
+                    }
+                    catch(theError) {
+                        console.error("Error while running command", theError, command);
+                    }
+                    
+                }
+            }
+            
+        }
+        else{
+            console.warn("Click outside doesn't have any commands", this);
+        }
+	}
+	
+	componentWillUnmount() {
+		super.componentWillUnmount();
+		
+		document.body.removeEventListener("click", this._callback_clickBound, true);
+	}
+
+    _renderMainElement() {
+
+        return React.createElement("div", {"ref": this.createRef("mainElement")}, this.props.children);
+    }
+}
+

package/react/interaction/CommandButton.js

@@ -23,7 +23,13 @@ export default class CommandButton extends Dbm.react.BaseObject {
             let currentArrayLength = currentArray.length;
             for(let i = 0; i < currentArrayLength; i++) {
                 let command = currentArray[i];
-                command.perform(this, aEvent);
+                try {
+                    command.perform(this, aEvent);
+                }
+                catch(theError) {
+                    console.error("Error while running command", theError, command);
+                }
+                
             }
         }
         else{

package/react/interaction/ConfirmButton.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class ConfirmButton extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let childrenProperty = this.getDynamicPropWithoutState("children", []);
+        let confirmProperty = this.getDynamicPropWithoutState("confirm", false);
+        let command = this.getDynamicPropWithoutState("command", null);
+
+        this.item.requireProperty("idleElement", null);
+        this.item.requireProperty("confirmElement", null);
+
+        Dbm.flow.addUpdateCommand(childrenProperty, Dbm.commands.callFunction(this._updateSlots.bind(this)));
+
+        //METODO: change this to highest property
+
+        let switchValue = Dbm.flow.updatefunctions.logic.switchValue(confirmProperty);
+        switchValue.setDefaultValue(React.createElement(Dbm.react.interaction.CommandButton, {"key": "idle", "command": Dbm.commands.setProperty(confirmProperty, true)},
+            React.createElement("div", {}, React.createElement(Dbm.react.area.InsertElement, {"element": this.item.properties.idleElement}))
+            
+        ));
+        
+        switchValue.addCase(true, React.createElement(Dbm.react.interaction.ClickOutsideTrigger, {command: Dbm.commands.setProperty(confirmProperty, false)},
+            React.createElement(Dbm.react.interaction.CommandButton, {"key": "confirm", "command": command}, 
+                React.createElement("div", {}, React.createElement(Dbm.react.area.InsertElement, {"element": this.item.properties.confirmElement}))
+            )
+        ));
+
+        this.item.setValue("switchValue", switchValue);
+    }
+
+    _updateSlots() {
+        let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+
+        let slots = Dbm.react.ChildFunctions.splitIntoSlots(children);
+        
+        let confirmElement = slots.confirm;
+        let mainChildren = slots.main;
+
+        if(!confirmElement) {
+            confirmElement = mainChildren;
+        }
+
+        this.item.idleElement = mainChildren;
+        this.item.confirmElement = confirmElement;
+    }
+
+    _renderMainElement() {
+        let confirmProperty = this.getDynamicPropWithoutState("confirm", false);
+        
+        return React.createElement(Dbm.react.context.AddContextVariables, {values: {confirm: confirmProperty}}, React.createElement(Dbm.react.area.InsertElement, {"element": this.item.switchValue.output.properties.value}));
+    }
+}
+

package/react/interaction/index.js

@@ -1,3 +1,5 @@
 import Dbm from "../../index.js";
 
-export {default as CommandButton} from "./CommandButton.js";
+export {default as CommandButton} from "./CommandButton.js";
+export {default as ConfirmButton} from "./ConfirmButton.js";
+export {default as ClickOutsideTrigger} from "./ClickOutsideTrigger.js";

package/startup/Runner.js

@@ -24,6 +24,13 @@ export default class Runner extends Dbm.core.BaseObject {
         //console.log("Runner::start");
         //console.log(this);
 
+        let preRenderContent = this._element.querySelector("#preRenderContent");
+
+        if(preRenderContent) {
+            preRenderContent.style["display"] = "none";
+            preRenderContent.parentElement.removeChild(preRenderContent);
+        }
+
         let root = document.createElement("div");
         this._element.appendChild(root);
 

package/utils/ArrayFunctions.js

@@ -187,7 +187,41 @@ export const group = function(aArray, aField) {
     let currentArrayLength = currentArray.length;
     for(let i = 0; i < currentArrayLength; i++) {
         let currentObject = aArray[i];
-        let groupValue = Dbm.objectPath(aArray[i], aField);
+        let groupValue = Dbm.objectPath(currentObject, aField);
+
+        if(!groups.has(groupValue)) {
+            groups.set(groupValue, []);
+        }
+
+        groups.get(groupValue).push(currentObject);
+    }
+
+    let returnArray = [];
+
+    for (const value of groups.entries()) {
+        returnArray.push({"key": value[0], "value": value[1]});
+    }
+
+    return returnArray;
+}
+
+export const groupOnMultipleFields = function(aArray, aFields, aSeparator = "-") {
+   
+    let groups = new Map();
+
+    let currentArray2 = aFields;
+    let currentArray2Length = currentArray2.length;
+
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentObject = aArray[i];
+        let groupValues = [];
+        
+        for(let j = 0; j < currentArray2Length; j++) {
+            groupValues.push(Dbm.objectPath(currentObject, currentArray2[j]));
+        }
+        let groupValue = groupValues.join(aSeparator);
 
         if(!groups.has(groupValue)) {
             groups.set(groupValue, []);
@@ -326,4 +360,16 @@ export const sum = function(aArray) {
     }
     
     return sum;
+}
+
+export const stepFromCenter = function(aStep, aLength) {
+    let halfPoint = (aLength-1)/2;
+    let startIndex = Math.ceil(halfPoint);
+    let direction = (startIndex > halfPoint) ? -1 : 1;
+
+    let step = Math.ceil(aStep/2);
+    let swing = (aStep%2)*2-1;
+    let index = startIndex + step * (swing * direction);
+
+    return index;
 }

package/utils/CompareFunctions.js

@@ -47,6 +47,22 @@ export const notEmpty = function(aA, aB) {
 	return false;
 }
 
+export const greaterThan = function(aA, aB) {
+    if(aA > aB) {
+        return true
+    }
+
+	return false;
+}
+
+export const lesserThan = function(aA, aB) {
+    if(aA < aB) {
+        return true
+    }
+
+	return false;
+}
+
 export const fullSetup = function() {
     Dbm.getInstance().repository.getItem("compareFunctions/objectExists").setValue("compare", objectExists);
 
@@ -65,5 +81,11 @@ export const fullSetup = function() {
     Dbm.getInstance().repository.getItem("compareFunctions/arrayContains").setValue("compare", arrayContains);
     Dbm.getInstance().repository.getItem("compareFunctions/inArray").setValue("compare", inArray);
 
-     Dbm.getInstance().repository.getItem("compareFunctions/notEmpty").setValue("compare", notEmpty);
+    Dbm.getInstance().repository.getItem("compareFunctions/notEmpty").setValue("compare", notEmpty);
+
+    Dbm.getInstance().repository.getItem("compareFunctions/>").setValue("compare", greaterThan);
+    Dbm.getInstance().repository.getItem("compareFunctions/greaterThan").setValue("compare", greaterThan);
+
+    Dbm.getInstance().repository.getItem("compareFunctions/<").setValue("compare", lesserThan);
+    Dbm.getInstance().repository.getItem("compareFunctions/lesserThan").setValue("compare", lesserThan);
 }

package/utils/thirdparty/google/index.js

@@ -0,0 +1 @@
+export * as maps from "./maps/index.js";

package/utils/thirdparty/google/maps/PlaceFunctions.js

@@ -0,0 +1,53 @@
+export const getAddressFromComponents = function(aComponents) {
+    const returnObject = {};
+
+    let currentArray = aComponents;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentComponent = currentArray[i];
+        let types = currentComponent.types;
+
+        if(types.includes("street_number")) {
+            returnObject.streetNumber = currentComponent.longText;
+        }
+        else if(types.includes("route")) {
+            returnObject.street = currentComponent.longText;
+        }
+        else if(types.includes("subpremise")) {
+            returnObject.unit = currentComponent.longText;
+        }
+        else if(types.includes("floor")) {
+            returnObject.floor = currentComponent.longText;
+        }
+        else if(types.includes("room")) {
+            returnObject.room = currentComponent.longText;
+        }
+        else if(types.includes("postal_code")) {
+            returnObject.postCode = currentComponent.longText;
+        }
+        else if(types.includes("locality")) {
+            returnObject.city = currentComponent.longText;
+        }
+        else if(types.includes("postal_town")) {
+            if(!returnObject.city) {
+                returnObject.city = currentComponent.longText;
+            }
+        }
+        else if(types.includes("administrative_area_level_2")) {
+            if(!returnObject.city) {
+                returnObject.city = currentComponent.longText;
+            }
+        }
+        else if(types.includes("administrative_area_level_1")) {
+            if(!returnObject.state) {
+                returnObject.state = currentComponent.longText;
+            }
+            
+        }
+        else if(types.includes("country")) {
+            returnObject.country = currentComponent.shortText;
+        }
+    }
+
+    return returnObject;
+}

package/utils/thirdparty/google/maps/index.js

@@ -0,0 +1 @@
+export * as PlaceFunctions from "./PlaceFunctions.js";

package/utils/thirdparty/index.js

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