Merge remote-tracking branch 'origin/feature-24647/Konfigurierbare_Dashboards_api' into feature-24647/Konfigurierbare_Dashboards_widgets

application/controllers/dashboard/Widget.php

@@ -37,37 +37,43 @@ class Widget extends Auth_Controller
 		);
 		
 		$this->load->library('dashboard/DashboardLib', null, 'DashboardLib');
+		$this->load->model('dashboard/Dashboard_Widget_model', 'DashboardWidgetModel');
 	}
 	
 	public function index() 
 	{
 		$widget_id = $this->input->get('id');
 
-		foreach ($this->demoData as $widget) {
-			if ($widget["id"] == $widget_id)
-				return $this->outputJsonSuccess($widget);
-		}
-		return $this->outputJsonSuccess([
-			"id" => 0,
-			"name" => 'Widget Not Found',
-			"file" => 'DashboardWidget/Default.js',
-			"arguments" => [
-				"className" => 'alert-danger',
-				"title" => 'Widget Not Found',
-				"msg" => 'The widget with the id ' . $widget_id . ' could not be found'
-			],
-			"size" => [
-				"width" => 1,
-				"height" => 1
-			]
-		]);
+		$widget = $this->DashboardWidgetModel->load($widget_id);
+
+		if (isError($widget) || !getData($widget))
+			return $this->outputJsonSuccess([
+				"widget_id" => 0,
+				"widget_kurzbz" => "notfound",
+				"arguments" => json_encode([
+					"className" => 'alert-danger',
+					"title" => 'Widget Not Found',
+					"msg" => 'The widget with the id ' . $widget_id . ' could not be found'
+				]),
+				"setup" => json_encode([
+					"name" => 'Widget Not Found',
+					"file" => 'DashboardWidget/Default.js',
+					"width" => 1,
+					"height" => 1
+				])
+			]);
+		return $this->outputJsonSuccess(current(getData($widget)));
 	}
 	
 	public function getWidgetsForDashboard() 
 	{
 		$db = $this->input->get('db');
+		$result = $this->DashboardWidgetModel->getAllForDashboard($db);
 
-		$this->outputJsonSuccess($this->demoData);
+		if (isError($result))
+			return $this->outputJsonError(getError($result));
+
+		$this->outputJsonSuccess(getData($result));
 	}
 	
 	public function addWidgetToUserOverride() 

application/models/dashboard/Dashboard_Widget_model.php

@@ -0,0 +1,24 @@
+<?php
+class Dashboard_Widget_model extends DB_Model
+{
+
+	/**
+	 * Constructor
+	 */
+	public function __construct()
+	{
+		parent::__construct();
+		$this->dbTable = 'dashboard.tbl_widget';
+		$this->pk = 'widget_id';
+	}
+
+	public function getAllForDashboard($db)
+	{
+		$this->addSelect($this->dbTable . '.*');
+		$this->addJoin('dashboard.tbl_dashboard_widget', 'widget_id');
+		$this->addJoin('dashboard.tbl_dashboard', 'dashboard_id');
+
+		return $this->loadWhere(['dashboard_kurzbz' => $db]);
+	}
+
+}

public/js/components/Dashboard/Dashboard.js

@@ -1,5 +1,6 @@
 import DashboardSection from "./Section.js";
 import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js";
+import ObjectUtils from "../../composables/ObjectUtils.js";
 
 export default {
 	props: [
@@ -27,6 +28,10 @@ export default {
 					db: this.dashboard
 				}}).then(res => {
 					//console.log(res.data.retval);
+					res.data.retval.forEach(widget => {
+						widget.arguments = JSON.parse(widget.arguments);
+						widget.setup = JSON.parse(widget.setup);
+					});
 					this.widgets = res.data.retval;
 				}).catch(err => console.error('ERROR:', err));
 			}
@@ -48,7 +53,6 @@ export default {
 					newId = i;
 					break;
 				}
-				console.log(newId);
 				this.tmpCreate.widget.id = newId;
 				this.sections.forEach(section => {
 					if (section.name == this.tmpCreate.section_name)
@@ -69,7 +73,7 @@ export default {
 					if (this.sections[i].name == section_name) {
 						for (var wid in this.sections[i].widgets) {
 							if (this.sections[i].widgets[wid].id == k) {
-								payload[k] = {...this.sections[i].widgets[wid], ...payload[k]};
+								payload[k] = ObjectUtils.mergeDeep(this.sections[i].widgets[wid], payload[k]);
 								break;
 							}
 						}
@@ -78,7 +82,7 @@ export default {
 				}
 				payload[k].widgetid = k;
 			}
-			return axios.post(this.apiurl + '/Config/addWidgetsToUserOverride', {
+			axios.post(this.apiurl + '/Config/addWidgetsToUserOverride', {
 				db: this.dashboard,
 				uid: 'ma0168',
 				funktion_kurzbz: section_name,
@@ -151,12 +155,12 @@ export default {
 					</div>
 					<div class="modal-body">
 						<div v-if="listReady" class="row">
-							<div v-for="widget in widgets" :v-key="widget.id" class="col">
-								<div class="card h-100" @click="widgetCreate(widget.id)">
-									<img class="card-img-top" :src="widget.icon" :alt="'pictogram for ' + widget.name">
+							<div v-for="widget in widgets" :v-key="widget.widget_id" class="col">
+								<div class="card h-100" @click="widgetCreate(widget.widget_id)">
+									<img class="card-img-top" :src="widget.setup.icon" :alt="'pictogram for ' + (widget.setup.name || widget.widget_kurzbz)">
 									<div class="card-body">
-										<h5 class="card-title">{{ widget.name }}</h5>
-										<p class="card-text">{{ widget.description }}</p>
+										<h5 class="card-title">{{ widget.setup.name || widget.widget_kurzbz }}</h5>
+										<p class="card-text">{{ widget.beschreibung }}</p>
 									</div>
 								</div>
 							</div>

public/js/components/Dashboard/Item.js

@@ -31,7 +31,7 @@ export default {
 		isResizeable() {
 			if (!this.widget)
 				return false;
-			return this.widget.size.width.max || this.widget.size.height.max;
+			return this.widget.setup.width.max || this.widget.setup.height.max;
 		},
 		ready() {
 			return this.component && this.arguments !== null
@@ -88,9 +88,9 @@ export default {
 	},
 	async created() {
 		this.widget = await CachedWidgetLoader.loadWidget(this.id);
-		let component = (await import('../' + this.widget.file)).default;
-		this.$options.components['widget' + this.widget.id] = component;
-		this.component = 'widget' + this.widget.id;
+		let component = (await import('../' + this.widget.setup.file)).default;
+		this.$options.components['widget' + this.widget.widget_id] = component;
+		this.component = 'widget' + this.widget.widget_id;
 		this.arguments = {...this.widget.arguments, ...this.config};
 		this.tmpConfig = {...this.arguments};
 	},
@@ -100,7 +100,7 @@ export default {
 	template: `<div v-if="!hidden || editMode" :class="'dashboard-item card overflow-hidden ' + (arguments ? arguments.className : '')" @mousedown="mouseDown($event)" @dragstart="startDrag($event)" :draggable="!!editMode">
 		<div v-if="editMode && widget" class="card-header d-flex">
 			<span ref="dragHandle" class="col-auto pe-3"><i class="fa-solid fa-grip-vertical"></i></span>
-			<span class="col">{{ widget.name }}</span>
+			<span class="col">{{ widget.setup.name }}</span>
 			<a v-if="hasConfig" class="col-auto ps-1" href="#" @click.prevent="openConfig"><i class="fa-solid fa-gear"></i></a>
 			<a v-if="custom" class="col-auto ps-1" href="#" @click.prevent="$emit('remove')">
 				<i class="fa-solid fa-trash"></i>
@@ -117,7 +117,7 @@ export default {
 			<div class="modal-dialog">
 				<div class="modal-content">
 					<div class="modal-header">
-						<h5 v-if="widget" class="modal-title">Config for {{ widget.name }}</h5>
+						<h5 v-if="widget" class="modal-title">Config for {{ widget.setup.name }}</h5>
 						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 					</div>
 					<div class="modal-body">

public/js/components/Dashboard/Section.js

@@ -263,7 +263,7 @@ export default {
 				id = evt.dataTransfer.getData('itemID');
 				let widget = CachedWidgetLoader.getWidget(this.items[id].widget);
 				if (widget) {
-					let minmaxW = widget.size.width;
+					let minmaxW = widget.setup.width;
 					if (minmaxW.max)
 						minmaxW.min = minmaxW.min || 1;
 					else
@@ -273,7 +273,7 @@ export default {
 					if (w > minmaxW.max)
 						w = minmaxW.max;
 					
-					let minmaxH = widget.size.height;
+					let minmaxH = widget.setup.height;
 					if (minmaxH.max)
 						minmaxH.min = minmaxH.min || 1;
 					else

public/js/components/DashboardWidget/Default.js

@@ -4,10 +4,15 @@ export default {
 	mixins: [
 		AbstractWidget
 	],
+	computed: {
+		css() {
+			return ['dashboard-widget-default', this.config.css];
+		}
+	},
 	created() {
 		this.$emit('setConfig', false)
 	},
-	template: `<div class="dashboard-widget-default">
+	template: `<div :class="css">
 	    <h5 class="card-title">{{ config.title }}</h5>
 	    <p class="card-text">{{ config.msg }}</p>
 	</div>`

public/js/composables/Dashboard/CachedWidgetLoader.js

@@ -16,6 +16,8 @@ export default {
 
 		__widgetsStarted[id] = new Promise((resolve, reject) => {
 			axios.get(__path, {params:{id}}).then(res => {
+				res.data.retval.arguments = JSON.parse(res.data.retval.arguments);
+				res.data.retval.setup = JSON.parse(res.data.retval.setup);
 				__widgets[id] = res.data.retval;
 				__widgetsStarted[id] = undefined;
 				resolve(__widgets[id]);

public/js/composables/ObjectUtils.js

@@ -0,0 +1,31 @@
+export default {
+	/**
+	* Performs a deep merge of objects and returns new object. Does not modify
+	* objects (immutable) and merges arrays via concatenation.
+	*
+	* @param {...object} objects - Objects to merge
+	* @returns {object} New object with merged key/values
+	*/
+	mergeDeep(...objects) {
+		const isObject = obj => obj && typeof obj === 'object';
+		
+		return objects.reduce((prev, obj) => {
+			Object.keys(obj).forEach(key => {
+				const pVal = prev[key];
+				const oVal = obj[key];
+				
+				if (Array.isArray(pVal) && Array.isArray(oVal)) {
+					prev[key] = pVal.concat(...oVal);
+				}
+				else if (isObject(pVal) && isObject(oVal)) {
+					prev[key] = this.mergeDeep(pVal, oVal);
+				}
+				else {
+					prev[key] = oVal;
+				}
+			});
+			
+			return prev;
+		}, {});
+	}
+}

system/dashboard/dbupdate_dashboard.php

@@ -163,7 +163,9 @@ ALTER TABLE dashboard.tbl_dashboard_widget OWNER TO fhcomplete;
 CREATE TABLE dashboard.tbl_widget (
     widget_id integer NOT NULL,
     widget_kurzbz character varying(32) NOT NULL,
-    beschreibung text
+    beschreibung text,
+    arguments jsonb NOT NULL,
+    setup jsonb NOT NULL
 );