min size & delete loading id when adding widgets

public/js/components/Dashboard/Admin/Presets.js

@@ -23,6 +23,32 @@ export default {
 	computed: {
 		pickerWidgets() {
 			return this.widgets.filter(widget => widget.allowed);
+		},
+		sizeLimits() {
+			return Object.fromEntries(this.widgets.map(({ setup, widget_id: type }) => {
+				const result = {}; // work on a copy
+				if (setup.height === undefined)
+					result.height = { min: 1, max: undefined };
+				else if (Number.isInteger(setup.height))
+					result.height = { min: setup.height, max: setup.height };
+				else
+					result.height = {
+						min: setup.height.min ?? 1,
+						max: setup.height.max
+					};
+
+				if (setup.width === undefined)
+					result.width = { min: 1, max: undefined };
+				else if (Number.isInteger(setup.width))
+					result.width = { min: setup.width, max: setup.width };
+				else
+					result.width = {
+						min: setup.width.min ?? 1,
+						max: setup.width.max
+					};
+
+				return [type, result];
+			}));
 		}
 	},
 	watch: {
@@ -35,6 +61,12 @@ export default {
 		widgetAdd(widget, section_name) {
 			this.$refs.widgetpicker.getWidget().then(widget_id => {
 				widget.widget = widget_id;
+				// NOTE(chris): min size
+				widget.place = Object.fromEntries(Object.entries(widget.place).map(([key, value]) => {
+					value.w = this.sizeLimits[widget_id].width.min;
+					value.h = this.sizeLimits[widget_id].height.min;
+					return [key, value];
+				}));
 				widget.id = 'loading_' + String((new Date()).valueOf());
 				delete widget.custom;
 				widget.preset = 1;
@@ -45,6 +77,8 @@ export default {
 						section.widgets.push(loading);
 				});
 
+				delete widget.id;
+
 				const params = {
 					dashboard: this.dashboard,
 					funktion_kurzbz: section_name,

public/js/components/Dashboard/Dashboard.js

@@ -36,16 +36,52 @@ export default {
 			timezone: this.timezone
 		}
 	},
+	computed: {
+		sizeLimits() {
+			return Object.fromEntries(this.widgetsSetup.map(({ setup, widget_id: type }) => {
+				const result = {}; // work on a copy
+				if (setup.height === undefined)
+					result.height = { min: 1, max: undefined };
+				else if (Number.isInteger(setup.height))
+					result.height = { min: setup.height, max: setup.height };
+				else
+					result.height = {
+						min: setup.height.min ?? 1,
+						max: setup.height.max
+					};
+
+				if (setup.width === undefined)
+					result.width = { min: 1, max: undefined };
+				else if (Number.isInteger(setup.width))
+					result.width = { min: setup.width, max: setup.width };
+				else
+					result.width = {
+						min: setup.width.min ?? 1,
+						max: setup.width.max
+					};
+
+				return [type, result];
+			}));
+		}
+	},
 	methods: {
 		widgetAdd(widget) {
 			this.$refs.widgetpicker
 				.getWidget()
 				.then(widget_id => {
 					widget.widget = widget_id;
+					// NOTE(chris): min size
+					widget.place = Object.fromEntries(Object.entries(widget.place).map(([key, value]) => {
+						value.w = this.sizeLimits[widget_id].width.min;
+						value.h = this.sizeLimits[widget_id].height.min;
+						return [key, value];
+					}));
 					widget.id = 'loading_' + String((new Date()).valueOf());
 					let loading = { ...widget };
 					loading.loading = true;
 					this.widgets.push(loading);
+
+					delete widget.id;
 					
 					this.$api
 						.call(ApiDashboardUser.addWidget(this.dashboard, widget))

public/js/components/Dashboard/Section.js

@@ -240,7 +240,7 @@ export default {
 				<div
 					v-if="item.placeholder"
 					class="empty-tile-hover"
-					@click="$emit('widgetAdd', { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 }, name)"
+					@click="$emit('widgetAdd', { config: [], place: {[gridWidth]: { x: item.x, y: item.y, w: 1, h: 1 } }, custom: 1 }, name)"
 				></div>
 				<dashboard-item 
 					v-else