From 2354746d4f224283c2ba6531577876aa8eca9b42 Mon Sep 17 00:00:00 2001
From: chfhtw <christopher.hacker@technikum-wien.at>
Date: Mon, 30 Mar 2026 13:34:34 +0200
Subject: [PATCH] more cleanup of dropgrid code & cleanup of dashboard item
 code

---
 public/js/components/Dashboard/Item.js | 230 ++++++++++++++-----------
 public/js/components/Drop/Grid.js      |  29 ++--
 public/js/components/Drop/Grid/Item.js |   2 +-
 3 files changed, 139 insertions(+), 122 deletions(-)

diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index 79e61293d..956ff5ddf 100644
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -11,18 +11,15 @@ export default {
 	data: () => ({
 		component: "",
 		arguments: null,
-		target: false,
 		widget: null,
 		tmpConfig: {},
 		isLoading: false,
 		hasConfig: false,
-		sharedData: null,
+		sharedData: null
 	}),
 	emits: [
 		"change",
 		"remove",
-		"dragstart",
-		"resizestart",
 		"configOpened",
 		"configClosed",
 		"pinItem",
@@ -42,29 +39,25 @@ export default {
 		"place",
 		"setup",
 		"dragstate",
-		"resizeOverlay",
-		"additionalRow"
+		"resizeOverlay"
 	],
 	computed: {
-		maxHeight(){
+		maxHeight() {
+			if (Object.prototype.toString.call(this.setup?.height) == "[object Number]") {
+				return this.setup?.height;
+			}
 			return this.setup?.height?.max;
 		},
-		maxWidth(){
-			if (Object.prototype.toString.call(this.setup?.width) == "[object Number]"){
+		maxWidth() {
+			if (Object.prototype.toString.call(this.setup?.width) == "[object Number]") {
 				return this.setup?.width;
 			}
 			return this.setup?.width?.max;
 		},
-		minHeight() {
-			return this.setup?.height?.min;
+		isResizeable() {
+			return this.maxWidth > 1 || this.maxHeight > 1;
 		},
-		minWidth() {
-			return this.setup?.width?.min;
-		},
-		isResizeable(){
-			return this.maxWidth >1 || this.maxHeight >1;
-		},
-		isPinned(){
+		isPinned() {
 			return this.place?.pinned ? true : false;
 		},
 		ready() {
@@ -80,16 +73,16 @@ export default {
 		}
 	},
 	methods: {
-		unpin(){
+		unpin() {
 			// Unpinning is only possible in edit mode
-			if(!this.editMode)
+			if (!this.editMode)
 				return;
 			let result = { item: this.item_data, x: this.item_data.x, y: this.item_data.y };
 			this.$emit('unPinItem', [result]);
 		},
-		pinItem(){
-			let result = { item: this.item_data, x: this.item_data.x, y: this.item_data.y};
-			this.$emit('pinItem',[result]);
+		pinItem() {
+			let result = { item: this.item_data, x: this.item_data.x, y: this.item_data.y };
+			this.$emit('pinItem', [result]);
 		},
 		getWidgetC4Link(widget) {
 			return (FHC_JS_DATA_STORAGE_OBJECT.app_root +
@@ -101,22 +94,6 @@ export default {
 		handleHideBsModal() {
 			this.$emit('configClosed')
 		},
-		mouseDown(e) {
-			this.target = e.target;
-		},
-		startDrag(e) {
-			if (this.$refs.dragHandle.contains(this.target)) {
-				this.$emit("dragstart", e);
-			} else if (
-				this.isResizeable &&
-				this.$refs.resizeHandle.contains(this.target)
-			) {
-				if (this.isResizeable) this.$emit("resizestart", e);
-				else e.preventDefault();
-			} else {
-				e.preventDefault();
-			}
-		},
 		openConfig() {
 			this.tmpConfig = { ...this.arguments };
 			this.$refs.config.show();
@@ -136,11 +113,11 @@ export default {
 		sendChangeConfig(config) {
 			for (var k in config) {
 				if (this.widget.arguments[k] == config[k]) {
-				delete config[k];
+					delete config[k];
 				}
 			}
 			this.$emit("change", config);
-		},
+		}
 	},
 	watch: {
 		config() {
@@ -170,75 +147,118 @@ export default {
 			<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 		</div>
 	</div>
-	<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="{'hiddenWidget':hidden, 'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}">
-	<div v-show="!dragstate" class="h-100 card border-0">
-		<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
-			<Transition>
-				<span type="button" v-if="editMode && !isPinned" drag-action="move" class="col-auto mx-2 px-2 cursor-move" aria-label="move widget" v-tooltip="{showDelay:1000, value:'move widget'}"><i class="fa-solid fa-grip-vertical" aria-hidden="true"></i></span>
-			</Transition>
-			<span class="col mx-2 px-2">{{ widget.setup.name }}</span>
-			<template v-if="isPinned">
-				<div type="button" role="button" v-if="editMode" pinned="true" @click="unpin" title="unpin item" aria-label="unpin item" class="pin cursor-pointer col-auto me-2">
-					<i class="fa-solid fa-thumbtack " aria-hidden="true"></i>
-				</div>
-				<div v-else class="col-auto me-2">
-					<i class="fa-solid fa-thumbtack "></i>
-				</div>
-			</template>
-			<template v-else>
-				<div type="button" role="button" v-if="editMode"  class="col-auto me-2 pin" @click="pinItem" aria-label="pin item" title="pin item">
-					<i class="fa-solid fa-thumbtack" aria-hidden="true" style="color:lightgray;"></i>
-				</div>
-			</template>
-			<a type="button" v-if="widget.setup.cis4link" :href="getWidgetC4Link(widget)" aria-label="widget link" v-tooltip="{showDelay:1000, value:'widget link'}" class="col-auto ms-auto ">
-          		<i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true"></i>
-          	</a>
-			<a type="button" v-if="hasConfig" class="col-auto px-1" href="#" @click.prevent="openConfig" aria-label="configure widget" v-tooltip="{showDelay:1000,value:'configure widget'}"><i class="fa-solid fa-gear" aria-hidden="true"></i></a>
-			<a type="button" v-if="custom && editMode" class="col-auto px-1" aria-label="delete widget" v-tooltip="{showDelay:1000,value:'delete widget'}" href="#" @click.prevent="$emit('remove')">
-				<i class="fa-solid fa-trash" aria-hidden="true"></i>
-			</a>
-			<Transition>
-				<div v-if="!custom && editMode" class="col-auto px-1 form-switch">
-					<input class="form-check-input ms-0" type="checkbox" role="switch" aria-label="toggle widget" id="flexSwitchCheckChecked" v-model="visible" :value="true">
-				</div>
-			</Transition>
-		</div>
-		<div v-if="ready" class="card-body overflow-hidden p-0">
-			<component :is="component" v-model:shared-data="sharedData" :config="arguments" :width="width" :height="height" @setConfig="setConfig" @change="changeConfigManually"></component>
-		</div>
-		<div v-else class="card-body overflow-hidden text-center d-flex flex-column justify-content-center"><i class="fa-solid fa-spinner fa-pulse fa-3x"></i></div>
-		<bs-modal v-if="hasConfig" ref="config" @hideBsModal="handleHideBsModal" @showBsModal="handleShowBsModal">
-			<template v-slot:title>
-				{{ widget ? 'Config for ' + widget.setup.name : '' }}
-			</template>
-			<template v-slot:default>
-				<component v-if="ready && !isLoading" :is="component" v-model:shared-data="sharedData" :config="tmpConfig" @change="changeConfig" :configMode="true"></component>
-				<div v-else class="text-center"><i class="fa-solid fa-spinner fa-pulse fa-3x"></i></div>
-			</template>
-			<template v-if="!widget?.setup?.hideFooter" v-slot:footer>
-				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-				<button type="button" class="btn btn-primary" @click="changeConfig">Save changes</button>
-			</template>
-		</bs-modal>
-		<height-transition>
-			<div v-if="editMode && isResizeable && !isPinned " class="card-footer d-flex justify-content-end p-0">
-				<template v-if="maxWidth < 2">
-					<span type="button" drag-action="resize" class="col-auto px-1 cursor-ns-resize" aria-label="resize widget" v-tooltip="{showDelay:1000, value:'resize widget'}">
-						<i  class="fa-solid fa-up-down pe-2" aria-hidden="true"></i>
-					</span>
-				</template>
-				<template v-else-if="maxHeight < 2">
-					<span type="button" drag-action="resize" class="col-auto px-1 cursor-ew-resize" aria-label="resize widget" v-tooltip="{showDelay:1000, value:'resize widget'}">
-						<i class="fa-solid fa-left-right pe-2" aria-hidden="true"></i>
+	<div
+		v-else-if="!hidden || editMode"
+		:id="widgetID"
+		class="dashboard-item card overflow-hidden h-100 position-relative"
+		:class="{'hiddenWidget':hidden, 'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}"
+	>
+		<div v-show="!dragstate" class="h-100 card border-0">
+			<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
+				<Transition>
+					<span
+						v-if="editMode && !isPinned"
+						type="button"
+						drag-action="move"
+						class="col-auto mx-2 px-2 cursor-move"
+						aria-label="move widget"
+						v-tooltip="{showDelay:1000, value:'move widget'}"
+					>
+						<i class="fa-solid fa-grip-vertical" aria-hidden="true"></i>
 					</span>
+				</Transition>
+				<span class="col mx-2 px-2">{{ widget.setup.name }}</span>
+				<template v-if="isPinned">
+					<div type="button" role="button" v-if="editMode" pinned="true" @click="unpin" title="unpin item" aria-label="unpin item" class="pin cursor-pointer col-auto me-2">
+						<i class="fa-solid fa-thumbtack " aria-hidden="true"></i>
+					</div>
+					<div v-else class="col-auto me-2">
+						<i class="fa-solid fa-thumbtack "></i>
+					</div>
 				</template>
 				<template v-else>
-					<span type="button" drag-action="resize" class="col-auto px-1 cursor-nw-resize" aria-label="resize widget" v-tooltip="{showDelay:1000, value:'resize widget'}">
-						<i  class="fa-solid fa-up-right-and-down-left-from-center mirror-x" aria-hidden="true"></i>
-					</span>
+					<div type="button" role="button" v-if="editMode"  class="col-auto me-2 pin" @click="pinItem" aria-label="pin item" title="pin item">
+						<i class="fa-solid fa-thumbtack" aria-hidden="true" style="color:lightgray;"></i>
+					</div>
 				</template>
+				<a type="button" v-if="widget.setup.cis4link" :href="getWidgetC4Link(widget)" aria-label="widget link" v-tooltip="{showDelay:1000, value:'widget link'}" class="col-auto ms-auto">
+	          		<i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true"></i>
+	          	</a>
+				<a type="button" v-if="hasConfig" class="col-auto px-1" href="#" @click.prevent="openConfig" aria-label="configure widget" v-tooltip="{showDelay:1000,value:'configure widget'}"><i class="fa-solid fa-gear" aria-hidden="true"></i></a>
+				<a type="button" v-if="custom && editMode" class="col-auto px-1" aria-label="delete widget" v-tooltip="{showDelay:1000,value:'delete widget'}" href="#" @click.prevent="$emit('remove')">
+					<i class="fa-solid fa-trash" aria-hidden="true"></i>
+				</a>
+				<Transition>
+					<div v-if="!custom && editMode" class="col-auto px-1 form-switch">
+						<input class="form-check-input ms-0" type="checkbox" role="switch" aria-label="toggle widget" id="flexSwitchCheckChecked" v-model="visible" :value="true">
+					</div>
+				</Transition>
 			</div>
-		</height-transition>
+			<div v-if="ready" class="card-body overflow-hidden p-0">
+				<component :is="component" v-model:shared-data="sharedData" :config="arguments" :width="width" :height="height" @setConfig="setConfig" @change="changeConfigManually"></component>
+			</div>
+			<div v-else class="card-body overflow-hidden text-center d-flex flex-column justify-content-center"><i class="fa-solid fa-spinner fa-pulse fa-3x"></i></div>
+			<bs-modal v-if="hasConfig" ref="config" @hideBsModal="handleHideBsModal" @showBsModal="handleShowBsModal">
+				<template v-slot:title>
+					{{ widget ? 'Config for ' + widget.setup.name : '' }}
+				</template>
+				<template v-slot:default>
+					<component v-if="ready && !isLoading" :is="component" v-model:shared-data="sharedData" :config="tmpConfig" @change="changeConfig" :configMode="true"></component>
+					<div v-else class="text-center"><i class="fa-solid fa-spinner fa-pulse fa-3x"></i></div>
+				</template>
+				<template v-if="!widget?.setup?.hideFooter" v-slot:footer>
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-primary" @click="changeConfig">Save changes</button>
+				</template>
+			</bs-modal>
+			<height-transition>
+				<div v-if="editMode && isResizeable && !isPinned " class="card-footer d-flex justify-content-end p-0">
+					<template v-if="maxWidth < 2">
+						<span
+							type="button"
+							drag-action="resize"
+							class="col-auto px-1 cursor-ns-resize"
+							aria-label="resize widget"
+							v-tooltip="{showDelay:1000, value:'resize widget'}"
+						>
+							<i
+								class="fa-solid fa-up-down pe-2"
+								aria-hidden="true"
+							></i>
+						</span>
+					</template>
+					<template v-else-if="maxHeight < 2">
+						<span
+							type="button"
+							drag-action="resize"
+							class="col-auto px-1 cursor-ew-resize"
+							draggable="true"
+							aria-label="resize widget"
+							v-tooltip="{showDelay:1000, value:'resize widget'}"
+						>
+							<i
+								class="fa-solid fa-left-right pe-2"
+								aria-hidden="true"
+							></i>
+						</span>
+					</template>
+					<template v-else>
+						<span
+							type="button"
+							drag-action="resize"
+							class="col-auto px-1 cursor-nw-resize"
+							draggable="true"
+							aria-label="resize widget"
+							v-tooltip="{showDelay:1000, value:'resize widget'}"
+						>
+							<i
+								class="fa-solid fa-up-right-and-down-left-from-center mirror-x"
+								aria-hidden="true"
+							></i>
+						</span>
+					</template>
+				</div>
+			</height-transition>
 		</div>
 	</div>`,
 };
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index c4720781d..8f048de94 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -32,7 +32,7 @@ export default {
 		},
 		additionalRow: {
 			type: Boolean,
-			default: false,
+			default: false
 		}
 	},
 	emits: [
@@ -57,8 +57,8 @@ export default {
 			draggedOffset: [0, 0],
 			draggedItem: null,
 			draggedNode: null,
-			reorderedItems:[],
-			clonedWidget:null,
+			reorderedItems: [],
+			clonedWidget: null,
 		};
 	},
 	computed: {
@@ -73,7 +73,7 @@ export default {
 		items_hashmap() {
 			let items = {};
 			this.items.forEach(item => {
-				if (this.reorderedItems.length > 0 && this.needsReordering(item)){
+				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;
@@ -128,7 +128,7 @@ export default {
 		},
 		rows() {
 			if (this.additionalRowComputed) {
-					return this.grid ? (this.grid.h+1) : 1;
+				return this.grid ? (this.grid.h+1) : 1;
 			}
 			return this.grid ? this.grid.h : 1;
 		},
@@ -252,7 +252,7 @@ export default {
 	},
 	methods: {
 		needsReordering(item) {
-			if (!item?.data?.place[this.cols]){
+			if (!item?.data?.place[this.cols]) {
 				return true;
 			}
 			return false;
@@ -267,7 +267,7 @@ export default {
 			}
 		},
 		dragging(event) {
-			if(this.mode == MODE_MOVE){
+			if (this.mode == MODE_MOVE) {
 				this.toggleDraggedItemOverlay(true);
 				
 				const containerRect = this.$refs.container.getBoundingClientRect();
@@ -292,13 +292,11 @@ export default {
 			this.grid = new GridLogic(this.cols);
 			const result = [];
 			let sortedItems = [...items].sort((a, b) => {
-				if(this.needsReordering(a) && this.needsReordering(b)){
+				if (this.needsReordering(a) && this.needsReordering(b)) {
 					return 0;
-				}
-				else if(this.needsReordering(a)){
+				} else if (this.needsReordering(a)) {
 					return 999;
-				}
-				else if(this.needsReordering(b)){
+				} else if (this.needsReordering(b)) {
 					return -999;
 				}
 				
@@ -313,12 +311,11 @@ export default {
 					if (!firstFreeSlot) {
 						item.x = 0;
 						item.y = this.grid.h;
-					}else{
+					} else {
 						item.x = firstFreeSlot.x;
 						item.y = firstFreeSlot.y;
 					}
 					reorderedItems.push(item);
-					
 				}
 				if (item.x + item.w > this.cols) {
 					let targetW = this.cols-item.x,
@@ -496,7 +493,7 @@ export default {
 			this.removeWidgetClones();
 			this.toggleDraggedItemOverlay(false);
 			
-			if (this.mode == MODE_IDLE){
+			if (this.mode == MODE_IDLE) {
 				return;
 			}
 			// clean up unused classes
@@ -540,7 +537,7 @@ export default {
 			this.$emit('newItem', this.x, this.y);
 		},
 		updateCursorOnMouseMove(evt) {
-			if(this.mode == MODE_IDLE) {
+			if (this.mode == MODE_IDLE) {
 				this.updateCursor(evt);
 			}
 		},
diff --git a/public/js/components/Drop/Grid/Item.js b/public/js/components/Drop/Grid/Item.js
index 49f2bbbcf..5dff64aaa 100644
--- a/public/js/components/Drop/Grid/Item.js
+++ b/public/js/components/Drop/Grid/Item.js
@@ -56,7 +56,7 @@ export default {
 			this.tryDragStart(event);
 		},
 		touchMove(event) {
-			if (this.dragging){
+			if (this.dragging) {
 				event.preventDefault();
 				this.$emit('dragging', event);
 			}