Allow extending the LessonDetails content slot

aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue

@@ -100,6 +100,18 @@
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+      <template v-for="detail in additionalDetails">
+        <v-divider inset />
+        <v-list-item>
+          <v-list-item-content>
+            <component
+              :is="detail.component"
+              :key="detail.key"
+              :lesson="selectedEvent"
+            />
+          </v-list-item-content>
+        </v-list-item>
+      </template>
       <v-card-actions class="flex-wrap" style="gap: 0.5em">
         <amend-lesson
           v-if="selectedEvent"
@@ -149,6 +161,11 @@ export default {
         (action) => action.shouldDisplay.call(this, this.selectedEvent),
       );
     },
+    additionalDetails() {
+      return collections.chronosLessonEventCalendarAdditionalDetails.items.filter(
+        (detail) => detail.shouldDisplay.call(this, this.selectedEvent),
+      );
+    },
   },
 };
 </script>

aleksis/apps/chronos/frontend/components/calendar_feeds/mixins/lessonEventAdditionalDetailsMixin.js

+export default {
+  props: {
+    lesson: {
+      type: Object,
+      required: true,
+    },
+  },
+};

aleksis/apps/chronos/frontend/index.js

@@ -24,6 +24,26 @@ export const collections = [
     name: "lessonEventCalendarAdditionalActions",
     type: Object,
   },
+  /**
+   * List of components that show additional details for Lessons
+   * and Substitutions in the timetable/calendar.
+   *
+   * An object in this list looks like this:
+   * ```js
+   * {
+   *     component: () => import("foo.vue"),
+   *     shouldDisplay: (lessonEvent) => true || false,
+   *     key: "shouldBeUnique",
+   * }
+   * ```
+   *
+   * Please use the lessonEventAdditionalDetailsMixin
+   * as a base for the component.
+   */
+  {
+    name: "lessonEventCalendarAdditionalDetails",
+    type: Object,
+  },
 ];
 
 export default {