dbm 1.2.7 → 1.2.9

package/commands/index.js

@@ -52,6 +52,11 @@ export const performCommands = function(aCommands, aFromObject = null, aEventDat
     let currentArrayLength = currentArray.length;
     for(let i = 0; i < currentArrayLength; i++) {
         let currentCommand = currentArray[i];
-        currentCommand.perform(aFromObject, aEventData);
+        try {
+            currentCommand.perform(aFromObject, aEventData);
+        }
+        catch(theError) {
+            console.error("Error while running command", theError, currentCommand);
+        }
     }
 }

package/ecommerce/CartLineItem.js

@@ -22,8 +22,8 @@ export default class CartLineItem extends Dbm.core.BaseObject {
     }
 
     setQuantity(aQuantity) {
-        console.log("setQuantity");
-        console.log(aQuantity);
+        //console.log("setQuantity");
+        //console.log(aQuantity);
 
         this.item.quantity = aQuantity;
 

package/ecommerce/LocalStorageCartLoader.js

@@ -28,13 +28,11 @@ export default class LocalStorageCartLoader extends Dbm.core.BaseObject {
             let cartDataString = localStorage.getItem(this.item.storageKey);
             if(cartDataString) {
                 let cartData = JSON.parse(cartDataString);
-                console.log(cartData);
                 let currentArray = cartData.lineItems;
                 let currentArrayLength = currentArray.length;
                 for(let i = 0; i < currentArrayLength; i++) {
                     let currentData = currentArray[i];
 
-                    console.log(">>>>>>>>", currentData["quantity"]);
                     this.item.cart.controller.addProduct(repository.getItem(currentData["product"]), currentData["quantity"]);
                 }
             }

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

@@ -26,7 +26,7 @@ export default class AutoComplete extends Dbm.flow.FlowUpdateFunction {
     }
 
     _scriptLoaded() {
-        console.log("_scriptLoaded");
+        //console.log("_scriptLoaded");
         if(!this._loadedScript) {
             this._loadedScript = true;
             this._update();
@@ -46,7 +46,7 @@ export default class AutoComplete extends Dbm.flow.FlowUpdateFunction {
     }
 
     _update() {
-        console.log("_update");
+        //console.log("_update");
 
         let text = this.input.text;
         this._currentText = text;

package/graphapi/index.js

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

package/graphapi/webclient/admin/ItemEditor.js

@@ -42,6 +42,15 @@ export default class ItemEditor extends Dbm.core.BaseObject {
         return this.addEditor(aField, aInitialValue, Dbm.graphapi.webclient.admin.SaveFunctions.setField, aUpdateEncoding);
     }
 
+    getAdminFieldEditor(aField) {
+        let item = this.item.editedItem;
+        
+        let initialDataPath = "fields." + aField;
+        let initialData = Dbm.objectPath(item, initialDataPath);
+
+        return this.addFieldEditor(aField, initialData);
+    }
+
     addFieldTranslationEditor(aField, aLanguage, aInitialValue, aUpdateEncoding = null) {
         let name = "translation_" + aField + "_" + aLanguage;
         let valueEditor = this.item["editor_" + name];
@@ -224,8 +233,6 @@ export default class ItemEditor extends Dbm.core.BaseObject {
     getAdminUrlEditor() {
         let item = this.item.editedItem;
         let value = Dbm.objectPath(item, "url");
-
-        debugger;
         
         return this.getUrlEditor(value);     
     }

package/graphapi/webclient/decode/index.js

@@ -216,4 +216,13 @@ export const fullSetup = function() {
 
     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"])]);
+
+    let linkUpMenu = function(aItem) {
+        console.log("linkUpMenu");
+        console.log(aItem);
+    }
+
+    setupDefaultDecoder("menuLocation", ["identifier"], ["menu"], []);
+    setupDefaultDecoder("menu", ["order"], [], ["menuItems"], [Dbm.commands.callFunction(linkUpMenu, [Dbm.core.source.event("item")])]);
+    setupDefaultDecoder("menuItem", ["label", "link"], [], []);
 }

package/package.json

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

package/react/ChildFunctions.js

@@ -1,4 +1,5 @@
 import Dbm from "../index.js";
+import React from "react";
 
 export const splitIntoSlots = function(aChildren) {
     let returnObject = {};
@@ -24,4 +25,57 @@ export const splitIntoSlots = function(aChildren) {
     
 
     return returnObject;
-}
+}
+
+export const clone = function(aChild, aProps) {
+        
+        if(aChild instanceof Array) {
+            let returnArray = [];
+            
+            let currentArray = aChild;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentChild = currentArray[i];
+                returnArray.push(clone(currentChild, aProps));
+            }
+
+            if(currentArrayLength === 1) {
+                return returnArray[0];
+            }
+            
+            return returnArray;
+        }
+        
+        let newProps = aProps;
+
+        if(aChild && aChild.props && aChild.props.className) {
+            newProps = {...aProps};
+            
+            if(aProps.className) {
+                newProps.className = aProps.className + " " + aChild.props.className;
+            } 
+            else {
+                newProps.className = aChild.props.className;
+            }
+        }
+
+        //METODO: combine styles
+        //METODO: combine listeners
+        
+        let callArray = [aChild, newProps];
+        
+        if(aChild && aChild.props) {
+            let firstChildChildren = aChild.props.children;
+            if(!firstChildChildren) {
+                //MENOTE: do nothing
+            }
+            else if(firstChildChildren instanceof Array) {
+                callArray = callArray.concat(firstChildChildren);
+            }
+            else {
+                callArray.push(firstChildChildren);
+            }
+        }
+        
+        return React.cloneElement.apply(React, callArray);
+    }

package/react/admin/editorsgroup/EditPartOfObject.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditPartOfObject extends Dbm.react.BaseObject {
+    _constructAfterProps() {
+        super._constructAfterProps();
+
+        let valueProperty = this.getDynamicPropWithoutState("value", {});
+        
+        let partObject = new Dbm.flow.controllers.transform.PartOfObject();
+        this.item.setValue("partOfObject", partObject);
+        let path = this.getPropValue("path");
+
+        if(!valueProperty.value) {
+            valueProperty.getMostUpstreamProperty().value = {};
+        }
+
+        partObject.item.properties.object.connectInput(valueProperty);
+        partObject.item.path = path;
+
+        this.item.requireProperty("valuePart", null).connectInput(partObject.item.properties.value);
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children")
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"value": this.item.properties.valuePart}}, children)
+        );
+    }
+}

package/react/admin/editorsgroup/index.js

@@ -5,4 +5,5 @@ export {default as EditVisibility} from "./EditVisibility.js";
 export {default as EditIdentifer} from "./EditIdentifer.js";
 export {default as EditFieldTranslation} from "./EditFieldTranslation.js";
 export {default as EditMultipleRelations} from "./EditMultipleRelations.js";
-export {default as EditUrl} from "./EditUrl.js";
+export {default as EditUrl} from "./EditUrl.js";
+export {default as EditPartOfObject} from "./EditPartOfObject.js";

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

@@ -0,0 +1,45 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddItemToContext, {"item": Dbm.react.source.contextVariable("hierarchyItem.linkedItem")},
+                React.createElement(Dbm.react.interaction.drag.DraggableItem, {skipDraggable: true, moveMode: "insertBefore"},
+                    React.createElement("div", {className: "flex-row micro-item-spacing"},
+                        React.createElement("div", {className: "flex-row-item flex-no-resize cursor-grab", draggable: true},
+                            React.createElement("div", {className: "spacing small"}),
+                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/drag-handle.svg", "className": "background-contain drag-handle-icon action-icon-color"})
+                        ),
+                        React.createElement("div", {className: "flex-row-item flex-resize"},
+                            children
+                        )
+                    )
+                    
+                )      
+            ),
+            React.createElement("div", {className: "hierarchy-indent"},
+                React.createElement("div", {className: "spacing small"}),
+                React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("hierarchyItem.properties.children"), checkType: "notEmpty"},
+                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("hierarchyItem.properties.children"), as: "hierarchyItem"},
+                        React.createElement(Dbm.react.admin.objects.itemeditors.DraggableHierarchyDisplay, {}, children),
+                        React.createElement("div", {"data-slot": "spacing", className: "spacing small"}),
+                    ),
+                    React.createElement("div", {className: "spacing small"})
+                ),
+                React.createElement(Dbm.react.interaction.drag.DraggableItem, {skipDraggable: true, moveMode: "appendChild"},
+                    React.createElement("div", {className: "append-drop-position centered-cell-holder"},
+                        React.createElement("div", {})
+                    )
+                )
+            )
+        )
+    }
+}

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

@@ -0,0 +1,335 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._internalId = Dbm.getInstance().getNextId();
+        let itemEditor = this.context.itemEditor;
+
+        this._draggedElement = null;
+        this._hierachyMap = {};
+
+        let hierarchyHolder = new Dbm.repository.Item();
+        hierarchyHolder.setValue("children", []);
+
+        this.item.requireProperty("hierarchy", hierarchyHolder);
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        let orderFieldName = this.getPropValue("orderFieldName");
+
+        this._relationsEditor;
+        if(direction === "in") {
+            this._relationsEditor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction === "out") {
+            this._relationsEditor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else {
+            console.error("Unknown direction", direction, this);
+        }
+
+        this._orderEditor = itemEditor.getAdminFieldEditor(orderFieldName);
+
+        let updateCommand = Dbm.commands.callFunction(this._updateHierarchy.bind(this));
+
+        Dbm.flow.addUpdateCommand(this._relationsEditor.valueProperty, updateCommand);
+        Dbm.flow.addUpdateCommand(this._orderEditor.valueProperty, updateCommand);
+        this._updateHierarchy();
+        
+    }
+
+    _removeMissingPartsOfHierarchy(aHierarchy, aMustBeInArray) {
+        //console.log("_removeMissingPartsOfHierarchy");
+        //console.log(aHierarchy, aMustBeInArray);
+        let currentArray = aHierarchy;
+        let currentArrayLength = currentArray.length;
+
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+            if(aMustBeInArray.indexOf(currentItem.id) !== -1) {
+                this._removeMissingPartsOfHierarchy(currentItem.children, aMustBeInArray);
+            }
+        }
+    }
+
+    _getAllIdsFromHierarchy(aItems, aReturnArray) {
+        let currentArray = aItems;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+
+            aReturnArray.push(currentItem.id);
+            this._getAllIdsFromHierarchy(currentItem.children, aReturnArray);
+        }
+    }
+
+    _getFullHierarchy() {
+        let relations = this._relationsEditor.value;
+        let hierarchyValue = this._orderEditor.value;
+        if(hierarchyValue) {
+            hierarchyValue = JSON.parse(JSON.stringify(hierarchyValue));
+        }
+        else {
+            hierarchyValue = [];
+        }
+
+        this._removeMissingPartsOfHierarchy(hierarchyValue, relations);
+
+        let usedIds = [];
+
+        this._getAllIdsFromHierarchy(hierarchyValue, usedIds);
+        let missingIds = Dbm.utils.ArrayFunctions.getUnselectedItems(usedIds, relations);
+
+        {
+
+            let currentArray = missingIds;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentId = currentArray[i];
+                hierarchyValue.push({id: currentId, children: []});
+            }
+        }
+
+        return hierarchyValue;
+    }
+
+    _updateHierarchy() {
+        this._updateHierarchyItems(this.item.hierarchy, this._getFullHierarchy());
+    }
+
+    _getHierarchyItem(aId) {
+        let returnItem = this._hierachyMap["item" + aId];
+        if(!returnItem) {
+            returnItem = new Dbm.repository.Item();
+            returnItem.setId("_internalHierarchy/" + this._internalId + "/" + aId);
+            returnItem.setValue("linkedItem", Dbm.getRepositoryItem(aId));
+            returnItem.setValue("children", []);
+            this._hierachyMap["item" + aId] = returnItem;
+        }
+
+        return returnItem;
+    }
+
+    _updateHierarchyItems(aHierarchyItem, aItems) {
+        //console.log("_updateHierarchyItems");
+        let newItems = [];
+        let hierarchyChildren = aHierarchyItem.children;
+        let hasChange = (hierarchyChildren.length !== aItems.length);
+
+        let currentArray = aItems;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+            let hierarchyItem = this._getHierarchyItem(currentItem.id);
+            newItems.push(hierarchyItem);
+            this._updateHierarchyItems(hierarchyItem, currentItem.children);
+            if(!hasChange && hierarchyChildren[i] !== hierarchyItem) {
+                hasChange = true;
+            }
+        }
+
+        if(hasChange) {
+            aHierarchyItem.children = newItems;
+        }
+    }
+
+    startDrag(aComponent) {
+        console.log("startDrag");
+        console.log(aComponent);
+
+        this._draggedElement = aComponent;
+    }
+
+    _findPosition(aItem, aChildren) {
+        let index = aChildren.indexOf(aItem);
+        if(index !== -1) {
+            return [index];
+        }
+
+        let currentArray = aChildren;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentChild = currentArray[i];
+            let childIndex = this._findPosition(aItem, currentChild.children);
+            if(childIndex) {
+                childIndex.unshift(i)
+                return childIndex;
+            }
+        }
+
+        return null;
+    }
+
+    _isInside(aLastPosition, aNewPosition) {
+        return aNewPosition.join(".").indexOf(aLastPosition.join(".")) === 0;
+    }
+
+    itemDroppedOn(aComponent, aData) {
+        //console.log("itemDroppedOn");
+        //console.log(aComponent, aData);
+
+        let mode = aComponent.getPropValue("moveMode");
+
+        console.log(mode);
+
+        let hierarchyValue = this._getFullHierarchy();
+
+        if(mode === "insertBefore") {
+            
+            let lastDeepIndex = this._findPosition(this._draggedElement.context.hierarchyItem, this.item.hierarchy.children);
+            let newDeepIndex = this._findPosition(aComponent.context.hierarchyItem, this.item.hierarchy.children);
+
+            if(this._isInside(lastDeepIndex, newDeepIndex)) {
+                return;
+            }
+
+            let removeIndex = lastDeepIndex.pop();
+            let removeArray;
+            if(lastDeepIndex.length === 0) {
+                removeArray = hierarchyValue;
+            }
+            else {
+                removeArray = Dbm.objectPath(hierarchyValue, lastDeepIndex.join(".children.") + ".children");
+            }
+            
+            let addIndex = newDeepIndex.pop();
+            let addArray;
+            if(newDeepIndex.length === 0) {
+                addArray = hierarchyValue;
+            }
+            else {
+                addArray = Dbm.objectPath(hierarchyValue, newDeepIndex.join(".children.") + ".children");
+            }
+
+            let movedItem = removeArray.splice(removeIndex, 1)[0];
+
+            if(addIndex > removeIndex && removeArray === addArray) {
+                addIndex--;
+            }
+
+            addArray.splice(addIndex, 0, movedItem);
+        }
+        else if(mode === "appendChild") {
+            let lastDeepIndex = this._findPosition(this._draggedElement.context.hierarchyItem, this.item.hierarchy.children);
+            let newDeepIndex = this._findPosition(aComponent.context.hierarchyItem, this.item.hierarchy.children);
+
+            if(this._isInside(lastDeepIndex, newDeepIndex)) {
+                return;
+            }
+
+            let removeIndex = lastDeepIndex.pop();
+            let removeArray;
+            if(lastDeepIndex.length === 0) {
+                removeArray = hierarchyValue;
+            }
+            else {
+                removeArray = Dbm.objectPath(hierarchyValue, lastDeepIndex.join(".children.") + ".children");
+            }
+            
+            let addArray = Dbm.objectPath(hierarchyValue, newDeepIndex.join(".children.") + ".children");
+
+            let movedItem = removeArray.splice(removeIndex, 1)[0];
+            addArray.push(movedItem);
+        }
+        else if(mode === "last") {
+            let lastDeepIndex = this._findPosition(this._draggedElement.context.hierarchyItem, this.item.hierarchy.children);
+            
+            let removeIndex = lastDeepIndex.pop();
+            let removeArray;
+            if(lastDeepIndex.length === 0) {
+                removeArray = hierarchyValue;
+            }
+            else {
+                removeArray = Dbm.objectPath(hierarchyValue, lastDeepIndex.join(".children.") + ".children");
+            }
+            
+            let addArray = hierarchyValue;
+
+            let movedItem = removeArray.splice(removeIndex, 1)[0];
+            addArray.push(movedItem);
+        }
+
+        this._orderEditor.value = hierarchyValue;
+    }
+
+    _create() {
+        console.log("_create");
+        let objectType = this.getPropValue("objectType");
+        let encodings = this.getPropValueWithDefault("encodings", ["id"]);
+        let visibility = this.getPropValueWithDefault("visibility", "private");
+
+        let changes = [];
+
+        let request = Dbm.getGraphApi().createItem([objectType], visibility, changes, encodings);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._created.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+    }
+
+    _created(aItem) {
+        console.log("_created");
+        console.log(aItem);
+
+        let itemEditor = this.context.itemEditor;
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        let editor;
+        if(direction === "in") {
+            editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction === "out") {
+            editor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else {
+            console.error("Unknown direction", direction, this);
+        }
+
+        let newValues = [].concat(editor.value);
+        newValues.push(aItem.id);
+        editor.value = newValues;
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let children = this.getPropValue("children");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"dragController": this}},
+                React.createElement(Dbm.react.form.LabelledArea, {label: label}), 
+                React.createElement("div", {"className": ""},
+                    React.createElement(Dbm.react.area.List, {items: this.item.hierarchy.properties.children, as: "hierarchyItem"},
+                        React.createElement(Dbm.react.context.AddItemToContext, {"item": Dbm.react.source.contextVariable("hierarchyItem.linkedItem")},
+                            React.createElement(Dbm.react.admin.objects.itemeditors.DraggableHierarchyDisplay, {},
+                                children
+                            )
+                        ),
+                        React.createElement("div", {"data-slot": "spacing", className: "spacing small"})
+                    )
+                ),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement(Dbm.react.interaction.drag.DraggableItem, {skipDraggable: true, moveMode: "last"},
+                    React.createElement("div", {className: "append-drop-position centered-cell-holder"},
+                        React.createElement("div", {})
+                    )
+                ),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("div", {"className": "flex-row"},
+                    React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._create.bind(this))},
+                        React.createElement("div", {"className": "action-button action-button-padding"},
+                            "Add"
+                        )
+                    )
+                )
+            )
+            
+        )
+    }
+}

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

@@ -0,0 +1,77 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RelationsList extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _create() {
+        console.log("_create");
+        let objectType = this.getPropValue("objectType");
+        let encodings = this.getPropValueWithDefault("encodings", ["id"]);
+        let visibility = this.getPropValueWithDefault("visibility", "private");
+
+        let changes = [];
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem([objectType], visibility, changes, encodings);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._created.bind(this), [Dbm.core.source.staticObject(request, "item")]));
+    }
+
+    _created(aItem) {
+        console.log("_created");
+        console.log(aItem);
+
+        let itemEditor = this.context.itemEditor;
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        let editor;
+        if(direction === "in") {
+            editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction === "out") {
+            editor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else {
+            console.error("Unknown direction", direction, this);
+        }
+
+        let newValues = [].concat(editor.value);
+        newValues.push(aItem.id);
+        editor.value = newValues;
+    }
+
+    _renderMainElement() {
+
+        let id = this.context.item.id;
+
+        let label = this.getPropValue("label");
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+        let children = this.getPropValue("children");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: label}), 
+            React.createElement("div", {"className": "standard-alternating-rows"},
+                React.createElement(Dbm.react.admin.editorsgroup.EditMultipleRelations, {"direction": direction, "relationType": relationType, "objectType": objectType},
+                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("valueEditor.editValue.value")},
+                        children
+                    )
+                )
+            ),
+            React.createElement("div", {"className": "spacing small"}),
+            React.createElement("div", {"className": "flex-row"},
+                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._create.bind(this))},
+                    React.createElement("div", {"className": "action-button action-button-padding"},
+                        "Add"
+                    )
+                )
+            )
+        )
+    }
+}