Merge branch '45-mini-timetables-should-also-work-with-parallel-lessons' into 'master'

Resolve "Mini timetables should also work with parallel lessons"

Closes #45

See merge request AlekSIS/onboarding/AlekSIS-App-Lesrooster!39

aleksis/apps/lesrooster/frontend/components/timetable_management/LessonCard.vue

@@ -21,6 +21,11 @@ export default defineComponent({
       required: false,
       default: () => [],
     },
+    oneLine: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     subject() {
@@ -69,8 +74,12 @@ export default defineComponent({
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <div v-if="!loading" class="d-flex flex-column align-center my-1">
-      <v-card-title
+    <div
+      v-if="!loading"
+      :class="{ 'd-flex align-center my-1': true, 'flex-column': !oneLine }"
+    >
+      <component
+        :is="oneLine ? 'div' : 'v-card-title'"
         class="color d-flex justify-center flex-wrap px-3 py-0 ma-0"
       >
         <span>
@@ -92,11 +101,11 @@ export default defineComponent({
         >
           {{ "course" in lesson ? lesson.course.name : lesson.name }}
         </v-card-subtitle>
-      </v-card-title>
+      </component>
       <v-card-subtitle
         class="color pa-0 ma-0 d-flex flex-wrap justify-center small-gap"
       >
-        <span v-for="(teacher, index) in teachers" :key="teacher.id">
+        <span v-for="teacher in teachers" :key="teacher.id">
           <v-tooltip bottom>
             <template #activator="{ on, attrs }">
               <colored-short-name-chip
@@ -112,9 +121,7 @@ export default defineComponent({
             <span>{{ teacher.fullName }}</span>
           </v-tooltip>
         </span>
-        <span v-for="(room, index) in lesson.rooms" :key="room.id">
-          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-          <span v-if="index !== 0">, </span>
+        <span v-for="room in lesson.rooms" :key="room.id">
           <v-tooltip bottom>
             <template #activator="{ on, attrs }">
               <colored-short-name-chip

aleksis/apps/lesrooster/frontend/components/timetable_management/timetables/MiniTimeTable.vue

@@ -17,6 +17,7 @@ export default defineComponent({
     return {
       periods: [],
       weekdays: [],
+      slots: [],
     };
   },
   apollo: {
@@ -63,15 +64,40 @@ export default defineComponent({
     lessons() {
       return [];
     },
+    lessonsPerSlot() {
+      let weekdayPeriodSlots = Object.fromEntries(
+        this.weekdays.map((weekday) => [
+          weekday,
+          Object.fromEntries(this.periods.map((period) => [period, []])),
+        ]),
+      );
+
+      this.lessons?.forEach((lesson) => {
+        const weekdayStart = lesson.slotStart.weekday;
+        const weekdayEnd = lesson.slotEnd.weekday;
+        const periodStart = lesson.slotStart.period;
+        const periodEnd = lesson.slotEnd.period;
+
+        // If lesson start and end is on the same day, just add it in between the periods
+        if (weekdayStart === weekdayEnd) {
+          this.periods.map((period) => {
+            if (period <= periodEnd && period >= periodStart) {
+              weekdayPeriodSlots[weekdayStart][period].push(lesson);
+            }
+          });
+        } else {
+          // this is more complicated.
+          // As it is currently not possible to create timetables like this, we will just ignore it
+        }
+      });
+
+      return weekdayPeriodSlots;
+    },
   },
   methods: {
-    styleForLesson(lesson) {
+    styleForWeekdayAndPeriod(weekday, period) {
       return {
-        gridArea:
-          `period-${lesson.slotStart.period} / ${lesson.slotStart.weekday} / ` +
-          `span ${lesson.slotEnd.period - lesson.slotStart.period + 1} / ${
-            lesson.slotEnd.weekday
-          }`,
+        gridArea: `period-${period} / ${weekday} / ` + `span 1 / ${weekday}`,
       };
     },
   },
@@ -99,12 +125,21 @@ export default defineComponent({
     >
       <v-card-text>{{ $t("weekdays." + weekday) }}</v-card-text>
     </v-card>
-    <lesson-card
-      v-for="lesson in lessons"
-      :lesson="lesson"
-      :style="styleForLesson(lesson)"
-      :key="lesson.id"
-    />
+    <template v-for="weekday in weekdays">
+      <div
+        v-for="period in periods"
+        :key="'lesson-container-' + weekday + '-' + period"
+        :style="styleForWeekdayAndPeriod(weekday, period)"
+        class="d-flex flex-column gap-small"
+      >
+        <lesson-card
+          v-for="lesson in lessonsPerSlot[weekday][period]"
+          :lesson="lesson"
+          :key="lesson.id"
+          one-line
+        />
+      </div>
+    </template>
 
     <message-box type="info" v-if="!lessons || lessons.length === 0">
       {{ $t("lesrooster.timetable_management.no_lessons") }}
@@ -119,11 +154,15 @@ export default defineComponent({
 .timetable {
   display: grid;
   grid-template: v-bind(gridTemplate);
-  gap: 1em;
+  gap: 0.7em;
 }
 
 .timetable > * {
   width: 100%;
   height: 100%;
 }
+
+.gap-small {
+  gap: 0.15em;
+}
 </style>