added button for enable Drag&Drop

frontend/src/views/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
 	<FullScreenLoader v-if="loading" />
 
-	<div id="dashboard">
+	<div id="dashboard" :class="{ 'drag-disabled': isDragDisabled }">
 		<div id="inbox">
 			<h2>Nezaradené</h2>
 			<draggable
@@ -146,6 +146,10 @@ import draggable from "vuedraggable";
 import backend from "../backend";
 import FullScreenLoader from "../components/FullScreenLoader.vue";
 import events from "../events";
+import {
+	getDragDropEnabled,
+	getDragDropMediaQuery,
+} from "../dragDropSettings";
 
 export default {
 	components: {
@@ -156,7 +160,7 @@ export default {
 	data() {
 		return {
 			loading: false,
-			isDragDisabled: false,
+			isDragDisabled: !getDragDropEnabled(),
 			dragMediaQuery: null,
 			itemsUncategorized: [],
 			itemsWaiting: [],
@@ -165,8 +169,15 @@ export default {
 		};
 	},
 	methods: {
-		updateDragState(event) {
-			this.isDragDisabled = event.matches;
+		updateDragState() {
+			this.isDragDisabled = !getDragDropEnabled(this.dragMediaQuery);
+		},
+		updateDragPreference(enabled) {
+			this.isDragDisabled = !enabled;
+		},
+		onReportsChanged() {
+			console.log("Dashoboard reports-changed");
+			this.loadData(false);
 		},
 		loadData(use_loader = true) {
 			if (use_loader) this.loading = true;
@@ -241,18 +252,21 @@ export default {
 		},
 	},
 	mounted() {
-		this.dragMediaQuery = window.matchMedia("(max-width: 768px), (any-pointer: coarse)");
-		this.updateDragState(this.dragMediaQuery);
-		this.dragMediaQuery.addEventListener("change", this.updateDragState);
+		this.dragMediaQuery = getDragDropMediaQuery();
+		this.updateDragState();
+		if (this.dragMediaQuery != null) {
+			this.dragMediaQuery.addEventListener("change", this.updateDragState);
+		}
 		this.loadData();
-		events.on("reports-changed", () => {
-			console.log("Dashoboard reports-changed");
-			this.loadData(false);
-		});
+		events.on("reports-changed", this.onReportsChanged);
+		events.on("drag-drop-changed", this.updateDragPreference);
 	},
 	unmounted() {
-		this.dragMediaQuery.removeEventListener("change", this.updateDragState);
-		events.off("reports-changed");
+		if (this.dragMediaQuery != null) {
+			this.dragMediaQuery.removeEventListener("change", this.updateDragState);
+		}
+		events.off("reports-changed", this.onReportsChanged);
+		events.off("drag-drop-changed", this.updateDragPreference);
 	}
 };
 </script>