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

app/src/plugins/lib@search/search/search.vue

@@ -3,7 +3,7 @@
 		<p v-if="!this.searchResults" class="px-3 py-3">{{ this.search?.length ? $t('Searching...') : $t('Type something') }}</p>
 		<p v-else-if="this.searchResults.error" class="px-3">{{ this.searchResults.error }}</p>
 
-		<div v-else>
+		<div v-else class="results-wrapper">
 			<A-search-result-mastertasks :mastertasks="searchResults.mastertasks"/>
 			<A-search-result-subtasks :subtasks="searchResults.subtasks" />
 			<A-search-result-team :teams="searchResults.teams" />
@@ -81,4 +81,9 @@ export default {
 		}, 300)
 	}
 }
-</script>
+</script>
+
+<style lang="sass" scoped>
+.results-wrapper
+	margin-bottom: 60px
+</style>

app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue

@@ -1,6 +1,6 @@
 <template>
 	<v-row class="px-10 py-8 subheader">
-		<v-select v-model="filter.projectId" class="subheader-input" :items="[null, ...projects]" item-title="name" item-value="id" label="Projekt" variant="outlined" />
+		<v-autocomplete v-model="filter.projectId" class="subheader-input" :items="[null, ...projectsOptions]" item-title="code" item-value="id" label="Projekt" variant="outlined" @update:search="projectCodeSearch = $event" />
 
 		<v-select v-model="filter.teamId" class="subheader-input" :items="[null, ...teams]" label="Tím" variant="outlined" item-title="name" item-value="id" />
 
@@ -40,6 +40,8 @@ export default {
 				{ title: 'December', value: '12' }
 			],
 
+			projectCodeSearch: null,
+
 			filter: {
 				projectId: null,
 				teamId: null,
@@ -61,7 +63,14 @@ export default {
 			'teams',
 			'projects',
 			'enrichedEmployees'
-		])
+		]),
+
+		projectsOptions() {
+			// Added to "paginate" projects, because v-autocomplete was unable to handle so many projects at once
+
+			const projects = this.projects.filter(project => project.code.includes(this.projectCodeSearch))
+			return projects?.length ? projects.slice(0, 10) : this.projects.slice(0, 10)
+		}
 	},
 
 	watch: {

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

@@ -1,14 +1,15 @@
 <template>
 	<v-row class="px-10 py-8 subheader">
-		<v-select
+		<v-autocomplete
 			v-model="selectedEmployee"
 			class="subheader-input"
 			:items="enrichedEmployees"
+			:menu-props="{maxHeight: 500}"
 			item-title="_fullName"
 			item-value="id"
 			label="Zamestnanec"
 			variant="outlined"
-		></v-select>
+		></v-autocomplete>
 		<div class="d-flex date-wrapper">
 			<v-btn class="subheader-icon-button prev" variant="outlined" @click="prevWeek()"><img :src="require('@/plugins/app/_img/icons/icon-prev.svg')" alt=""></v-btn>
 			<v-text-field
@@ -38,9 +39,9 @@ export default {
 	emits: ['filter-changed'],
 	
 	props: {
-		unscheduledTime: {
-			type: Number,
-			default: () => 0
+		splitDays: {
+			type: [Array, null],
+			default: () => null
 		}
 	},
 
@@ -101,8 +102,8 @@ export default {
 			this._emitFilterChanged()
 		},
 
-		unscheduledTime() {
-			this.time = this.unscheduledTime
+		splitDays() {
+			this.time = this.splitDays.map(day => parseFloat(day.unscheduledTime)).reduce((acc, val) => acc + val, 0)
 		}
 	}
 }

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

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<A-task-filter v-if="$store.getters['tm/isInitialized']" :unscheduledTime="timelineData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
+		<A-task-filter v-if="$store.getters['tm/isInitialized']" :split-days="timelineData ? splitDays : null" @filter-changed="onFilterChanged" />
 		<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
 	</div>
 </template>
@@ -54,7 +54,7 @@ export default {
 					// Ignore elapsed task
 					return
 				}
-				else if (now.isAfter(moment(task._real_start) && now.isBefore(moment(task._real_end)))) {
+				else if (now.isAfter(moment(task._real_start)) && now.isBefore(moment(task._real_end))) {
 					// Task in progress
 					schedulesCapacityBySplit[task.split] += timelineUtils._getDifferenceInMinutes(task._real_end, new Date())
 				}
@@ -64,13 +64,10 @@ export default {
 				}
 			})
 
-
-
-			
 			schedulesCapacityBySplit[1] = 0 // Set YESTERDAY value to 0
 
 			this.timelineData.homeoffices.forEach(task => {
-				homeoffice[task.split] = true
+				homeoffice[task.split - 1] = true
 			})
 
 			for (let i = 0; i < 7; i++) {
@@ -79,10 +76,12 @@ export default {
 
 				let unscheduledTime
 
-				if (i == 0) {
+				const date = moment(addDays(this.filter.start, i))
+
+				if (date.isBefore(moment(), 'days')) {
 					// Yesterday
 					unscheduledTime = 0
-				} else if (i == 1) {
+				} else if (date.isSame(moment(), 'days')) {
 					// Today
 					const elapsedMinutes 		= now.diff(now.clone().startOf('day'), 'minutes')
 					const workStart		 		= this.user.work_start * 60 > elapsedMinutes ? this.user.workStart : elapsedMinutes
@@ -93,8 +92,6 @@ export default {
 					unscheduledTime				= dailyCapacityMinutes - schedulesCapacityBySplit[i + 1]
 				}
 
-				console.log(unscheduledTime)
-
 				days.push({
 					id: i + 1,
 					fullname: `${this.filter.employee.name} ${this.filter.employee.surname}`,
@@ -106,8 +103,6 @@ export default {
 				})
 			}
 
-			console.log(days)
-
 			return days
 		},
 

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

@@ -38,9 +38,9 @@ export default {
 	emits: ['filter-changed'],
 	
 	props: {
-		unscheduledTime: {
-			type: Number,
-			default: () => 0
+		splitDays: {
+			type: [Array, null],
+			default: () => null
 		}
 	},
 
@@ -60,7 +60,7 @@ export default {
 	
 	computed: {
 		...mapGetters('auth', ['user']),
-		...mapGetters('tm', ['teams']),
+		...mapGetters('tm', ['teams'])
 	},
 
 	mounted() {
@@ -83,8 +83,8 @@ export default {
 
 		_updateFilters() {
 			this.filter.start 	= this.date
-			this.filter.end 	= this.date
-			// this.filter.end 	= addDays(this.date, 1)
+			// this.filter.end 	= this.date
+			this.filter.end 	= addDays(this.date, 1)
 			this.selectedDate 	= String(this.filter.start?.toLocaleDateString('sk-SK'))
 
 			this._emitFilterChanged()
@@ -103,8 +103,8 @@ export default {
 			this._emitFilterChanged()
 		},
 
-		unscheduledTime() {
-			this.time = this.unscheduledTime
+		splitDays() {
+			this.time = this.splitDays.map(day => parseFloat(day.unscheduledTime)).reduce((acc, val) => acc + val, 0)
 		}
 	}
 }

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

@@ -11,10 +11,7 @@ export default {
 
 			const blockers = this._generateBlockers()
 
-			console.log([...this._generateNonWorking(), ...this._generateTasks(), ...blockers.filter(blocker => blocker.type != 'home_office')])
-
 			return {
-				unscheduledTime: 333,
 				tasks: [...this._generateNonWorking(), ...this._generateTasks(), ...blockers.filter(blocker => blocker.type != 'home_office')],
 				homeoffices: [...blockers.filter(blocker => blocker.type == 'home_office')]
 			}
@@ -23,15 +20,30 @@ export default {
 		splitDays() {
 			const days = []
 			const homeoffice = {}
+			const now		= moment()
 
 			this.filter.team.employees.forEach((employee, index) => {
-				let workingHours = 0
+				const selectedDate 				= moment(this.filter.start)
+				const capacityMinutes  			= this._getRemainingWorkCapacityMinutes(employee)
+				let scheduledCapacityMinutes	= 0
 
 				this.calendarData.tasks.forEach(task => {
-					if ((task.subtask?.employee?.id != employee.id) && (task.blocker?.employee?.id != employee.id))
+					// console.log(task)
+					if ((task.subtask?.employee_id != employee.id) && (task.blocker?.employee?.id != employee.id))
 						return
 
-					workingHours += timelineUtils._getDifferenceInHours(task.end, task.start)
+					if (task.type == 'non-working-hours' || task.subtask?.is_finished || task.blocker?.is_finished)
+						return
+
+					if (selectedDate.isBefore(moment(), 'days')) {
+						// Past
+						return
+					} else if (selectedDate.isSame(moment(), 'days')) {
+						// Today
+
+					} else {
+						scheduledCapacityMinutes += timelineUtils._getDifferenceInMinutes(task._real_end, task._real_start)
+					}
 				})
 
 				this.calendarData.homeoffices.forEach(task => {
@@ -40,12 +52,14 @@ export default {
 					homeoffice[task.split] = true
 				})
 
+				const unscheduledTime = capacityMinutes - scheduledCapacityMinutes
+
 				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,
+					unscheduledTime: unscheduledTime > 0 ? (unscheduledTime / 60).toFixed(1) : 0,
 					isHomeoffice: homeoffice[index + 1] ? true : false
 				})
 			})
@@ -122,8 +136,11 @@ export default {
 							initials: employee?.name?.charAt(0)?.toUpperCase() + employee?.surname?.charAt(0)?.toUpperCase(),
 							split: split,
 							project_code: subtask.project_code,
+							type: 'subtask',
 							subtask,
-							_timeblock_id: timeblock.id
+							_timeblock_id: timeblock.id,
+							_real_start: new Date(timeblock.start),
+							_real_end: new Date(timeblock.end)
 						})
 					}
 				})
@@ -157,6 +174,8 @@ export default {
 					color: '#B00020',
 					draggable: false,
 					isWeekend: moment(blocker.start).day() % 6 == 0,
+					_real_start: new Date(blocker.start),
+					_real_end: new Date(blocker.end)
 				})
 			})
 
@@ -173,6 +192,31 @@ export default {
 		_setMinutesToDate(minutes, date = new Date(this.filter.start)) {
 			date.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0)
 			return date
+		},
+
+		_getRemainingWorkCapacityMinutes(employee) {
+			const date  = moment(this.filter.start)
+			const now 	= moment()
+
+			if (now.isAfter(date, 'days')) {
+				// Past dates
+				return 0
+			} else if (now.isBefore(date, 'days')) {
+				// Future dates
+				return (employee.work_end - employee.work_start) * 60
+			}
+
+			// Today
+			const workStartMinutes 				= employee.work_start * 60
+			const workEndMinutes 				= employee.work_end * 60
+			const elapsedMinutesOfCurrenyDay    = now.diff(moment().startOf('day'), 'minutes')
+			
+			if (workStartMinutes > elapsedMinutesOfCurrenyDay)
+				return workEndMinutes - workStartMinutes
+			else if (workEndMinutes < elapsedMinutesOfCurrenyDay)
+				return 0
+			else
+				return workEndMinutes - elapsedMinutesOfCurrenyDay
 		}
 	}
 }

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

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<A-team-filter v-if="$store.getters['tm/isInitialized']"  :unscheduledTime="calendarData?.unscheduledTime || 0" @filter-changed="onFilterChanged" />
+		<A-team-filter v-if="$store.getters['tm/isInitialized']"  :split-days="calendarData ? splitDays : null" @filter-changed="onFilterChanged" />
 		<Z-timeline v-if="calendarData" :cal-data="calendarData" :cal-config="calendarConfig" :splits="splitDays" />
 	</div>
 </template>
@@ -10,6 +10,7 @@ import ATeamFilter from './_components/a-team-filter.vue'
 import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'
 import moment from 'moment'
 import TeamsCalendar from './_mixins/TeamsCalendar.mixin' 
+import { mapGetters } from 'vuex'
 
 export default {
 	mixins: [TeamsCalendar],
@@ -31,6 +32,10 @@ export default {
 		}
 	},
 
+	computed: {
+		...mapGetters('auth', ['user']),
+	},
+
 	mounted() {
 		this.$events.on('on-subtask-edited', () => {
 			this.onFilterChanged(this.filter)

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

@@ -201,7 +201,7 @@ export default {
 
 					// TODO zmazat ked zacne prichadzat project_id a team_id
 					const project = this.projects.find((project) => project.code == this.mastertask.project_code)
-					this.mastertask.project_id 		= project.id
+					this.mastertask.project_id 		= project?.id || null
 					this.mastertask.team_id 		= this.mastertask.team?.id || null
 
 					// this.mastertask.project_code 	= project.code

app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue

@@ -32,7 +32,7 @@
 			</div>
 
 			<v-card-actions class="mt-10 d-flex flex-column modal-content">
-				<Datepicker v-model="form.date" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" class="mb-5 modal-input" />
+				<Datepicker v-model="form.date" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" class="mb-5 modal-input" :class="{error: v$.form.date.$errors.length}" />
 				<v-text-field v-model="form.starts_at_time" type="time" variant="solo" bg-color="white" :hint="v$.form.starts_at_time.$errors ? errorUtils.parseErrors(v$.form.starts_at_time.$errors) : null" :class="{ error: v$.form.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" />
 				<v-text-field v-model="form.ends_at_time" 	type="time" variant="solo" bg-color="white" :hint="v$.form.ends_at_time.$errors ? errorUtils.parseErrors(v$.form.ends_at_time.$errors) : null" :class="{ error: v$.form.ends_at_time.$errors.length }" class="modal-input" label="Koniec" />
 			</v-card-actions>

app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue

@@ -18,8 +18,8 @@
 				<td>{{ subtask.duration - subtask.spent_time }} h</td>
 				<td class="task-action">
 					<div class="d-flex justify-start">
-						<img class="pencil-icon mr-3" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="editTask(subtask, false)">
-						<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="editTask(subtask, true)" />
+						<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="editTask(subtask, false)">
+						<!-- <img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="editTask(subtask, true)" /> -->
 						<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="deleteTask(subtask)" />
 					</div>
 				</td>

app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue

@@ -17,8 +17,8 @@
 				<td>{{ subtask.spent_time }} h</td>
 				<td class="task-action">
 					<div class="d-flex justify-start">
-						<img class="pencil-icon mr-3" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="editTask(subtask, false)">
-						<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="editTask(subtask, true)">
+						<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="editTask(subtask, false)">
+						<!-- <img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="editTask(subtask, true)"> -->
 						<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="deleteTask(subtask)">
 					</div>
 				</td>