jandl-taskmanager-app/app/src/plugins/tm@dashboard/tasks/tasks.vue

<template>
	<div>
		<A-task-filter @weekChange="getWeekData" />
		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
			<Z-timeline :calData="timelineData" :calConfig="config" @eventMoved="onEventMoved" />
		</W-loadable>

		<v-snackbar 
			v-model="errorToast" 
			:timeout="2000" 
			color="red"
			:rounded="true"
		>
			{{ errorToastMessage }}
		</v-snackbar>
	</div>
</template>

<script>
import ATaskFilter from './_components/a-tasks-filter.vue'
import ZTimeline from './_components/z-timeline.vue'

export default {
	components: {
		ATaskFilter,
		ZTimeline,
	},

	data() {
		return {
			timelineData: null,
			errorToast: false,
			errorToastMessage: "Nepodarilo sa nacitat data!",
			dataLoaded: false,
			config: {
				date: new Date(),
				startHour: 8,
				endHour: 16,
			}
		}
	},

	methods: {
		async getWeekData(week) {
			this.config.date = week.firstDay
			try {
				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
				this.formatData()
			} catch(error) {
				this.timelineData = {}
				console.error(error)
				this.triggerToast("Nepodarilo sa nacitat data!")
			}
		},

		formatData() {
			// format events
			this.timelineData.dates.forEach(event => {
				event.start = new Date(event.starts_at)
				event.end = new Date(event.ends_at)
				event.name = this.timelineData.name
				event.surname = this.timelineData.surname
				delete event.starts_at
				delete event.ends_at
			})

			// format working hours
			this.config.startHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
			this.config.endHour = Number(this.timelineData.work_hours_to.split(':')[0]) + 1
		},

		triggerToast(message) {
			this.errorToastMessage = message
			this.errorToast = true
		},

		async onEventMoved(event) {
			try {
				await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: event.event.start, end: event.event.end})
			} catch(error) {
				this.triggerToast("Nepodarilo sa presunut ulohu!")
				this.timelineData.dates.filter(e => {
					if (e.id == event.event.id) {
						e.start = new Date(event.originalEvent.start)
						e.end = new Date(event.originalEvent.end)
					}
				})
			}
		}
	}
}
</script>

<style lang="sass" scoped>
.w-loadable
	text-align: center
	padding-top: 20px
	height: 100%
</style>