dbm 1.4.3 → 1.4.5

package/css/admin.css

@@ -56,6 +56,7 @@
     height: 120px;
 }
 
+.admin-save-all-position,
 .dbm-admin .save-all-position {
     position: fixed;
     bottom: 10px;

package/css/utils.css

@@ -156,6 +156,10 @@
     display: block;
 }
 
+.display-inline-block {
+    display: inline-block;
+}
+
 .display-none {
     display: none;
 }

package/dbm.js

@@ -93,6 +93,10 @@ export const getGraphApi = function() {
     return getRepositoryItem("graphApi").controller;
 }
 
+export const getCachedGraphApi = function() {
+    return getRepositoryItem("cachedGraphApi").controller;
+}
+
 export * as utils from "./utils/index.js";
 export * as core from "./core/index.js";
 export * as loading from "./loading/index.js";

package/ecommerce/Cart.js

@@ -16,7 +16,7 @@ export default class Cart extends Dbm.core.BaseObject {
         //METODO: integrate local storage
     }
 
-    addProduct(aProduct, aQuantity = 1) {
+    addProduct(aProduct, aQuantity = 1, aMeta = null) {
         //console.log("addProduct");
         //console.log(aQuantity);
 
@@ -25,8 +25,14 @@ export default class Cart extends Dbm.core.BaseObject {
         let index = Dbm.utils.ArrayFunctions.getItemIndexByIfExists(lineItems, "product", aProduct);
         
         if(index !== -1) {
-            lineItem = lineItems[index];
-            lineItem.controller.increaseQuantity(aQuantity);
+            lineItem = lineItems[index].controller;
+            lineItem.increaseQuantity(aQuantity);
+            //METODO: support items with different meta
+            if(aMeta) {
+                for(let objectName in aMeta) {
+                    lineItem.setMeta(objectName, aMeta[objectName]);
+                }
+            }
         }
         else {
             let id = "lineItem" + Dbm.getInstance().getNextId();
@@ -36,6 +42,12 @@ export default class Cart extends Dbm.core.BaseObject {
             lineItem.setQuantity(aQuantity);
             lineItem.setCart(this.item);
 
+            if(aMeta) {
+                for(let objectName in aMeta) {
+                    lineItem.setMeta(objectName, aMeta[objectName]);
+                }
+            }
+
             Dbm.flow.addUpdateCommand(lineItem.item.properties.quantity, this._changeCommand);
 
             let newLineItems = [].concat(lineItems);

package/ecommerce/CartLineItem.js

@@ -7,6 +7,7 @@ export default class CartLineItem extends Dbm.core.BaseObject {
         this.item.setValue("cart", null);
         this.item.setValue("product", null);
         this.item.setValue("quantity", 0);
+        this.item.setValue("meta", {});
     }
 
     setCart(aItem) {
@@ -30,6 +31,12 @@ export default class CartLineItem extends Dbm.core.BaseObject {
         return this;
     }
 
+    setMeta(aKey, aValue) {
+        this.item.meta[aKey] = aValue;
+
+        return this;
+    }
+
     increaseQuantity(aQuantity) {
         this.item.quantity += aQuantity;
 

package/ecommerce/LocalStorageCartLoader.js

@@ -33,7 +33,7 @@ export default class LocalStorageCartLoader extends Dbm.core.BaseObject {
                 for(let i = 0; i < currentArrayLength; i++) {
                     let currentData = currentArray[i];
 
-                    this.item.cart.controller.addProduct(repository.getItem(currentData["product"]), currentData["quantity"]);
+                    this.item.cart.controller.addProduct(repository.getItem(currentData["product"]), currentData["quantity"], currentData["meta"]);
                 }
             }
         }
@@ -58,7 +58,7 @@ export default class LocalStorageCartLoader extends Dbm.core.BaseObject {
         for(let i = 0; i < currentArrayLength; i++) {
             let currentData = currentArray[i];
 
-            let encodedData = {"product": currentData.product.id, "quantity": currentData.quantity};
+            let encodedData = {"product": currentData.product.id, "quantity": currentData.quantity, "meta": currentData.meta};
             encodedLineItems.push(encodedData);
         }
 

package/flow/controllers/select/InArray.js

@@ -15,7 +15,7 @@ export default class InArray extends Dbm.core.BaseObject {
 
     getSelectionForValue(aValue) {
         let selections = this.item.selections;
-        let currentSelection = Dbm.utils.ArrayFunctions.getItemBy(selections, "value", aValue);
+        let currentSelection = Dbm.utils.ArrayFunctions.getItemByIfExists(selections, "value", aValue);
 
         if(!currentSelection) {
             let selections = [].concat(this.item.selections);

package/flow/controllers/select/SingleSelection.js

@@ -4,6 +4,8 @@ export default class SingleSelection extends Dbm.core.BaseObject {
     _construct() {
         super._construct();
 
+        this._valueMap = new Map();
+
         let valueUpdatedCommand = Dbm.commands.callFunction(this._valueUpdated.bind(this));
 
         this._selectionChangedBound = this._selectionChanged.bind(this);
@@ -15,13 +17,22 @@ export default class SingleSelection extends Dbm.core.BaseObject {
     }
 
     addSelectionValue(aValue) {
+        //console.log("addSelectionValue");
+        //console.log(aValue);
+
+        if(this._valueMap.has(aValue)) {
+            return this._valueMap.get(aValue);
+        }
+
         let selections = [].concat(this.item.selections);
 
         let property = new Dbm.flow.FlowProperty();
         property.setValue(false);
         Dbm.flow.addUpdateCommand(property, Dbm.commands.callFunction(this._selectionChangedBound, [property, aValue]));
+        this._valueMap.set(aValue, property);
 
         selections.push({"value": aValue, "property": property});
+        
         this.item.selections = selections;
 
         return property;

package/flow/controllers/transform/PartOfObject.js

@@ -25,7 +25,7 @@ export default class PartOfObject extends Dbm.core.BaseObject {
             
             if(stringValue !== this._lastUpdatedValue) {
                 this._lastUpdatedValue = stringValue;
-                let newValue = JSON.parse(stringValue);
+                let newValue = stringValue ? JSON.parse(stringValue) : null;
                 this.item.value = newValue;
             }
         }

package/loading/LoadingSequence.js

@@ -0,0 +1,69 @@
+import Dbm from "../index.js";
+
+export default class LoadingSequence extends Dbm.core.BaseObject {
+
+	_construct() {
+		
+		super._construct();
+		
+		this.item.setValue("waitingLoaders", []);
+		this.item.setValue("loaders", []);
+		this.item.setValue("currentLoader", null);
+		
+		this.item.setValue("status", Dbm.loading.LoadingStatus.NOT_STARTED);
+	}
+	
+	get completed() {
+		let status = this.item.status;
+		return (status === Dbm.loading.LoadingStatus.LOADED || status === Dbm.loading.LoadingStatus.ERROR);
+	}
+	
+	addLoader(aLoader) {
+		this.item.addToArray("waitingLoaders", aLoader);
+		this.item.addToArray("loaders", aLoader);
+
+		if(this.item.status === Dbm.loading.LoadingStatus.LOADED) {
+			this._loadNextLoader();
+		}
+		
+		return this;
+	}
+	
+	load() {
+		console.log("load");
+
+		if(this.item.status !== Dbm.loading.LoadingStatus.NOT_STARTED) {
+			return this;
+		}
+
+		this._loadNextLoader();
+		
+		return this;
+	}
+
+	_loadNextLoader() {
+		console.log("_loadNextLoader");
+
+		if(this.item.waitingLoaders.length > 0) {
+			let nextLoader = this.item.waitingLoaders[0];
+			this.item.removeFromArray("waitingLoaders", nextLoader);
+			this.item.currentLoader = nextLoader;
+
+			this.item.status = Dbm.loading.LoadingStatus.LOADING;
+
+			Dbm.flow.runWhenMatched(nextLoader.item.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._loaderLoaded.bind(this), [nextLoader]));
+			nextLoader.load();
+			
+		}
+		else {
+			this.item.status = Dbm.loading.LoadingStatus.LOADED;
+		}
+	}
+
+	_loaderLoaded(aLoader) {
+		if(this.item.currentLoader === aLoader) {
+			this.item.currentLoader = null;
+			this._loadNextLoader();
+		}
+	}
+}

package/loading/graphapi/DataLoader.js

@@ -0,0 +1,51 @@
+import Dbm from "../../index.js";
+
+export default class DataLoader extends Dbm.core.BaseObject {
+
+	_construct() {
+		
+		super._construct();
+
+		this.item.setValue("request", null);
+		
+		this.item.setValue("type", null);
+		this.item.setValue("body", {});
+
+		this.item.setValue("status", Dbm.loading.LoadingStatus.NOT_STARTED);
+
+		this.item.setValue("data", null);
+	}
+	
+	get completed() {
+		let status = this.item.status;
+		return (status === Dbm.loading.LoadingStatus.LOADED || status === Dbm.loading.LoadingStatus.ERROR);
+	}
+	
+	setType(aType) {
+		this.item.type = aType;
+		
+		return this;
+	}
+
+	setBody(aBody) {
+		this.item.body = aBody;
+		
+		return this;
+	}
+	
+	load() {
+
+		if(this.item.status !== Dbm.loading.LoadingStatus.NOT_STARTED) {
+			return this;
+		}
+		
+		let request = Dbm.getCachedGraphApi().requestData(this.item.type, this.item.body);
+
+		this.item.request = request;
+
+		this.item.properties.data.connectInput(request.properties.data);
+		this.item.properties.status.connectInput(request.properties.status);
+		
+		return this;
+	}
+}

package/loading/graphapi/RangeLoader.js

@@ -0,0 +1,63 @@
+import Dbm from "../../index.js";
+
+export default class RangeLoader extends Dbm.core.BaseObject {
+
+	_construct() {
+		
+		super._construct();
+
+		this.item.setValue("request", null);
+		
+		this.item.setValue("selects", []);
+		this.item.setValue("encodes", ["id"]);
+
+		this.item.setValue("status", Dbm.loading.LoadingStatus.NOT_STARTED);
+
+		this.item.setValue("items", []);
+	}
+	
+	get completed() {
+		let status = this.item.status;
+		return (status === Dbm.loading.LoadingStatus.LOADED || status === Dbm.loading.LoadingStatus.ERROR);
+	}
+	
+	addSelect(aSelect) {
+		this.item.addToArray("selects", aSelect);
+		
+		return this;
+	}
+
+	includePrivate() {
+		this.addSelect({"type": "includePrivate"});
+
+		return this;
+	}
+
+	includedraft() {
+		this.addSelect({"type": "includeDraft"});
+
+		return this;
+	}
+
+	addEncode(aEncode) {
+		this.item.addToArray("encodes", aEncode);
+		
+		return this;
+	}
+	
+	load() {
+
+		if(this.item.status !== Dbm.loading.LoadingStatus.NOT_STARTED) {
+			return this;
+		}
+		
+		let request = Dbm.getCachedGraphApi().requestRange(this.item.selects, this.item.encodes);
+
+		this.item.request = request;
+
+		this.item.properties.items.connectInput(request.items);
+		this.item.properties.status.connectInput(request.status);
+		
+		return this;
+	}
+}

package/loading/graphapi/index.js

@@ -0,0 +1,12 @@
+import Dbm from "../../index.js";
+
+export {default as RangeLoader} from "./RangeLoader.js";
+export {default as DataLoader} from "./DataLoader.js";
+
+export const createDataLoader = function(aType, aBody = {}) {
+    let newLoader = new Dbm.loading.graphapi.DataLoader();
+    newLoader.setType(aType);
+    newLoader.setBody(aBody);
+
+    return newLoader;
+}

package/loading/index.js

@@ -1,10 +1,14 @@
 import Dbm from "../index.js";
+
 export {default as ScriptLoader} from "./ScriptLoader.js";
 export {default as JsonLoader} from "./JsonLoader.js";
 export {default as ImageLoader} from "./ImageLoader.js";
+export {default as LoadingSequence} from "./LoadingSequence.js";
+
 export * as LoadingStatus from "./LoadingStatus.js";
 
 export * as node from "./node/index.js";
+export * as graphapi from "./graphapi/index.js";
 
 export const loadScript = function(aUrl) {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "main": "index.js",
   "type": "module",
   "exports": {

package/react/AddProps.js

@@ -10,7 +10,6 @@ export default class AddProps extends Dbm.react.BaseObject {
 	}
 	
 	_getMainElementProps() {
-		//console.log("wprr/manipulation/ManipulationBaseObject::_getMainElementProps");
 		let returnObject = {};
 
 		for(let objectName in this.props) {
@@ -33,6 +32,7 @@ export default class AddProps extends Dbm.react.BaseObject {
 	}
 	
 	_performClone(aChild, aProps) {
+		//console.log("_cloneChildrenAndAddProps");
 		
 		if(aChild instanceof Array) {
 			let returnArray = [];
@@ -46,20 +46,8 @@ export default class AddProps extends Dbm.react.BaseObject {
 			
 			return returnArray;
 		}
-		
-		let newProps = aProps;
-		if(aChild && aChild.props && aChild.props.className) {
-			newProps = {};
-			for(let objectName in aProps) {
-				newProps[objectName] = aProps[objectName];
-			}
-			if(aProps.className) {
-				newProps.className = aProps.className + " " + aChild.props.className;
-			} 
-			else {
-				newProps.className = aChild.props.className;
-			}
-		}
+
+		let newProps = this._copyProps(aChild.props);
 		
 		let callArray = [aChild, newProps];
 		
@@ -80,21 +68,21 @@ export default class AddProps extends Dbm.react.BaseObject {
 	}
 	
 	_cloneChildrenAndAddProps(aChildren) {
-		//console.log("wprr/manipulation/ManipulationBaseObject::_cloneChildrenAndAddProps");
+		//console.log("_cloneChildrenAndAddProps");
 		
 		let children = aChildren;
 		
 		if(children.length === 0) {
 			return null;
 		}
-		else if(children.length === 1) {
-			return this._performClone(children[0], this.props);
-		}
-		
-		let returnArray = new Array();
 		
 		let mainElementProps = this.props;
 		
+		if(children.length === 1) {
+			return this._performClone(children[0], mainElementProps);
+		}
+		
+		let returnArray = new Array();
 		let currentArray = children;
 		let currentArrayLength = currentArray.length;
 		for(let i = 0; i < currentArrayLength; i++) {
@@ -106,16 +94,16 @@ export default class AddProps extends Dbm.react.BaseObject {
 			}
 		}
 		
-		let callArray = [Fragment, {}].concat(returnArray);
+		let callArray = [React.Fragment, {}].concat(returnArray);
 		return React.createElement.apply(React, callArray);
 	}
 	
 	_renderClonedElement() {
-		return this._cloneChildrenAndAddProps(this.getPropValue("children"));
+		let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+		return this._cloneChildrenAndAddProps(children);
 	}
 	
 	_createClonedElement() {
-		//console.log("wprr/manipulation/ManipulationBaseObject::_createClonedElement");
 		
 		this._clonedElement = this._renderClonedElement();
 	}

package/react/admin/objects/ObjectList.js

@@ -32,12 +32,13 @@ export default class ObjectList extends Dbm.react.BaseObject {
     }
 
     _loaded(aRequest) {
-        console.log("_loaded");
+        //console.log("_loaded");
 
         let currentArray = [].concat(aRequest.items);
 
         let nameField = this.getPropValueWithDefault("nameField", "name");
-        Dbm.utils.ArrayFunctions.sortOnField(currentArray, nameField);
+
+        Dbm.utils.ArrayFunctions.naturalSortOnField(currentArray, nameField);
         
         this.item.items = currentArray;
     }

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

@@ -6,6 +6,15 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
         super._construct();
     }
 
+    _remove() {
+        console.log("_remove");
+        let hierarchyItem = this.context.hierarchyItem;
+
+        console.log(hierarchyItem);
+
+        this.context.hierarchyController.removeHierarchyItem(hierarchyItem);
+    }
+
     _renderMainElement() {
 
         let children = this.getPropValue("children");
@@ -20,7 +29,19 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
                         ),
                         React.createElement("div", {className: "flex-row-item flex-resize"},
                             children
-                        )
+                        ),
+                        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.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"}),
+                                    React.createElement("div", {className:"centered-tip-text no-pointer-events"},
+                                        "Remove?"
+                                    )
+                                )
+                            )
+                        ),
                     )
                     
                 )      

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

@@ -46,6 +46,7 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
     _removeMissingPartsOfHierarchy(aHierarchy, aMustBeInArray) {
         //console.log("_removeMissingPartsOfHierarchy");
         //console.log(aHierarchy, aMustBeInArray);
+
         let currentArray = aHierarchy;
         let currentArrayLength = currentArray.length;
 
@@ -54,6 +55,11 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
             if(aMustBeInArray.indexOf(currentItem.id) !== -1) {
                 this._removeMissingPartsOfHierarchy(currentItem.children, aMustBeInArray);
             }
+            else {
+                currentArray.splice(i, 1);
+                i--;
+                currentArrayLength--;
+            }
         }
     }
 
@@ -68,6 +74,17 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
         }
     }
 
+    _getAllLinkedIdsFromHierarchy(aItems, aReturnArray) {
+        let currentArray = aItems;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+
+            aReturnArray.push(currentItem.linkedItem.id);
+            this._getAllLinkedIdsFromHierarchy(currentItem.children, aReturnArray);
+        }
+    }
+
     _getFullHierarchy() {
         let relations = this._relationsEditor.value;
         let hierarchyValue = this._orderEditor.value;
@@ -257,6 +274,28 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
         this._orderEditor.value = hierarchyValue;
     }
 
+    removeHierarchyItem(aHierarchyItem) {
+        console.log("removeHierarchyItem");
+        let position = this._findPosition(aHierarchyItem, this.item.hierarchy.children);
+
+        let idsToRemove = [];
+        this._getAllLinkedIdsFromHierarchy([aHierarchyItem], idsToRemove);
+
+        console.log(position, idsToRemove);
+
+        let editor = this._getEditor();
+        let newValues = [].concat(editor.value);
+        
+        console.log(JSON.stringify(newValues), idsToRemove);
+        newValues = Dbm.utils.ArrayFunctions.removeValues(newValues, idsToRemove);
+        console.log(JSON.stringify(newValues), idsToRemove);
+
+        editor.value = newValues;
+
+        let hierarchyValue = this._getFullHierarchy();
+        this._orderEditor.value = hierarchyValue;
+    }
+
     _create() {
         console.log("_create");
         let objectType = this.getPropValue("objectType");
@@ -270,10 +309,7 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
         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);
-
+    _getEditor() {
         let itemEditor = this.context.itemEditor;
 
         let direction = this.getPropValue("direction");
@@ -291,9 +327,21 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
             console.error("Unknown direction", direction, this);
         }
 
+        return editor;
+    }
+
+    _created(aItem) {
+        console.log("_created");
+        console.log(aItem);
+
+        let editor = this._getEditor();
+
         let newValues = [].concat(editor.value);
         newValues.push(aItem.id);
         editor.value = newValues;
+
+        let hierarchyValue = this._getFullHierarchy();
+        this._orderEditor.value = hierarchyValue;
     }
 
     _renderMainElement() {
@@ -302,7 +350,7 @@ export default class HierarchyOrderedRelationsList extends Dbm.react.BaseObject
         let children = this.getPropValue("children");
 
         return React.createElement("div", {},
-            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"dragController": this}},
+            React.createElement(Dbm.react.context.AddContextVariables, {"values": {"dragController": this, "hierarchyController": 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"},

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

@@ -5,7 +5,7 @@ export default class SingleRelation extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
 
-        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+        let graphApi = Dbm.getGraphApi();
 
         let id = this.context.item.id;
 
@@ -13,12 +13,23 @@ export default class SingleRelation extends Dbm.react.BaseObject {
         this.item.requireProperty("loaded", false);
 
         {
-            let request = graphApi.requestRange(
-                [
+            let selects = [
                     {"type": "includePrivate"},
                     {"type": "includeDraft"},
                     {"type": "idSelection", "ids": [id]},
-                ],
+            ];
+
+            if(this.getPropValue("anyStatus")) {
+                selects = [
+                    {"type": "includeAnyStatus"},
+                    {"type": "idSelection", "ids": [id]},
+                ];
+            }
+
+            console.log(selects);
+
+            let request = graphApi.requestRange(
+                selects,
                 ["admin_fields", "relations"]
             );
             allLoaded.addCheck(request.properties.status);
@@ -32,6 +43,7 @@ export default class SingleRelation extends Dbm.react.BaseObject {
         let id = this.context.item.id;
 
         let label = this.getPropValue("label");
+        let labelElement = label ? React.createElement(Dbm.react.form.LabelledArea, {label: label}) : null;
         let direction = this.getPropValue("direction");
         let relationType = this.getPropValue("relationType");
         let objectType = this.getPropValue("objectType");
@@ -41,9 +53,9 @@ export default class SingleRelation 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: label}), 
+                labelElement, 
                 React.createElement(Dbm.react.admin.editorsgroup.EditRelation, {"direction": direction, "relationType": relationType, "objectType": objectType},
-                    React.createElement(Dbm.react.form.GraphApiObjectSelection, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), "objectType": objectType, "encoding": encoding, nameField: nameField, className: "standard-field standard-field-padding full-width"})
+                    React.createElement(Dbm.react.form.GraphApiObjectSelection, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), "objectType": objectType, "encoding": encoding, nameField: nameField, anyStatus: this.getPropValue("anyStatus"), className: "standard-field standard-field-padding full-width"})
                 )
             )
             

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Dbm from "../../../../index.js";
 
-export default class ObjectList extends Dbm.react.BaseObject {
+export default class List extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
     }

package/react/form/GraphApiObjectOptions.js

@@ -0,0 +1,103 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class GraphApiObjectOptions extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let valueProp = this.getDynamicProp("value", "");
+        this.item.requireProperty("items", []);
+        this.item.requireProperty("options", []);
+
+        this._singelSelection = new Dbm.flow.controllers.select.SingleSelection();
+        this._singelSelection.item.properties.value.connectInput(valueProp);
+
+        let objectType = this.getPropValue("objectType");
+        let encodings = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(this.getPropValueWithDefault("encoding", "name,identifier"), ",", true);
+
+        {
+            let request = Dbm.getCachedGraphApi().requestRange(
+                [
+                    {"type": "byObjectType", "objectType": objectType},
+                    {"type": "includeDraft"},
+                    {"type": "includePrivate"}
+                ],
+                encodings
+            );
+            
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._itemsLoaded.bind(this), [request]));
+        }
+    }
+
+    
+
+    _itemsLoaded(aRequest) {
+
+        let nameField = this.getPropValueWithDefault("nameField", "name");
+        let identifierField = this.getPropValueWithDefault("identifierField", "identifier");
+        let options = this.getPropValue("options");
+
+        let currentArray = [].concat(aRequest.items);
+        if(options) {
+            currentArray = Dbm.utils.ArrayFunctions.filterByField(aRequest.items, identifierField, options, "inArray");
+
+            let sortFunction = function(aA, aB) {
+
+                let sortIndexA = options.indexOf(aA);
+                if(sortIndexA === -1) {
+                    sortIndexA = order.length;
+                }
+
+                let sortIndexB = options.indexOf(aB);
+                if(sortIndexB === -1) {
+                    sortIndexB = order.length;
+                }
+                
+                return sortIndexA-sortIndexB;
+            }
+
+            Dbm.utils.ArrayFunctions.sortOnField(currentArray, identifierField, sortFunction);
+        }
+        else {
+            Dbm.utils.ArrayFunctions.naturalSortOnField(currentArray, nameField);
+        }
+
+        this.item.items = currentArray;
+
+        let rows = new Array();
+
+        let children = this.getPropValue("children");
+        if(!children) {
+            children = React.createElement("span", {},
+                React.createElement(Dbm.react.form.Checkbox, {"checked": Dbm.react.source.contextVariable("selected")}),
+                Dbm.react.text.text(Dbm.react.source.item(nameField))
+            );
+        }
+            
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+            let currentRow = new Dbm.repository.Item();
+            currentRow.setId("_dbmInternal/row" + currentItem.id);
+
+            let property = this._singelSelection.addSelectionValue(currentItem.id);
+
+            currentRow.setValue("item", currentItem);
+            currentRow.setValue("element", React.createElement(Dbm.react.context.AddContextVariables, {"values": {"item": currentItem, "selected": property}}, children));
+            rows.push(currentRow);
+        }
+        this.item.options = rows;
+    }
+
+    _renderMainElement() {
+
+        let value = this.getDynamicProp("value");
+
+        return this._createMainElement("div", {}, 
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.options, as: "option"},
+                React.createElement(Dbm.react.area.InsertElement, {"element": Dbm.react.source.contextVariable("option.element")})
+            )
+        );
+    }
+}
+

package/react/form/GraphApiObjectSelection.js

@@ -9,24 +9,27 @@ export default class GraphApiObjectSelection extends Dbm.react.BaseObject {
         this.item.requireProperty("items", []);
 
         let objectType = this.getPropValue("objectType");
-        let encoding = this.getPropValue("encoding");
-        if(!encoding) {
-            encoding = "name";
-        }
+        let encodings = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(this.getPropValueWithDefault("encoding", "name"), ",", true);
 
-        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
         {
-            let request = graphApi.requestRange(
-                [
+            let selects = [
                     {"type": "byObjectType", "objectType": objectType},
                     {"type": "includeDraft"},
                     {"type": "includePrivate"}
-                ],
-                [encoding]
+                ];
+            if(this.getPropValue("anyStatus")) {
+                selects = [
+                    {"type": "byObjectType", "objectType": objectType},
+                    {"type": "includeAnyStatus"}
+                ];
+            }
+
+            let request = Dbm.getCachedGraphApi().requestRange(
+                selects,
+                encodings
             );
 
-    
-           Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._itemsLoaded.bind(this), [request]));
+            Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._itemsLoaded.bind(this), [request]));
         }
     }
 
@@ -41,7 +44,7 @@ export default class GraphApiObjectSelection extends Dbm.react.BaseObject {
         }
 
         let currentArray = [].concat(aRequest.items);
-        Dbm.utils.ArrayFunctions.sortOnField(currentArray, nameField);
+        Dbm.utils.ArrayFunctions.naturalSortOnField(currentArray, nameField);
 
         let currentArrayLength = currentArray.length;
         for(let i = 0; i < currentArrayLength; i++) {

package/react/form/index.js

@@ -11,4 +11,5 @@ export {default as TextArea} from "./TextArea.js";
 export {default as EditObjectProperty} from "./EditObjectProperty.js";
 export {default as Form} from "./Form.js";
 export {default as Option} from "./Option.js";
-export {default as Dropdown} from "./Dropdown.js";
+export {default as Dropdown} from "./Dropdown.js";
+export {default as GraphApiObjectOptions} from "./GraphApiObjectOptions.js";

package/react/index.js

@@ -1,5 +1,6 @@
 export {default as BaseObject} from "./BaseObject.js";
 export {default as RefToProperty} from "./RefToProperty.js";
+export {default as AddProps} from "./AddProps.js";
 
 export * as ChildFunctions from "./ChildFunctions.js";
 

package/react/login/LoginForm.js

@@ -16,7 +16,7 @@ export default class LoginForm extends Dbm.react.BaseObject {
         let loader = new Dbm.loading.JsonLoader();
         loader.setupJsonPost("/api/user/login", {"username": this.item.username, "password": this.item.password});
 
-        Dbm.flow.addUpdateCommand(loader.item.properties.status, Dbm.commands.callFunction(this._loaderStatusChanged.bind(this), [loader]));
+        Dbm.flow.runWhenMatched(loader.item.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._loaderStatusChanged.bind(this), [loader]));
 
         loader.load();
     }
@@ -25,15 +25,13 @@ export default class LoginForm extends Dbm.react.BaseObject {
         console.log("_loaderStatusChanged");
         console.log(aLoader, aLoader.item.status);
 
-        if(aLoader.item.status === Dbm.loading.LoadingStatus.LOADED) {
-            if(aLoader.item.data.success) {
-                
-                let item = Dbm.getGraphApi().signIn(aLoader.item.data.data.wsToken);
-                Dbm.flow.addUpdateCommand(item.properties.status, Dbm.commands.callFunction(this._graphApiRequestStatusChanges.bind(this), [item, aLoader]));
-            }
-            else {
-                alert("Unable to log in: " + aLoader.item.data.message);
-            }
+        if(aLoader.item.data.success) {
+            
+            let item = Dbm.getGraphApi().signIn(aLoader.item.data.data.wsToken);
+            Dbm.flow.runWhenMatched(item.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._graphApiRequestStatusChanges.bind(this), [item, aLoader]));
+        }
+        else {
+            alert("Unable to log in: " + aLoader.item.data.message);
         }
     }
 

package/repository/Item.js

@@ -86,6 +86,20 @@ export default class Item extends Dbm.core.LifeCycleObject {
         return this;
     }
 
+    addUniqueToArray(aName, aValue) {
+        let currentArray = this[aName];
+        if(currentArray) {
+            let index = currentArray.indexOf(aValue);
+            if(index !== -1) {
+                return this;
+            }
+        }
+
+        this.addToArray(aName, aValue);
+
+        return this;
+    }
+
     removeFromArray(aName, aValue) {
         let currentArray = this[aName];
         if(currentArray) {

package/utils/ArrayFunctions.js

@@ -266,19 +266,21 @@ export const getUnselectedItems = function(aSelectedItems, aAllItems) {
     return returnItems;
 }
 
+const defaultCompareFunction = function (aA, aB) {
+    if(aA < aB) {
+        return -1;
+    }
+    else if(aA > aB) {
+        return 1;
+    }
+
+    return 0;
+}
+
 export const sortOnField = function(aArray, aField, aCompareFunction = null) {
     let compareFunction = aCompareFunction;
     if(!compareFunction) {
-        compareFunction = function(aA, aB) {
-            if(aA < aB) {
-                return -1;
-            }
-            else if(aA > aB) {
-                return 1;
-            }
-
-            return 0;
-        }
+        compareFunction = defaultCompareFunction;
     }
 
     let sortFunction = function(aA, aB) {
@@ -311,6 +313,27 @@ export const sortOnNumericField = function(aArray, aField) {
     return sortOnField(aArray, aField, compareFunction);
 }
 
+export const naturalSortOnField = function(aArray, aField, aLanguageCode = null) {
+
+    if(!aLanguageCode) {
+        aLanguageCode = Dbm.getRepositoryItem("site").currentLanguageCode;
+    }
+
+    let compareObject = new Intl.Collator(aLanguageCode, { numeric: true, sensitivity: 'base' });
+
+    let compareFunction = function(aA, aB) {
+        if(!aA && !aB) return 0;
+        if(!aA) return 1;
+        if(!aB) return -1;
+
+        let result = compareObject.compare(aA, aB);
+
+        return result;
+    }
+
+    return sortOnField(aArray, aField, compareFunction)
+}
+
 export const getItemIndexByIfExists = function(aArray, aField, aIdentifier) {
 		
     if(!Array.isArray(aArray)) {