Fix displaying of teachers of documentationbs based on substitution lessons

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

@@ -89,22 +89,14 @@ import SubjectChipSelectField from "aleksis.apps.cursus/components/SubjectChipSe
       }"
     >
       <person-chip
-        v-for="teacher in documentation.teachers"
+        v-for="teacher in teachersWithStatus"
         :key="documentation.id + '-teacher-' + teacher.id"
         :person="teacher"
         :no-link="compact"
         v-bind="compact ? dialogActivator.attrs : {}"
         v-on="compact ? dialogActivator.on : {}"
-      />
-      <person-chip
-        v-for="teacher in amendedTeachers"
-        :key="documentation.id + '-amendedTeacher-' + teacher.id"
-        :person="teacher"
-        :no-link="compact"
-        v-bind="compact ? dialogActivator.attrs : {}"
-        v-on="compact ? dialogActivator.on : {}"
-        class="text-decoration-line-through"
-        disabled
+        :class="{ 'text-decoration-line-through': teacher?.removed }"
+        :disabled="teacher?.removed"
       />
     </div>
   </div>
@@ -142,16 +134,37 @@ export default {
     largeGrid() {
       return this.compact && !this.$vuetify.breakpoint.mobile;
     },
-    amendedTeachers() {
-      if (
-        this.documentation?.amends?.amends?.teachers &&
-        this.documentation.amends.amends.teachers.length
-      ) {
-        return this.documentation.amends.amends.teachers.filter(
-          (at) => !this.documentation.teachers.includes((t) => t.id === at.id),
-        );
+    // Group teachers by their substitution status (regular, removed)
+    teachersWithStatus() {
+      if (this.documentation?.amends?.amends) {
+        // Only do grouping if documentation is based on substitution and substitution
+        // has teachers linked with it.
+        if (this.documentation.teachers.length > 0) {
+          // IDs of teachers of amended lesson
+          const oldIds = this.documentation.amends.amends.teachers.map(
+            (teacher) => teacher.id,
+          );
+          // IDs of teachers of new substitution lesson
+          const newIds = this.documentation.teachers.map((teacher) => teacher.id);
+          const allTeachers = new Set(
+            this.documentation.amends.amends.teachers.concat(this.documentation.teachers),
+          );
+          let teachersWithStatus = Array.from(allTeachers).map((teacher) => {
+            let removed = false;
+            if (
+              !newIds.includes(teacher.id) &&
+              oldIds.includes(teacher.id)
+            ) {
+              // Mark teacher as being removed if they are only linked to the amended lesson
+              removed = true;
+            }
+            return { ...teacher, removed: removed };
+          });
+          return teachersWithStatus;
+        }
+        return this.documentation.amends.amends.teachers
       }
-      return [];
+      return this.documentation.teachers;
     },
     slotNumberStart() {
       if (this.documentation?.amends?.amends?.slotNumberStart) {