.

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 {