Show rooms from substitutions in coursebook

aleksis/apps/alsijil/frontend/components/coursebook/coursebook.graphql

@@ -58,6 +58,11 @@ query documentationsForCoursebook(
           colourFg
           colourBg
         }
+        rooms {
+          id
+          name
+          shortName
+        }
       }
       rooms {
         id

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue

@@ -79,13 +79,15 @@ import SubjectChipSelectField from "aleksis.apps.cursus/components/SubjectChipSe
         class="text-decoration-line-through"
         disabled
       />
-      <template v-if="documentation.amends.rooms">
-        <room-chip
-          v-for="room in documentation.amends.rooms"
-          :key="'room-chip-' + room.id"
-          :room="room"
-        />
-      </template>
+      <room-chip
+        v-for="room in roomsWithStatus"
+        :key="documentation.id + '-room-chip-' + room.id"
+        :room="room"
+        :class="{ 'text-decoration-line-through': room?.removed }"
+        :disabled="room?.removed"
+        v-bind="compact ? dialogActivator.attrs : {}"
+        v-on="compact ? dialogActivator.on : {}"
+      />
     </div>
     <div
       :class="{
@@ -172,6 +174,38 @@ export default {
       }
       return this.documentation.teachers;
     },
+    // Group rooms by their substitution status (regular, removed)
+    roomsWithStatus() {
+      if (!this.documentation?.amends?.amends) {
+        // Only do grouping if documentation is based on substitution
+        return this.documentation.amends.rooms;
+      }
+
+      if (this.documentation.amends.rooms.length === 0) {
+        // If documentation has no rooms, return substitution rooms
+        return this.documentation.amends.amends.rooms;
+      }
+
+      // IDs of rooms of amended lesson
+      const oldIds = this.documentation.amends.amends.rooms.map(
+        (room) => room.id,
+      );
+      // IDs of rooms of new substitution lesson
+      const newIds = this.documentation.amends.rooms.map((room) => room.id);
+      const allRooms = this.documentation.amends.amends.rooms
+        .concat(this.documentation.amends.rooms)
+        .filter(
+          (value, index, self) =>
+            index === self.findIndex((t) => t.id === value.id),
+        );
+
+      console.log(allRooms);
+
+      return Array.from(allRooms).map((room) => ({
+        ...room,
+        removed: oldIds.includes(room.id) && !newIds.includes(room.id),
+      }));
+    },
     slotNumberStart() {
       if (this.documentation?.amends?.amends?.slotNumberStart) {
         return this.documentation.amends.amends.slotNumberStart;