fix(Calendar selectedEvent and Scrolling): sorts the events before selecting the first as the selectedEvent and adds some scrolling checks

This commit is contained in:
SimonGschnell
2025-03-03 14:15:30 +01:00
parent 225d6b0a83
commit 20f22d5a7b
2 changed files with 41 additions and 17 deletions
+15 -16
View File
@@ -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
+26 -1
View File
@@ -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]);
}