From ed2a4679264d2c89f40af5608a15e34aa4b23a2d Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 12 May 2025 13:51:20 +0200
Subject: [PATCH] refactor(Dashboard additional row): changes the UI and
 behavior to add an additional row to the grid

---
 public/css/components/dashboard.css       | 16 +++++++++
 public/js/components/Dashboard/Item.js    |  3 +-
 public/js/components/Dashboard/Section.js |  4 ++-
 public/js/components/Drop/Grid.js         | 41 ++++++++++++-----------
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index f48a25418..8770c1e78 100644
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -18,6 +18,22 @@
 	position:relative;
 }
 
+.dashboard-section > .newGridRow{
+	position:absolute;
+	width:20px;
+	height:20px;
+	padding:0;
+	bottom:0;
+	left:50%;
+	transform:translate(-50%, 50%);
+	background-color:white;
+}
+
+.newGridRow:hover {
+	color:white;
+	background-color:#6c757d;
+}
+
 .empty-tile-hover:hover {
 		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-500 -500 1448 1512"><path fill="rgb(211, 211, 211)" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>');
 }
diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index beaca64f0..68a92e701 100644
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -42,7 +42,8 @@ export default {
 		"place",
 		"setup",
 		"dragstate",
-		"resizeOverlay"
+		"resizeOverlay",
+		"additionalRow"
 	],
 	computed: {
 		maxHeight(){
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index fb5caa965..07e636cf5 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -41,6 +41,7 @@ export default {
 			gridWidth: 1,
 			gridHeight: null,
 			draggedItem:null,
+			additionalRow:false,
 		}
 	},
 	provide() {
@@ -214,7 +215,8 @@ export default {
 		{{sectionNameTranslation()}}:
 	</h4>
 	<div class="dashboard-section position-relative pb-3 border-bottom" 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" >
+		<button v-if="!additionalRow && editModeIsActive" @click="additionalRow=true" class="btn btn-outline-secondary rounded-circle newGridRow d-flex justify-content-center align-items-center">+</button>
+		<drop-grid v-model:cols="gridWidth" v-model:additionalRow="additionalRow" :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>
 				<dashboard-item 
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index 54907703b..9be07ca15 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -26,6 +26,10 @@ export default {
 			type: Number,
 			default: 0
 		},
+		additionalRow:{
+			type: Boolean,
+			default: false,
+		}
 	},
 	emits: [
 		"rearrangeItems",
@@ -48,7 +52,6 @@ export default {
 			draggedOffset: [0,0],
 			draggedItem: null,
 			draggedNode: null,
-			additionalRow: null,
 			reorderedItems:[],
 			clonedWidget:null,
 		}
@@ -60,6 +63,14 @@ export default {
 		},
 	},
 	computed: {
+		additionalRowComputed: {
+			get() {
+				return this.additionalRow;
+			},
+			set(value) {
+				this.$emit('update:additionalRow', value);
+			}
+		},
 		items_hashmap() {
 			let items = {};
 			this.items.forEach(item => {
@@ -120,6 +131,11 @@ export default {
 			if ((this.mode == MODE_MOVE || this.mode == MODE_RESIZE) && this.dragGrid){
 				return this.dragGrid.h;
 			}
+			if (this.mode == MODE_IDLE) {
+				if (this.additionalRowComputed) {
+					return this.grid ? (this.grid.h+1) : 1;
+				}
+			}
 			return this.grid ? this.grid.h : 1;
 		},
 		gridStyle() {
@@ -350,13 +366,8 @@ export default {
 			if (this.mode == MODE_IDLE) {
 				this.x = -1;
 				this.y = -1;
-				if (this.additionalRow !== null) {
-					let gridHeight = this.grid.getMaxY() + 1;
-					if(this.grid.h>gridHeight){
-						this.grid.h = gridHeight;
-					}
-					this.additionalRow = null;
-				}
+				this.additionalRowComputed = false;
+				
 			}
 		},
 		updateCursor(evt) {
@@ -380,18 +391,6 @@ export default {
 			if (this.x == gridX && this.y == gridY)
 				return false;
 			
-			if (this.mode == MODE_IDLE) {
-				if (this.additionalRow === null && this.y == this.rows-1 && gridY == this.rows) {
-					this.additionalRow = this.grid.h;
-					this.grid.h += 1;
-				} else if (this.additionalRow !== null && gridY != this.rows - 1) {
-					let gridHeight = this.grid.getMaxY() + 1;
-					if(this.grid.h > gridHeight){
-						this.grid.h = gridHeight;
-					}
-					this.additionalRow = null;
-				}
-			}
 			this.x = gridX;
 			this.y = gridY;
 
@@ -482,6 +481,7 @@ export default {
 			}
 		},
 		dragCancel() {
+			this.additionalRowComputed = false;
 			this.toggleDraggedItemOverlay(false);
 			this.mode = MODE_IDLE;
 			this.positionUpdates = null;
@@ -531,6 +531,7 @@ export default {
 			return updated;
 		},
 		emptyTileClicked() {
+			this.additionalRowComputed = false;
 			this.$emit('newItem', this.x, this.y);
 		},
 		updateCursorOnMouseMove(evt){