added drag&drop for Report items on Dashboard,

added temporary buttons for testing

webapp/package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "bugreport",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bugreport",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
         "vue": "^3.5.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -1172,6 +1173,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1343,6 +1350,18 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
     }
   }
 }

webapp/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

webapp/src/assets/css/style.css

@@ -66,17 +66,19 @@ h1 {
 
 button {
 	border-radius: 8px;
-	border: 1px solid transparent;
+	border: 1px solid var(--color-bg0);
 	padding: 0.6em 1.2em;
 	font-size: 1em;
 	font-weight: 500;
 	font-family: inherit;
-	background-color: #1a1a1a;
+	background-color: var(--color-bg2);
+	color: var(--color-text0);
 	cursor: pointer;
-	transition: border-color 0.25s;
+	transition: all 0.3s;
 }
 button:hover {
-	border-color: #646cff;
+	border-color: var(--color-bg1);
+	background-color: var(--color-bg0);
 }
 button:focus,
 button:focus-visible {
@@ -116,6 +118,7 @@ button:focus-visible {
 	padding: 5px 10px;
 	border-radius: 5px;
 	margin-left: 20px;
+	transition: all 0.3s;
 }
 #header .menu a:hover {
 	color: var(--color-text1);
@@ -163,7 +166,7 @@ button:focus-visible {
 	flex-direction: row;
 	justify-content: space-between;
 	border-top-right-radius: 5px;
-
+	cursor: grab;
 }
 #dashboard .report .report-header .report-title {
 
@@ -184,6 +187,9 @@ button:focus-visible {
 	padding: 5px;
 	border-bottom-right-radius: 5px;
 }
+#dashboard .report:hover {
+	filter: brightness(1.2);
+}
 
 /* ----------------------------------------------------
    99 - LIGHT MODE

webapp/src/views/Dashboard.vue

@@ -2,40 +2,184 @@
 	<div id="dashboard">
 		<div id="inbox">
 			<h2>Nezaradené</h2>
-
+			<draggable
-			<Report title="Pridať bug" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+				v-model="itemsUncategorized"
-			<Report title="Resetovat pismo" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+				item-key="id"
-
+				:group="{ name: 'itemsUncategorized', pull: true, put: true }"
+				 @change="onDragChange"
+			>
+				<template #item="{ element }">
+					<div class="draggable-item">
+						<Report
+							:title="element.title"
+							:description="element.description"
+							:date="element.date"
+						/>
+					</div>
+				</template>
+			</draggable>
 		</div>
 		<div id="waiting">
 			<h2>Čakajúce</h2>
-
+			<draggable
-			<Report title="Vymena obrazkov za ikonky" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+				v-model="itemsWaiting"
-			<Report title="Doplnit serverove ikoky a toto bude dlhy nadpis, ze ako sa s tym vysporiada" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+				item-key="id"
-			<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+				:group="{ name: 'itemsWaiting', pull: true, put: true }"
-			<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+				 @change="onDragChange"
-			<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+			>
-			<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+				<template #item="{ element }">
-			<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+					<div class="draggable-item">
-			<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+						<Report
-			<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
+							:title="element.title"
-
+							:description="element.description"
-
+							:date="element.date"
+						/>
+					</div>
+				</template>
+			</draggable>
 		</div>
 		<div id="inprogress">
 			<h2>Rozpracované</h2>
+			<draggable
+				v-model="itemsInProgress"
+				item-key="id"
+				:group="{ name: 'itemsInProgress', pull: true, put: true }"
+				 @change="onDragChange"
+			>
+				<template #item="{ element }">
+					<div class="draggable-item">
+						<Report
+							:title="element.title"
+							:description="element.description"
+							:date="element.date"
+						/>
+					</div>
+				</template>
+			</draggable>
 		</div>
 		<div id="done">
 			<h2>Hotové</h2>
+			<draggable
+				v-model="itemsDone"
+				item-key="id"
+				:group="{ name: 'itemsDone', pull: true, put: true }"
+				 @change="onDragChange"
+			>
+				<template #item="{ element }">
+					<div class="draggable-item">
+						<Report
+							:title="element.title"
+							:description="element.description"
+							:date="element.date"
+						/>
+					</div>
+				</template>
+			</draggable>
 		</div>
 	</div>
+	<button @click="vypisData">Vypíš data</button>
+	<button @click="pridajJedno">Pridaj jedno</button>
 </template>
 <script>
-import Report from '../components/Report.vue';
+import Report from "../components/Report.vue";
+import draggable from "vuedraggable";
 
 export default {
 	components: {
-		Report
+		Report,
-	}
+		draggable,
-}
+	},
-</script>
+	data() {
+		return {
+			itemsUncategorized: [
+				{
+					id: 1,
+					title: "Pridať bug",
+					description:
+						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+					date: "2025-04-13 01:30:18",
+				},
+				{
+					id: 2,
+					title: "Resetovat pismo",
+					description:
+						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+					date: "2025-04-13 01:30:18",
+				},
+			],
+			itemsWaiting: [
+				{
+					id: 11,
+					title: "Vymena obrazkov za ikonky",
+					description:
+						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+					date: "2025-04-13 01:30:18",
+				},
+				{
+					id: 12,
+					title:
+						"Doplnit serverove ikoky a toto bude dlhy nadpis, ze ako sa s tym vysporiada",
+					description:
+						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+					date: "2025-04-13 01:30:18",
+				},
+				{
+					id: 13,
+					title: "Rozdelit na 2 polozky na fakture",
+					description:
+						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+					date: "2025-04-13 01:30:18",
+				},
+			],
+			itemsInProgress: [
+				{
+					id: 21,
+					title: "Imeplemtovat logovanie",
+					description:
+						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+					date: "2025-04-13 15:11:23",
+				},
+			],
+			itemsDone: [
+				{
+					id: 31,
+					title: "Doplnit preklady",
+					description:
+						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+					date: "2025-04-13 01:30:18",
+				},
+			],
+		};
+	},
+	methods: {
+		onDragChange(event) {
+			// console.log("Presunuté:", event);
+			// Napr. uložiť poradie do API
+			if (event.added) {
+				console.log("Pridané:", event.added.element);
+			}
+			if (event.moved) {
+				console.log("Presunuté:", event.moved.element);
+			}
+			if (event.removed) {
+				console.log("Odstranené:", event.removed.element);
+			}
+		},
+		vypisData() {
+			console.log(this.itemsUncategorized);
+			console.log(this.itemsWaiting);
+			console.log(this.itemsInProgress);
+			console.log(this.itemsDone);
+		},
+		pridajJedno() {
+			this.itemsUncategorized.push({
+				id: this.itemsUncategorized.length + 1,
+				title: "Pridať bug",
+				description:
+					"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.",
+				date: "2025-04-13 01:30:18",
+			});
+		},
+	},
+};
+</script>