pridana implementacia backend s composerom a kniznicami TPsoft/APIlite a TPsoft/DBmodel
This commit is contained in:
245
frontend/src/views/Dashboard.vue
Normal file
245
frontend/src/views/Dashboard.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<FullScreenLoader v-if="loading" />
|
||||
|
||||
<div id="dashboard">
|
||||
<div id="inbox">
|
||||
<h2>Nezaradené</h2>
|
||||
<draggable
|
||||
v-model="itemsUncategorized"
|
||||
item-key="report_id"
|
||||
:group="{ name: 'itemsUncategorized', pull: true, put: true }"
|
||||
@change="onDragChange"
|
||||
@start="onDragStart"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
:class="{
|
||||
'draggable-item': true,
|
||||
dragging: isDragable(element),
|
||||
}"
|
||||
>
|
||||
<ReportBox
|
||||
:report_id="element.report_id"
|
||||
:title="element.report_title"
|
||||
:description="element.report_description"
|
||||
:date="element.created_dt"
|
||||
:priority="element.report_priority"
|
||||
:group="element.report_group"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<div id="waiting">
|
||||
<h2>Čakajúce</h2>
|
||||
<draggable
|
||||
v-model="itemsWaiting"
|
||||
item-key="report_id"
|
||||
:group="{ name: 'itemsWaiting', pull: true, put: true }"
|
||||
@change="onDragChange"
|
||||
@start="onDragStart"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
:class="{
|
||||
'draggable-item': true,
|
||||
dragging: isDragable(element),
|
||||
}"
|
||||
>
|
||||
<ReportBox
|
||||
:report_id="element.report_id"
|
||||
:title="element.report_title"
|
||||
:description="element.report_description"
|
||||
:date="element.created_dt"
|
||||
:priority="element.report_priority"
|
||||
:group="element.report_group"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<div id="inprogress">
|
||||
<h2>Rozpracované</h2>
|
||||
<draggable
|
||||
v-model="itemsInProgress"
|
||||
item-key="report_id"
|
||||
:group="{ name: 'itemsInProgress', pull: true, put: true }"
|
||||
@change="onDragChange"
|
||||
@start="onDragStart"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
:class="{
|
||||
'draggable-item': true,
|
||||
dragging: isDragable(element),
|
||||
}"
|
||||
>
|
||||
<ReportBox
|
||||
:report_id="element.report_id"
|
||||
:title="element.report_title"
|
||||
:description="element.report_description"
|
||||
:date="element.created_dt"
|
||||
:priority="element.report_priority"
|
||||
:group="element.report_group"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<div id="blocked">
|
||||
<h2>Blokované</h2>
|
||||
<draggable
|
||||
v-model="itemsBlocked"
|
||||
item-key="report_id"
|
||||
:group="{ name: 'itemsBlocked', pull: true, put: true }"
|
||||
@change="onDragChange"
|
||||
@start="onDragStart"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
:class="{
|
||||
'draggable-item': true,
|
||||
dragging: isDragable(element),
|
||||
}"
|
||||
>
|
||||
<ReportBox
|
||||
:report_id="element.report_id"
|
||||
:title="element.report_title"
|
||||
:description="element.report_description"
|
||||
:date="element.created_dt"
|
||||
:priority="element.report_priority"
|
||||
:group="element.report_group"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const itemDragable = ref(0);
|
||||
|
||||
function onDragStart(evt) {
|
||||
itemDragable.value = evt.item.__vnode.key;
|
||||
}
|
||||
function onDragEnd(evt) {
|
||||
itemDragable.value = 0;
|
||||
}
|
||||
function isDragable(element) {
|
||||
return itemDragable.value === element.report_id;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
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: {
|
||||
ReportBox,
|
||||
draggable,
|
||||
FullScreenLoader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
itemsUncategorized: [],
|
||||
itemsWaiting: [],
|
||||
itemsInProgress: [],
|
||||
itemsBlocked: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadData(use_loader = true) {
|
||||
if (use_loader) this.loading = true;
|
||||
backend.getAllGrouped(Array(0, 1, 2, 3)).then((response) => {
|
||||
let all_grouped = response.data;
|
||||
this.itemsUncategorized = all_grouped[0];
|
||||
this.itemsWaiting = all_grouped[1];
|
||||
this.itemsInProgress = all_grouped[2];
|
||||
this.itemsBlocked = all_grouped[3];
|
||||
if (use_loader) this.loading = false;
|
||||
});
|
||||
},
|
||||
getDataByStatus(report_status) {
|
||||
let for_reorder = null;
|
||||
switch (report_status) {
|
||||
case 0:
|
||||
for_reorder = this.itemsUncategorized;
|
||||
break;
|
||||
case 1:
|
||||
for_reorder = this.itemsWaiting;
|
||||
break;
|
||||
case 2:
|
||||
for_reorder = this.itemsInProgress;
|
||||
break;
|
||||
case 3:
|
||||
for_reorder = this.itemsBlocked;
|
||||
break;
|
||||
}
|
||||
return for_reorder;
|
||||
},
|
||||
searchStatusByReportId(report_id) {
|
||||
for (let i = 0; i < this.itemsUncategorized.length; i++) {
|
||||
if (this.itemsUncategorized[i].report_id === report_id) return 0;
|
||||
}
|
||||
for (let i = 0; i < this.itemsWaiting.length; i++) {
|
||||
if (this.itemsWaiting[i].report_id === report_id) return 1;
|
||||
}
|
||||
for (let i = 0; i < this.itemsInProgress.length; i++) {
|
||||
if (this.itemsInProgress[i].report_id === report_id) return 2;
|
||||
}
|
||||
for (let i = 0; i < this.itemsBlocked.length; i++) {
|
||||
if (this.itemsBlocked[i].report_id === report_id) return 3;
|
||||
}
|
||||
},
|
||||
onDragChange(event) {
|
||||
// console.log("onDragChange", event);
|
||||
if (event.added) {
|
||||
// console.log("Pridané:", event.added.element);
|
||||
let report_id = event.added.element.report_id;
|
||||
let new_reprort_status = this.searchStatusByReportId(report_id);
|
||||
let for_reorder = this.getDataByStatus(new_reprort_status);
|
||||
backend.updateStatus(report_id, new_reprort_status).then(() => {
|
||||
this.updateOrdnum(for_reorder);
|
||||
});
|
||||
}
|
||||
if (event.moved) {
|
||||
// console.log("Presunuté:", event.moved.element);
|
||||
let report_status = event.moved.element.report_status;
|
||||
let for_reorder = this.getDataByStatus(report_status);
|
||||
this.updateOrdnum(for_reorder);
|
||||
}
|
||||
if (event.removed) {
|
||||
// console.log("Odstranené:", event.removed.element);
|
||||
}
|
||||
},
|
||||
updateOrdnum(for_reorder) {
|
||||
let new_ordnums = {};
|
||||
for (let i = 0; i < for_reorder.length; i++) {
|
||||
new_ordnums[for_reorder[i].report_id] = i;
|
||||
}
|
||||
backend.updateOrdnum(new_ordnums);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadData();
|
||||
events.on("reports-changed", () => {
|
||||
console.log("Dashoboard reports-changed");
|
||||
this.loadData(false);
|
||||
});
|
||||
},
|
||||
unmounted() {
|
||||
events.off("reports-changed");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user