tasks and teams overview subheader refactor

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

@@ -33,9 +33,9 @@ import { addDays, subDays } from 'date-fns'
 export default {
 	props: {
 		unscheduledTime: {
-			type: Number,
+			type: String,
 			default() {
-				return 0
+				return '0'
 			}
 		}
 	},
@@ -59,11 +59,17 @@ export default {
 	},
 
 	created() {
-		this._getEmployees()
-		this._getWeek()
+		this._getData()
 	},
 
 	methods: {
+		async _getData() {
+			await this._getEmployees()
+			this._getWeek()
+			this.$nextTick(() => {
+				this.$emit('dataChanged', {firstDay: this.firstDay, employeeId: this.selectedEmployee})
+			})
+		},
 		async _getEmployees() {
 			this.employees =  await this.$axios.get_auth_data('v1/employees')
 			this.employees.forEach(employee => {
@@ -71,12 +77,12 @@ export default {
 			})
 		},
 
-		_getWeek() {
+		_getWeek(emitDataChanged = true) {
 			this.firstDay = subDays(this.date, 1)
 			this.lastDay = addDays(this.date, 5)
 
-			this.$emit('weekChange', {firstDay: this.firstDay, lastDay: this.lastDay})
 			this.selectedDate = String(this.firstDay.toLocaleDateString('sk-SK') + ' - ' + this.lastDay.toLocaleDateString('sk-SK'))
+			if (emitDataChanged) this.$emit('dataChanged', {firstDay: this.firstDay, employeeId: this.selectedEmployee})
 		},
 
 		prevWeek() {
@@ -88,6 +94,12 @@ export default {
 			this.date = addDays(this.date, 7)
 			this._getWeek()
 		}
+	},
+
+	watch: {
+		selectedTeam() {
+			this.$emit('dataChanged', {firstDay: this.firstDay, employeeId: this.selectedEmployee})
+		}
 	}
 }
 </script>

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

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<A-task-filter :unscheduledTime="unscheduledTime" @weekChange="getWeekData" />
+		<A-task-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" />
@@ -33,13 +33,14 @@ export default {
 	},
 
 	methods: {
-		async getWeekData(week) {
-			this.config.date = week.firstDay
+		async getTimelineData(data) {
+			this.config.date = data.firstDay
+			const lastDay = addDays(data.firstDay, 6)
 			try {
-				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
-				this.formatTimelineDataToTimelineFormat(week.firstDay)
-				this.generateDays(week.firstDay)
-				this.generateNonWorkingHours(week.firstDay)
+				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks', {firstDay: data.firstDay, lastDay: lastDay, employeeId: data.employeeId})
+				this.formatTimelineDataToTimelineFormat(data.firstDay)
+				this.generateDays(data.firstDay)
+				this.generateNonWorkingHours(data.firstDay)
 			} catch (error) {
 				this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
 				console.error(error)

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

@@ -1,9 +1,9 @@
 <template>
 	<v-row class="px-10 py-8 subheader">
 		<v-select
-			v-model="selectedEmployee"
+			v-model="selectedTeam"
 			class="subheader-input"
-			:items="teams"
+			:items="teamsNames"
 			label="Tím"
 			variant="outlined"
 		></v-select>
@@ -33,9 +33,9 @@ import { addDays, subDays } from 'date-fns'
 export default {
 	props: {
 		unscheduledTime: {
-			type: Number,
+			type: String,
 			default() {
-				return 0
+				return '0'
 			}
 		}
 	},
@@ -43,26 +43,43 @@ export default {
 	data() {
 		return {
 			// Kaluza: Napojit funkcionalitu
-			teams: ['Foo', 'Bar', 'Fizz', 'Buzz'],
+			teams: [],
+			teamsNames: [],
+			selectedTeam: '',
+
 			selectedDate: new Date(),
 			day: new Date(),
-			selectedEmployee: 'Bar',
 			date: new Date()
 		}
 	},
 
-	created() {
-		this.getDay()
-	},
-
 	computed: {
 		time() {
 			return this.unscheduledTime
 		}
 	},
 
+	created() {
+		this._getData()
+	},
+
 	methods: {
-		getDay() {
+		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.teams.forEach(team => {
+				this.teamsNames.push(team.name)
+			})
+		},
+
+		_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))
@@ -72,17 +89,23 @@ export default {
 			else if (tomorrow.toLocaleDateString('sk-SK') === this.day.toLocaleDateString('sk-SK')) this.selectedDate = "Zajtra"
 			else this.selectedDate = String(this.day.toLocaleDateString('sk-SK'))
 
-			this.$emit('dayChanged', this.day)
+			if (emitDataChanged) this.$emit('dataChanged', {date: this.day, teamId: this.selectedTeam})
 		},
 
 		prevDay() {
 			this.day = subDays(this.day, 1)
-			this.getDay()
+			this._getDay()
 		},
 
 		nextDay() {
 			this.day = addDays(this.day, 1)
-			this.getDay()
+			this._getDay()
+		}
+	},
+
+	watch: {
+		selectedTeam() {
+			this.$emit('dataChanged', {date: this.day, teamId: this.selectedTeam})
 		}
 	}
 }

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

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<A-team-filter :unscheduledTime="unscheduledTime" @dayChanged="getDayData" />
+		<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" />
@@ -37,13 +37,13 @@ export default {
 	},
 
 	methods: {
-		async getDayData(date) {
-			this.config.date = date
+		async getTimelineData(data) {
+			this.config.date = data.date
 			try {
-				this.timelineData = await this.$axios.get_auth_data('v1/overview/teams')
+				this.timelineData = await this.$axios.get_auth_data('v1/overview/teams', {date: data.date, team: data.teamId})
 				this.generateEmployees()
 				this.formatTimelineDataToTimelineFormat()
-				this.generateNonWorkingHours(date)
+				this.generateNonWorkingHours(data.date)
 			} catch(error) {
 				this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
 				console.error(error)