first commit

leon-vg · Jun 24, 2019 · dae5d4f · dae5d4f
commit dae5d4f
Show file tree

Hide file tree

Showing 78 changed files with 24,834 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# ui5-mobx-state-tree-examples
diff --git a/article/Component.js b/article/Component.js
@@ -0,0 +1,49 @@
+/* global mobx */
+sap.ui.define([
+	"sap/ui/core/UIComponent",
+	"MobXExampleProject/mobx/MobxModel",
+	"sap/m/MessageToast",
+	"MobXExampleProject/model/boekStore"
+], function(UIComponent, MobxModel, MessageToast, boekStore) {
+	"use strict";
+	return UIComponent.extend("MobXExampleProject.Component", {
+		metadata: {
+			manifest: "json"
+		},
+		init: function() {
+			var oModel = new MobxModel(boekStore);
+			this.setModel(oModel);
+			this.setMobxFunctions();
+
+			// call the base component's init function
+			UIComponent.prototype.init.apply(this, arguments);
+		},
+
+		setMobxFunctions: function() {
+			//Triggered once immediatly, then afterwards everytime one of its dependencies change
+			mobx.autorun(() => {
+				if(boekStore.Boeken.length){
+					MessageToast.show("Er is een boek toegevoegd of verwijderd");
+				}
+			});
+
+			//Triggers when the function returns true, then removes itself
+			mobx.when(
+				() => boekStore.TotaalAantalVerkochteBoeken > 500,
+				() => {
+					MessageToast.show("Er zijn " + boekStore.TotaalAantalVerkochteBoeken + " boeken verkocht!!!");
+				}
+			);
+
+			//Triggered only when the observed property changes
+			mobx.reaction(
+				() => boekStore.BestSellers.length,
+				() => {
+					if(boekStore.BestSellers.length > 0){
+						MessageToast.show("Er zijn " + boekStore.BestSellers.length + " BestSeller(s) op de lijst.");
+					}
+				}
+			);
+		}
+	});
+});
diff --git a/article/controller/Main.controller.js b/article/controller/Main.controller.js
@@ -0,0 +1,48 @@
+sap.ui.define([
+	"sap/ui/core/mvc/Controller",
+	"sap/ui/model/json/JSONModel",
+	"MobXExampleProject/model/boekStore",
+	"sap/m/MessageToast"
+], function(Controller, JSONModel, boekStore, MessageToast) {
+	"use strict";
+	return Controller.extend("MobXExampleProject.controller.Main", {
+		onAddSoldBook: function(oEvt){
+			var oBook = oEvt.getSource().getBindingContext().getObject();
+			// oBook.AantalVerkocht++;
+			oBook.addSoldBook();
+		},
+
+		onRemoveSoldBook: function(oEvt){
+			var oBook = oEvt.getSource().getBindingContext().getObject();
+			oBook.removeSoldBook();
+		},
+
+		onAddBookPress: function(){
+			if (!this.oAddBookDialog) {
+                this.oAddBookDialog = sap.ui.xmlfragment("MobXExampleProject.fragments.AddBookDialog", this);
+            }
+			this.oAddBookDialog.setModel(new JSONModel({DatumUitgifte: new Date()}));
+            this.oAddBookDialog.open();
+		},
+
+		onAddBookToModel: function(oEvt){
+			var oModelData = this.oAddBookDialog.getModel().getData();
+			boekStore.addBook(oModelData);
+			oEvt.getSource().getParent().close();
+		},
+
+		onCloseDialog: function(oEvt){
+			oEvt.getSource().getParent().close();
+		},
+
+		onSave: function() {
+			boekStore.saveState();
+			MessageToast.show("State is opgeslagen");
+		},
+
+		onRecover: function() {
+			boekStore.recoverState();
+			MessageToast.show("State is hersteld");
+		}
+	});
+});
diff --git a/article/css/style.css b/article/css/style.css
@@ -0,0 +1 @@
+/* Enter your custom styles here */
diff --git a/article/fragments/AddBookDialog.fragment.xml b/article/fragments/AddBookDialog.fragment.xml
@@ -0,0 +1,20 @@
+<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
+	<Dialog title="Boek toevoegen" showHeader="true">
+		<content>
+			<VBox class="sapUiSmallMargin">
+				<Label text="Titel:"></Label>
+				<Input value="{/Naam}"></Input>
+				<Label text="Auteur:"></Label>
+				<Input value="{/Auteur}"></Input>
+				<Label text="Datum uitgifte:"></Label>
+				<DatePicker dateValue="{/DatumUitgifte}"></DatePicker>
+				<Label text="Verkocht aantal:"></Label>
+				<Input type="Number" value="{/AantalVerkocht}"></Input>
+			</VBox>
+		</content>
+		<buttons>
+			<Button text="Toevoegen" press="onAddBookToModel"></Button>
+			<Button text="Sluiten" press="onCloseDialog"></Button>
+		</buttons>
+	</Dialog>
+</core:FragmentDefinition>
diff --git a/article/i18n/i18n.properties b/article/i18n/i18n.properties
@@ -0,0 +1,3 @@
+title=Mobx voorbeeld applicatie
+appTitle = App Title
+appDescription=App Description
diff --git a/article/index.html b/article/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+
+	<head>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta charset="UTF-8">
+
+		<title>MobXExampleProject</title>
+
+		<script id="sap-ui-bootstrap"
+			src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
+			data-sap-ui-libs="sap.m"
+			data-sap-ui-theme="sap_belize"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-resourceroots='{
+				"MobXExampleProject": ""
+			}'>
+		</script>
+
+		<link rel="stylesheet" type="text/css" href="css/style.css">
+
+		<script>
+			sap.ui.getCore().attachInit(function() {
+				new sap.m.Shell({
+					app: new sap.ui.core.ComponentContainer({
+						height : "100%",
+						name : "MobXExampleProject"
+					})
+				}).placeAt("content");
+			});
+		</script>
+	</head>
+
+	<body class="sapUiBody" id="content">
+	</body>
+
+</html>
diff --git a/article/manifest.json b/article/manifest.json
@@ -0,0 +1,75 @@
+{
+	"_version": "1.7.0",
+	"sap.app": {
+		"id": "MobXExampleProject",
+		"type": "application",
+		"i18n": "i18n/i18n.properties",
+		"applicationVersion": {
+			"version": "1.0.0"
+		},
+		"title": "{{appTitle}}",
+		"description": "{{appDescription}}",
+		"sourceTemplate": {
+			"id": "ui5template.basicSAPUI5ApplicationProject",
+			"version": "1.40.12"
+		}
+	},
+
+	"sap.ui": {
+		"technology": "UI5",
+		"icons": {
+			"icon": "",
+			"favIcon": "",
+			"phone": "",
+			"phone@2": "",
+			"tablet": "",
+			"tablet@2": ""
+		},
+		"deviceTypes": {
+			"desktop": true,
+			"tablet": true,
+			"phone": true
+		},
+		"supportedThemes": [
+			"sap_hcb",
+			"sap_belize"
+
+		]
+	},
+
+	"sap.ui5": {
+		"rootView": {
+			"viewName": "MobXExampleProject.view.Main",
+			"type": "XML"
+		},
+		"dependencies": {
+			"minUI5Version": "1.30.0",
+			"libs": {
+				"sap.ui.core": {},
+				"sap.m": {},
+				"sap.ui.layout": {},
+				"sap.ushell": {},
+				"sap.collaboration": {},
+				"sap.ui.comp": {},
+				"sap.uxap": {}
+			}
+		},
+		"contentDensities": {
+			"compact": true,
+			"cozy": true
+		},
+		"models": {
+			"i18n": {
+				"type": "sap.ui.model.resource.ResourceModel",
+				"settings": {
+					"bundleName": "MobXExampleProject.i18n.i18n"
+				}
+			}
+		},
+		"resources": {
+			"css": [{
+				"uri": "css/style.css"
+			}]
+		}
+	}
+}
diff --git a/article/mobx/MobxListBinding.js b/article/mobx/MobxListBinding.js
@@ -0,0 +1,66 @@
+/* global mobx */
+sap.ui.define(["sap/ui/model/ChangeReason", "sap/ui/model/ListBinding"],
+	function(ChangeReason, ListBinding) {
+		"use strict";
+
+		return ListBinding.extend("sap.ui.mobx.MobxListBinding", {
+			constructor: function(model, path, context, sorters, filters, params) {
+				ListBinding.apply(this, arguments);
+				this._model = model;
+				this._path = path;
+				this._context = context;
+				this._sorters = sorters;
+				this._filters = filters;
+				this._params = params;
+				this._mobxDisposer = mobx.reaction(
+					function() {
+						var observableArr = model.getProperty(path, context);
+						if (observableArr && typeof observableArr.slice === 'function') {
+							return observableArr.slice();
+						}
+					},
+					this._fireChange.bind(this, {
+						reason: ChangeReason.Change
+					})
+				);
+			},
+
+			destroy: function() {
+				this._mobxDisposer();
+				return ListBinding.prototype.destroy(this, arguments);
+			},
+
+			_getObservableArray: function() {
+				return this._model.getProperty(this._path, this._context) || [];
+			},
+
+			getLength: function() {
+				return this._getObservableArray().length;
+			},
+
+			getContexts: function(startIndex, sizeLimit) {
+				if (!startIndex) {
+					startIndex = 0;
+				}
+				if (!sizeLimit) {
+					sizeLimit = this._model.iSizeLimit;
+				}
+				var validContextCount = Math.min(this._getObservableArray().length - startIndex, sizeLimit);
+				if (validContextCount < 1) {
+					return [];
+				}
+				var exclusiveEndIndex = startIndex + validContextCount;
+				var effectiveArrPath = this._model.resolve(this._path, this._context);
+				if (!(effectiveArrPath.endsWith("/"))) {
+					effectiveArrPath = effectiveArrPath + "/";
+				}
+				var contexts = [];
+				for (var i = startIndex; i < exclusiveEndIndex; i++) {
+					contexts.push(this._model.getContext(effectiveArrPath + i));
+				}
+				return contexts;
+			}
+
+		});
+
+	});
diff --git a/article/mobx/MobxModel.js b/article/mobx/MobxModel.js
@@ -0,0 +1,68 @@
+/* global mobx */
+sap.ui.define(["sap/ui/model/Model", "sap/ui/model/Context", "./MobxListBinding", "./MobxPropertyBinding", "./mobx.umd", "./mobx-utils.umd", "./mobx-state-tree.umd"],
+	function(Model, Context, MobxListBinding, MobxPropertyBinding) {
+		"use strict";
+
+		function isNil(value) {
+			return value == null;
+		}
+
+		return Model.extend("sap.ui.mobx.MobxModel", {
+			constructor: function(observable) {
+				mobx.extendObservable(this, {
+					_observable: observable || {}
+				});
+				Model.apply(this, arguments);
+			},
+			getData: function() {
+				return this._observable;
+			},
+			setData: function(observable) {
+				this._observable = observable;
+			},
+			bindProperty: function(sPath, oContext, mParameters) {
+				return new MobxPropertyBinding(this, sPath, oContext, mParameters);
+			},
+			bindList: function(sPath, oContext, aSorters, aFilters, mParameters) {
+				return new MobxListBinding(this, sPath, oContext, aSorters, aFilters, mParameters);
+			},
+			setProperty: function(sPath, value, oContext) {
+				var sResolvedPath = this.resolve(sPath, oContext);
+				if (sResolvedPath) {
+					var iLastSlash = sResolvedPath.lastIndexOf("/");
+					var sProperty = sResolvedPath.substring(iLastSlash + 1);
+					var sPathUntilProperty = sResolvedPath.substring(0, iLastSlash);
+					if (sPathUntilProperty.length === 0) {
+						sPathUntilProperty = "/";
+					}
+					if (sPathUntilProperty === "/" && sProperty.length === 0) {
+						this.setData(value);
+					} else {
+						var oObservable = this.getProperty(sPathUntilProperty);
+						oObservable[sProperty] = value;
+					}
+				}
+			},
+			getProperty: function(sPath, oContext) {
+				var sResolvedPath = this.resolve(sPath, oContext);
+				if (sResolvedPath) {
+					var aParts = sResolvedPath.substring(1).split("/");
+					var currentNode = this._observable;
+					var partsLength = aParts.length;
+					if (!(partsLength === 1 && aParts[0].length === 0)) {
+						for (var i = 0; i < partsLength && !isNil(currentNode); i++) {
+							// Onderstaande voorkomt een waarschuwing van mobx dat array indices die niet bestaan worden aangeroepen.
+							// De waarschuwing gaf aan dat je beter eerst de length van de array kunt checken, dus dat doen we hier.
+							if (mobx.isObservableArray(currentNode) && i < partsLength && Number(aParts[i]) + 1 > currentNode.length) {
+								currentNode = undefined;
+								break;
+							}
+							currentNode = currentNode[aParts[i]];
+						}
+					}
+					return currentNode;
+				}
+			}
+		});
+
+	});