added button for enable Drag&Drop

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bugreport",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bugreport",
-      "version": "0.0.2",
+      "version": "0.0.3",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -1326,9 +1326,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.15",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
-      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
       "funding": [
         {
           "type": "github",
@@ -1381,9 +1381,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
-      "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1400,7 +1400,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.12",
+        "nanoid": "^3.3.17",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },

frontend/src/App.vue

@@ -20,6 +20,18 @@
 			</button>
 		</div>
 		<div class="menu">
+			<label
+				class="drag-drop-toggle"
+				:title="dragDropEnabled ? 'Drag & drop je zapnutý' : 'Drag & drop je vypnutý'"
+			>
+				<input
+					v-model="dragDropEnabled"
+					type="checkbox"
+					:aria-label="dragDropEnabled ? 'Vypnúť drag & drop' : 'Zapnúť drag & drop'"
+					@change="onDragDropChange"
+				/>
+				<span>Drag & drop</span>
+			</label>
 			<router-link to="/add"
 				><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať
 				bug</router-link
@@ -45,11 +57,29 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import backend from "./backend";
 import events from "./events";
+import {
+	getDragDropEnabled,
+	getDragDropMediaQuery,
+	getDragDropPreference,
+	setDragDropEnabled,
+} from "./dragDropSettings";
 
 const short_bug = ref("");
+const dragMediaQuery = getDragDropMediaQuery();
+const dragDropEnabled = ref(getDragDropEnabled(dragMediaQuery));
+
+function updateAutomaticDragDropState() {
+	if (getDragDropPreference() != null) return;
+	dragDropEnabled.value = getDragDropEnabled(dragMediaQuery);
+}
+
+function onDragDropChange() {
+	setDragDropEnabled(dragDropEnabled.value);
+	events.emit("drag-drop-changed", dragDropEnabled.value);
+}
 
 function onShortBugEnter(event) {
 	if (event.keyCode == 13) {
@@ -64,4 +94,16 @@ function shortBugAdd() {
 		events.emit("reports-changed");
 	});
 }
+
+onMounted(() => {
+	if (dragMediaQuery != null) {
+		dragMediaQuery.addEventListener("change", updateAutomaticDragDropState);
+	}
+});
+
+onUnmounted(() => {
+	if (dragMediaQuery != null) {
+		dragMediaQuery.removeEventListener("change", updateAutomaticDragDropState);
+	}
+});
 </script>

frontend/src/assets/css/style.css

@@ -151,6 +151,29 @@ button:focus-visible,
 #header .menu {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
+}
+#header .drag-drop-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	border: 1px solid var(--color-text0);
+	padding: 5px 10px;
+	border-radius: 5px;
+	margin-left: 20px;
+	cursor: pointer;
+	user-select: none;
+	transition: all 0.3s;
+}
+#header .drag-drop-toggle:hover {
+	color: var(--color-text1);
+	background-color: var(--color-bg1);
+}
+#header .drag-drop-toggle input {
+	width: 16px;
+	height: 16px;
+	margin: 0;
+	cursor: pointer;
 }
 #header .menu a,
 #header .menu a:visited,
@@ -205,7 +228,8 @@ button:focus-visible,
 		flex-wrap: wrap;
 		justify-content: center;
 	}
-	#header .menu a {
+	#header .menu a,
+	#header .drag-drop-toggle {
 		margin: 5px;
 	}
 }
@@ -256,6 +280,9 @@ button:focus-visible,
 	border-top-right-radius: 5px;
 	cursor: grab;
 }
+#dashboard.drag-disabled .report .report-header {
+	cursor: default;
+}
 #dashboard .report .report-header .report-title {
 }
 #dashboard .report .report-header h3 {

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>