refactor(Moodle Events DependencyInjection): changes the lazy loading for the moodle events in Stundenplan

public/js/apps/Dashboard/Fhc.js

@@ -237,7 +237,7 @@ const app = Vue.createApp({
 	name: 'FhcApp',
 	data: () => ({
 		appSideMenuEntries: {},
-		renderers: {},
+		renderers: null,
 	}),
 	components: {},
 	computed: {
@@ -291,7 +291,21 @@ const app = Vue.createApp({
 			.call(ApiRenderers.loadRenderers())
 			.then(res => res.data)
 			.then(data => {
-				this.renderers = data;
+				for (let rendertype of Object.keys(data)) {
+					
+					let modalTitel = Vue.defineAsyncComponent(() => import(data[rendertype].modalTitel));
+					let modalContent = Vue.defineAsyncComponent(() => import(data[rendertype].modalContent));
+					let calendarEvent = Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent));
+					if(this.renderers === null) {
+						this.renderers = {};
+					}
+					if (!this.renderers[rendertype]) {
+						this.renderers[rendertype] = {}
+					}
+					this.renderers[rendertype].modalTitel = modalTitel;
+					this.renderers[rendertype].modalContent = modalContent;
+					this.renderers[rendertype].calendarEvent = calendarEvent;
+				}
 			});
 	},
 	mounted() {

public/js/components/Cis/Mylv/LvModal.js

@@ -1,7 +1,6 @@
 import BsModal from "../../Bootstrap/Modal.js";
 import Alert from "../../Bootstrap/Alert.js";
 import LvMenu from "./LvMenu.js"
-import LvInfo from "./LvInfo.js"
 
 import ApiStundenplan from '../../../api/factory/stundenplan.js';
 import ApiAddons from '../../../api/factory/addons.js';
@@ -11,7 +10,6 @@ export default {
 		BsModal,
 		Alert,
 		LvMenu,
-		LvInfo,
 	},
 	mixins: [BsModal],
 	props: {
@@ -44,6 +42,9 @@ export default {
 		};
 	},
 	methods:{
+		onHideModal: function(){
+			this.menu = null;
+		},
 		onModalShow: function()
 		{
 			// do not load the menu if the menu is not getting rendered
@@ -74,22 +75,13 @@ export default {
 		return BsModal.popup.bind(this)(null, options);
 	},
 	template: /*html*/ `
-	<bs-modal ref="modalContainer" @showBsModal="onModalShow" v-bind="$props" :bodyClass="''" dialogClass='modal-lg' class="bootstrap-alert" :backdrop="false" >
+	<bs-modal ref="modalContainer" @showBsModal="onModalShow" @hideBsModal="onHideModal" v-bind="$props" :bodyClass="''" dialogClass='modal-lg' class="bootstrap-alert" :backdrop="false" >
 		<template v-slot:title>
-			<template v-if="event?.type=='moodle'"><strong v-html="event.titel"></strong></template>
-			<template v-else-if="event.titel">{{ event.titel + ' - ' + event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</template>
-			<template v-else>{{ event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</template>
+			<slot name="modalTitle"></slot>
 		</template>
 		<template v-slot:default>
-			<h3>
-				<template v-if="event?.type =='moodle'">
-					{{$p.t('lvinfo','Moodleinformationen')}}
-				</template>
-				<template v-else>
-					{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}
-				</template>
-			</h3>
-			<slot name="info"></slot>
+			<slot name="modalContent"></slot>
+			
 			<template v-if="showMenu && this.menu">
 				<h3>{{$p.t('lehre','lehrveranstaltungsmenue')}}</h3>
 				<lv-menu :menu="menu"></lv-menu>

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

@@ -1,12 +1,11 @@
 import { numberPadding, formatDate } from "../../../helpers/DateHelpers.js"
 
-export default {
-	props: {
-		event: Object,
-	},
-	data() {
-		return {
 
+export default {
+	props:{
+		event: {
+			type: Object,
+			required: true,
 		}
 	},
 	computed: {
@@ -47,7 +46,10 @@ export default {
 			return formatDate(d);
 		},
 	},
-	template:/*html*/`
+	template: `
+		<h3>
+			{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}
+		</h3>
 		<table class="table table-hover mb-4">
 				<tbody>
 					<tr>
@@ -107,7 +109,5 @@ export default {
 						<td>{{event.organisationseinheit}}</td>
 					</tr>
 				</tbody>
-		</table>
-	`
-}
-
+		</table>`,
+}

public/js/components/Cis/Mylv/modalTitle.js

@@ -0,0 +1,12 @@
+export default {
+	props:{
+		event: {
+			type: Object,
+			required: true,
+		}
+	},
+	template:`
+			<div v-if="event.titel">{{ event.titel + ' - ' + event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</div>
+			<div v-else>{{ event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</div>
+`
+}

public/js/components/Cis/Stundenplan/Stundenplan.js

@@ -1,9 +1,8 @@
 import FhcCalendar from "../../Calendar/Calendar.js";
 import CalendarDate from "../../../composables/CalendarDate.js";
 import LvModal from "../Mylv/LvModal.js";
-import LvInfo from "../Mylv/LvInfo.js"
 import LvMenu from "../Mylv/LvMenu.js"
-import lehreinheitEvent from "./EventTypes/lehreinheitEvent.js"
+import lehreinheitEvent from "./EventTypes/calendarEvent.js"
 
 import ApiStundenplan from '../../../api/factory/stundenplan.js';
 import ApiAuthinfo from '../../../api/factory/authinfo.js';
@@ -26,7 +25,8 @@ const Stundenplan = {
 			studiensemester_kurzbz: null,
 			studiensemester_start: null,
 			studiensemester_ende: null,
-			uid: null
+			uid: null,
+			renderComponents: {}
 		}
 	},
 	props: {
@@ -49,6 +49,7 @@ const Stundenplan = {
 	},
 	inject:["renderers"],
 	watch: {
+		
 		weekFirstDay: {
 			handler: async function (newValue) {
 				let data = await this.fetchStudiensemesterDetails(newValue);
@@ -71,9 +72,10 @@ const Stundenplan = {
 		}
 	},
 	components: {
-		FhcCalendar, LvModal, LvMenu, LvInfo, lehreinheitEvent, 
+		FhcCalendar, LvModal, LvMenu, lehreinheitEvent, 
 	},
 	computed:{
+		
 		downloadLinks: function(){
 			if(!this.studiensemester_start || !this.studiensemester_ende || !this.uid )return;
 			let start = new Date(this.studiensemester_start);
@@ -107,18 +109,18 @@ const Stundenplan = {
 		},
 	},
 	methods:{
-		renderComponent(name){
-			switch(name){
-				case 'lehreinheitEvent': return lehreinheitEvent;
-				default: return !this.renderers? null : Vue.defineAsyncComponent(() => import(this.renderers[name]))
-			}
+		// component renderers fetches from different addons
+		modalTitleComponent(type){
+			return this.renderers[type].modalTitel;
 		},
-		renderComponentInfo(name) {
-			switch (name) {
-				case 'moodleEvent': return !this.renderers? null: Vue.defineAsyncComponent(() => import(this.renderers[name]));
-				default: return LvInfo;
-			}
+		modalContentComponent(type) {
+			return this.renderers[type].modalContent;
 		},
+		calendarEventComponent(type){
+			return this.renderers[type].calendarEvent;
+		},
+		
+
 		fetchStudiensemesterDetails: async function (date) {
 			return this.$api.call(ApiStundenplan.studiensemesterDateInterval(date));
 		},
@@ -249,6 +251,8 @@ const Stundenplan = {
 		},
 	},
 	created() {
+		
+
 		this.$api
 			.call(ApiAuthinfo.getAuthUID())
 			.then(res => res.data)
@@ -262,6 +266,7 @@ const Stundenplan = {
 		if(this.$refs.lvmodal) this.$refs.lvmodal.hide()	
 	},
 	template:/*html*/`
+	<template v-if="renderers">
 	<h2>
 		{{$p.t('lehre/stundenplan')}}
 		<span style="padding-left: 0.4em;" v-show="studiensemester_kurzbz">{{studiensemester_kurzbz}}</span>
@@ -269,10 +274,18 @@ const Stundenplan = {
 	</h2>
 	<hr>
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" >
-		<template #info>
-			<component :is="renderComponentInfo(currentlySelectedEvent.type+'Event')" :event="currentlySelectedEvent" ></component>
+		<template #modalTitle>
+			<Suspense>
+				<component :is="modalTitleComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
+			</Suspense>
+			</template>
+		<template #modalContent>
+			<Suspense>
+				<component :is="modalContentComponent(currentlySelectedEvent.type)" v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ></component>
+			</Suspense>
 		</template>
 	</lv-modal>
+
 	<fhc-calendar
 		ref="calendar"
 		@selectedEvent="setSelectedEvent"
@@ -298,7 +311,7 @@ const Stundenplan = {
 		</template>
 		<template #monthPage="{event,day}">
 			<div @click="showModal(event)" class="p-1">
-				<component :event="event" :is="renderComponent(event.type+'Event')"></component>
+				<component :is="calendarEventComponent(event.type)" :event="event" ></component>
 			</div>
 		</template>
 		<template #weekPage="{event,day}">
@@ -306,13 +319,13 @@ const Stundenplan = {
 				class="weekPageContainer position-relative border border-secondary border d-flex flex-col align-items-center justify-content-evenly h-100"
 				:class="{'p-1':event.allDayEvent}"
 				style = "overflow: auto;" >
-				<component :event="event" :is="renderComponent(event.type+'Event')"></component>
+				<component :is="calendarEventComponent(event.type)" :event="event" ></component>
 			</div>
 		</template>
 		<template #dayPage="{event,day,mobile}">
 			<div @click="mobile? showModal(event):null" type="button" class="dayPageContainer fhc-entry border border-secondary border m-0 h-100  text-center">
 				<div class="h-100 d-flex flex-col justify-content-evenly align-items-center">
-					<component :is="renderComponent(event.type+'Event')" :event="event"></component>
+					<component :is="calendarEventComponent(event.type)" :event="event"></component>
 				</div>
 			</div>
 		</template>
@@ -329,7 +342,8 @@ const Stundenplan = {
 		<template #pageMobilContentEmpty >
 			<h3>{{ $p.t('lehre/noLvFound') }}</h3>
 		</template>
-	</fhc-calendar>`
+	</fhc-calendar>
+	</template>`
 }
 
 export default Stundenplan