From 20f22d5a7b8147798a53ade4c5b64c1333bf1dcd Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 3 Mar 2025 14:15:30 +0100
Subject: [PATCH] fix(Calendar selectedEvent and Scrolling): sorts the events
 before selecting the first as the selectedEvent and adds some scrolling
 checks

---
 public/js/components/Calendar/Calendar.js | 31 +++++++++++------------
 public/js/components/Calendar/Day/Page.js | 27 +++++++++++++++++++-
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index da67af6df..a12dc1b0a 100644
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -74,23 +74,22 @@ export default {
 		// scroll to the first event if the html element was found
 		scrollTime(newValue,oldValue){
 			// return early if the scrollTime is not set
-			if(!newValue.scrollTime || !newValue?.doScroll) return;
-			if(newValue?.scrollTime == oldValue?.scrollTime && newValue?.focusDate.compare(oldValue?.focusDate)){
+			if (!newValue.scrollTime || !newValue?.doScroll) return;
+			if (newValue?.scrollTime == oldValue?.scrollTime && newValue?.focusDate.d==oldValue?.focusDate.d) {
 				return;
 			}
 			// scroll the Stundenplan to the closest event
-			Vue.nextTick(()=>{
-				let previousScrollAnchor = document.getElementById('scroll' + (newValue.scrollTime - 1) + this.focusDate.d + this.focusDate.w)
-				let scrollAnchor = document.getElementById('scroll' + newValue.scrollTime + this.focusDate.d + this.focusDate.w);
-				if (previousScrollAnchor) {
-					previousScrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
+			let previousScrollAnchor = document.getElementById('scroll' + (newValue.scrollTime - 1) + this.focusDate.d + this.focusDate.w)
+			let scrollAnchor = document.getElementById('scroll' + newValue.scrollTime + this.focusDate.d + this.focusDate.w);
+			if (previousScrollAnchor) {
+				previousScrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
+			}
+			else {
+				if (scrollAnchor) {
+					scrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
 				}
-				else {
-					if (scrollAnchor) {
-						scrollAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
-					}
-				}
-			});
+			}
+			
 		},
 	},
 	emits: [
@@ -147,10 +146,10 @@ export default {
 		},
 		// returns the hour of the earliest event, used to scroll to the events in the calendar (week / day view)
 		scrollTime() {
+				let doScroll = true;	
 				// return the first beginning time of the filtered events
 				if(this.filteredEvents && Array.isArray(this.filteredEvents) && this.filteredEvents.length > 0)
 				{
-					let doScroll = true;
 					let scrollTimeEvents = this.filteredEvents.filter(event=>{
 						return event.type !== 'moodle';
 					});
@@ -160,12 +159,12 @@ export default {
 					}
 					let scrollTime = parseInt(scrollTimeEvents.sort((a, b) => parseInt(a.beginn) - parseInt(b.beginn))[0]?.beginn);
 					// to ensure that the scrollTime watcher triggers even if the scrollTime doesn't change, it returns both the scrollTime and the focusDate
-					return { focusDate: this.focusDate, doScroll, scrollTime };
+					return { focusDate: { d: this.focusDate.d, w: this.focusDate.w}, doScroll, scrollTime };	
 				}
 				// there is no event that matches the current view mode constraints
 				else 
 				{
-					return { focusDate: this.focusDate, scrollTime: null };
+					return { focusDate: { d: this.focusDate.d, w: this.focusDate.w }, doScroll,scrollTime: null };
 				}
 			},
 		// filters the events based on the current calendar view mode
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 9c04136c2..f38ea50cd 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -63,7 +63,32 @@ export default {
 					if(events){
 						// if no event is selected, select the first event of the day
 						if (this.selectedEvent == null && this.events[this.day.toDateString()]?.length > 0) {
-							let events = this.events[this.day.toDateString()];
+							let events = this.events[this.day.toDateString()].sort((a,b)=>{
+								let [a_stunde,a_minute,a_sekunden]= a.beginn.split(":");
+								let [b_stunde, b_minute, b_sekunden] = b.beginn.split(":");
+								a_stunde = Number(a_stunde);
+								a_minute = Number(a_minute);
+								a_sekunden= Number(a_sekunden);
+								b_stunde = Number(b_stunde);
+								b_minute = Number(b_minute);
+								b_sekunden = Number(b_sekunden);
+								if(a_stunde > b_stunde){
+									return 1;
+								}
+								else if(b_stunde > a_stunde){
+									return -1;
+								}
+								else if(a_minute > b_minute){
+									return 1;
+								}
+								else if (b_minute > a_minute){
+									return -1;
+								}
+								else{
+									return a_sekunden > b_sekunden? 1:-1;
+								}
+								
+							});
 							if (Array.isArray(events) && events.length > 0) {
 								this.setSelectedEvent(events[0]);
 							}