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

app/src/plugins/app/_config/App.vue

@@ -10,6 +10,7 @@
 
 	<Z-task-modal 				ref="z-task-modal" 					@on-subtask-edited="onTaskEdited" />
 	<Z-delete-task-modal 		ref="z-delete-task-modal" 			@on-subtask-deleted="onTaskDeleted" />
+	<Z-delete-blocker-modal 	ref="z-delete-blocker-modal" 		@on-blocker-deleted="onBlockerDeleted" />
 	<Z-delete-master-task-modal ref="z-delete-master-task-modal" 	@on-mastertask-deleted="onMasterTaskDeleted" />
 	<Z-complete-task-modal 		ref="z-complete-task-modal" 		@on-subtask-edited="onTaskEdited" />
 	<Z-task-add-time-modal 		ref="z-task-add-time-modal" />
@@ -23,6 +24,7 @@ import ZDeleteTeamModal 		from '@/plugins/tm@modal/team/z-delete-team-modal.vue'
 import ZTeamModal				from '@/plugins/tm@modal/team/z-team-modal.vue'
 import ZDeleteTaskModal 		from '@/plugins/tm@modal/task/z-delete-task-modal.vue'
 import ZTaskModal 				from '@/plugins/tm@modal/task/z-task-modal.vue'
+import ZDeleteBlockerModal		from '@/plugins/tm@modal/blocker/z-delete-blocker-modal.vue'
 import ZCompleteTaskModal 		from '@/plugins/tm@modal/task/z-complete-task-modal.vue'
 import ZTaskAddTimeModal 		from '@/plugins/tm@modal/task/z-task-add-time-modal.vue'
 import ZBlockerModal 			from '@/plugins/tm@modal/blocker/z-blocker-modal.vue'
@@ -34,6 +36,7 @@ export default {
 		ZDeleteTeamModal,
 		ZTeamModal,
 		ZDeleteTaskModal,
+		ZDeleteBlockerModal,
 		ZTaskModal,
 		ZMasterTaskModal,
 		ZCompleteTaskModal,
@@ -55,6 +58,10 @@ export default {
 			this.$refs['z-delete-task-modal'].showModal({subtask})
 		})
 
+		this.$events.on('show-delete-blocker-modal', ({blocker}) => {
+			this.$refs['z-delete-blocker-modal'].showModal({blocker})
+		})
+
 		this.$events.on('show-delete-master-task-modal', ({mastertask}) => {
 			this.$refs['z-delete-master-task-modal'].showModal({mastertask})
 		})
@@ -111,6 +118,10 @@ export default {
 			this.$events.emit('on-subtask-deleted', task)
 		},
 
+		onBlockerDeleted(task) {
+			this.$events.emit('on-blocker-deleted', task)
+		},
+
 		onTaskEdited(task) {
 			this.$events.emit('on-subtask-edited', task)
 		},

app/src/plugins/app@vendor/vue-cal/event.vue

@@ -157,7 +157,7 @@ export default {
 		},
 
 		onDragStart(e) {
-			if (this.event.nonWorking) return
+			if (this.event.type == 'blocker' || this.event.type == 'non-working-hours') return
 			this.event.draggingStatic = false
 			this.dnd && this.dnd.eventDragStart(e, this.event);
 		},

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

@@ -57,30 +57,43 @@
 			</template>
 
 			<template v-slot: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.type == 'non-working-hours'" class="custom-event-body non-working-event w-100 h-100 d-flex flex-column justify-center">
-				<div v-if="!event.nonWorking" class="custom-event-body 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}" :style="{backgroundColor: event.subtask.color}">
+					<div class="d-flex justify-center align-center">
-					<div class="event-content">
+						<v-icon icon="mdi-cancel" color="black"></v-icon>
-						<small v-if="(event.subtask.project_code && !event.is_blocker)" class="project-code">{{ event.subtask.project_code }}</small>
+						<h3 class="mb-0 ms-2">{{ event.title }}</h3>
+					</div>
+				</div>
+
+				<div v-else class="custom-event-body 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}" :style="{backgroundColor: event.color || event.subtask.color}">
+					<div class="event-content" :class="event.type || 'subtask'">
+						<template v-if="event.type == 'blocker'">
+							<h3>{{ event.blocker.name }}</h3>
+						</template>
+						
+						<template v-else>
+							<small v-if="event.subtask.project_code" class="project-code">{{ event.subtask.project_code }}</small>
 							<h3>{{ event.subtask.master_task?.name || event.subtask.master_task }}</h3>
+						</template>
+						
 						<div class="d-flex align-center event-details event-initials-wrapper">
 							<div class="event-initials d-flex justify-center align-center">
 								<small>{{ event.initials }}</small>
 							</div>
-							<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
+							<small class="event-initials-date">{{ event.date?.toLocaleDateString('sk-SK') }}</small>
 						</div>
 					</div>
 
 					<div class="event-footer d-flex">
-						<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.subtask.is_finished}" @click.stop="completeTask(event)"><img :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt=""></v-btn>
+						<template v-if="event.type == 'blocker'">
+							<v-btn rounded class="event-footer-button me-2" @click.stop="editBlocker(event)"><img :src="require('@/plugins/app/_img/icons/pencil.svg')" alt=""></v-btn>
+							<v-btn rounded class="event-footer-button me-2" @click.stop="deleteBlocker(event)"><img :src="require('@/plugins/app/_img/icons/bin.svg')" alt=""></v-btn>
+						</template>
+
+						<template v-else>
+							<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.subtask?.is_finished}" @click.stop="completeTask(event)"><img :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt=""></v-btn>
 							<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event)"><img :src="require('@/plugins/app/_img/icons/eye.svg')" alt=""></v-btn>
 							<v-btn rounded class="event-footer-button me-2" @click.stop="deleteTask(event)"><img :src="require('@/plugins/app/_img/icons/bin.svg')" alt=""></v-btn>
-					</div>
+						</template>
-				</div>
-
-				<div v-else class="custom-event-body non-working-event w-100 h-100 d-flex flex-column justify-center">
-					<div class="d-flex justify-center align-center">
-						<v-icon icon="mdi-cancel" color="black"></v-icon>
-						<h3 class="mb-0 ms-2">{{ event.title }}</h3>
 					</div>
 				</div>
 			</template>
@@ -196,7 +209,7 @@ export default {
 		},
 
 		taskClicked(subtask) {
-			if (subtask.nonWorking) return
+			if (subtask.type == 'non-working-hours') return
 			// console.log("task", task)
 			if (subtask.end.getTime() - subtask.start.getTime() <= 3600000) {
 				// console.log("ShortTask")
@@ -212,13 +225,21 @@ export default {
 			this.$events.emit('show-complete-task-modal', { subtask })
 		},
 
-		editTask(subtask, editMode) {
+		editTask({subtask}) {
-			this.$events.emit('show-subtask-modal', {subtask, editMode})
+			this.$events.emit('show-subtask-modal', {subtask})
 		},
 
-		deleteTask(subtask) {
+		deleteTask({ subtask }) {
 			this.$events.emit('show-delete-task-modal', {subtask})
-		}
+		},
+
+		editBlocker({ blocker }) {
+			this.$events.emit('show-blocker-modal', {blocker})
+		},
+
+		deleteBlocker({ blocker }) {
+			this.$events.emit('show-delete-blocker-modal', {blocker})
+		},
 	}
 }
 </script>
@@ -363,6 +384,17 @@ export default {
 					.custom-event-body
 						padding: 20px 10px
 
+					.event-content
+						&.blocker
+							*
+								color: #ffffff !important
+
+							.event-details .event-initials
+								border: 1px solid white
+
+							.event-footer
+								border-top: 1px solid rgba(255, 255, 255, 0.19)
+
 					&:has(.completed)
 						background: rgb(251, 251, 251) !important
 						border: 1px solid #cccccc !important
@@ -378,12 +410,11 @@ export default {
 						left: 0 !important
 
 					&:not(.vuecal__event--focus)
-						&:has(.short-event)
+						&:has(.micro-event) .custom-event-body
-							padding: 10px !important
+							padding: 5px !important
-
-						&:has(.micro-event)
-							padding: 5px 10px !important
 
+						&:has(.short-event) .custom-event-body:not(.micro-event)
+							padding: 10px 5px !important
 						.short-event
 							.project-code
 								display: none !important
@@ -420,19 +451,6 @@ export default {
 							.event-footer
 								display: none !important
 
-					&.event-blocker
-						background: #B00020 !important
-
-						h3,
-						.event-details *
-							color: white !important
-
-						.event-details .event-initials
-							border: 1px solid white
-
-						.event-footer
-							border-top: 1px solid rgba(255, 255, 255, 0.19)
-
 					.project-code
 						margin: 0 0 20px
 						display: block

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

@@ -21,12 +21,16 @@ export default {
 	},
 
 	generateTimelineEvents(subtasks, employee, date) {
-		const events  = []
+		let events  = []
 
 		subtasks.forEach(subtask => {
+			if (subtask.type == 'blocker') {
+				events = [...events, ...this._generateEventsFromBlocker(subtask, date)]
+			} else {
 				subtask.timeblocks?.forEach((timeblock) => {
 					events.push(this._composeTimelineEvent(subtask, employee, date, timeblock))
 				})
+			}
 		})
 
 		return events
@@ -50,30 +54,76 @@ export default {
 		}
 	},
 
+	_generateEventsFromBlocker(blocker, date) {
+		const start = moment(blocker.start)
+		const end 	= moment(blocker.end)
+
+		const dates 	= start == end ? [moment(start).format('YYYY-MM-DD')] : this._getDatesInRange(start, end)
+		
+		const blockers 	= dates.map(d => {
+			const diffInDays = differenceInCalendarDays(date, new Date(d))
+			const dStart = new Date(moment(d).set({hours: start.hours(), minutes: start.minutes()}).format('YYYY-MM-DD HH:mm'))
+			const dEnd   = new Date(moment(d).set({hours: end.hours(), minutes: end.minutes()}).format('YYYY-MM-DD HH:mm'))
+
+			return {
+				blocker,
+				split: this._getSplitFromDate(date, d),
+				start: addDays(dStart, diffInDays),
+				end: addDays(dEnd, diffInDays),
+				date: new Date(d),
+				type: 'blocker',
+				initials: `${blocker.employee?.name[0]}${blocker.employee?.surname[0]}`,
+				color: '#B00020',
+				draggable: false
+			}
+		})
+
+		
+
+		console.log(blockers)
+
+		return blockers
+	},
+
+	_getDatesInRange(start, end) {
+		const dates = []
+
+		while (start <= end) {
+			dates.push(moment(start).format('YYYY-MM-DD'))
+			start.add(1, 'day')
+		}
+
+		return dates
+	},
+
 	generateTimelineNonWorkingHours(date, employee) {
-		const nonWorkingHours = []
+		const events = []
+
+		const { start: dayStart, end: dayEnd } = this._getDayStartEnd(date)
 
 		for (let i = 0; i < 7; i++) {
-			nonWorkingHours.push({
+			events.push({
 				title: "Non working hours",
-				start: setMinutes(setHours(date, 0), 0),
+				start: dayStart,
-				end: setMinutes(setHours(date, employee.work_start), 0),
+				end: this._setMinutesToDate(employee.work_start, date),
-				nonWorking: true,
+				type: 'non-working-hours',
 				split: i + 1,
 				draggable: false
 			})
 
-			nonWorkingHours.push({
+			events.push({
 				title: "Non working hours",
-				start: setMinutes(setHours(date, employee.work_end), 0),
+				start: this._setMinutesToDate(employee.work_end, date),
-				end: setMinutes(setHours(date, 23), 59),
+				end: dayEnd,
-				nonWorking: true,
+				type: 'non-working-hours',
 				split: i + 1,
 				draggable: false
 			})
 		}
 
-		return nonWorkingHours
+		console.log(events)
+
+		return events
 	},
 
 	_getSplitFromDate(date, start) {
@@ -84,5 +134,18 @@ export default {
 		let diff =(date1.getTime() - date2.getTime()) / 1000;
 		diff /= (60 * 60)
 		return Math.abs(Math.round(diff))
+	},
+
+	_getDayStartEnd(date) {
+		return {
+			start: this._setMinutesToDate(0, date),
+			end: this._setMinutesToDate(1439, date)
+		}
+	},
+
+	_setMinutesToDate(minutes, date) {
+		const newDate = new Date(date)
+		newDate.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0)
+		return newDate
 	}
 }

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

@@ -43,7 +43,7 @@ export default {
 				if (!workingHours[task.split])
 					workingHours[task.split] = 0
 
-				if (task.nonWorking || task.subtask.is_finished)
+				if (task.type == 'non-working-hours' || task.subtask?.is_finished || task.blocker?.is_finished)
 					return
 
 				workingHours[task.split] += timelineUtils._getDifferenceInHours(task.end, task.start)
@@ -91,11 +91,21 @@ export default {
 		this.$events.on('on-subtask-deleted', () => {
 			this.onFilterChanged(this.filter)
 		})
+
+		this.$events.on('on-blocker-edited', () => {
+			this.onFilterChanged(this.filter)
+		})
+
+		this.$events.on('on-blocker-deleted', () => {
+			this.onFilterChanged(this.filter)
+		})
 	},
 
 	unmounted() {
 		this.$events.off('on-subtask-edited')
 		this.$events.off('on-subtask-deleted')
+		this.$events.off('on-blocker-edited')
+		this.$events.off('on-blocker-deleted')
 	},
 
 	methods: {
@@ -110,10 +120,10 @@ export default {
 			const queryParameters = new URLSearchParams(urlQueryObject).toString()
 
 			try {
-				const { subtasks } 		= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
+				const { subtasks, blockers } 	= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
 				this.config.scrollHour 			= this.filter?.employee.work_start - 1
 				this.config.date 				= this.filter.start
-				this.subtasks			= subtasks
+				this.subtasks					= [...subtasks, ...blockers.map(blocker => ({...blocker, type: 'blocker'}))]
 			} catch (error) {
 				console.log(error)
 				this.$toast.error('Nepodarilo sa nacitat data!')

app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts

@@ -0,0 +1,162 @@
+import { setHours, setMinutes } from 'date-fns'
+import moment 					from 'moment'
+import timelineUtils 			from '@/plugins/tm@dashboard/tasks/_utils/timeline.utils'
+
+
+export default {
+	computed: {
+		calendarData() {
+			if (!this.subtasks || !this.blockers)
+				return
+
+			return {
+				unscheduledTime: 333,
+				tasks: [...this._generateNonWorking(), ...this._generateTasks(), ...this._generateBlockers()]
+			}
+		},
+
+		splitDays() {
+			const days = []
+
+			this.filter.team.employees.forEach((employee, index) => {
+				let workingHours = 0
+
+				this.calendarData.tasks.forEach(task => {
+					if (task?.subtask?.employee_id == employee.id)
+						workingHours += timelineUtils._getDifferenceInHours(task.end, task.start)
+				})
+
+				days.push({
+					id: index + 1,
+					name: employee.name,
+					fullname: `${employee.name} ${employee.surname}`,
+					initials: employee.name.charAt(0).toUpperCase() + employee.surname.charAt(0).toUpperCase(),
+					unscheduledTime: workingHours
+				})
+			})
+
+			return days
+		},
+	},
+
+	methods: {
+		_generateNonWorking() {
+			const nonWorkingHours 	 = []
+			const date 				 = new Date(this.filter.start)
+			let earliestStartHour 	 = null
+			this.calendarConfig.date = date
+
+			const { start: dayStart, end: dayEnd } = this._getDayStartEnd()
+
+			this.filter.team.employees.forEach((employee, index) => {
+				if (!earliestStartHour || employee.work_start < earliestStartHour)
+					earliestStartHour = employee.work_start
+
+
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: dayStart,
+					end: this._setMinutesToDate(employee.work_start),
+					split: index + 1,
+					type: 'non-working-hours',
+					draggable: false
+				})
+
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: this._setMinutesToDate(employee.work_end),
+					end: dayEnd,
+					split: index + 1,
+					type: 'non-working-hours',
+					draggable: false
+				})
+			})
+
+			this.calendarConfig.scrollHour = earliestStartHour - 1
+			return nonWorkingHours
+		},
+
+		_generateTasks() {
+			const tasks = []
+			const calendarDate 	= moment(this.filter.start).format('DD-MM-YYYY')
+
+			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 + 1
+						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
+		},
+
+		_generateBlockers() {
+			const blockers = []
+
+			this.blockers.forEach(blocker => {
+				let split 	 = null
+				let employee = null
+
+				this.filter.team.employees.forEach((e, index) => {
+					if (e.id == blocker.employee?.id) {
+						split = index + 1
+						employee = e
+					}
+				})
+
+				blockers.push({
+					blocker,
+					split,
+					start: new Date(blocker.start),
+					end: new Date(blocker.end),
+					type: 'blocker',
+					initials: `${employee?.name[0]}${employee?.surname[0]}`,
+					color: '#B00020',
+					draggable: false,
+					isWeekend: moment(blocker.start).day() % 6 == 0,
+				})
+			})
+
+			return blockers
+		},
+
+		_getDayStartEnd() {
+			return {
+				start: this._setMinutesToDate(0),
+				end: this._setMinutesToDate(1439)
+			}
+		},
+
+		_setMinutesToDate(minutes, date = new Date(this.filter.start)) {
+			date.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0)
+			return date
+		}
+	}
+}

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

@@ -1,20 +1,20 @@
 <template>
 	<div>
-		<A-team-filter v-if="$store.getters['tm/isInitialized']"  :unscheduledTime="timelineData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
+		<A-team-filter v-if="$store.getters['tm/isInitialized']"  :unscheduledTime="calendarData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
 		
-		<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
+		<Z-timeline v-if="calendarData" :cal-data="calendarData" :cal-config="calendarConfig" :splits="splitDays" />
 	</div>
 </template>
 
 <script>
 import ATeamFilter from './_components/a-team-filter.vue'
 import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'
-
-import { setHours, setMinutes, addDays } from 'date-fns'
 import moment from 'moment'
-import timelineUtils from '../tasks/_utils/timeline.utils'
+import TeamsCalendar from './_mixins/TeamsCalendar.mixin' 
 
 export default {
+	mixins: [TeamsCalendar],
+
 	components: {
 		ATeamFilter,
 		ZTimeline,
@@ -24,56 +24,14 @@ export default {
 		return {
 			filter: null,
 			subtasks: null,
-			config: {
+			blockers: null,
+			calendarConfig: {
 				date: new Date(),
 				scrollHour: 7,
 			}
 		}
 	},
 
-	computed: {
-		splitDays() {
-			const days = []
-
-			this.filter.team.employees.forEach((employee, index) => {
-				let workingHours = 0
-
-				this.timelineData.tasks.forEach(task => {
-					if (task?.subtask?.employee_id == employee.id)
-						workingHours += timelineUtils._getDifferenceInHours(task.end, task.start)
-				})
-
-				days.push({
-					id: index + 1,
-					name: employee.name,
-					fullname: `${employee.name} ${employee.surname}`,
-					initials: employee.name.charAt(0).toUpperCase() + employee.surname.charAt(0).toUpperCase(),
-					unscheduledTime: workingHours
-				})
-			})
-
-			return days
-		},
-
-		timelineData() {
-			if (!this.subtasks)
-				return 
-
-			// let unscheduledTime = 0
-			// const tasks = [...this._generateNonWorking(), ...this._generateTasks()]
-
-			// tasks.forEach(task => {
-			// 	if (!task.nonWorking)
-			// 		workingHours += timelineUtils._getDifferenceInHours(task.end, task.start)
-			// })
-
-			return {
-				unscheduledTime: 333,
-				tasks: [...this._generateNonWorking(), ...this._generateTasks()]
-			}
-		}
-	},
-
 	mounted() {
 		this.$events.on('on-subtask-edited', () => {
 			this.onFilterChanged(this.filter)
@@ -82,89 +40,24 @@ export default {
 		this.$events.on('on-subtask-deleted', () => {
 			this.onFilterChanged(this.filter)
 		})
+
+		this.$events.on('on-blocker-edited', () => {
+			this.onFilterChanged(this.filter)
+		})
+
+		this.$events.on('on-blocker-deleted', () => {
+			this.onFilterChanged(this.filter)
+		})
 	},
 
 	unmounted() {
 		this.$events.off('on-subtask-edited')
 		this.$events.off('on-subtask-deleted')
+		this.$events.off('on-blocker-edited')
+		this.$events.off('on-blocker-deleted')
 	},
 
 	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 + 1
-						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 		  	= []
-			const date 				= new Date(this.filter.start)
-			let earliestStartHour 	= null
-			this.config.date		= date
-
-			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 + 1,
-					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 + 1,
-					nonWorking: true,
-					draggable: false
-				})
-			})
-
-			this.config.scrollHour = earliestStartHour - 1
-			return tasks
-		},
-
 		async onFilterChanged(filter) {
 			this.filter = filter
 
@@ -177,8 +70,9 @@ export default {
 			const queryParameters = new URLSearchParams(urlQueryObject).toString()
 
 			try {
-				const { subtasks } 		= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
+				const { subtasks, blockers } 	= await this.$axios.get_auth(`v1/subtasks?${queryParameters}`)
 				this.subtasks = subtasks
+				this.blockers = blockers
 			} catch (error) {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}

app/src/plugins/tm@modal/blocker/z-blocker-modal.vue

@@ -3,66 +3,44 @@
 		<W-loadable :content="blocker" class="h-100">
 			<v-card height="100%" class="d-flex flex-column">
 				<div class="d-flex justify-space-between align-center modal-header">
-					<h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť'}} blocker</h1>
+					<h1>{{ blocker.id ? "Upraviť" : "Vytvoriť" }} blocker</h1>
-					<v-icon
+					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
-						@click.stop="closeModal()"
-						icon="mdi-close"
-						size="large"
-					></v-icon>
 				</div>
 
 				<v-card-actions class="d-flex flex-column modal-content">
-					<v-text-field
+					<v-text-field @focus="onInputFocus" class="modal-input" label="Názov blockeru" :class="{ error: v$.blocker.name.$errors.length }" :hint="v$.blocker.name.$errors ? errorUtils.parseErrors(v$.blocker.name.$errors) : null" v-model="blocker.name" variant="solo"></v-text-field>
-						@focus="onInputFocus"
+					
-						class="modal-input"
+					<Z-autocomplete label="Vyhľadať zamestnanca" :value="blocker?.employee ? `${blocker?.employee?.name} ${blocker?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.blocker.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" />
-						label="Názov blockeru"
+					<Datepicker class="modal-input mb-5" v-model="datepicker" format="dd.MM.yyyy" locale="sk" :class="{ error: v$.datepicker.$errors?.length }" :validations="v$.datepicker" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" ref="datepicker" />
-						:class="{ error: v$.blocker.name.$errors.length }"
+
-						:hint="
+					<v-text-field v-model="starts_at_time" type="time" variant="solo" bg-color="white" :hint="v$.starts_at_time.$errors ? errorUtils.parseErrors(v$.starts_at_time.$errors) : null" :class="{ error: v$.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" />
-							v$.blocker.name.$errors
+					<v-text-field v-model="ends_at_time" type="time" variant="solo" bg-color="white" :hint="v$.ends_at_time.$errors ? errorUtils.parseErrors(v$.ends_at_time.$errors) : null" :class="{ error: v$.ends_at_time.$errors.length }" class="modal-input" label="Koniec" />
-								? errorUtils.parseErrors(v$.blocker.name.$errors)
-								: null
-						"
-						v-model="blocker.name"
-						variant="solo"
-					></v-text-field>
-					<v-select v-model="blocker.employee_id" ref="employee-select" @focus="onInputFocus" class="modal-input border-select" label="Priradený" :class="{ error: v$.blocker.employee_id.$errors.length }" variant="solo" :items="enrichedEmployees" item-value="id" item-title="_fullName"></v-select>
-					<Datepicker
-						class="modal-input"
-						v-model="startEndDate"
-						format="dd.MM.yyyy, HH:mm"
-						locale="sk"
-						:class="{ error: v$.blocker.start.$errors.length || v$.blocker.end.$errors.length }"
-						:validations="v$.blocker.employees"
-						select-text="Vybrať"
-						cancel-text="Zrušiť"
-						placeholder="Trvanie od - do"
-						range
-						ref="datepicker"
-					/>
 				</v-card-actions>
 
-				<v-btn class="button primary" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
+				<v-btn class="button primary" @click="save()">{{ blocker.id ? "UPRAVIŤ" : "VYTVORIŤ" }}</v-btn>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
 </template>
 
 <script>
-import Datepicker	 		from '@vuepic/vue-datepicker'
+import Datepicker from "@vuepic/vue-datepicker"
-import useVuelidate 		from '@vuelidate/core'
+import useVuelidate from "@vuelidate/core"
-import { required } 		from '@vuelidate/validators'
+import { required } from "@vuelidate/validators"
-import errorUtils 			from '@/plugins/lib@auth/_utils/error.utils'
+import errorUtils from "@/plugins/lib@auth/_utils/error.utils"
-import VuetifyFixFocusMixin from  '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
+import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus"
-import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
+import { mapGetters } from "vuex"
-import { mapGetters } from 'vuex'
+import moment from "moment"
+import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
 
 export default {
 	mixins: [VuetifyFixFocusMixin],
 
-	emits: ['close'],
+	emits: ["close"],
 
 	components: {
-		Datepicker
+		Datepicker,
+		ZAutocomplete
 	},
 
 	data() {
@@ -71,18 +49,16 @@ export default {
 			v$: useVuelidate(),
 			errorUtils,
 			blocker: null,
-			startEndDate: null
+			datepicker: null,
+			starts_at_time: null,
+			ends_at_time: null
 		}
 	},
 
 	computed: {
-		...mapGetters('tm', [
+		...mapGetters("tm", ["enrichedEmployees"]),
-			'enrichedEmployees'
-		]),
 
-		...mapGetters('auth', [
+		...mapGetters("auth", ["user"])
-			'user'
-		])
 	},
 
 	validations() {
@@ -91,8 +67,12 @@ export default {
 				name: { required },
 				start: { required },
 				end: { required },
-				employee_id: { required }
+				employee: { required }
-			}
+			},
+
+			starts_at_time: { required },
+			ends_at_time: { required },
+			datepicker: { required }
 		}
 	},
 
@@ -100,14 +80,20 @@ export default {
 		async showModal({ blocker }) {
 			this.visible = true
 			this.blocker = null
-			this.startEndDate = null
+			this.datepicker = null
+			this.starts_at_time = null
+			this.ends_at_time = null
+
 			this.$nextTick(() => this.v$.$reset())
 
 			try {
 				if (blocker?.id) {
 					blocker = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
-					blocker.employee_id = blocker.employee.id
+
-					this.startEndDate = [new Date(blocker.start), new Date(blocker.end)]
+					this.starts_at_time = moment(blocker.start).format("HH:mm")
+					this.ends_at_time = moment(blocker.end).format("HH:mm")
+					this.datepicker = new Date(blocker.start)
+
 					this.blocker = blocker
 				} else {
 					this.blocker = { start: null }
@@ -118,42 +104,62 @@ export default {
 		},
 
 		async save() {
-			if (!(await this.v$.$validate()))
+			if (!(await this.v$.$validate())) return
-				return
 
 			try {
-				if (this.blocker.id)
+				this.blocker.employee_id = this.blocker.employee?.id
-					await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
-				else
-					await this.$axios.post_auth('v1/blockers', this.blocker)
 
+				if (this.blocker.id) {
+					const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
+					this.blocker = blocker
+				} else {
+					const { blocker } = await this.$axios.post_auth("v1/blockers", this.blocker)
+					this.blocker = blocker
+				}
+
+				this.$events.emit("on-blocker-edited", this.blocker)
 				this.closeModal()
 			} catch (error) {
-				this.$toast(error)
+				this.$toast.error(error)
 			}
 		},
 
 		closeModal() {
-			this.$refs['datepicker'].clearValue()
+			this.$refs["datepicker"].clearValue()
 			this.visible = false
-			this.$emit('close', this.blocker)
+			this.$emit("close", this.blocker)
+		},
+
+		onEmployeeSelected({ key }) {
+			this.blocker.employee = this.enrichedEmployees.find(employee => employee.id == key)
+		},
+
+		_syncDatesTimes() {
+			if (!this.starts_at_time || !this.ends_at_time || !this.datepicker) return
+
+			const splittedStart = this.starts_at_time.split(":")
+			const splittedEnd = this.ends_at_time.split(":")
+
+			this.blocker.start = moment(this.datepicker)
+				.set({ hours: parseInt(splittedStart[0]), minutes: parseInt(splittedStart[1]) })
+				.format("YYYY-MM-DD HH:mm")
+			this.blocker.end = moment(this.datepicker)
+				.set({ hours: parseInt(splittedEnd[0]), minutes: parseInt(splittedEnd[1]) })
+				.format("YYYY-MM-DD HH:mm")
 		}
 	},
 
 	watch: {
-		startEndDate(value) {
+		ends_at_time() {
-			if (!value || !value[1])
+			this._syncDatesTimes()
-				return
+		},
 
-			this.startEndDate[0] = this.startEndDate[0].setHours(this.user.work_start, 0, 0, 0)
+		starts_at_time() {
-			this.startEndDate[1] = this.startEndDate[1].setHours(this.user.work_end, 0, 0, 0)
+			this._syncDatesTimes()
+		},
 
-
+		datepicker() {
-			this.blocker = {
+			this._syncDatesTimes()
-				...this.blocker,
-				start: tmUtils.formatDateTimeForBackend(this.startEndDate[0]),
-				end: tmUtils.formatDateTimeForBackend(this.startEndDate[1]),
-			}
 		}
 	}
 }

app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue

@@ -0,0 +1,55 @@
+<template>
+	<v-dialog v-model="visible" max-width="750">
+		<v-card>
+			<div class="d-flex justify-space-between align-center">
+				<h1>Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b>?</h1>
+
+				<v-icon
+					@click.stop="closeModal()"
+					icon="mdi-close"
+					size="large"
+					class="mb-15"
+				></v-icon>
+			</div>
+			<v-card-actions class="mt-10 d-flex justify-start align-center">
+				<v-btn class="button primary half" variant="flat" @click="deleteBlocker()">ÁNO</v-btn>
+				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	emits: ['on-blocker-deleted'],
+
+	data() {
+		return {
+			visible: false,
+			blocker: null
+		}
+	},
+
+	methods: {
+		async showModal({ blocker }) {
+			this.blocker = blocker
+			this.visible = true
+		},
+
+		closeModal() {
+			this.visible = false
+		},
+
+		async deleteBlocker() {
+			try {
+				await this.$axios.delete_auth(`v1/blockers/${this.blocker.id}`)
+				
+				this.$emit('on-blocker-deleted', this.blocker)
+				this.closeModal()
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
+	}
+}
+</script>

app/src/plugins/tm@modal/task/z-task-modal.vue

@@ -3,7 +3,7 @@
 		<W-loadable :content="subtask" class="h-100">
 			<v-card v-if="editMode" height="100%" class="d-flex flex-column scrolling">
 				<div class="d-flex justify-space-between align-center modal-header">
-					<h1>{{ subtask.id ? "Upraviť task" : "Vytvoriť task" }}</h1>
+					<h1>Upraviť task</h1>
 					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
 				</div>
 
@@ -12,8 +12,7 @@
 
 					<Z-autocomplete label="Master task" :options="mastertasks.map((mastertask) => ({ key: mastertask.id, value: mastertask.name }))" :validations="v$.subtask.master_task.id" :clear-on-submit="false" :value="subtask?.master_task?.name" :class="{ error: v$.subtask.master_task.id.$errors.length }" class="modal-input" @option-selected="onMasterTaskSelected" />
 
-					<v-select v-model="subtask.employee_id" ref="employee-select" @focus="onInputFocus" class="modal-input border-select" label="Priradený" :class="{ error: v$.subtask.employee_id.$errors.length }" variant="solo" :items="filteredEmployees" item-value="id" item-title="_fullName"></v-select>
+					<Z-autocomplete label="Priradený" :value="subtask?.employee ? `${subtask?.employee?.name} ${subtask?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.subtask.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" />
-
 					<v-text-field v-model="subtask.duration" @focus="onInputFocus" class="modal-input" variant="solo" type="number" label="Časový odhad" :class="{ error: v$.subtask.duration.$errors.length }" :hint="v$.subtask.duration.$errors ? errorUtils.parseErrors(v$.subtask.duration.$errors) : null" append-inner-icon="mdi-clock-outline"></v-text-field>
 
 					<div class="w-100 modal-input">
@@ -28,7 +27,11 @@
 
 			<v-card v-else height="100%" class="d-flex flex-column scrolling">
 				<div class="d-flex justify-space-between align-center">
-					<p>{{ subtask.project_code }}</p>
+					<div>
+						<p>{{ subtask.master_task?.project_code }}</p>
+						<h1>{{  subtask.master_task?.name }}</h1>
+					</div>
+
 					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large" class="pb-5"></v-icon>
 				</div>
 				<div class="d-flex justify-space-between align-center modal-header border-bottom pb-4">
@@ -119,7 +122,7 @@ export default {
 					id: { required }
 				},
 				duration: { required },
-				employee_id: { required }
+				employee: { required }
 			}
 		}
 	},
@@ -223,6 +226,10 @@ export default {
 			this.subtask.files = files
 		},
 
+		onEmployeeSelected({ key }) {
+			this.subtask.employee_id = key
+		},
+
 		_enrichTask(subtask) {
 			subtask.master_task 		= this.mastertasks.find((mastertask) => mastertask.id == subtask.master_task_id)
 			subtask.employee 			= this.enrichedEmployees.find((employee) => employee.id == subtask.employee_id)
@@ -253,10 +260,6 @@ export default {
 		editMode() {
 			this.$nextTick(() => {
 				this.$refs["description"]?.setHTML(this.subtask.description || "")
-
-				const employeeSelect = this.$refs['employee-select']?.$el?.querySelector('.v-select__selection-text')
-				if (employeeSelect)
-					employeeSelect.innerHTML = this.subtask?.employee?._fullName || ''
 			})
 		}
 	}

app/src/plugins/tm@profile/profile/my-profile.vue

@@ -50,10 +50,13 @@ export default {
 		async updateUserInfo() {
 			if (!(await this.v$.$validate())) return
 
+			const [sHours, sMinutes] = this.form.work_start.split(':');
+			const [eHours, eMinutes] = this.form.work_end.split(':');
+
 			const data = {
 				id: this.user.id,
-				work_start: parseInt(this.form.work_start.split(':')[0]),
+				work_start: parseFloat(sHours) * 60 + parseFloat(sMinutes),
-				work_end: parseInt(this.form.work_end.split(':')[0])
+				work_end: parseFloat(eHours) * 60 + parseFloat(eMinutes)
 			}
 
 			try {
@@ -66,9 +69,18 @@ export default {
 
 		_setDates() {
 			this.form = {
-				work_start: this.user.work_start < 10 ? `0${this.user.work_start}:00` : `${this.user.work_start}:00`,
+				work_start: this.minutesToTime(this.user.work_start),
-				work_end: this.user.work_end < 10 ? `0${this.user.work_end}:00` : `${this.user.work_end}:00`
+				work_end: this.minutesToTime(this.user.work_end)
 			}
+		},
+
+		minutesToTime(minutes) {
+			var hours 	= Math.floor(minutes / 60)
+			var mins 	= minutes % 60
+			hours 		= (hours < 10 ? '0' : '') + hours
+			mins 		= (mins < 10 ? '0' : '') + mins
+
+			return hours + ':' + mins
 		}
 	},