refactor(Dashboard Section description): updates the database structure for the dashboard information to add information about the description of a section

application/libraries/dashboard/DashboardLib.php

@@ -53,7 +53,6 @@ class DashboardLib
 		$userconfig = $this->getUserConfig($dashboard_id, $uid);
 		
 		$mergedconfig = array_replace_recursive($defaultconfig, $userconfig);
-		
 		return $mergedconfig;
 	}
 	
@@ -209,18 +208,19 @@ class DashboardLib
 		if (!isset($widgets[$section]) || !is_array($widgets[$section]))
 		{
 			$widgets[$section] = array();
+			$widgets[$section]["widgets"] = array();
 		}
 		
-		$widgets[$section][$widgetid] = $widget;
+		$widgets[$section]["widgets"][$widgetid] = $widget;
 	}
 	
 	public function removeWidgetFromWidgets(&$widgets, $section, $widgetid)
 	{
 		$section = ($section !== null) ? $section : self::SECTION_IF_FUNKTION_KURZBZ_IS_NULL;
-		if (isset($widgets[$section]) && isset($widgets[$section][$widgetid]))
+		if (isset($widgets[$section]["widgets"]) && isset($widgets[$section]["widgets"][$widgetid]))
 		{
-			unset($widgets[$section][$widgetid]);
-			if(empty($widgets[$section]) && $section !== self::USEROVERRIDE_SECTION) {
+			unset($widgets[$section]["widgets"][$widgetid]);
+			if(empty($widgets[$section]["widgets"]) && $section !== self::USEROVERRIDE_SECTION) {
 				unset($widgets[$section]);
 			}
 			return true;

public/js/components/Dashboard/Dashboard.js

@@ -162,15 +162,16 @@ export default {
 			for (var name in res.data.retval.widgets) {
 				let widgets = [];
 				let remove = [];
-				for (var wid in res.data.retval.widgets[name]) {
-					res.data.retval.widgets[name][wid].id = wid;
-					if (res.data.retval.widgets[name][wid].custom || res.data.retval.widgets[name][wid].preset)
-						widgets.push(res.data.retval.widgets[name][wid]);
+				for (var wid in res.data.retval.widgets[name].widgets) {
+					res.data.retval.widgets[name].widgets[wid].id = wid;
+					if (res.data.retval.widgets[name].widgets[wid].custom || res.data.retval.widgets[name].widgets[wid].preset)
+						widgets.push(res.data.retval.widgets[name].widgets[wid]);
 					else
 						remove.push(wid);
 				}
 				this.sections.push({
 					name: name,
+					description:res.data.retval.widgets[name].description,
 					widgets: widgets
 				});
 				remove.forEach(wid => this.widgetRemove(name, wid));
@@ -189,7 +190,7 @@ export default {
 			{{ $p.t('global/personalGreeting', [ viewDataInternal?.name ]) }}
 			<button style="margin-left: 8px;" class="btn" @click="editMode = !editMode"><i class="fa-solid fa-gear"></i></button>
 		</h3>
-		<dashboard-section v-for="(section, index) in sections" :key="section.name" :seperator="index" :name="section.name" :widgets="section.widgets" @widgetAdd="widgetAdd" @widgetUpdate="widgetUpdate" @widgetRemove="widgetRemove"></dashboard-section>
+		<dashboard-section v-for="(section, index) in sections" :key="section.name" :seperator="index" :name="section.name" :description="section.description" :widgets="section.widgets" @widgetAdd="widgetAdd" @widgetUpdate="widgetUpdate" @widgetRemove="widgetRemove"></dashboard-section>
 		<dashboard-widget-picker ref="widgetpicker" :widgets="widgets"></dashboard-widget-picker>
 	</div>`
 }

public/js/components/Dashboard/Section.js

@@ -28,7 +28,8 @@ export default {
 	},
 	props: [
 		"name",
-		"widgets"
+		"widgets",
+		"description"
 	],
 	emits: [
 		"widgetAdd",
@@ -85,7 +86,7 @@ export default {
 				if(!item?.widgetid && item?.id){
 					item.widgetid = item.id;
 				}
-				return { ...item, reorder: false, ...(item.place[this.gridWidth] || { reorder: true, ...{ x: 0, y: 0, w: 1, h: 1 } })};
+				return { ...item, ...(item.place[this.gridWidth] || { x: 0, y: 0, w: 1, h: 1 } )};
 			});
 			return placedItems;
 			
@@ -94,7 +95,7 @@ export default {
 	},
 	methods: {
 		showSectionInformation(){
-			SectionModal.popup(`this is the information for the section ${name}`);
+			SectionModal.popup(this.description);
 		},
 		handleConfigOpened() {
 			this.configOpened = true
@@ -188,11 +189,11 @@ export default {
 		});
 	},
 	template: `
-	<h4 v-if="items.length>0 && editMode" class=" mb-0">
+	<h4 v-if="items.length>0 && editMode" >
 		<i @click="showSectionInformation(name)" class="fa-solid fa-circle-info section-info" ></i>
 		{{name}}:
 	</h4>
-	<div class="dashboard-section position-relative pb-3 border-bottom" ref="container" :style="getSectionStyle">
+	<div class="dashboard-section position-relative pb-3 border-1" ref="container" :style="getSectionStyle">
 		<drop-grid v-model:cols="gridWidth" :items="items" :itemsSetup="computedWidgetsSetup" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @draggedItem="draggedItem=$event" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item">
 				<div v-if="item.placeholder" class="empty-tile-hover" @click="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 })"></div>
@@ -203,7 +204,7 @@ export default {
 					:widgetID="item.id"
 					:width="item.w"
 					:height="item.h"
-					:item_data="{config:item.config, custom:item.custom, h:item.h, w:item.w,id:item.id,reorder:item.reorder,place:item.place,widget:item.widget,widgetid:item.widgetid,x:item.x,y:item.y}"
+					:item_data="{config:item.config, custom:item.custom, h:item.h, w:item.w,id:item.id,place:item.place,widget:item.widget,widgetid:item.widgetid,x:item.x,y:item.y}"
 					:loading="item.loading"
 					:config="item.config"
 					:custom="item.custom"

public/js/components/Drop/Grid.js

@@ -63,14 +63,12 @@ export default {
 		items_hashmap() {
 			let items = {};
 			this.items.forEach(item => {
-				if (this.reorderedItems.length > 0){
-					if(item.reorder){
+				if (this.reorderedItems.length > 0 && this.needsReordering(item)){
 						let rearrangedPosition = this.reorderedItems.filter(widget => widget.data.widgetid == item.widgetid)?.pop();
 						if (rearrangedPosition) {			
 							item.x = rearrangedPosition.x;
 							item.y = rearrangedPosition.y;
 						}
-					}
 				}
 				items[`x${item.x}y${item.y}`] = item;
 			});	
@@ -143,7 +141,6 @@ export default {
 						y: item.y,
 						w: item.w,
 						h: item.h,
-						reorder: item.reorder,
 						weight: item.weight || 0,
 						data: item
 					}
@@ -246,7 +243,12 @@ export default {
 		}
 	},
 	methods: {
-		
+		needsReordering(item){
+			if (!item?.data?.place[this.cols]){
+				return true;
+			}
+			return false;
+		},
 		toggleDraggedItemOverlay(condition){
 			if(!this.draggedNode)
 				return;
@@ -267,20 +269,23 @@ export default {
 			this.grid = new GridLogic(this.cols);
 			const result = [];
 			let sortedItems = [...items].sort((a, b) => {
-				if (a.reorder){
+				if(this.needsReordering(a) && this.needsReordering(b)){
+					return 0;
+				}
+				else if(this.needsReordering(a)){
 					return 999;
 				}
-				if (b.reorder){
+				else if(this.needsReordering(b)){
 					return -999;
 				}
+				
 				return a.weight > b.weight;
 			}); 
 			let reorderedItems = [];
 			sortedItems.forEach(item => {
 				let freeSlots = this.grid.getFreeSlots();
 				
-				if(item.reorder){
-					item.reorder=true;
+				if(this.needsReordering(item)){
 					let firstFreeSlot = freeSlots.shift();
 					if (!firstFreeSlot) {
 						item.x = 0;