pridane rychle pridanie tasku,

pridana kniznica Mitt pre globalne events

webapp/package-lock.json

@@ -12,6 +12,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/vue-fontawesome": "^3.0.8",
+        "mitt": "^3.0.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
         "vuedraggable": "^4.1.0"
@@ -1275,6 +1276,12 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",

webapp/package.json

@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
+    "mitt": "^3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vuedraggable": "^4.1.0"

webapp/src/App.vue

@@ -8,13 +8,60 @@
 				<h1>Bug Report</h1>
 			</router-link>
 		</div>
+		<div class="short-bug">
+			<input
+				type="text"
+				placeholder="Rýchly task + <ENTER>"
+				v-model="short_bug"
+				@keyup.enter="onShortBugEnter"
+			/>
+			<button @click="shortBugAdd">
+				<font-awesome-icon :icon="['fas', 'circle-check']" /> Pridať
+			</button>
+		</div>
 		<div class="menu">
-			<router-link to="/add"><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať bug</router-link>
+			<router-link to="/add"
-			<router-link to="/"><font-awesome-icon :icon="['fas', 'list-check']" /> Zoznam reportov</router-link>
+				><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať
-			<router-link to="/archive"><font-awesome-icon :icon="['fas', 'box-archive']" /> Archív</router-link>
+				bug</router-link
-			<router-link to="/api"><font-awesome-icon :icon="['fas', 'plug']" /> API</router-link>
+			>
-			<router-link to="/about"><font-awesome-icon :icon="['fas', 'address-card']" /> O aplikácii</router-link>
+			<router-link to="/"
+				><font-awesome-icon :icon="['fas', 'list-check']" /> Zoznam
+				reportov</router-link
+			>
+			<router-link to="/archive"
+				><font-awesome-icon :icon="['fas', 'box-archive']" />
+				Archív</router-link
+			>
+			<router-link to="/api"
+				><font-awesome-icon :icon="['fas', 'plug']" /> API</router-link
+			>
+			<router-link to="/about"
+				><font-awesome-icon :icon="['fas', 'address-card']" /> O
+				aplikácii</router-link
+			>
 		</div>
 	</div>
 	<router-view></router-view>
 </template>
+
+<script setup>
+import { ref } from "vue";
+import { backend } from "./backend";
+import events from "./events";
+
+const short_bug = ref("");
+
+function onShortBugEnter(event) {
+	if (event.keyCode == 13) {
+		shortBugAdd();
+	}
+}
+
+function shortBugAdd() {
+	let content = short_bug.value;
+	short_bug.value = "";
+	backend.add(content, "", "0", "0", "1").then(() => {
+		events.emit("reports-changed");
+	});
+}
+</script>

webapp/src/assets/css/style.css

@@ -131,30 +131,76 @@ button:focus-visible,
 	flex-direction: row;
 	align-items: center;
 }
+#header .short-bug {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 2;
+	/* border: 1px red solid; */
+	padding: 0px 20px;
+	align-items: center;
+	justify-content: center
+}
+#header .short-bug input {
+	width: 80%;
+	padding: 5px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	background-color: var(--color-bg2);
+	color: var(--color-text0);
+}
 #header .menu {
 	display: flex;
 	flex-direction: row;
 }
 #header .menu a,
-#header .menu a:visited {
+#header .menu a:visited,
+#header button {
 	border: 1px solid var(--color-text0);
 	padding: 5px 10px;
 	border-radius: 5px;
 	margin-left: 20px;
 	transition: all 0.3s;
 }
-#header .menu a:hover {
+#header .menu a:hover,
+#header button:hover {
 	color: var(--color-text1);
 	background-color: var(--color-bg1);
 }
+#header .short-bug button {
+	margin: 0px;
+
+	/* height: 30px; */
+}
 #header h1 {
 	display: inline-block;
 }
+@media (max-width: 1400px) {
+	#header {
+		flex-wrap: wrap;
+	}
+	#header .short-bug {
+		width: 50%;
+		padding: 0px;
+		align-items: end;
+		justify-content: flex-end;
+	}
+	#header .menu {
+		width: 100%;
+		align-items: end;
+		justify-content: flex-end;
+		padding-top: 20px;
+	}
+}
 @media (max-width: 900px) {
 	#header {
 		flex-direction: column;
 		align-items: center;
 	}
+	#header .short-bug {
+		width: 100%;
+		align-items: center;
+		justify-content: center
+	}
 	#header .menu {
 		flex-wrap: wrap;
 		justify-content: center;
@@ -163,6 +209,11 @@ button:focus-visible,
 		margin: 5px;
 	}
 }
+@media (max-width: 600px) {
+	#header .short-bug {
+		flex-direction: column;
+	}
+}
 
 /* ----------------------------------------------------
    03 - DASHBOARD

webapp/src/events.js

@@ -0,0 +1,5 @@
+import mitt from "mitt";
+
+const events = mitt();
+
+export default events;

webapp/src/views/Dashboard.vue

@@ -141,6 +141,7 @@ import ReportBox from "../components/ReportBox.vue";
 import draggable from "vuedraggable";
 import { backend } from "../backend";
 import FullScreenLoader from "../components/FullScreenLoader.vue";
+import events from "../events";
 
 export default {
 	components: {
@@ -231,6 +232,13 @@ export default {
 	},
 	mounted() {
 		this.loadData();
+		events.on("reports-changed", () => {
+			console.log("Dashoboard reports-changed");
+			this.loadData(false);
+		});
 	},
+	unmounted() {
+		events.off("reports-changed");
+	}
 };
 </script>