refactor(LvPlan): changes the lvInfo and lvMenu component in the Page View to use the renderer components based on the event type

public/css/Cis4/CoreCalendarEvents.css

@@ -63,7 +63,6 @@
 .dayPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
 	display:grid;
 	align-content: center;
-	border-right: 1px solid var(--bs-border-color);
 }
 
 .dayPageContainer .lehreinheitEventContent #lehreinheitEventText {

public/css/components/searchbar/searchbar.css

@@ -6,7 +6,7 @@
 @import url(./switches.css);
 
 :root{
-	--searchbar-shadow: var(--fhc-shadow-40, #ced4da);
+	--fhc-searchbar-shadow: var(--fhc-shadow-40, #ced4da);
 }
 
 .searchbar_settings {
@@ -25,7 +25,7 @@
     width: 100%;
     left: 0;
     right: 0;
-	box-shadow: 2px 2px 4px var(--searchbar-shadow);
+	box-shadow: 2px 2px 4px var(--fhc-searchbar-shadow);
 }
 
 .searchbar_results a{

public/js/apps/Dashboard/Fhc.js

@@ -304,7 +304,6 @@ const app = Vue.createApp({
 						calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent)));
 
 					if (data[rendertype].calendarEventStyles){
-						console.log(data[rendertype].calendarEventStyles)
 						var head = document.head;
 						var link = document.createElement("link");
 						link.type = "text/css";

public/js/components/Calendar/Day/Page.js

@@ -467,8 +467,7 @@ export default {
 				</div>
 			</div>
 			<div class="d-xl-block col-xl-6 p-4 d-none" style="max-height: 100%">
-				<div style="z-index:0; max-height: 100%" class="sticky-top d-flex justify-content-center align-items-center flex-column">
-					<div style="max-height: 100%; overflow-y:auto;" class="w-100">
+					<div @wheel.stop style="max-height: 100%; overflow-y:auto;" class="w-100">
 						<template v-if="selectedEvent ">
 							<slot name="pageMobilContent" :event="selectedEvent" :lvMenu="lvMenu" >
 								<p>this is a slot placeholder</p>
@@ -483,7 +482,6 @@ export default {
 							</div>
 						</template>
 					</div>
-				</div>
 			</div>
 		</div>	
 	</div>

public/js/components/Cis/LvPlan/LvPlan.js

@@ -3,7 +3,6 @@ import CalendarDate from "../../../composables/CalendarDate.js";
 import LvModal from "../Mylv/LvModal.js";
 import LvMenu from "../Mylv/LvMenu.js"
 import lehreinheitEvent from "./EventTypes/calendarEvent.js"
-import LvInfo from '../Mylv/LvInfo.js';
 import ApiLvPlan from '../../../api/factory/lvPlan.js';
 import ApiAuthinfo from '../../../api/factory/authinfo.js';
 
@@ -51,6 +50,17 @@ const LvPlan = {
 	},
 	inject:["renderers"],
 	watch: {
+		/* events:{
+			handler: function(newValue){
+				if(newValue == null)
+					setTimeout(()=>{
+						if(this.events == null){
+							this.loadEvents();
+						}
+					},500);
+			},
+			immediate: true,
+		}, */
 		modalLoaded:{
 			handler: function (newValue) {
 				if (this.isShowModal && newValue.isModalContentResolved && newValue.isModalTitleResolved) {
@@ -84,7 +94,7 @@ const LvPlan = {
 		}
 	},
 	components: {
-		FhcCalendar, LvModal, LvMenu, lehreinheitEvent, LvInfo
+		FhcCalendar, LvModal, LvMenu, lehreinheitEvent
 	},
 	computed:{
 		modalLoaded: function(){
@@ -134,13 +144,13 @@ const LvPlan = {
 		},
 		// component renderers fetches from different addons
 		modalTitleComponent(type){
-			return this.renderers[type].modalTitle;
+			return this.renderers[type]?.modalTitle;
 		},
 		modalContentComponent(type) {
-			return this.renderers[type].modalContent;
+			return this.renderers[type]?.modalContent;
 		},
 		calendarEventComponent(type){
-			return this.renderers[type].calendarEvent;
+			return this.renderers[type]?.calendarEvent;
 		},
 		
 
@@ -354,14 +364,7 @@ const LvPlan = {
 			</div>
 		</template>
 		<template #pageMobilContent="{lvMenu, event}">
-			<h3 >{{event.type=='moodle'?$p.t('lvinfo','Moodleinformationen'):$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
-			<div class="w-100">
-				<lv-info  :event="event" />
-			</div>
-			<template v-if="event.type != 'moodle'">
-				<h3 >{{$p.t('lehre','lehrveranstaltungsmenue')}}</h3>
-				<lv-menu :containerStyles="['p-0']" :rowStyles="['m-0']" v-show="lvMenu" :menu="lvMenu" />
-			</template>
+			<component :is="modalContentComponent(currentlySelectedEvent.type)" v-if="event" :event="event" :lvMenu="lvMenu" ></component>
 		</template>
 		<template #pageMobilContentEmpty >
 			<h3>{{ $p.t('lehre/noLvFound') }}</h3>

public/js/components/Cis/Mylv/modalContent.js

@@ -1,12 +1,20 @@
 import { numberPadding, formatDate } from "../../../helpers/DateHelpers.js"
-
+import LvMenu from "./LvMenu.js";
 
 export default {
 	props:{
 		event: {
 			type: Object,
 			required: true,
-		}
+		},
+		lvMenu:{
+			type: Object,
+			required: false,
+			default: null,
+		},
+	},
+	components:{
+		LvMenu,
 	},
 	computed: {
 		lektorenLinks: function () {
@@ -47,6 +55,7 @@ export default {
 		},
 	},
 	template: `
+	<div>
 		<h3>
 			{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}
 		</h3>
@@ -109,5 +118,9 @@ export default {
 						<td>{{event.organisationseinheit}}</td>
 					</tr>
 				</tbody>
-		</table>`,
+		</table>
+		
+		<h3>{{$p.t('lehre','lehrveranstaltungsmenue')}}</h3>
+		<lv-menu :containerStyles="['p-0']" :rowStyles="['m-0']" v-if="lvMenu" :menu="lvMenu" />
+	</div>`,
 }