added drag&drop for Report items on Dashboard,
added temporary buttons for testing
This commit is contained in:
parent
ee4729b8ef
commit
345e70a402
25
webapp/package-lock.json
generated
25
webapp/package-lock.json
generated
@ -1,15 +1,16 @@
|
||||
{
|
||||
"name": "bugreport",
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "bugreport",
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
"vue-router": "^4.5.0",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
@ -1172,6 +1173,12 @@
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/sortablejs": {
|
||||
"version": "1.14.0",
|
||||
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
|
||||
"integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
@ -1343,6 +1350,18 @@
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vuedraggable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
|
||||
"integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"sortablejs": "1.14.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
"vue-router": "^4.5.0",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
|
||||
@ -66,17 +66,19 @@ h1 {
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid var(--color-bg0);
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
background-color: var(--color-bg2);
|
||||
color: var(--color-text0);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
border-color: var(--color-bg1);
|
||||
background-color: var(--color-bg0);
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
@ -116,6 +118,7 @@ button:focus-visible {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
margin-left: 20px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#header .menu a:hover {
|
||||
color: var(--color-text1);
|
||||
@ -163,7 +166,7 @@ button:focus-visible {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-top-right-radius: 5px;
|
||||
|
||||
cursor: grab;
|
||||
}
|
||||
#dashboard .report .report-header .report-title {
|
||||
|
||||
@ -184,6 +187,9 @@ button:focus-visible {
|
||||
padding: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
#dashboard .report:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
99 - LIGHT MODE
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user