From 35691b39c40ab527b52d01134171f0fcf18c892e Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 11 Nov 2024 16:15:14 +0100
Subject: [PATCH] fix(Calendar scroll): fixes the scroll feature for the
 Calendar

---
 public/js/apps/Cis/Stundenplan.js         | 16 +++--------
 public/js/components/Calendar/Calendar.js | 33 ++++++++++++++++++++---
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/public/js/apps/Cis/Stundenplan.js b/public/js/apps/Cis/Stundenplan.js
index 6835dc3a3..1248f18e0 100644
--- a/public/js/apps/Cis/Stundenplan.js
+++ b/public/js/apps/Cis/Stundenplan.js
@@ -32,17 +32,7 @@ const app = Vue.createApp({
 		monthLastDay: function () {
 			return this.calendarDateToString(this.calendarDate.cdLastDayOfCalendarMonth);
 		},
-		// returns the hour of the earliest event 
-		eventsBeginnTime: function(){
-			if(this.events && Array.isArray(this.events) && this.events.length > 0)
-			{
-				return parseInt(this.events.sort((a, b) => parseInt(a.beginn) - parseInt(b.beginn))[0].beginn);
-			}
-			else
-			{
-				return null;
-			}
-		},
+		
 	},
 	methods:{
 		selectDay: function(day){
@@ -64,7 +54,7 @@ const app = Vue.createApp({
 			if (checkDate(new CalendarDate(start)) && checkDate(new CalendarDate(end))){
 				// reset the events before querying the new events to activate the loading spinner
 				this.events = null;
-				this.calendarDate = tmp_date;
+				this.calendarDate = new CalendarDate(end);
 				Vue.nextTick(() => {
 					this.loadEvents();
 				});
@@ -122,7 +112,7 @@ const app = Vue.createApp({
 	<h2>Stundenplan</h2>
 	<hr>
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
-	<fhc-calendar :scrollTime="eventsBeginnTime" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
+	<fhc-calendar :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
 		<template #weekPage="{event,day}">
 			<div @click="showModal(event?.orig)" type="button" class="d-flex flex-column align-items-center justify-content-evenly h-100">
 				<span>{{event?.orig.topic}}</span>
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index 73ad54730..ab1d5067e 100644
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -56,20 +56,22 @@ export default {
 		minimized: Boolean,
 		noWeekView: Boolean,
 		noMonthView: Boolean,
-		scrollTime: Number,
 	},
 	watch:{
+		// scroll to the first event if the html element was found
 		scrollTime(newScrollTime){
 			let previousScrollAnchor = document.getElementById('scroll' + (newScrollTime-1) + this.focusDate.w)			// scroll the Stundenplan to the closest event
 			let scrollAnchor = document.getElementById('scroll' + newScrollTime+this.focusDate.w);
 			if (previousScrollAnchor)
 			{
-				previousScrollAnchor.scrollIntoView();
+				previousScrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
 			}else{
 				if (scrollAnchor) {
-					scrollAnchor.scrollIntoView();
+					scrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
 				}
 			}
+
+			
 		}
 	},
 	emits: [
@@ -117,7 +119,29 @@ export default {
 				}
 				return result;
 			}, {});
-		}
+		},
+		// returns the hour of the earliest event 
+		scrollTime: function () {
+			if (this.events && Array.isArray(this.events) && this.events.length > 0) {
+				let filteredEvents = this.events.filter(event => {
+					let eventDate = new CalendarDate(new Date(event.datum));
+					return this.focusDate.w == eventDate.w;
+				})
+				// return the first beginning time of the filtered events
+				if(filteredEvents.length > 0)
+				{
+					return parseInt(filteredEvents.sort((a, b) => parseInt(a.beginn) - parseInt(b.beginn))[0].beginn);
+				}
+				// if there is not filtered event that matches the current week
+				else 
+				{
+					return null;
+				}
+			}
+			else {
+				return null;
+			}
+		},
 	},
 	methods: {
 		handleInput(day) {
@@ -151,6 +175,7 @@ export default {
 				}
 			}).observe(this.$refs.container);
 		}
+
 	},
 	template: /*html*/`
 	<div ref="container" class="fhc-calendar card" :class="sizeClass">