Sticky header

app/public/mock/v1/overview/tasks.GET.json

@@ -30,6 +30,26 @@
 				"id": 1,
 				"time": 60
 			},
+			{
+				"id": 1,
+				"time": 70
+			},
+
+			{
+				"id": 1,
+				"time": 70
+			},
+
+			{
+				"id": 1,
+				"time": 70
+			},
+
+			{
+				"id": 1,
+				"time": 70
+			},
+
 			{
 				"id": 1,
 				"time": 70
@@ -134,6 +154,16 @@
 				"title": "Task 10",
 				"project_code": "CO-2201",
 				"master_task_color": "#57e0f2"
+			},
+
+			{
+				"id": 11,
+				"task_id": 11,
+				"starts_at": "2022-12-27T12:00:00+00:00",
+				"ends_at": "2022-12-27T13:00:00+00:00",
+				"title": "Task 11",
+				"project_code": "CO-2201",
+				"master_task_color": "#57e0f2"
 			}
 		]
 	},

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

@@ -124,6 +124,7 @@ import Header from './header.vue'
 import WeekdaysHeadings from './weekdays-headings.vue'
 import AllDayBar from './all-day-bar.vue'
 import Cell from './cell.vue'
+import moment from 'moment'
 
 import './styles.scss'
 import './scss/index.scss'
@@ -496,12 +497,23 @@ export default {
 					break
 				}
 				case 'week': {
+
+					// const isTodayInView = moment(date).week() == moment().week()
+
 					date = ud.getPreviousFirstDayOfWeek(date, this.startWeekOnSunday)
 					const weekDaysCount = this.hideWeekends ? 5 : 7
 					this.view.startDate = this.hideWeekends && this.startWeekOnSunday ? ud.addDays(date, 1) : date
 					this.view.startDate.setHours(0, 0, 0, 0)
+
+					// if (isTodayInView) {
+					// 	this.view.endDate = ud.addDays(date, weekDaysCount + 2)
+					// } else {
+					// 	this.view.endDate = ud.addDays(date, weekDaysCount)
+					// }
+
 					this.view.endDate = ud.addDays(date, weekDaysCount)
 					this.view.endDate.setSeconds(-1) // End at 23:59:59.
+
 					break
 				}
 				case 'day': {
@@ -1422,6 +1434,7 @@ export default {
 		},
 		weekDays() {
 			let { weekDays, weekDaysShort = [] } = this.texts
+
 			// Do not modify original for next instances.
 			weekDays = weekDays.slice(0).map((day, i) => ({
 				label: day,
@@ -1528,6 +1541,8 @@ export default {
 			if (!this.watchRealTime) this.now = new Date()
 			const now = this.now
 
+			// console.log(this.view.id)
+
 			switch (this.view.id) {
 				case 'years': {
 					fromYear = this.view.startDate.getFullYear()
@@ -1597,12 +1612,30 @@ export default {
 					break
 				}
 				case 'week': {
-					todayFound = false
+					todayFound 				= false
-					const firstDayOfWeek = this.view.startDate
+					let firstDayOfWeek 		= this.view.startDate
-					const weekDays = this.weekDays
+					const weekDays 			= this.weekDays
+					// const isTodayInView 	= moment(this.view.startDate).week() == moment().week()
+					// const weekDayTemplate	= {label: '', hide: 0}
+					// let firstDayOfWeek 		= null
+
+					// if (isTodayInView) {
+					// 	this.view.startDate = new Date(moment().subtract(1, 'days'))
+
+					// 	for (let i = 0; i <= 9 - weekDays.length ; i += 1) {
+					// 		weekDays.push(weekDayTemplate)
+					// 	}
+					// } else {
+					// 	while(weekDays.length > 7) {
+					// 		weekDays.pop()
+					// 	}
+					// }
+
+					// firstDayOfWeek = this.view.startDate
 
 					cells = weekDays
 						.map((cell, i) => {
+
 							const startDate = ud.addDays(firstDayOfWeek, this.startWeekOnSunday ? i - 1 : i)
 							const endDate = new Date(startDate)
 							endDate.setHours(23, 59, 59, 0) // End at 23:59:59.
@@ -1618,6 +1651,9 @@ export default {
 							}
 						})
 						.filter((cell, i) => !weekDays[i].hide)
+
+
+
 					break
 				}
 				case 'day': {
@@ -1638,6 +1674,7 @@ export default {
 					break
 				}
 			}
+
 			return cells
 		},
 		// Only when hiding weekdays on month and week views.

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

@@ -74,6 +74,11 @@ export default {
 	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
 	gap: 25px
 	flex-wrap: wrap
+	position: sticky
+	top: 0
+	z-index: 9999
+	background: white
+
 
 .subheader-icon-button
 	border: 1px solid #ABABAB

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

@@ -4,8 +4,6 @@
 			:hide-view-selector="true"
 			:hide-title-bar="true"
 			:disable-views="['years', 'year', 'month', 'day']"
-			:time-from="calConfig.startHour * 60"
-			:time-to="calConfig.endHour * 60"
 			:selected-date="calConfig.date"
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
@@ -118,6 +116,10 @@ export default {
 		}
 	},
 
+	mounted() {
+		this._scrollToDefaultTime()
+	},
+
 	methods: {
 		weekChanged() {
 			const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
@@ -187,6 +189,17 @@ export default {
 			this.focusedEventId = event.task_id
 			console.log(`Focused: ${event.task_id}`)
 		},
+
+		_scrollToDefaultTime() {
+			const calendarContainer = document.querySelector('.main-content')
+			const defaultTimeToScrollTo = document.querySelectorAll('.vuecal__time-cell')[7]
+			const toolbarHeight = document.querySelector('.v-toolbar').getBoundingClientRect().height
+			const subheaderHeight = document.querySelector('.subheader').getBoundingClientRect().height
+
+			calendarContainer.scrollTo({
+				top: defaultTimeToScrollTo.getBoundingClientRect().top - toolbarHeight - subheaderHeight
+			})
+		},
 	}
 }
 </script>