From 43fbd1d8f1d9a25f11224e628452b52a159430d5 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 25 Nov 2024 13:28:55 +0100
Subject: [PATCH] refactor(Calendar/Day/Page.js): moves the content to the
 parent, so that different views can display different content

---
 public/js/apps/Cis/Stundenplan.js             | 24 +++++++++--
 public/js/components/Calendar/Calendar.js     | 19 +++++++--
 public/js/components/Calendar/Day.js          | 10 ++++-
 public/js/components/Calendar/Day/Page.js     | 42 +++++++------------
 public/js/components/Cis/Mylv/LvModal.js      | 13 +++++-
 .../js/components/Cis/Mylv/RoomInformation.js | 27 +++++++++---
 6 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/public/js/apps/Cis/Stundenplan.js b/public/js/apps/Cis/Stundenplan.js
index 441d83f35..3306c3d80 100644
--- a/public/js/apps/Cis/Stundenplan.js
+++ b/public/js/apps/Cis/Stundenplan.js
@@ -2,6 +2,8 @@ import FhcCalendar from "../../components/Calendar/Calendar.js";
 import Phrasen from "../../plugin/Phrasen.js";
 import CalendarDate from "../../composables/CalendarDate.js";
 import LvModal from "../../components/Cis/Mylv/LvModal.js";
+import LvInfo from "../../components/Cis/Mylv/LvInfo.js"
+import LvMenu from "../../components/Cis/Mylv/LvMenu.js"
 
 
 const app = Vue.createApp({
@@ -17,7 +19,7 @@ const app = Vue.createApp({
 		}
 	},
 	components: {
-		FhcCalendar, LvModal
+		FhcCalendar, LvModal, LvMenu, LvInfo
 	},
 	computed:{
 		weekFirstDay: function () {
@@ -35,6 +37,9 @@ const app = Vue.createApp({
 		
 	},
 	methods:{
+		setSelectedEvent: function (event) {
+			this.currentlySelectedEvent = event;
+		},
 		getLvID: function () {
 			this.lv_id = window.location.pathname
 		},
@@ -111,7 +116,7 @@ const app = Vue.createApp({
 	<h2>{{$p.t('lehre/stundenplan')}}</h2>
 	<hr>
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
-	<fhc-calendar :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
+	<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
 		<template #monthPage="{event,day,isSelected}">
 			<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
 				{{event.topic}}
@@ -124,8 +129,8 @@ const app = Vue.createApp({
 				<span>{{event?.orig.ort_kurzbz}}</span>
 			</div>
 		</template>
-		<template #dayPage="{event,day}">
-			<div type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
+		<template #dayPage="{event,day,mobile}">
+			<div @click="mobile? showModal(event?.orig):null" type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
 				<div class="col ">
 					<p>Lehrveranstaltung:</p>
 					<p class="m-0">{{event?.orig.topic}}</p>
@@ -140,6 +145,17 @@ const app = Vue.createApp({
 				</div>
 			</div>
 		</template>
+		<template #pageMobilContent="{lvMenu}">
+			<h3 >{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
+			<div class="w-100">
+				<lv-info  :event="currentlySelectedEvent" />
+			</div>
+			<h3 >Lehrveranstaltungs Menu</h3>
+			<lv-menu :containerStyles="['p-0']" :rowStyles="['m-0']" v-show="lvMenu" :menu="lvMenu" />
+		</template>
+		<template #pageMobilContentEmpty >
+			<h3>Keine Lehrveranstaltungen</h3>
+		</template>
 	</fhc-calendar>
 	`
 });
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index ca0f95b58..1a398470d 100644
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -66,6 +66,12 @@ export default {
 		}
 	},
 	watch:{
+		selectedEvent:{
+			handler(newSelectedEvent) {
+				this.$emit('selectedEvent', newSelectedEvent);
+			},
+			immediate: true,
+		},
 		// scroll to the first event if the html element was found
 		scrollTime({focusDate,scrollTime}){
 			// return early if the scrollTime is not set
@@ -89,7 +95,8 @@ export default {
 		'select:day',
 		'select:event',
 		'change:range',
-		'update:minimized'
+		'update:minimized',
+		'selectedEvent'
 	],
 	data() {
 		return {
@@ -223,8 +230,14 @@ export default {
 			<template #weekPage="{event,day,isSelected}">
 				<slot name="weekPage" :event="event" :day="day" :isSelected="isSelected"></slot>
 			</template>
-			<template #dayPage="{event,day}">
-				<slot name="dayPage" :event="event" :day="day"></slot>
+			<template #dayPage="{event,day,mobile}">
+				<slot name="dayPage" :event="event" :day="day" :mobile="mobile"></slot>
+			</template>
+			<template #pageMobilContent="{lvMenu}">
+				<slot name="pageMobilContent" :lvMenu="lvMenu"></slot>
+			</template>
+			<template #pageMobilContentEmpty>
+				<slot name="pageMobilContentEmpty" ></slot>
 			</template>
 			<template #minimizedPage="{event,day}">
 				<slot name="minimizedPage" :event="event" :day="day"></slot>
diff --git a/public/js/components/Calendar/Day.js b/public/js/components/Calendar/Day.js
index 3fdcfdb4e..af6a3d44d 100644
--- a/public/js/components/Calendar/Day.js
+++ b/public/js/components/Calendar/Day.js
@@ -43,8 +43,14 @@ export default {
 		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'week')"/>
 		<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
 			<calendar-day-page :active="slot.active" :year="focusDate.y" :week="focusDate.w+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
-				<template #dayPage="{event,day}">
-					<slot name="dayPage" :event="event" :day="day" ></slot>
+				<template #dayPage="{event,day,mobile}">
+					<slot name="dayPage" :event="event" :day="day" :mobile="mobile" ></slot>
+				</template>
+				<template #pageMobilContent="{lvMenu}">
+					<slot name="pageMobilContent" :lvMenu="lvMenu" ></slot>
+				</template>
+				<template #pageMobilContentEmpty>
+					<slot name="pageMobilContentEmpty" ></slot>
 				</template>
 			</calendar-day-page>
 		</calendar-pane>
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 6477c41ad..de5ab2b5a 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -1,6 +1,4 @@
 import CalendarDate from '../../../composables/CalendarDate.js';
-import LvMenu from "../../../components/Cis/Mylv/LvMenu.js"
-import LvInfo from "../../../components/Cis/Mylv/LvInfo.js"
 import LvModal from "../../../components/Cis/Mylv/LvModal.js";
 
 function ggt(m, n) { return n == 0 ? m : ggt(n, m % n); }
@@ -8,8 +6,6 @@ function kgv(m, n) { return (m * n) / ggt(m, n); }
 
 export default {
 	components:{
-		LvMenu,
-		LvInfo,
 		LvModal,
 	},
 	data() {
@@ -211,13 +207,6 @@ export default {
 				'--test': this.dateToMinutesOfDay(event.end),
 			}
 		},
-		showModal: function (evt) {
-			let event = evt.orig;
-			this.setSelectedEvent(event);
-			Vue.nextTick(() => {
-				this.$refs.lvmodal.show();
-			});
-		},
 		eventClick(evt) {
 			let event = evt.orig;
 			this.setSelectedEvent(event);
@@ -282,8 +271,6 @@ export default {
 	},
 	template: /*html*/`
 	<div class="fhc-calendar-day-page ">
-	<!-- lvModal for mobile view -->
-	<lv-modal v-if="selectedEvent" :event="selectedEvent" ref="lvmodal" />
 		<div class="row m-0">
 			<div class="col-12 col-xl-6 p-0">
 				<div class="d-flex flex-column">
@@ -307,16 +294,16 @@ export default {
 							</div>
 							<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle">
 								<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" :class="{'selectedEvent':event.orig == selectedEvent}" class="mx-2 small rounded overflow-hidden " >
-									<!-- desktop version opens the lvMenu next to the calendar -->
+									<!-- desktop version of the page template, parent receives slotProp mobile = false -->
 									<div class="d-none d-xl-block h-100 "  @click.prevent="eventClick(event)">
-										<slot  name="dayPage" :event="event" :day="day">
-											<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
+										<slot  name="dayPage" :event="event" :day="day" :mobile="false">
+											<p>this is a slot placeholder</p>
 										</slot>
 									</div>
-									<!-- mobile version opens the lvModal in a modal -->
-									<div class="d-block d-xl-none h-100" @click.prevent="showModal(event)">
-										<slot  name="dayPage" :event="event" :day="day">
-											<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
+									<!-- mobile version of the page template, parent receives slotProp mobile = true -->
+									<div class="d-block d-xl-none h-100" @click.prevent="eventClick(event)">
+										<slot  name="dayPage" :event="event" :day="day" :mobile="true">
+											<p>this is a slot placeholder</p>
 										</slot>
 									</div>
 
@@ -328,18 +315,17 @@ export default {
 			</div>
 			</div>
 			<div class="d-none d-xl-block col-xl-6 p-0">
-				<div class="p-5	 sticky-top d-flex justify-content-center align-items-center flex-column">
+				<div style="z-index:0" class="p-5 sticky-top d-flex justify-content-center align-items-center flex-column">
 					<div style="max-height: calc(var(--fhc-calendar-pane-height) - 100px); overflow-y:auto;" class="w-100">
 						<template v-if="selectedEvent && lvMenu">
-							<h3 >{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
-							<div class="w-100">
-								<lv-info  :event="selectedEvent" />
-							</div>
-							<h3 >Lehrveranstaltungs Menu</h3>
-							<lv-menu :containerStyles="['p-0']" :rowStyles="['m-0']" v-show="lvMenu" :menu="lvMenu" />
+							<slot name="pageMobilContent" :lvMenu="lvMenu" >
+								<p>this is a slot placeholder</p>
+							</slot>
 						</template>
 						<template v-else-if="noEventsCondition">
-							<h3>Keine Lehrveranstaltungen</h3>
+							<slot name="pageMobilContentEmpty" >
+								<h3>This is an slot placeholder</h3>
+							</slot>
 						</template>
 						<template v-else>
 							<div class="p-4 d-flex w-100 justify-content-center align-items-center">
diff --git a/public/js/components/Cis/Mylv/LvModal.js b/public/js/components/Cis/Mylv/LvModal.js
index 718231968..e873dd5f8 100644
--- a/public/js/components/Cis/Mylv/LvModal.js
+++ b/public/js/components/Cis/Mylv/LvModal.js
@@ -17,6 +17,10 @@ export default {
 			type:String,
 			default:"title"
 		},
+		showMenu:{
+			type:Boolean,
+			default:true,
+		},
 	/*
 	* NOTE(chris):
 	* Hack to expose in "emits" declared events to $props which we use
@@ -39,6 +43,9 @@ export default {
 	methods:{
 		onModalShow: function()
 		{
+			// do not load the menu if the menu is not getting rendered
+			if(!this.showMenu) return;
+
 			if (this.event.type == 'lehreinheit') {
 				this.$fhcApi.factory.stundenplan.getLehreinheitStudiensemester(this.event.lehreinheit_id[0]).then(
 					res=>res.data
@@ -69,8 +76,10 @@ export default {
 		<template v-slot:default>
 			<h3 >{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
 			<lv-info :event="event"></lv-info>
-			<h3 >Lehrveranstaltungs Menu</h3>
-			<lv-menu :menu="menu"></lv-menu>
+			<template v-if="showMenu">
+				<h3 >Lehrveranstaltungs Menu</h3>
+				<lv-menu :menu="menu"></lv-menu>
+			</template>
 		</template>
 		<!-- optional footer -->
 		<template  v-slot:footer >
diff --git a/public/js/components/Cis/Mylv/RoomInformation.js b/public/js/components/Cis/Mylv/RoomInformation.js
index 7a199c6cf..299743926 100644
--- a/public/js/components/Cis/Mylv/RoomInformation.js
+++ b/public/js/components/Cis/Mylv/RoomInformation.js
@@ -1,6 +1,7 @@
 import FhcCalendar from "../../Calendar/Calendar.js";
 import CalendarDate from "../../../composables/CalendarDate.js";
-
+import LvModal from "../../../components/Cis/Mylv/LvModal.js";
+import LvInfo from "../../../components/Cis/Mylv/LvInfo.js"
 
 export default{
     props:{
@@ -10,7 +11,9 @@ export default{
         }
     },
 	components: {
-		FhcCalendar
+		FhcCalendar,
+		LvModal,
+		LvInfo,
 	},
 	data() {
 		return {
@@ -40,6 +43,9 @@ export default{
 		},
     },
     methods:{
+		setSelectedEvent: function(event){
+			this.currentlySelectedEvent = event;
+		},
 		getLvID: function () {
 			this.lv_id = window.location.pathname
 		},
@@ -51,6 +57,7 @@ export default{
 			Vue.nextTick(() => {
 				this.$refs.lvmodal.show();
 			});
+			
 		},
 		updateRange: function ({ start, end }) {
 
@@ -112,7 +119,8 @@ export default{
 		this.loadEvents();
 	},
     template: /*html*/`
-		<fhc-calendar :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
+		<lv-modal v-if="currentlySelectedEvent" :showMenu="false" :event="currentlySelectedEvent" ref="lvmodal" />
+		<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
             <template #monthPage="{event,day,isSelected}">
 				<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
 					{{event.topic}}
@@ -125,8 +133,8 @@ export default{
 					<span>{{event?.orig.ort_kurzbz}}</span>
 				</div>
 			</template>
-			<template #dayPage="{event,day}">
-				<div type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
+			<template #dayPage="{event,day,mobile}">
+				<div @click="mobile? showModal(event?.orig):null" type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
 					<div class="col ">
 						<p>Lehrveranstaltung:</p>
 						<p class="m-0">{{event?.orig.topic}}</p>
@@ -141,6 +149,15 @@ export default{
 					</div>
 				</div>
 			</template>
+			<template #pageMobilContent>
+				<h3 >{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
+				<div class="w-100">
+					<lv-info  :event="currentlySelectedEvent" />
+				</div>
+			</template>
+			<template #pageMobilContentEmpty >
+				<h3>Keine Raum Reservierung</h3>
+			</template>
         </fhc-calendar>
     `,
 };
\ No newline at end of file