135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<template>
|
|
<div id="header">
|
|
<div class="logo">
|
|
<router-link to="/">
|
|
<img src="/bugreport.svg" height="48" width="48" />
|
|
</router-link>
|
|
<router-link to="/">
|
|
<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"
|
|
/>
|
|
<select
|
|
v-model="selectedProjectId"
|
|
aria-label="Projekt rýchleho tasku"
|
|
@change="setSelectedProject(selectedProjectId)"
|
|
>
|
|
<option
|
|
v-for="project in activeProjects"
|
|
:key="project.project_id"
|
|
:value="project.project_id"
|
|
>
|
|
{{ project.project_name }}
|
|
</option>
|
|
</select>
|
|
<button :disabled="selectedProjectId == null" @click="shortBugAdd">
|
|
<font-awesome-icon :icon="['fas', 'circle-check']" /> Pridať
|
|
</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
|
|
>
|
|
<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="/projects"
|
|
><font-awesome-icon :icon="['fas', 'diagram-project']" />
|
|
Projekty</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 { onMounted, onUnmounted, ref } from "vue";
|
|
import backend from "./backend";
|
|
import events from "./events";
|
|
import {
|
|
getDragDropEnabled,
|
|
getDragDropMediaQuery,
|
|
getDragDropPreference,
|
|
setDragDropEnabled,
|
|
} from "./dragDropSettings";
|
|
import {
|
|
activeProjects,
|
|
loadProjects,
|
|
selectedProjectId,
|
|
setSelectedProject,
|
|
} from "./projects";
|
|
|
|
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) {
|
|
shortBugAdd();
|
|
}
|
|
}
|
|
|
|
function shortBugAdd() {
|
|
if (selectedProjectId.value == null) return;
|
|
let content = short_bug.value;
|
|
short_bug.value = "";
|
|
backend.add(content, "", "0", selectedProjectId.value, "1").then(() => {
|
|
events.emit("reports-changed");
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadProjects().catch((error) => console.log(error));
|
|
if (dragMediaQuery != null) {
|
|
dragMediaQuery.addEventListener("change", updateAutomaticDragDropState);
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (dragMediaQuery != null) {
|
|
dragMediaQuery.removeEventListener("change", updateAutomaticDragDropState);
|
|
}
|
|
});
|
|
</script>
|