From 26be814406594e32b37a6262c19f4974843d0730 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 18 Apr 2023 00:58:22 +0200
Subject: [PATCH] [CHR-7] Added hide on header scroll

---
 .../tm@dashboard/_mixins/Filter.mixin.ts      | 89 +++++++++++++++++++
 .../tm@dashboard/projects/projects.vue        |  7 +-
 app/src/plugins/tm@dashboard/tasks/tasks.vue  | 37 +++-----
 app/src/plugins/tm@dashboard/teams/teams.vue  | 17 ++--
 4 files changed, 116 insertions(+), 34 deletions(-)
 create mode 100644 app/src/plugins/tm@dashboard/_mixins/Filter.mixin.ts

diff --git a/app/src/plugins/tm@dashboard/_mixins/Filter.mixin.ts b/app/src/plugins/tm@dashboard/_mixins/Filter.mixin.ts
new file mode 100644
index 0000000..77468e3
--- /dev/null
+++ b/app/src/plugins/tm@dashboard/_mixins/Filter.mixin.ts
@@ -0,0 +1,89 @@
+export default {
+	data() {
+		return {
+			header: {
+				initialized: false,
+				marginTop: 0,
+				calendar_previousScrollPosition: 0,
+				isVisible: true
+			}
+		}
+	},
+
+	unmounted() {
+		this.$refs.page?.querySelector('.vuecal__bg')?.removeEventListener('scroll', this.handleScroll)
+	},
+
+	methods: {
+		_initScrollListener(repeat = 0) {
+			if (this.initialized) return
+
+			const calendar = this.$refs.page?.querySelector('.vuecal__bg')
+
+			if (!calendar)
+				return setTimeout(() => {
+					if (repeat < 20) this._initScrollListener(repeat + 1)
+				}, 200)
+
+			calendar.addEventListener('scroll', this._handleScroll)
+			this.initialized = true
+			this.header.calendar_previousScrollPosition = calendar.scrollTop
+			// if (calendar.scrollTop > 0 && this.header.isVisible) {
+			// 	this.hideHeader()
+			// }
+		},
+
+		_handleScroll(e) {
+			const header = document.querySelector('div.subheader') as HTMLElement
+
+			// Check if the header is initialized
+			if (!this.initialized) {
+				this.header.calendar_previousScrollPosition = e.target.scrollTop
+				return
+			}
+
+			if (this.header.calendar_previousScrollPosition > e.target.scrollTop) {
+				// On the way up
+				if (!this.header.isVisible) {
+					this.showHeader()
+				}
+			} else if (header.offsetHeight > Math.abs(e.target.scrollTop)) {
+				// On the way down
+				if (this.header.isVisible) {
+					this.hideHeader()
+				}
+			} else {
+				// On the way down below filter height
+				if (this.header.isVisible) {
+					this.hideHeader()
+				}
+			}
+
+			this.header.calendar_previousScrollPosition = e.target.scrollTop
+		},
+
+		hideHeader() {
+			const header = document.querySelector('div.subheader') as HTMLElement
+
+			header.style.transition = 'margin-top 0.5s'
+			header.style.marginTop = `-${header.offsetHeight}px`
+			this.header.isVisible = false
+
+			setTimeout(() => {
+				header.style.transition = ''
+			}, 500)
+		},
+
+		showHeader() {
+			const header = document.querySelector('div.subheader') as HTMLElement
+
+			header.style.transition = 'margin-top 0.5s'
+			header.style.marginTop = '0'
+			this.header.isVisible = true
+
+			setTimeout(() => {
+				header.style.transition = ''
+			}, 500)
+		},
+	}
+}
diff --git a/app/src/plugins/tm@dashboard/projects/projects.vue b/app/src/plugins/tm@dashboard/projects/projects.vue
index 400d5af..8ad9add 100644
--- a/app/src/plugins/tm@dashboard/projects/projects.vue
+++ b/app/src/plugins/tm@dashboard/projects/projects.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div ref="page">
 		<A-project-filter v-if="$store.getters['tm/isInitialized']" @filterChanged="onFilterChanged" />
 		
 		<W-loadable :content="filteredProjects" emptyMessage="Nenašli sa žiadne vyhovujúce projekty">
@@ -11,8 +11,11 @@
 <script>
 import AProjectCalendar from './_components/a-project-calendar.vue'
 import AProjectFilter 	from './_components/a-project-filter.vue'
+import FilterMixin		from '../_mixins/Filter.mixin'
 
 export default {
+	mixins: [FilterMixin],
+	
 	components: {
 		AProjectCalendar,
 		AProjectFilter
@@ -77,6 +80,8 @@ export default {
 			} catch (error) {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
+
+			this._initScrollListener()
 		},
 
 		openMasterTaskModal(mastertaskId) {
diff --git a/app/src/plugins/tm@dashboard/tasks/tasks.vue b/app/src/plugins/tm@dashboard/tasks/tasks.vue
index c60c9ae..3e2dd91 100644
--- a/app/src/plugins/tm@dashboard/tasks/tasks.vue
+++ b/app/src/plugins/tm@dashboard/tasks/tasks.vue
@@ -1,19 +1,22 @@
 <template>
 	<div ref="page">
-		<A-task-filter v-if="$store.getters['tm/isInitialized']" :split-days="timelineData ? splitDays : null" @filter-changed="onFilterChanged" :style="{marginTop: headerMarginTop}" ref="filter" />
+		<A-task-filter v-if="$store.getters['tm/isInitialized']" :split-days="timelineData ? splitDays : null" @filter-changed="onFilterChanged" ref="filter" />
 		<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
 	</div>
 </template>
 
 <script>
-import ATaskFilter 								from './_components/a-tasks-filter.vue'
-import ZTimeline 								from '@/plugins/tm@dashboard/_components/z-timeline.vue'
-import { addDays, subDays } 					from 'date-fns'
-import moment 									from 'moment'
-import timelineUtils 							from './_utils/timeline.utils'
-import { mapGetters } 							from 'vuex'
+import ATaskFilter 				from './_components/a-tasks-filter.vue'
+import ZTimeline 				from '@/plugins/tm@dashboard/_components/z-timeline.vue'
+import { addDays, subDays } 	from 'date-fns'
+import moment 					from 'moment'
+import timelineUtils 			from './_utils/timeline.utils'
+import { mapGetters } 			from 'vuex'
+import FilterMixin				from '../_mixins/Filter.mixin'
 
 export default {
+	mixins: [FilterMixin],
+
 	components: {
 		ATaskFilter,
 		ZTimeline
@@ -23,8 +26,6 @@ export default {
 		return {
 			filter: null,
 			subtasks: null,
-			headerMarginTop: '0px',
-			previousScrollTop: 0,
 			config: {
 				date: subDays(new Date(), 1),
 				scrollHour: 7,
@@ -147,11 +148,6 @@ export default {
 		this.$events.on('on-blocker-deleted', () => {
 			this.onFilterChanged(this.filter)
 		})
-
-		setTimeout(() => {
-			this.$refs.page?.querySelector('.vuecal__bg')?.addEventListener('scroll', this.handleScroll)
-		}, 1000)
-		// window
 	},
 
 	unmounted() {
@@ -159,8 +155,6 @@ export default {
 		this.$events.off('on-subtask-deleted')
 		this.$events.off('on-blocker-edited')
 		this.$events.off('on-blocker-deleted')
-
-		this.$refs.page?.querySelector('.vuecal__bg')?.removeEventListener('scroll', this.handleScroll)
 	},
 
 	methods: {
@@ -182,17 +176,8 @@ export default {
 			} catch (error) {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
-		},
 
-		handleScroll(e) {
-			if (this.previousScrollTop > e.target.scrollTop)
-				this.headerMarginTop = '0px'
-			else
-				this.headerMarginTop = `-${this.$refs.filter.$el.offsetHeight}px`
-
-			console.log(this.headerMarginTop)
-
-			this.previousScrollTop = e.target.scrollTop
+			this._initScrollListener()
 		}
 	}
 }
diff --git a/app/src/plugins/tm@dashboard/teams/teams.vue b/app/src/plugins/tm@dashboard/teams/teams.vue
index 908912a..bccd8b6 100644
--- a/app/src/plugins/tm@dashboard/teams/teams.vue
+++ b/app/src/plugins/tm@dashboard/teams/teams.vue
@@ -1,19 +1,20 @@
 <template>
-	<div>
+	<div ref="page">
 		<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>
 
 <script>
-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'
+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 FilterMixin		from '../_mixins/Filter.mixin'
+import { mapGetters } 	from 'vuex'
 
 export default {
-	mixins: [TeamsCalendar],
+	mixins: [TeamsCalendar, FilterMixin],
 
 	components: {
 		ATeamFilter,
@@ -80,6 +81,8 @@ export default {
 			} catch (error) {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
+
+			this._initScrollListener()
 		}
 	}
 }