Improve displaying of supervisions in calendar view

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

@@ -5,13 +5,8 @@
     without-location
   >
     <template #title>
-      <div
-        :style="{
-          color: currentSubject ? currentSubject.colour_fg || 'white' : 'white',
-        }"
-      >
-        <lesson-event-subject :event="selectedEvent" />
-      </div>
+      <v-icon class="mr-1">mdi-coffee</v-icon>
+      {{ $t("chronos.supervisions.title") }}
     </template>
     <template #badge>
       <cancelled-calendar-status-chip
@@ -94,11 +89,9 @@ import CancelledCalendarStatusChip from "aleksis.core/components/calendar/Cancel
 
 import LessonRelatedObjectChip from "../../LessonRelatedObjectChip.vue";
 import lessonEvent from "../mixins/lessonEvent";
-import LessonEventSubject from "../../LessonEventSubject.vue";
 export default {
   name: "LessonDetails",
   components: {
-    LessonEventSubject,
     LessonRelatedObjectChip,
     BaseCalendarFeedDetails,
     CalendarStatusChip,

aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/SupervisionEventBar.vue

+<template>
+  <base-calendar-feed-event-bar
+    :with-padding="false"
+    :without-time="true"
+    v-bind="$props"
+  >
+    <template #icon> </template>
+
+    <template #title>
+      <div
+        class="d-flex justify-start"
+        :class="{
+          'px-1': true,
+          'orange-border':
+            selectedEvent.meta.amended && !selectedEvent.meta.cancelled,
+          'red-border': selectedEvent.meta.cancelled,
+          'text-decoration-line-through': selectedEvent.meta.cancelled,
+        }"
+        :style="{
+          height: '100%',
+          borderRadius: '4px',
+        }"
+      >
+        <span
+          v-if="calendarType === 'month' && eventParsed.start.hasTime"
+          class="mr-1 font-weight-bold ml-1"
+        >
+          {{ eventParsed.start.time }}
+        </span>
+        <div
+          class="d-flex justify-center align-center flex-grow-1 text-truncate"
+        >
+          <div class="d-flex justify-center align-center flex-wrap text">
+            <v-icon size="12" color="white" class="mr-1">mdi-coffee</v-icon>
+
+            <lesson-event-old-new
+              v-if="!selectedEvent.meta.is_teacher || newTeachers.length > 0"
+              :new-items="newTeachers"
+              :old-items="oldTeachers"
+              attr="short_name"
+              class="mr-1"
+            />
+
+            <lesson-event-old-new
+              :new-items="newRooms"
+              :old-items="oldRooms"
+              attr="short_name"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </base-calendar-feed-event-bar>
+</template>
+
+<script>
+import calendarFeedEventBarMixin from "aleksis.core/mixins/calendarFeedEventBar.js";
+import BaseCalendarFeedEventBar from "aleksis.core/components/calendar/BaseCalendarFeedEventBar.vue";
+import lessonEvent from "../mixins/lessonEvent";
+import LessonEventOldNew from "../../LessonEventOldNew.vue";
+
+export default {
+  name: "LessonEventBar",
+  components: {
+    LessonEventOldNew,
+    BaseCalendarFeedEventBar,
+  },
+  computed: {
+    selectedEvent() {
+      return this.event;
+    },
+  },
+  mixins: [calendarFeedEventBarMixin, lessonEvent],
+};
+</script>
+
+<style scoped>
+.orange-border {
+  border: 3px orange solid;
+}
+
+.red-border {
+  border: 3px red solid;
+}
+
+.text {
+  line-height: 1.1;
+  font-size: 12px;
+}
+</style>