TPsoft.org/BugReport
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added drag&drop for Report items on Dashboard,

Browse Source 
added temporary buttons for testing
This commit is contained in:
Igor Miňo
2025-04-13 15:39:11 +02:00
parent ee4729b8ef
commit 345e70a402
4 changed files with 200 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
webapp/src/views/Dashboard.vue
View File

@ -2,40 +2,184 @@
<div id="dashboard">
<div id="inbox">
<h2>Nezaradené</h2>
<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" />
<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" />
<draggable
v-model="itemsUncategorized"
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>
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<draggable
v-model="itemsWaiting"
item-key="id"
:group="{ name: 'itemsWaiting', 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="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
}
}
</script>
Report,
draggable,
},
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>