BugReport/webapp/src/views/Dashboard.vue

<template>
	<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";

export default {
	components: {
		ReportBox,
		draggable,
	},
	data() {
		return {
			itemsUncategorized: [],
			itemsWaiting: [],
			itemsInProgress: [],
			itemsBlocked: [],
		};
	},
	methods: {
		loadData() {
			backend.getAllGrouped(Array(0, 1, 2, 3)).then((all_grouped) => {
				this.itemsUncategorized = all_grouped[0];
				this.itemsWaiting = all_grouped[1];
				this.itemsInProgress = all_grouped[2];
				this.itemsBlocked = all_grouped[3];
			});
		},
		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();
	},
};
</script>