Week 1

webapp/controller/Main.controller.js

@@ -0,0 +1,148 @@
+sap.ui.define([
+	"sap/ui/Device",
+	"sap/ui/core/mvc/Controller",
+	"sap/ui/model/Filter",
+	"sap/ui/model/FilterOperator",
+	"sap/ui/model/json/JSONModel"
+], function(Device, Controller, Filter, FilterOperator, JSONModel) {
+	"use strict";
+
+	return Controller.extend("ui5.challenge.controller.Main", {
+
+		onInit: function() {
+			this.aSearchFilters = [];
+			this.aTabFilters = [];
+
+			this.getView().setModel(new JSONModel({
+				isMobile: Device.browser.mobile,
+				filterText: undefined
+			}), "view");
+		},
+
+		/**
+		 * Adds a new todo item to the bottom of the list.
+		 */
+		addTodo: function() {
+			var oModel = this.getView().getModel();
+			var aTodos = oModel.getProperty("/todos").map(function (oTodo) { return Object.assign({}, oTodo); });
+
+			aTodos.push({
+				title: oModel.getProperty("/newTodo"),
+				completed: false
+			});
+
+			oModel.setProperty("/todos", aTodos);
+			oModel.setProperty("/newTodo", "");
+		},
+
+		/**
+		 * Removes all completed items from the todo list.
+		 */
+		clearCompleted: function() {
+			var oModel = this.getView().getModel();
+			var aTodos = oModel.getProperty("/todos").map(function (oTodo) { return Object.assign({}, oTodo); });
+
+			var i = aTodos.length;
+			while (i--) {
+				var oTodo = aTodos[i];
+				if (oTodo.completed) {
+					aTodos.splice(i, 1);
+				}
+			}
+
+			oModel.setProperty("/todos", aTodos);
+		},
+
+		/**
+		 * Updates the number of items not yet completed
+		 */
+		updateItemsLeftCount: function() {
+			var oModel = this.getView().getModel();
+			var aTodos = oModel.getProperty("/todos") || [];
+
+			var iItemsLeft = aTodos.filter(function(oTodo) {
+				return oTodo.completed !== true;
+			}).length;
+
+			oModel.setProperty("/itemsLeftCount", iItemsLeft);
+		},
+
+		/**
+		 * Trigger search for specific items. The removal of items is disable as long as the search is used.
+		 * @param {sap.ui.base.Event} oEvent Input changed event
+		 */
+		onSearch: function(oEvent) {
+			var oModel = this.getView().getModel();
+
+			// First reset current filters
+			this.aSearchFilters = [];
+
+			// add filter for search
+			this.sSearchQuery = oEvent.getSource().getValue();
+			if (this.sSearchQuery && this.sSearchQuery.length > 0) {
+				oModel.setProperty("/itemsRemovable", false);
+				var filter = new Filter("title", FilterOperator.Contains, this.sSearchQuery);
+				this.aSearchFilters.push(filter);
+			} else {
+				oModel.setProperty("/itemsRemovable", true);
+			}
+
+			this._applyListFilters();
+		},
+
+		onFilter: function(oEvent) {
+			// First reset current filters
+			this.aTabFilters = [];
+
+			// add filter for search
+			this.sFilterKey = oEvent.getParameter("item").getKey();
+
+			// eslint-disable-line default-case
+			switch (this.sFilterKey) {
+				case "active":
+					this.aTabFilters.push(new Filter("completed", FilterOperator.EQ, false));
+					break;
+				case "completed":
+					this.aTabFilters.push(new Filter("completed", FilterOperator.EQ, true));
+					break;
+				case "all":
+				default:
+					// Don't use any filter
+			}
+
+			this._applyListFilters();
+		},
+
+		_applyListFilters: function() {
+			var oList = this.byId("todoList");
+			var oBinding = oList.getBinding("items");
+
+			oBinding.filter(this.aSearchFilters.concat(this.aTabFilters), "todos");
+
+			var sI18nKey;
+			if (this.sFilterKey && this.sFilterKey !== "all") {
+				if (this.sFilterKey === "active") {
+					sI18nKey = "ACTIVE_ITEMS";
+				} else {
+					// completed items: sFilterKey = "completed"
+					sI18nKey = "COMPLETED_ITEMS";
+				}
+				if (this.sSearchQuery) {
+					sI18nKey += "_CONTAINING";
+				}
+			} else if (this.sSearchQuery) {
+				sI18nKey = "ITEMS_CONTAINING";
+			}
+
+			var sFilterText;
+			if (sI18nKey) {
+				var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
+				sFilterText = oResourceBundle.getText(sI18nKey, [this.sSearchQuery]);
+			}
+
+			this.getView().getModel("view").setProperty("/filterText", sFilterText);
+		},
+
+	});
+
+});

webapp/css/styles.css

@@ -0,0 +1,4 @@
+/* Strikes through the completed items */
+li[data-todo-item-completed="true"] span {
+	text-decoration: line-through;
+}

webapp/i18n/i18n.properties

@@ -0,0 +1,11 @@
+TITLE=ui5-challenge
+INPUT_PLACEHOLDER=What needs to be done?
+CLEAR_COMPLETED=Clear completed
+ACTIVE_ITEMS=Active items
+ACTIVE_ITEMS_CONTAINING=Active items containing "{0}"
+COMPLETED_ITEMS=Completed items
+COMPLETED_ITEMS_CONTAINING=Completed items containing "{0}"
+ITEMS_CONTAINING=Items containing "{0}"
+LABEL_ALL=All
+LABEL_ACTIVE=Active
+LABEL_COMPLETED=Completed

webapp/i18n/i18n_en.properties

@@ -0,0 +1,11 @@
+TITLE=ui5-challenge
+INPUT_PLACEHOLDER=What needs to be done?
+CLEAR_COMPLETED=Clear completed
+ACTIVE_ITEMS=Active items
+ACTIVE_ITEMS_CONTAINING=Active items containing "{0}"
+COMPLETED_ITEMS=Completed items
+COMPLETED_ITEMS_CONTAINING=Completed items containing "{0}"
+ITEMS_CONTAINING=Items containing "{0}"
+LABEL_ALL=All
+LABEL_ACTIVE=Active
+LABEL_COMPLETED=Completed

webapp/index.html

@@ -1,28 +1,20 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <title>title</title>
+    <title>ui5-challenge</title>
 
-    <script
-        id="sap-ui-bootstrap"
-        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
-        data-sap-ui-theme="sap_horizon"
-        data-sap-ui-resourceroots='{
+    <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
+        data-sap-ui-theme="sap_horizon" data-sap-ui-resourceroots='{
             "ui5.challenge": "./"
-        }'
-        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
-        data-sap-ui-compatVersion="edge"
-        data-sap-ui-async="true"
-        data-sap-ui-frameOptions="trusted"
-    ></script>
+        }' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatVersion="edge"
+        data-sap-ui-async="true" data-sap-ui-frameOptions="trusted"></script>
 </head>
+
 <body class="sapUiBody sapUiSizeCompact" id="content">
-    <div
-        data-sap-ui-component
-        data-name="ui5.challenge"
-        data-id="container"
-        data-settings='{"id" : "ui5.challenge"}'
-        data-handle-validation="true"
-    ></div>
+ <div data-sap-ui-component data-name="ui5.challenge" data-id="container" data-settings='{"id" : "ui5.challenge"}'
+        data-handle-validation="true"></div>
+  <!--   <div data-sap-ui-component data-name="ui5.challenge" data-id="container" data-settings='{"id" : "todo"}'></div> -->
 </body>
+
 </html>

webapp/manifest.json

@@ -47,8 +47,22 @@
         "controlId": "app",
         "clearControlAggregation": false
       },
-      "routes": [],
-      "targets": {}
+      "routes": [
+        {
+          "pattern": "",
+          "name": "main",
+          "target": [
+            "main"
+          ]
+        }
+      ],
+      "targets": {
+        "main": {
+          "viewName": "Main",
+          "viewId": "main",
+          "viewLevel": 1
+        }
+      }
     },
     "rootView": {
       "viewName": "ui5.challenge.view.App",
@@ -62,7 +76,18 @@
         "settings": {
           "bundleName": "ui5.challenge.i18n.i18n"
         }
-      }
-    }
+      },
+			"": {
+				"type": "sap.ui.model.json.JSONModel",
+				"uri": "model/todoitems.json"
+			}
+		},
+		"resources": {
+			"css": [
+				{
+					"uri": "css/styles.css"
+				}
+			]
+		}
   }
 }

webapp/model/todoitems.json

@@ -0,0 +1,26 @@
+{
+	"newTodo": "",
+	"todos": [{
+			"title": "June 8th, 2022 (10:00am CEST) – Start of the challenge",
+			"completed": true
+		},
+		{
+			"title": "June 15th, 2022 (10:00am CEST) – Uploading of new test file week2.test.js",
+			"completed": false
+		},
+		{
+			"title": "June 22nd, 2022 (10:00am CEST) – Uploading of new test file week3.test.js",
+			"completed": false
+		},
+		{
+			"title": "June 29th, 2022 (10:00am CEST) – Uploading of new test file week4.test.js",
+			"completed": false
+		},
+		{
+			"title": "July 6th, 2022 (10:00am CEST) – End of the challenge",
+			"completed": false
+		}
+	],
+	"itemsRemovable": true,
+	"completedCount": 1
+}

webapp/util/Helper.js

@@ -0,0 +1,9 @@
+sap.ui.define(["require"], function(require) {
+	"use strict";
+	return {
+		resolvePath: function(sPath) {
+			// Relative to application root
+			return require.toUrl("../") + sPath;
+		}
+	};
+});