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

<template>
	<div ref="page">
		<A-project-filter v-if="$store.getters['tm/isInitialized']" @filterChanged="onFilterChanged" />

		<W-loadable class="non-projects" :content="filteredProjects" emptyMessage="Nenašli sa žiadne vyhovujúce projekty">
			<A-project-calendar :events="filteredProjects" :month="filter.month" @open-detail="openMasterTaskModal" />
		</W-loadable>
	</div>
</template>

<script>
import AProjectCalendar from './_components/a-project-calendar.vue'
import AProjectFilter 	from './_components/a-project-filter.vue'
import FilterMixin		from '../_mixins/Filter.mixin'

export default {
	mixins: [FilterMixin],

	components: {
		AProjectCalendar,
		AProjectFilter
	},

	data() {
		return {
			mastertasks: null,
			filter: null
		}
	},

	computed: {
		filteredProjects() {
			if (!this.mastertasks)
				return null

				// return this.mastertasks.map(event => {

				// 	const startOfDay = new Date(event.starts_at);
				// 	startOfDay.setHours(0, 0, 0, 0); // Set to 00:00:00.000

				// 	const endOfDay = new Date(event.deadline);
				// 	endOfDay.setHours(23, 59, 59, 999); // Set to 23:59:59.999

				// 	console.log({
				// 		start: startOfDay,
				// 		end: endOfDay,
				// 	})

				// 	return {
				// 		id: event.id,
				// 		title: `${event.project_code} - ${event.name}`,
				// 		title_html: `${event.project_code} - <b>${event.name}</b>`,
				// 		start: startOfDay,
				// 		end: endOfDay,
				// 		is_finished: event.is_finished,
				// 		project_code: event.project_code,
				// 		backgroundColor: `${event.color}`,
				// 		borderColor: event.color
				// 	};
				// });
				return this.mastertasks.map(event => {
				// const currentDate = new Date()
				// const eventDeadline = new Date(event.deadline)

				// const isEventOnCurrentDate =
				// eventDeadline.getFullYear() === currentDate.getFullYear() &&
				// eventDeadline.getMonth() === currentDate.getMonth() &&
				// eventDeadline.getDate() === currentDate.getDate()

				// console.log("isEventOnCurrentDate:", isEventOnCurrentDate)
				// console.log("eventDeadline:", eventDeadline)

				// const backgroundColor = isEventOnCurrentDate ? 'red' : event.color
				// console.log("backgroundColor:", backgroundColor)
				return {
					id: event.id,
					title: `${event.project_code} - ${event.name}`,
					title_html: `${event.project_code} - <b>${event.name}</b>`,
					start: new Date(event.starts_at),
					end: new Date(event.deadline),
					is_finished: event.is_finished,
					project_code: event.project_code,
					backgroundColor: `${event.color}`,
					borderColor: event.color
				}
			})
		}
	},

	mounted() {
		this.$events.on('on-mastertask-edited', () => this.onFilterChanged(this.filter))
		this.$events.on('on-mastertask-deleted', () => this.onFilterChanged(this.filter))
	},

	unmounted() {
		this.$events.off('on-mastertask-edited')
		this.$events.off('on-mastertask-deleted')
	},

	methods: {
		async onFilterChanged(filter) {
			this.mastertasks = null
			this.filter = filter
			const urlQueryObject = {}

			if (filter.employeeId) 	urlQueryObject.employee_id 	= filter.employeeId
			if (filter.projectId) 	urlQueryObject.project_id 	= filter.projectId
			if (filter.teamId) 		urlQueryObject.team_id 		= filter.teamId
			if (filter.createdById) urlQueryObject.created_by 	= filter.createdById
			if (filter.isFinished)  urlQueryObject.is_finished 	= filter.isFinished ? 1 : 0
			if (filter.month)  		urlQueryObject.created_at 	= filter.month

			const queryParameters = new URLSearchParams(urlQueryObject).toString()

			try {
				const { mastertasks } = await this.$axios.get_auth(`v1/mastertasks?${queryParameters}`)
				this.mastertasks = mastertasks
			} catch (error) {
				this.$toast.error('Nepodarilo sa nacitat data!')
			}

			this._initScrollListener()
		},

		openMasterTaskModal(mastertaskId) {
			const mastertask = this.mastertasks.find(mastertask => mastertask.id == mastertaskId)
			this.$events.emit('show-mastertask-modal', {mastertask, editMode: false})
		}
	}
}
</script>

<style lang="sass" scoped>
.non-projects
	height: 100vw !important
</style>