.

app/src/plugins/tm@_store/store/index.ts

@@ -1,6 +1,8 @@
 import axios from '@/plugins/w@custom/axios/models/axios'
 import store from '@/store'
 
+import ax from 'axios'
+
 export default {
 	namespaced: true,
 

app/src/plugins/tm@dashboard/_components/z-timeline.vue

@@ -57,7 +57,6 @@
 			</template>
 
 			<template v-slot:event="{ event }">
-				{{ event }}
 				<!-- <div v-if="!event.nonWorking" @click.stop="editTask(event.id)" class="w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}"> -->
 				<div v-if="!event.nonWorking" class="w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
 					<div class="event-content">

app/src/plugins/tm@dashboard/tasks/_utils/timeline.utils.ts

@@ -58,7 +58,7 @@ export default {
 		for (let i = 0; i < 7; i++) {
 			nonWorkingHours.push({
 				title: "Non working hours",
-				start: setMinutes(setHours(date, 0), 59),
+				start: setMinutes(setHours(date, 0), 0),
 				end: setMinutes(setHours(date, employee.work_start), 0),
 				nonWorking: true,
 				split: i + 1,

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -8,7 +8,7 @@
 <script>
 import ATaskFilter 								from './_components/a-tasks-filter.vue'
 import ZTimeline 								from '@/plugins/tm@dashboard/_components/z-timeline.vue'
-import { addDays, differenceInCalendarDays } 	from 'date-fns'
+import { addDays, subDays } 					from 'date-fns'
 import { mapGetters } 							from 'vuex'
 import moment 									from 'moment'
 import timelineUtils 							from './_utils/timeline.utils'
@@ -24,17 +24,13 @@ export default {
 			filter: null,
 			subtasks: null,
 			config: {
-				date: new Date(),
+				date: subDays(new Date(), 1),
 				scrollHour: 7,
 			}
 		}
 	},
 
 	computed: {
-		...mapGetters('tm', [
-			'ongoingSubtasks'
-		]),
-
 		splitDays() {
 			const days = []
 
@@ -100,8 +96,6 @@ export default {
 				const { subtasks } 		= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
 				this.config.scrollHour 	= this.filter.employee.work_start - 1
 				this.subtasks			= subtasks
-
-				setTimeout(() => console.log(this.timelineData), 1000)
 			} catch (error) {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}

app/src/plugins/tm@dashboard/teams/_components/a-team-filter.vue

@@ -31,80 +31,78 @@
 
 <script>
 import { addDays, subDays } from 'date-fns'
+import { mapGetters } from 'vuex'
 
 export default {
+	emits: ['filter-changed'],
+	
 	props: {
 		unscheduledTime: {
-			type: String,
-			default() {
-				return '0'
-			}
+			type: Number,
+			default: () => 0
 		}
 	},
 
 	data() {
 		return {
-			teams: [],
-
+			date: new Date(),
 			selectedTeam: null,
-
-			selectedDate: new Date(),
-			day: new Date(),
-			date: new Date()
+			selectedDate: null,
+			time: null,
+			filter: {
+				start: null,
+				end: null,
+				team: null
+			}
 		}
 	},
-
+	
 	computed: {
-		time() {
-			return this.unscheduledTime
-		},
+		...mapGetters('auth', ['user']),
+		...mapGetters('tm', ['teams']),
 	},
 
-	created() {
-		this._getData()
+	mounted() {
+		// TODO automaticky preselect
+		this.selectedTeam = this.teams[1].id
+
+		this.$nextTick(() => this._updateFilters())
 	},
 
 	methods: {
-		async _getData() {
-			await this._getTeams()
-			this._getDay(false)
-			this.$nextTick(() => {
-				this.$emit('dataChanged', {date: this.day, teamId: this.selectedTeam})
-			})
-		},
-
-		async _getTeams() {
-			this.teams =  await this.$axios.get_auth_data('v1/teams')
-			this.selectedTeam = this.teams[0]
-		},
-
-		_getDay(emitDataChanged = true) {
-			const today = new Date()
-			const yesterday = new Date((new Date()).setDate(today.getDate() - 1))
-			const tomorrow = new Date((new Date()).setDate(today.getDate() + 1))
-
-			if (today.toLocaleDateString('sk-SK') === this.day.toLocaleDateString('sk-SK')) this.selectedDate = "Dnes"
-			else if (yesterday.toLocaleDateString('sk-SK') === this.day.toLocaleDateString('sk-SK')) this.selectedDate = "Včera"
-			else if (tomorrow.toLocaleDateString('sk-SK') === this.day.toLocaleDateString('sk-SK')) this.selectedDate = "Zajtra"
-			else this.selectedDate = String(this.day.toLocaleDateString('sk-SK'))
-
-			if (emitDataChanged) this.$emit('dataChanged', {date: this.day, teamId: this.selectedTeam})
-		},
-
 		prevDay() {
-			this.day = subDays(this.day, 1)
-			this._getDay()
+			this.date = subDays(this.date, 1)
+			this._updateFilters()
 		},
 
 		nextDay() {
-			this.day = addDays(this.day, 1)
-			this._getDay()
+			this.date = addDays(this.date, 1)
+			this._updateFilters()
+		},
+
+		_updateFilters() {
+			this.filter.start 	= this.date
+			this.filter.end 	= addDays(this.date, 1)
+			this.selectedDate 	= String(this.filter.start?.toLocaleDateString('sk-SK'))
+
+			this._emitFilterChanged()
+		},
+
+		_emitFilterChanged() {
+			if (!this.filter.start || !this.filter.end || !this.filter.team) return
+
+			this.$emit('filter-changed', this.filter)
 		}
 	},
 
 	watch: {
-		selectedTeam() {
-			this.$emit('dataChanged', {date: this.day, teamId: this.selectedTeam})
+		selectedTeam(id) {
+			this.filter.team = this.teams.find(team => team.id == id)
+			this._emitFilterChanged()
+		},
+
+		unscheduledTime() {
+			this.time = this.unscheduledTime
 		}
 	}
 }

app/src/plugins/tm@dashboard/teams/teams.vue

@@ -1,10 +1,8 @@
 <template>
 	<div>
-		<A-team-filter :unscheduledTime="unscheduledTime" @dataChanged="getTimelineData" />
-
-		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
-			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @deleteTask="deleteTask" />
-		</W-loadable>
+		<A-team-filter v-if="$store.getters['tm/isInitialized']"  :unscheduledTime="timelineData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
+		
+		<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
 	</div>
 </template>
 
@@ -12,7 +10,9 @@
 import ATeamFilter from './_components/a-team-filter.vue'
 import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'
 
-import { setHours, setMinutes, setSeconds } from 'date-fns'
+import { format, setHours, setMinutes, setSeconds, subDays, addDays } from 'date-fns'
+import moment from 'moment'
+import timelineUtils from '../tasks/_utils/timeline.utils'
 
 export default {
 	components: {
@@ -21,14 +21,23 @@ export default {
 	},
 
 	data() {
+		// return {
+		// 	timelineData: null,
+		// 	formatedTasks: {tasks: []},
+		// 	errorToast: false,
+		// 	errorToastMessage: "Nepodarilo sa nacitat data!",
+		// 	dataLoaded: false,
+		// 	splitDays: [],
+		// 	unscheduledTime: 0,
+		// 	config: {
+		// 		date: new Date(),
+		// 		scrollHour: 7,
+		// 	}
+		// }
+
 		return {
-			timelineData: null,
-			formatedTasks: {tasks: []},
-			errorToast: false,
-			errorToastMessage: "Nepodarilo sa nacitat data!",
-			dataLoaded: false,
-			splitDays: [],
-			unscheduledTime: 0,
+			filter: null,
+			subtasks: null,
 			config: {
 				date: new Date(),
 				scrollHour: 7,
@@ -36,7 +45,142 @@ export default {
 		}
 	},
 
+	computed: {
+		splitDays() {
+			const days = []
+
+			this.filter.team.employees.forEach((employee, index) => {
+				days.push({
+					id: index,
+					name: `${employee.name} ${employee.surname}`,
+					initials: employee.name.charAt(0).toUpperCase() + employee.surname.charAt(0).toUpperCase(),
+					unscheduledTime: 111
+				})
+			})
+
+			return days
+		},
+
+		unscheduledTime() {
+			return 222
+			// if (!this.subtasks) return 0
+
+			// return timelineUtils.getUnscheduledTime(this.subtasks)
+		},
+
+
+		timelineData() {
+			if (!this.subtasks)
+				return 
+
+			console.log([...this._generateNonWorking(), ...this._generateTasks()])
+
+			return {
+				unscheduledTime: 333,
+				tasks: [...this._generateNonWorking(), ...this._generateTasks()]
+			}
+		}
+	},
+
 	methods: {
+		_generateTasks() {
+			const tasks = []
+			const calendarDate 	= moment(this.filter.start).format('DD-MM-YYYY')
+			// const diffInDays 	= differenceInCalendarDays(date, new Date(timeblock.start))
+
+			this.subtasks.forEach(subtask => {
+				let split 	 = null
+				let employee = null
+
+				this.filter.team.employees.forEach((e, index) => {
+					if (e.id == subtask.employee_id) {
+						split = index
+						employee = e
+					}
+				})
+
+				subtask.timeblocks.forEach(timeblock => {
+					const formattedDate = moment(timeblock.start).format('DD-MM-YYYY')
+
+					if (formattedDate == calendarDate) {
+						tasks.push({
+							id: subtask.id,
+							start: new Date(timeblock.start),
+							end: new Date(timeblock.end),
+							master_task: subtask.master_task,
+							name: employee.name,
+							surname: employee.surname,
+							// date: new Date(timeblock.start),
+							isWeekend: moment(timeblock.start).day() % 6 == 0,
+							initials: employee.name.charAt(0).toUpperCase() + employee.surname.charAt(0).toUpperCase(),
+							split: split,
+							project_code: subtask.project_code,
+							subtask: subtask,
+							_timeblock_id: timeblock.id
+						})
+					}
+				})
+			})
+
+			return tasks
+		},
+
+		_generateNonWorking() {
+			const tasks 		  = []
+			let earliestStartHour = null
+			const date 			  = new Date(this.filter.start)
+
+			this.filter.team.employees.forEach((employee, index) => {
+				if (!earliestStartHour || employee.work_start < earliestStartHour)
+					earliestStartHour = employee.work_start
+
+				tasks.push({
+					title: "Non working hours",
+					start: setMinutes(setHours(date, 0), 0),
+					end: setMinutes(setHours(date, employee.work_start), 0),
+					split: index,
+					nonWorking: true,
+					draggable: false
+				})
+
+				tasks.push({
+					title: "Non working hours",
+					start: setMinutes(setHours(date, employee.work_end), 0),
+					end: setMinutes(setHours(date, 23), 59),
+					split: index,
+					nonWorking: true,
+					draggable: false
+				})
+			})
+
+			this.config.scrollHour = earliestStartHour - 1
+			return tasks
+		},
+
+		async onFilterChanged(filter) {
+			this.filter = filter
+
+			const urlQueryObject = {}
+
+			if (filter.start) 		urlQueryObject.start 		= moment(filter.start).format('YYYY-MM-DD')
+			if (filter.end) 		urlQueryObject.end 			= moment(filter.end).format('YYYY-MM-DD')
+			if (filter.team) 		urlQueryObject.team_id 		= filter.team.id
+
+			const queryParameters = new URLSearchParams(urlQueryObject).toString()
+
+			try {
+				const { subtasks } 		= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
+				this.subtasks			= subtasks
+			} catch (error) {
+				this.$toast.error('Nepodarilo sa nacitat data!')
+			}
+		},
+
+
+
+
+
+
 		async getTimelineData(data) {
 			this.config.date = data.date
 			try {