dbm 1.4.15 → 1.4.16

package/react/admin/objects/ExploreObject.js

@@ -0,0 +1,103 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class ExploreObject extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let id = this.getPropValue("id");
+
+        this.item.requireProperty("fields", []);
+        this.item.requireProperty("incomingRelations", []);
+        this.item.requireProperty("outgoingRelations", []);
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
+        this.item.requireProperty("loaded", false).addUpdate(this._getScopedCallFunctionCommand(this._loaded));
+
+        {
+            let request = Dbm.getGraphApi().requestRange(
+                [
+                    {"type": "includePrivate"},
+                    {"type": "includeDraft"},
+                    {"type": "idSelection", "ids": [id]},
+                ],
+                ["objectTypes", "name", "identifier", "admin_fields", "relations"]
+            );
+            allLoaded.addCheck(request.properties.status);
+        }
+
+        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
+    }
+
+    _loaded() {
+        let id = this.getPropValue("id");
+        let item = Dbm.repository.getItem(id);
+        console.log(">>>>>>>>>>", item);
+
+        let encodedFields = [];
+        let fields = item.fields;
+        for(let fieldName in fields) {
+            encodedFields.push({"name": fieldName, "value": fields[fieldName]});
+        }
+
+        this.item.fields = encodedFields;
+
+        this.item.incomingRelations = Dbm.utils.ArrayFunctions.sortOnField([].concat(item["relations/in"]["all"]), "type");
+        this.item.outgoingRelations = Dbm.utils.ArrayFunctions.sortOnField([].concat(item["relations/out"]["all"]), "type");
+        console.log(this.item.incomingRelations);
+    }
+
+    _renderMainElement() {
+
+        let id = this.getPropValue("id");
+        let item = Dbm.repository.getItem(id);
+
+        return React.createElement("div", {},
+            
+            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+                React.createElement(Dbm.react.context.AddItemByIdToContext, {"id": id},
+                   
+                    React.createElement("h2", {"className": "no-margins"},
+                        Dbm.react.text.text(Dbm.react.source.item("id")),
+                        " - ",
+                        Dbm.react.text.text(Dbm.react.source.item("name")),
+                    ),
+                    React.createElement("div", {"className": "small-description"},
+                        Dbm.react.text.text(Dbm.react.source.item("identifier"))
+                    ),
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.item("objectTypes"), className: "inline-list standard-tag-list standard-tag-list-expand", "as": "objectType", "keyField": "(root)"},
+                        React.createElement("div", {"className": "standard-tag standard-tag-padding standard-tag-list-item inline-list-item display-inline-block"},
+                            Dbm.react.text.text(Dbm.react.source.contextVariable("objectType"))
+                        )
+                    ),
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement(Dbm.react.area.List, {items: this.item.properties.fields, "as": "field", "keyField": "name"},
+                        React.createElement("div", {},
+                            React.createElement("div", {},
+                                Dbm.react.text.text(Dbm.react.source.contextVariable("field.name"))
+                            ),
+                            React.createElement("div", {},
+                                Dbm.react.text.text(Dbm.react.source.contextVariable("field.value"))
+                            )
+                        )
+                    ),
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement("div", {"className": "flex-row small-item-spacing halfs"},
+                        React.createElement("div", {"className": "flex-row-item"},
+                            React.createElement(Dbm.react.area.List, {items: this.item.properties.incomingRelations, "keyField": "type"},
+                                React.createElement(Dbm.react.admin.objects.explore.RelationType, {"objectLink": "from"})
+                            ),
+                        ),
+                        React.createElement("div", {"className": "flex-row-item"},
+                            React.createElement(Dbm.react.area.List, {items: this.item.properties.outgoingRelations, "keyField": "type"},
+                                React.createElement(Dbm.react.admin.objects.explore.RelationType, {"objectLink": "to"})
+                            ),
+                        )
+                    )
+                )
+            )
+            
+        )
+    }
+}

package/react/admin/objects/explore/Relation.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class Relation extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("loaded", false);
+
+    }
+
+    _constructAfterProps() {
+
+        super._constructAfterProps();
+
+        let relation = this.getPropValue("relation");
+        let objectId = Dbm.objectPath(relation, this.getPropValue("objectLink") + ".id");
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
+
+        {
+            let request = Dbm.getGraphApi().requestRange(
+                [
+                    {"type": "includePrivate"},
+                    {"type": "includeDraft"},
+                    {"type": "idSelection", "ids": [objectId]},
+                ],
+                ["name", "identifier"]
+            );
+            allLoaded.addCheck(request.properties.status);
+        }
+
+        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
+    }
+
+    _renderMainElement() {
+
+        let relation = this.getPropValue("relation");
+        let objectId = Dbm.objectPath(relation, this.getPropValue("objectLink") + ".id");
+
+        let url = "/admin/items/item/?id=" + objectId;
+
+        return this._createMainElement("div", {},
+            React.createElement(Dbm.react.text.Link, {"href": url, "className": "custom-styled-link"},
+                React.createElement("div", {"className": "flex-row small-item-spacing"},
+                    React.createElement("div", {"className": "flex-row-item"},
+                        Dbm.react.text.text(objectId)
+                    ),
+                    React.createElement("div", {"className": "flex-row-item"},
+                        React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.loaded},
+                            React.createElement(Dbm.react.context.AddItemByIdToContext, {"id": objectId},
+                                Dbm.react.text.text(Dbm.react.source.item("name"))
+                            )
+                        )
+                    )
+                ),
+                React.createElement("div", {"className": "small-description"},
+                    React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.loaded},
+                        React.createElement(Dbm.react.context.AddItemByIdToContext, {"id": objectId},
+                            Dbm.react.text.text(Dbm.react.source.item("identifier"))
+                        )
+                    )
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/explore/RelationType.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RelationType extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let relationType = this.context.item;
+        let objectLink = this.getPropValue("objectLink");
+        
+
+        let allTypedRelations = [];
+
+        let currentArray = relationType.allRelations;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentRelation = currentArray[i];
+
+            let currentArray2 = Dbm.objectPath(currentRelation, objectLink + ".objectTypes");
+            let currentArray2Length = currentArray2.length;
+            for(let j = 0; j < currentArray2Length; j++) {
+                allTypedRelations.push({"type": currentArray2[j], "relation": currentRelation})
+            }
+        }
+
+        let groups = Dbm.utils.ArrayFunctions.sortOnField(Dbm.utils.ArrayFunctions.group(allTypedRelations, "type"), "key");
+
+        return this._createMainElement("div", {},
+            React.createElement("div", {}, Dbm.react.text.text(Dbm.react.source.item("type"))),
+            React.createElement(Dbm.react.area.List, {"items": groups, "as": "typeGroup"},
+                React.createElement(Dbm.react.admin.objects.explore.RelationTypeGroup, {"name": Dbm.react.source.contextVariable("typeGroup.key"), "relations": Dbm.react.source.contextVariable("typeGroup.value"), "objectLink": objectLink})
+            ),
+        )
+    }
+}

package/react/admin/objects/explore/RelationTypeGroup.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RelationTypeGroup extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let objectLink = this.getPropValue("objectLink");
+
+        return this._createMainElement("div", {},
+            React.createElement("div", {}, 
+                Dbm.react.text.text(this.getPropValue("name"))
+            ),
+            React.createElement(Dbm.react.area.List, {"items": this.getPropValue("relations"), "as": "relationWithType"},
+                React.createElement(Dbm.react.admin.objects.explore.Relation, {"relation": Dbm.react.source.contextVariable("relationWithType.relation"), "objectLink": objectLink})
+            )
+        )
+    }
+}

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

@@ -0,0 +1,3 @@
+export {default as RelationType} from "./RelationType.js";
+export {default as RelationTypeGroup} from "./RelationTypeGroup.js";
+export {default as Relation} from "./Relation.js";

package/react/admin/objects/index.js

@@ -5,5 +5,7 @@ export {default as InjectObjectTypeEditor} from "./InjectObjectTypeEditor.js";
 export {default as RunObjectCommands} from "./RunObjectCommands.js";
 export {default as UserList} from "./UserList.js";
 export {default as UserListRow} from "./UserListRow.js";
+export {default as ExploreObject} from "./ExploreObject.js";
 
-export * as itemeditors from "./itemeditors/index.js";
+export * as itemeditors from "./itemeditors/index.js";
+export * as explore from "./explore/index.js";

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

@@ -38,7 +38,7 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
                         ),
                         React.createElement("div", {className: "flex-row-item flex-no-resize"},
                             React.createElement("div", {className: "spacing small"}),
-                            React.createElement(Dbm.react.interaction.ConfirmButton, {"command": Dbm.commands.callFunction(this._remove.bind(this))},
+                            React.createElement(Dbm.react.interaction.ConfirmButton, {"command": this._getScopedCallFunctionCommand(this._remove)},
                                 React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon action-icon-color cursor-pointer"}),
                                 React.createElement("div", {"data-slot": "confirm", className: "absolute-container cursor-pointer", title: "Click to remove"},
                                     React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon hover-icon remove-action-icon-color cursor-pointer"}),

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

@@ -0,0 +1,26 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class TextAreaField 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.TextArea, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                )
+            )
+        )
+    }
+}

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

@@ -20,3 +20,4 @@ export {default as RichTextField} from "./RichTextField.js";
 export {default as RichTextFieldWithTranslations} from "./RichTextFieldWithTranslations.js";
 export {default as FormattedField} from "./FormattedField.js";
 export {default as FormattedFieldWithTranslations} from "./FormattedFieldWithTranslations.js";
+export {default as TextAreaField} from "./TextAreaField.js";

package/react/animation/AnimationController.js

@@ -19,10 +19,8 @@ export default class AnimationController extends Dbm.core.BaseObject {
         //console.log("_updateStyle");
         let element = this.item.element;
 
-        
-
         if(element) {
-            
+
             let styleArray = [];
             
             let styleObject = this.item.style;

package/react/animation/index.js

@@ -18,5 +18,20 @@ export const connectedAnimation = function(aStyleProperty) {
 
     newAnimationController.item.propertyInput("style", aStyleProperty);
 
+    return newAnimationController;
+}
+
+export const freeStyleTransformAnimation = function() {
+    let transform = new Dbm.flow.updatefunctions.dom.TransformStyle();
+
+    let newAnimationController = new Dbm.react.animation.AnimationController();
+
+    let styleObject = new Dbm.flow.updatefunctions.dom.StyleObject();
+    styleObject.addProperty("transform", transform.output.properties.value);
+
+    newAnimationController.item.propertyInput("style", styleObject.output.properties.style);
+    newAnimationController.item.setValue("styleProperties", styleObject);
+    newAnimationController.item.setValue("transformProperties", transform);
+
     return newAnimationController;
 }

package/react/area/InsertElement.js

@@ -20,6 +20,9 @@ export default class InsertElement extends Dbm.react.BaseObject {
         if(!element) {
             return React.createElement("div", {}, "No element set");
         }
+        else if(typeof(element) === "string") {
+            return element;
+        }
 
         let props = this._copyProps(element.props);
 

package/react/area/Layout.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Layout extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let layoutProperty = this.context.layout;
+    }
+
+    _renderMainElement() {
+        
+        let data = this.getPropValue("layout");
+
+        let layouts = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(data);
+
+        return this._createMainElement(Dbm.react.area.HasData, {"check": this.context.layout, "checkType": "inArray", "compareValue": layouts}, this.getPropValue("children"));
+    }
+}
+

package/react/area/List.js

@@ -53,6 +53,10 @@ export default class List extends Dbm.react.BaseObject {
             newChildren.push(React.createElement(Dbm.react.context.AddContextVariables, {key: key, values: values}, mainChildren));
         }
 
+        if(slots.wrapper) {
+            newChildren = React.cloneElement(slots.wrapper[0], slots.wrapper[0].props, newChildren);
+        }
+
         return React.createElement(React.Fragment, {}, newChildren);
     }
 }

package/react/area/NativeElement.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class NativeElement extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["element"];
+    }
+
+    componentDidMount() {
+
+        let element = this.getPropValue("element");
+		
+        let parentElement = this.item.holderElement;
+        if(element && parentElement) {
+            parentElement.appendChild(element);
+        }
+    }
+
+    componentDidUpdate() {
+
+        let element = this.getPropValue("element");
+
+        let parentElement = this.item.holderElement;
+        //METODO: should we remove the old element?
+        if(element && parentElement) {
+            parentElement.appendChild(element);
+        }
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {"ref": this.createRef("holderElement")});
+    }
+}

package/react/area/RepeatedSlider.js

@@ -0,0 +1,73 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class RepeatedSlider extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+		
+		this._sliderItems = {};
+	}
+
+    _removedUsedProps(aProps) {
+        delete aProps["viewWidth"];
+        delete aProps["prepareLength"];
+        delete aProps["spacing"];
+        delete aProps["position"];
+        delete aProps["itemClasses"];
+    }
+
+    _getItemForIndex(aIndex) {
+        let currentItem = this._sliderItems["i"+ aIndex];
+        if(!currentItem) {
+            currentItem = new Dbm.repository.Item();
+            currentItem.setValue("index", aIndex);
+            currentItem.setValue("envelope", 0);
+            currentItem.setValue("localPosition", 0);
+            this._sliderItems["i"+ aIndex] = currentItem;
+        }
+
+        return currentItem;
+    }
+
+    _renderMainElement() {
+        //console.log("FixedWidthInfiniteSlideshow::render");
+        //console.log(this);
+
+        let viewWidth = this.getPropValueWithDefault("viewWidth", 1000);
+        let prepLength = this.getPropValueWithDefault("prepareLength", 20);
+        let spacing = this.getPropValueWithDefault("spacing", 0);
+        let itemClasses = this.getPropValueWithDefault("itemClasses", "");
+
+        let position = this.getPropValueWithDefault("position", 0);
+
+        let elements = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+
+		let numberOfElements = elements.length;
+
+        let length = 400;
+
+        let startIndex = Math.floor(position/length);
+
+        let endIndex = startIndex+10; //Math.floor(position);
+
+        let children = [];
+        for(let i = startIndex; i <= endIndex; i++) {
+            let currentPosition = i*length-position;
+            let elementIndex = Dbm.utils.NumberFunctions.floatMod(i, numberOfElements);
+
+            let indexItem = this._getItemForIndex(i);
+
+            let style = {"transform": "translateX(" + currentPosition + "px)", position: "absolute", left: 0, top: 0};
+            let child = React.createElement("div", {"key": i, "className": itemClasses, "style": style},
+                React.createElement(Dbm.react.context.AddContextVariables, {"values": {"sliderItem": indexItem}},
+                    elements[elementIndex]
+                )
+            );
+            children.push(child);
+        }
+        
+		return this._createMainElement("div", {},
+			children
+		);
+    }
+}

package/react/area/SingleItemSlideshow.js

@@ -0,0 +1,69 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class SingleItemSlideshow extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let indexProperty = this.getDynamicProp("index", 0);
+		
+        this._contextData = {"index": indexProperty};
+		this._sliderItems = {};
+	}
+
+    _removedUsedProps(aProps) {
+        delete aProps["index"];
+    }
+
+    _getRecordForIndex(aIndex) {
+        let currentRecord = this._sliderItems["i"+ aIndex];
+        if(!currentRecord) {
+            let currentItem = new Dbm.repository.Item();
+            currentItem.setValue("index", aIndex);
+            currentItem.setValue("envelope", 0);
+            currentItem.setValue("localPosition", 0);
+
+            currentRecord = {"item": currentItem, "contextData": {"sliderItem": currentItem}};
+            this._sliderItems["i"+ aIndex] = currentRecord;
+        }
+
+        return currentRecord;
+    }
+
+    _renderMainElement() {
+
+        let index = this.getPropValue("index");
+
+        let elements = this.getPropValue("children");
+
+		let numberOfElements = elements.length;
+        
+        let startIndex = Math.floor(index);
+        let endIndex = Math.ceil(index);
+
+        let children = [];
+        for(let i = startIndex; i <= endIndex; i++) {
+            let elementIndex = Dbm.utils.NumberFunctions.floatMod(i, numberOfElements);
+
+            let currentRecord = this._getRecordForIndex(i);
+            let indexItem = currentRecord.item;
+            let localPosition = i-index;
+            indexItem.localPosition = localPosition;
+            let envelope = 1-Math.min(1, Math.abs(localPosition));
+            indexItem.envelope = envelope;
+
+            let child = React.createElement(React.Fragment, {"key": i},
+                React.createElement(Dbm.react.context.AddContextVariables, {"values": currentRecord.contextData},
+                    elements[elementIndex]
+                )
+            );
+            children.push(child);
+        }
+        
+		return React.createElement(React.Fragment, {},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": this._contextData},
+			    children
+            )
+		);
+    }
+}

package/react/area/SlideshowSteps.js

@@ -0,0 +1,45 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class SlideshowSteps extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+		
+		this._sliderItems = {};
+
+        this.getDynamicPropWithoutState("length", 0).addUpdate(this._getScopedCallFunctionCommand(this._updateSteps));
+        let value = this.getDynamicPropWithoutState("value", 0);
+
+        let singleSelection = new Dbm.flow.controllers.select.SingleSelection();
+        singleSelection.item.properties.value.connectInput(value);
+        this.item.requireProperty("singleSelection", singleSelection.item);
+
+        this.item.requireProperty("steps", []);
+	}
+
+    _removedUsedProps(aProps) {
+        delete aProps["length"];
+        delete aProps["index"];
+    }
+
+    _updateSteps() {
+        let numberOfSteps = this.item["props/length"];
+        let steps = [];
+
+        for(let i = 0; i < numberOfSteps; i++) {
+            let selectionProperty = this.item.singleSelection.controller.addSelectionValue(i);
+            steps.push({"id": i, "selected": selectionProperty});
+        }
+
+        this.item.steps = steps;
+        console.log(this.item.steps);
+    }
+
+    _renderMainElement() {
+        let elements = this.getPropValue("children");
+
+        return this._createMainElement(Dbm.react.area.List, {"items": this.item.properties.steps},
+            React.createElement(Dbm.react.interaction.Checked, {"checked": Dbm.react.source.item("selected"), "preventUncheck": true}, elements)
+        );
+    }
+}

package/react/area/index.js

@@ -13,6 +13,11 @@ export {default as SwitchableArea} from "./SwitchableArea.js";
 export {default as PopoverLayer} from "./PopoverLayer.js";
 export {default as RowOrStacked} from "./RowOrStacked.js";
 export {default as SelectResponsiveLayout} from "./SelectResponsiveLayout.js";
+export {default as NativeElement} from "./NativeElement.js";
+export {default as SingleItemSlideshow} from "./SingleItemSlideshow.js";
+export {default as SlideshowSteps} from "./SlideshowSteps.js";
+export {default as RepeatedSlider} from "./RepeatedSlider.js";
+export {default as Layout} from "./Layout.js";
 
 export const responsiveLayout = function(aDefaultLayout) {
     let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();
@@ -41,5 +46,5 @@ export const processStateElement = function(aState, aIdleElement, aProcessingEle
 
     let element = React.createElement(Dbm.react.area.InsertElement, {"element": updateFunction.output.properties.value});
 
-    return updateFunction;
+    return element;
 }

package/react/blocks/admin/objects/Explore.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class Explore extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let url = new URL(document.location.href);
+        let id = url.searchParams.get("id");
+
+        return React.createElement("div", {className: "content-narrow"}, 
+            React.createElement(Dbm.react.admin.objects.ExploreObject, {"id": id})
+        );
+    }
+}

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

@@ -2,4 +2,5 @@ export {default as List} from "./List.js";
 export {default as Edit} from "./Edit.js";
 export {default as RunObjectCommands} from "./RunObjectCommands.js";
 export {default as Users} from "./Users.js";
-export {default as User} from "./User.js";
+export {default as User} from "./User.js";
+export {default as Explore} from "./Explore.js";