pridane rychle pridanie tasku,
pridana kniznica Mitt pre globalne events
This commit is contained in:
parent
603c8ea37b
commit
a02bdb4cbe
7
webapp/package-lock.json
generated
7
webapp/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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="/"><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>
|
||||
<router-link to="/add"
|
||||
><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať
|
||||
bug</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>
|
||||
|
||||
@ -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
|
||||
|
||||
5
webapp/src/events.js
Normal file
5
webapp/src/events.js
Normal file
@ -0,0 +1,5 @@
|
||||
import mitt from "mitt";
|
||||
|
||||
const events = mitt();
|
||||
|
||||
export default events;
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user