From 4d84bec298a06d153bc79866817eb36714d28368 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= Date: Tue, 20 Dec 2022 00:10:41 +0100 Subject: [PATCH] Sticky header --- app/public/mock/v1/overview/tasks.GET.json | 30 +++++++++++++ app/src/plugins/app@vendor/vue-cal/index.vue | 43 +++++++++++++++++-- .../tasks/_components/a-tasks-filter.vue | 5 +++ .../tasks/_components/z-timeline.vue | 17 +++++++- 4 files changed, 90 insertions(+), 5 deletions(-) diff --git a/app/public/mock/v1/overview/tasks.GET.json b/app/public/mock/v1/overview/tasks.GET.json index 2321b3b..47acd25 100644 --- a/app/public/mock/v1/overview/tasks.GET.json +++ b/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" } ] }, diff --git a/app/src/plugins/app@vendor/vue-cal/index.vue b/app/src/plugins/app@vendor/vue-cal/index.vue index 9317616..e4f9c8d 100644 --- a/app/src/plugins/app@vendor/vue-cal/index.vue +++ b/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 - const firstDayOfWeek = this.view.startDate - const weekDays = this.weekDays + todayFound = false + let firstDayOfWeek = this.view.startDate + 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. diff --git a/app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue b/app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue index a2340d8..c019bae 100644 --- a/app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue +++ b/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 diff --git a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue index 44ae48b..5b4a9a4 100644 --- a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue +++ b/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 + }) + }, } }