Merge branch 'main' of bitbucket.org:studiotem/jandl-taskmanager-app

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,9 +57,9 @@
 			</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}">
+					<h1>KOKOT</h1>
 					<div class="event-content">
 						<small v-if="(event.subtask.project_code && !event.is_blocker)" class="project-code">{{ event.subtask.project_code }}</small>
 						<h3>{{ event.subtask.master_task?.name || event.subtask.master_task }}</h3>

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,8 @@
 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 { setHours, setMinutes } from 'date-fns'
+import moment from 'moment'
 
 export default {
 	components: {
@@ -22,13 +21,8 @@ export default {
 
 	data() {
 		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,115 +30,135 @@ 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: {
-		async getTimelineData(data) {
-			this.config.date = data.date
-			try {
-				this.timelineData = await this.$axios.get_auth_data('v1/overview/teams', {date: data.date, team: data.teamId})
-				this.generateEmployees()
-				this.formatTimelineDataToTimelineFormat()
-				this.generateNonWorkingHours(data.date)
-			} catch(error) {
-				this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
-				console.error(error)
-			}
-		},
+		_generateTasks() {
+			const tasks = []
+			const calendarDate 	= moment(this.filter.start).format('DD-MM-YYYY')
+			// const diffInDays 	= differenceInCalendarDays(date, new Date(timeblock.start))
 
-		generateEmployees() {
-			this.splitDays = []
-			for (let i = 0; i < this.timelineData.length; i++) {
-				this.timelineData[i].splitId = i + 1
-				this.splitDays.push({
-					id: i + 1,
-					employeeId: this.timelineData[i].id,
-					firstName: this.timelineData[i].name,
-					name: this.timelineData[i].name + " " + this.timelineData[i].surname,
-					initials: this.timelineData[i].name.charAt(0).toUpperCase() + this.timelineData[i].surname.charAt(0).toUpperCase(),
-					unscheduledTime: Math.floor(this.timelineData[i].unscheduled_time / 60) + "," + String(this.timelineData[i].unscheduled_time % 60)[0]
+			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
+					}
 				})
-			}
-		},
 
-		formatTimelineDataToTimelineFormat() {
-			this.timelineData.tasks = []
-			this.unscheduledTime = 0
+				subtask.timeblocks.forEach(timeblock => {
+					const formattedDate = moment(timeblock.start).format('DD-MM-YYYY')
 
-			// format events
-			this.timelineData.forEach(user => {
-				user.tasks.forEach(event => {
-					event.name = user.name
-					event.surname = user.surname
-
-					event.start = new Date(event.starts_at)
-					event.end = new Date(event.ends_at)
-					event.split = user.splitId
+					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
+						})
+					}
 				})
-				this.timelineData.tasks.push(...user.tasks)
-				this.unscheduledTime += user.unscheduled_time
 			})
 
-			this.unscheduledTime = Math.floor(this.unscheduledTime / 60) + "," + String(this.unscheduledTime % 60)[0] + " h"
+			return tasks
 		},
 
-		generateNonWorkingHours(date) {
-			let nonWorkingHours = []
-			let workStartHour = 23
+		_generateNonWorking() {
+			const tasks 		  = []
+			let earliestStartHour = null
+			const date 			  = new Date(this.filter.start)
 
-			this.timelineData.forEach(user => {
-				const start1 = { hour: 0, minutes: 0, seconds: 0}
-				const end1 = { hour: Number(user.work_hours_from.split(':')[0]), minutes: Number(user.work_hours_from.split(':')[1]) - 1, seconds: 0 }
-				const start2 = { hour: Number(user.work_hours_to.split(':')[0]), minutes: Number(user.work_hours_to.split(':')[1]) + 1, seconds: 0 }
-				const end2 = { hour: 23, minutes: 59, seconds: 59}
+			this.filter.team.employees.forEach((employee, index) => {
+				if (!earliestStartHour || employee.work_start < earliestStartHour)
+					earliestStartHour = employee.work_start
 
-				if (workStartHour > Number(user.work_hours_from.split(':')[0])) workStartHour = Number(user.work_hours_from.split(':')[0])
-
-				nonWorkingHours.push({
+				tasks.push({
 					title: "Non working hours",
-					start: setSeconds(setMinutes(setHours(date, start1.hour), start1.minutes), start1.seconds),
-					end: setSeconds(setMinutes(setHours(date, end1.hour), end1.minutes), end1.seconds),
+					start: setMinutes(setHours(date, 0), 0),
+					end: setMinutes(setHours(date, employee.work_start), 0),
+					split: index,
 					nonWorking: true,
-					split: user.splitId,
 					draggable: false
 				})
-				nonWorkingHours.push({
+
+				tasks.push({
 					title: "Non working hours",
-					start: setSeconds(setMinutes(setHours(date, start2.hour), start2.minutes), start2.seconds),
-					end: setSeconds(setMinutes(setHours(date, end2.hour), end2.minutes), end2.seconds),
+					start: setMinutes(setHours(date, employee.work_end), 0),
+					end: setMinutes(setHours(date, 23), 59),
+					split: index,
 					nonWorking: true,
-					split: user.splitId,
 					draggable: false
 				})
 			})
 
-			this.config.scrollHour = workStartHour - 1
-			this.timelineData.tasks.push(...nonWorkingHours)
+			this.config.scrollHour = earliestStartHour - 1
+			return tasks
 		},
 
-		async onEventMoved(event) {
-			// console.log("drag", event)
-			const task = this.timelineData.tasks.find(task => task.id == event.event.id)
-			const newEmployeeId = this.splitDays.find(split => split.id == event.newSplit).employeeId
+		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 {
-				// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newEmployeeId})
-				task.split = event.newSplit
-				task.start = event.event.start
-				task.end = event.event.end
-			} catch(error) {
-				task.split = event.oldSplit
-				task.start = new Date(event.originalEvent.start)
-				task.end = new Date(event.originalEvent.end)
-				this.$toast.error(error)
+				const { subtasks } 		= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
+				this.subtasks			= subtasks
+			} catch (error) {
+				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
-		},
-
-		completeTask(id) {
-			const task = this.timelineData.tasks.find(task => task.id == id)
-			task.completed = !task.completed
-		},
-
-		deleteTask(id) {
-			this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
 		}
 	}
 }