From fee63b91157dcfd33834567fd106e9c27e062007 Mon Sep 17 00:00:00 2001
From: igor <mino@tpsoft.org>
Date: Sat, 3 May 2025 10:43:36 +0200
Subject: [PATCH] pridany efekt stmavnutia ostatnych a zosvetelenie presuvaneho
 reportu v dashboard, pridana podmienka pre MODE zostavenia ci je to DEV alebo
 BUILD a podla toho nastavenia URL,

---
 webapp/src/assets/css/style.css |  9 ++++++++-
 webapp/src/views/Dashboard.vue  | 26 ++++++++++++++++++++++----
 webapp/vite.config.js           | 27 ++++++++++++++++-----------
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/webapp/src/assets/css/style.css b/webapp/src/assets/css/style.css
index 58663e8..02688e8 100644
--- a/webapp/src/assets/css/style.css
+++ b/webapp/src/assets/css/style.css
@@ -166,6 +166,7 @@ button:focus-visible {
 	align-items: stretch;
 	border-left: 5px var(--color-bg1) solid;
 	border-radius: 5px;
+	transition: all 0.3s;
 }
 #dashboard .report .report-header {
 	background-color: var(--color-bg0);
@@ -196,7 +197,13 @@ button:focus-visible {
 #dashboard .report:hover {
 	filter: brightness(1.2);
 }
-
+#dashboard .dragging .report {
+	/* border: 2px red solid; */
+	box-shadow: 0px 0px 10px var(--color-bg1);
+}
+#dashboard:has(.dragging) .draggable-item:not(.dragging) .report {
+	opacity: 0.4;
+}
 /* ----------------------------------------------------
    06 - API
    */
diff --git a/webapp/src/views/Dashboard.vue b/webapp/src/views/Dashboard.vue
index 47b75b3..e6f6b97 100644
--- a/webapp/src/views/Dashboard.vue
+++ b/webapp/src/views/Dashboard.vue
@@ -6,7 +6,9 @@
 				v-model="itemsUncategorized"
 				item-key="id"
 				:group="{ name: 'itemsUncategorized', pull: true, put: true }"
-				 @change="onDragChange"
+				@change="onDragChange"
+				@start="onDragStart"
+				@end="onDragEnd"
 			>
 				<template #item="{ element }">
 					<div class="draggable-item">
@@ -25,7 +27,9 @@
 				v-model="itemsWaiting"
 				item-key="id"
 				:group="{ name: 'itemsWaiting', pull: true, put: true }"
-				 @change="onDragChange"
+				@change="onDragChange"
+				@start="onDragStart"
+				@end="onDragEnd"
 			>
 				<template #item="{ element }">
 					<div class="draggable-item">
@@ -44,7 +48,9 @@
 				v-model="itemsInProgress"
 				item-key="id"
 				:group="{ name: 'itemsInProgress', pull: true, put: true }"
-				 @change="onDragChange"
+				@change="onDragChange"
+				@start="onDragStart"
+				@end="onDragEnd"
 			>
 				<template #item="{ element }">
 					<div class="draggable-item">
@@ -63,7 +69,9 @@
 				v-model="itemsDone"
 				item-key="id"
 				:group="{ name: 'itemsDone', pull: true, put: true }"
-				 @change="onDragChange"
+				@change="onDragChange"
+				@start="onDragStart"
+				@end="onDragEnd"
 			>
 				<template #item="{ element }">
 					<div class="draggable-item">
@@ -80,6 +88,16 @@
 	<button @click="vypisData">Vypíš data</button>
 	<button @click="pridajJedno">Pridaj jedno</button>
 </template>
+
+<script setup>
+function onDragStart(evt) {
+	evt.item.classList.add("dragging");
+}
+function onDragEnd(evt) {
+	evt.item.classList.remove("dragging");
+}
+</script>
+
 <script>
 import Report from "../components/Report.vue";
 import draggable from "vuedraggable";
diff --git a/webapp/vite.config.js b/webapp/vite.config.js
index 35f856a..0e1e191 100644
--- a/webapp/vite.config.js
+++ b/webapp/vite.config.js
@@ -1,21 +1,26 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 // import pkg from "./package.json";
-import { createRequire } from 'node:module'
+import { createRequire } from "node:module";
 
-const require = createRequire(import.meta.url)
-const pkg = require('./package.json')
+const require = createRequire(import.meta.url);
+const pkg = require("./package.json");
 
 const subpath = "/bugreport/";
 export const baseUrl = subpath + "webapp/dist/";
 
 // https://vite.dev/config/
-export default defineConfig({
-	base: baseUrl,
-	plugins: [vue()],
-	define: {
-		__APP_VERSION__: JSON.stringify(pkg.version),
-		__BUILD_DATE__: JSON.stringify(new Date().toISOString()),
-		__SUBPATH__: JSON.stringify(subpath),
-	},
+export default defineConfig(({ command, mode }) => {
+	const isBuild = command === "build";
+	const isDev = command === "serve";
+
+	return {
+		base: isBuild ? baseUrl : "/",
+		plugins: [vue()],
+		define: {
+			__APP_VERSION__: JSON.stringify(pkg.version),
+			__BUILD_DATE__: JSON.stringify(new Date().toISOString()),
+			__SUBPATH__: JSON.stringify(isBuild ? subpath : "/"),
+		},
+	};
 });