Resolve "Veranstaltungs-Stundenplan: Anzeigefilter für Terminkachel einbauen"

Closes #5585

Merge request studip/studip!4209

2 files changed, 79 insertions, 8 deletions

diff --git a/resources/assets/javascripts/lib/fullcalendar.js b/resources/assets/javascripts/lib/fullcalendar.js
index f4e2826..350c72f 100644
--- a/resources/assets/javascripts/lib/fullcalendar.js
+++ b/resources/assets/javascripts/lib/fullcalendar.js
@@ -579,14 +579,19 @@ class Fullcalendar
 
                 if ($(info.view.context.calendar.el).hasClass('institute-plan')) {
                     $(eventElement).attr('title', event.extendedProps.tooltip);
-                    $(eventElement).find('.fc-title').html(
-                        $('<div>').css({
-                            width: 'calc(100% - 21px)',
-                            height: '100%',
-                            wordBreak: 'break-word'
-                        }).text(eventElement.text)
-                    );
-                    $(eventElement).find('.fc-title').append(
+                    if (event.extendedProps.content_fields) {
+                        for (const [css_class, field] of Object.entries(event.extendedProps.content_fields)) {
+                            $(eventElement).find('.fc-content').append(
+                                $('<div>').css({
+                                    width: 'calc(100% - 21px)',
+                                    height: '100%',
+                                    wordBreak: 'break-word'
+                                }).text(field)
+                                    .addClass(css_class + ' fc-title')
+                            );
+                        }
+                    }
+                    $(eventElement).find('.fc-content').append(
                         $('<button class="event-colorpicker">').addClass(iconColor)
                     );
                 } else {
diff --git a/resources/vue/apps/CoursePlanningTileFilter.vue b/resources/vue/apps/CoursePlanningTileFilter.vue
new file mode 100644
index 0000000..0ac69b1
--- /dev/null
+++ b/resources/vue/apps/CoursePlanningTileFilter.vue
@@ -0,0 +1,66 @@
+<template>
+    <form method="post" :action="storeURL" class="default">
+        <input type="hidden" :name="csrf.name" :value="csrf.value">
+        <input v-for="(_, key) in items"
+               :key="`input-${key}`"
+               type="hidden"
+               :name="key"
+               :value="checkboxes[key] ? 1 : 0"
+        >
+
+        <fieldset>
+            <legend>{{ $gettext('Angezeigte Veranstaltungsdaten') }}</legend>
+
+            <label v-for="(label, key) in items" :key="key">
+                <input :name="key"
+                       type="checkbox"
+                       v-model="checkboxes[key]"
+                       :disabled="isDisabled(key)"
+                >
+                {{ label }}
+            </label>
+        </fieldset>
+
+        <footer data-dialog-button>
+            <button type="submit" class="accept button">
+                {{ $gettext('Speichern') }}
+            </button>
+        </footer>
+    </form>
+</template>
+<script setup lang="ts">
+import { computed, reactive, unref } from "vue";
+import { $gettext } from "../../assets/javascripts/lib/gettext";
+
+type ValidField = 'course_number' | 'course_name' | 'lecturers' | 'rooms';
+
+const props = defineProps({
+    view: [String, null],
+    weekday: [String, null],
+    config: Object,
+});
+
+const checkboxes = reactive({...unref(props.config)});
+if (!checkboxes.course_number && !checkboxes.course_name) {
+    checkboxes.course_name = true;
+}
+
+const csrf = computed(() => window.STUDIP.CSRF_TOKEN);
+
+const items: Record<ValidField, string> = {
+    course_number: $gettext('Veranstaltungsnummer'),
+    course_name: $gettext('Veranstaltungstitel'),
+    lecturers: $gettext('Lehrende'),
+    rooms: $gettext('Raum'),
+};
+
+const storeURL = window.STUDIP.URLHelper.getURL(`dispatch.php/admin/courseplanning/store_tilefilter/${props.view}/${props.weekday}`, {}, true);
+
+function isDisabled(f: string): boolean {
+    const field = f as ValidField;
+
+    return (field === 'course_number' && !checkboxes.course_name)
+        || (field === 'course_name' && !checkboxes.course_number);
+
+}
+</script>