blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-20 08:22:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Calendar/Day/Page.js): moves the content to the parent, so that different views can display different content

Browse Source
This commit is contained in:
SimonGschnell
2024-11-25 13:28:55 +01:00
parent 36c129fcaf
commit 43fbd1d8f1
6 changed files with 91 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/apps/Cis/Stundenplan.js
+20 -4
View File
@@ -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>
`
});
public/js/components/Calendar/Calendar.js
+16 -3
View File
@@ -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>
public/js/components/Calendar/Day.js
+8 -2
View File
@@ -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>
public/js/components/Calendar/Day/Page.js
+14 -28
View File
@@ -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">
public/js/components/Cis/Mylv/LvModal.js
+11 -2
View File
@@ -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 >
public/js/components/Cis/Mylv/RoomInformation.js
+22 -5
View File
@@ -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>
`,
};