Merge branch 'feature-68298/Tempus_Grundstruktur' into feature-68298/Tempus_Grundstruktur-tests

public/css/Cis4/CoreCalendarEvents.css

@@ -97,3 +97,15 @@
 	display: none;
 }
 
+.weekPageContainer .calendar-event-collisions
+{
+	display: grid;
+	grid-template-columns: auto 1fr;
+	background: repeating-linear-gradient(
+			135deg,
+			transparent,
+			transparent 16px,
+			rgba(0, 0, 0, 0.3) 16px,
+			rgba(0, 0, 0, 0.3) 32px
+	);
+}

public/js/components/Calendar/Base/Grid.js

@@ -383,7 +383,14 @@ export default {
 			const dayStr = evt?.currentTarget?.dataset?.day;
 			const dropDay = dayStr ? luxon.DateTime.fromISO(dayStr) : date;
 
-			const dropStart = dropDay.plus(part.start || part);
+			const rawTimestamp = this.getTimestampFromMouse(evt, dropDay.toMillis());
+			const grabTime = luxon.DateTime.fromMillis(rawTimestamp);
+
+			const blocks = this.axisPartsWithBreaks.filter(p => p.index !== undefined);
+			const grabOffset = grabTime.diff(dropDay);
+
+			const snappedPart = blocks.find(b => grabOffset >= b.start && grabOffset < b.end) || part;
+			const dropStart = dropDay.plus(snappedPart.start);
 
 			let nettoDuration = this._getNettoDurationForDrop(obj);
 			let dropEnd = this.calculateDropEnd(dropStart, nettoDuration);

public/js/components/Calendar/Base/Grid/Line/Event.js

@@ -98,7 +98,6 @@ export default {
 			this.contextMenu.show = false;
 		},
 		onDragStart(evt) {
-			console.log(evt);
 			const rect = this.$refs.eventEl.getBoundingClientRect();
 			evt.dataTransfer.setData('fhc-grab-offset-y', evt.clientY - rect.top);
 			evt.dataTransfer.setData('fhc-grab-offset-x', evt.clientX - rect.left);

public/js/components/Calendar/Tempus.js

@@ -1,14 +1,10 @@
 import FhcCalendar from "./Base.js";
 
-import ApiLvPlan from '../../api/factory/lvPlan.js';
-
 import { useEventLoader } from '../../composables/EventLoader.js';
 
-import ModeDay from './Mode/Day.js';
 import ModeWeek from './Mode/Week.js';
 import ModeMonth from './Mode/Month.js';
 import ModeTable from './Mode/Table.js';
-import ApiTempusConfig  from '../../api/factory/tempus/config.js';
 import ApiKalender from '../../api/factory/tempus/kalender.js';
 import draggable from '../../directives/draggable.js';
 

public/js/components/Tempus/Renderer/Lehreinheit/calendarEvent.js

@@ -0,0 +1,94 @@
+export default {
+	props:{
+		event: {
+			type: Object,
+			required: true
+		}
+	},
+	computed:{
+		classes() {
+			const classes = ['cis-renderer-lehreinheit-calendar-event', 'calendar-event-default', 'h-100', 'w-100', 'p-1'];
+
+			if (this.event.collisions) {
+				classes.push('calendar-event-collisions');
+			}
+
+			return classes;
+		},
+		tooltipString() {
+			const tooltipArray = [];
+
+			tooltipArray.push([
+				this.$p.t('global/uhrzeit'),
+				[this.start, this.end].join(' - ')
+			].join(": "));
+
+			tooltipArray.push([
+				this.$p.t('profilUpdate/topic'),
+				this.event.topic
+			].join(": "));
+
+			tooltipArray.push([
+				this.$p.t('person/ort'),
+				this.event.ort_kurzbz
+			].join(": "));
+
+			if (Array.isArray(this.event.lektor) && this.event.lektor.length > 0) {
+				if (this.event.lektor.length > 3) {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n")
+						+ "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3])
+					].join(": "));
+				} else {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.map(lektor => lektor.kurzbz).join("\n")
+					].join(": "));
+				}
+			}
+
+			return tooltipArray.join("\n");
+		},
+		start() {
+			return luxon.Duration
+				.fromISOTime(this.event.beginn)
+				.toISOTime({ suppressSeconds: true });
+		},
+		end() {
+			return luxon.Duration
+				.fromISOTime(this.event.ende)
+				.toISOTime({ suppressSeconds: true });
+		}
+	},
+	template: /*html*/`
+	<div
+		:class="classes"
+		@wheel.stop
+	>
+		<div
+			v-if="!event.allDayEvent && event?.beginn && event?.ende"
+			class="event-time d-none d-xl-grid h-100"
+		>
+			<span>{{ start }}</span>
+			<span>{{ end }}</span>
+		</div>
+		<div class="event-text" v-tooltip="tooltipString">
+			<span class="event-topic">{{ event.topic }}</span>
+			<span class="event-place">{{ event.ort_kurzbz }}</span>
+			<span
+				v-for="(lektor,index) in event.lektor.slice(0, 3)"
+				class="event-lectors"
+			>
+				{{ lektor.kurzbz }}
+			</span>
+			<span
+				v-if="event.lektor.length > 3"
+				class="event-lectors-plus"
+			>
+				... +{{ event.lektor.length - 3 }}
+			</span>
+		</div>
+	</div>
+	`,
+}

public/js/components/Tempus/Renderer/Lehreinheit/modalContent.js

@@ -0,0 +1,148 @@
+import { numberPadding, formatDate } from "../../../../helpers/DateHelpers.js"
+import LvMenu from "../../../../components/Cis/Mylv/LvMenu.js";
+
+import ApiLvPlan from '../../../../api/factory/lvPlan.js';
+import ApiAddons from '../../../../api/factory/addons.js';
+
+export default {
+	components:{
+		LvMenu,
+	},
+	props:{
+		event: {
+			type: Object,
+			required: true,
+		}
+	},
+	data() {
+		return {
+			lvMenu: []
+		};
+	},
+	computed: {
+		lektorenLinks: function () {
+			if (!this.event || !Array.isArray(this.event.lektor) || !this.event.lektor.length) return "a";
+
+			let lektorenLinks = {};
+			this.event.lektor.forEach((lektor) => {
+				lektorenLinks[lektor.kurzbz] = FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + `/Cis/Profil/View/${lektor.mitarbeiter_uid}`;
+			})
+			return lektorenLinks;
+		},
+		getOrtContentLink: function () {
+			if (!this.event || !this.event.ort_content_id) return "a";
+
+			return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + `/CisVue/Cms/content/${this.event.ort_content_id}`
+		},
+		start_time: function () {
+			if (!this.event.beginn)
+				return 'N/A';
+			if (!(this.event.beginn instanceof Date)) {
+				return this.event.beginn;
+			}
+			return numberPadding(this.event.beginn.getHours()) + ":" + numberPadding(this.event.beginn.getMinutes());
+		},
+		end_time: function () {
+			if (!this.event.ende)
+				return 'N/A';
+			if (!(this.event.ende instanceof Date)) {
+				return this.event.ende;
+			}
+			return numberPadding(this.event.ende.getHours()) + ":" + numberPadding(this.event.ende.getMinutes());
+		}
+	},
+	methods: {
+		mehtodNumberPadding: function (number) {
+			return numberPadding(number);
+		},
+		methodFormatDate: function (d) {
+			return formatDate(d);
+		},
+	},
+	created() {
+		if (this.event.type == 'lehreinheit') {
+			this.$api
+				.call(ApiLvPlan.getLehreinheitStudiensemester(Array.isArray(this.event.lehreinheit_id) ? this.event.lehreinheit_id[0] : this.event.lehreinheit_id))
+				.then(res => res.data)
+				.then(studiensemester_kurzbz => this.$api.call(
+					ApiAddons.getLvMenu(
+						this.event.lehrveranstaltung_id,
+						studiensemester_kurzbz
+					)
+				))
+				.then(res => {
+					this.lvMenu = res.data;
+				});
+		}
+	},
+	template: `
+	<div>
+		<h5>
+			{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}
+		</h5>
+		<table class="table table-hover mb-4">
+				<tbody>
+					<tr>
+						<th>{{
+							$p.t('global','datum')?
+							$p.t('global','datum')+':'
+							:''
+						}}</th>
+						<td>{{methodFormatDate(event.datum)}}</td>
+					</tr>
+					<tr>
+						<th>{{
+								$p.t('ui','zeitraum')?
+								$p.t('ui','zeitraum')+':'
+								:''
+							}}</th>
+						<td>{{start_time + ' - ' + end_time}}</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('global','raum')?
+							$p.t('global','raum')+':'
+							:''
+						}}</th>
+						<td>
+							<a v-if="event.ort_content_id" :aria-label="$p.t('global','raum')" :title="$p.t('global','raum')" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true" style="color:#00649C"></i></a>
+							{{event.ort_kurzbz}}
+						</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('lehre','lehrveranstaltung')?
+							$p.t('lehre','lehrveranstaltung')+':'
+							:''
+						}}</th>
+						<td>{{'('+event.lehrform+') ' + event.lehrfach_bez}}</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('lehre','lektor')?
+							$p.t('lehre','lektor')+':'
+							:''
+						}}</th>
+						<td>
+							<div id="lektorenContainer">
+								<div v-for="lektor in event.lektor" class="d-block">
+									<a v-if="lektorenLinks[lektor.kurzbz]" :aria-label="$p.t('lehre','lektor')" :title="$p.t('lehre','lektor')" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C" aria-hidden="true"></i></a>
+									{{lektor.kurzbz}}
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<th>{{
+							$p.t('lehre','organisationseinheit')?
+							$p.t('lehre','organisationseinheit')+':'
+							:''
+						}}</th>
+						<td>{{event.organisationseinheit}}</td>
+					</tr>
+				</tbody>
+		</table>
+		
+		<lv-menu :containerStyles="['p-0']" :rowStyles="['m-0']" v-if="lvMenu.length" :menu="lvMenu" />
+	</div>`,
+}

public/js/components/Tempus/Renderer/Lehreinheit/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/Tempus/Renderer/Reservierungen/calendarEvent.js

@@ -6,6 +6,15 @@ export default {
 		}
 	},
 	computed: {
+		classes() {
+			const classes = ['cis-renderer-reservierungen-calendar-event', 'calendar-event-default', 'h-100', 'w-100', 'p-1'];
+
+			if (this.event.collisions) {
+				classes.push('calendar-event-collisions');
+			}
+
+			return classes;
+		},
 		tooltipString() {
 			const tooltipArray = [];
 
@@ -54,7 +63,7 @@ export default {
 	},
 	template: /* html */`
 	<div
-		class="cis-renderer-reservierungen-calendar-event calendar-event-default h-100 w-100 p-1"
+		:class="classes"
 	>
 		<div
 			v-if="!event.allDayEvent && event?.beginn && event?.ende"

public/js/components/Tempus/Tempus.js

@@ -447,7 +447,7 @@ export default {
 				end_time,
 			};
 
-			this.$api.call(ApiKalender.updateKalenderEvent(obj.orig.kalender_id, updatedInfos))
+			return this.$api.call(ApiKalender.updateKalenderEvent(obj.orig.kalender_id, updatedInfos))
 				.then(() => {
 					if (onSuccess)
 						onSuccess();
@@ -467,7 +467,7 @@ export default {
 			if (!dates)
 				return;
 
-			this._updateKalenderEvent(obj, dates.startDT, dates.endDT, dates.start_time, dates.end_time, () => {
+			return this._updateKalenderEvent(obj, dates.startDT, dates.endDT, dates.start_time, dates.end_time, () => {
 				this.$refs.calendar.resetEventLoader();
 			});
 		},
@@ -495,20 +495,26 @@ export default {
 			}
 			else if (obj.type === 'lehreinheit')
 			{
-				this.$api.call(
+				return this.$api.call(
 					ApiKalender.addKalenderEvent(
 						obj.orig.lehreinheit_id,
 						this.ort_kurzbz ? this.ort_kurzbz : obj.orig.ort_kurzbz,
 						start_time,
 						end_time
 					)
-				);
+				).then(() => {
+					this.$refs.calendar.resetEventLoader();
+					this.bcc.postMessage('dropped');
+				});
 			}
 			else if (obj.type === 'kalender')
 			{
-				this._updateKalenderEvent(obj, startDT, endDT, start_time, end_time, () =>
+				return this._updateKalenderEvent(obj, startDT, endDT, start_time, end_time, () =>
 				{
 					this.$refs.parking.unpark({ type: obj.type, id: obj.orig.kalender_id });
+					this.$refs.calendar.resetEventLoader();
+					this.bcc.postMessage('dropped');
+
 				});
 			}
 			else
@@ -652,13 +658,12 @@ export default {
 		}
 	},
 	mounted() {
-
 		this.reservierungPending = false;
 		this.bcc = new BroadcastChannel('fhc-dnd');
-		this.bcc.onmessage = e => {
+		this.bcc.addEventListener('message', e => {
 			if (e.data === 'dropped' && !this.reservierungPending)
 				this.$refs.calendar.resetEventLoader();
-		};
+		});
 	},
 	beforeUnmount() {
 		this.bcc.close();
@@ -827,7 +832,7 @@ export default {
 						</button>
 					</div>
 					<div class="px-2 py-1 w-100">
-						<Multiselect
+						<!--<Multiselect
 							:model-value="visibleStatusValue"
 							@update:model-value="val => toggleStatus(val.map(o => o.key))"
 							option-label="label"
@@ -836,7 +841,7 @@ export default {
 							:hide-selected="false"
 							:show-toggle-all="false"
 							class="w-100"
-						/>
+						/>-->
 						
 						<div class="d-flex gap-1 py-1" data-cy="previewRoleOptionsHolder">
 							<button

public/js/directives/drop.js

@@ -50,16 +50,14 @@ export default {
 				result = [result];
 
 			const res = binding.value(evt, result);
-			
+
 			if (res instanceof Promise) {
 				res.then(r => {
 					bcc.postMessage('release');
-					bcc.postMessage('dropped');
 					return r;
 				});
 			} else {
 				bcc.postMessage('release');
-				bcc.postMessage('dropped');
 			}
 		}