Implement groups-field

aleksis/apps/chronos/frontend/components/Substitutions.vue

@@ -11,7 +11,18 @@ import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
     :show-select="false"
     :enable-create="false"
     :enable-edit="false"
-  />
+  >
+    <template #groups="{ item: { oldGroups, newGroups } }">
+      <span v-if="newGroups.length > 0">
+        <strike v-for="g in oldGroups"> {{ g.shortName }} </strike>
+        <span> &nbsp;→&nbsp </span>
+        <b v-for="g in newGroups"> {{ g.shortName }} </b>
+      </span>
+      <span
+        v-else
+        v-for="g in oldGroups"
+      > {{ g.shortName }} </span>
+    </template>
   </c-r-u-d-list>
 </template>
 
@@ -65,17 +76,7 @@ export default {
     prepareList(data) {
       this.affectedTeachers = data.affectedTeachers;
       this.affectedGroups = data.affectedGroups;
-
-      return data.substitutions.map((sub) => {
-        return {
-          groups: sub.oldGroups[0].shortName,
-          time: sub.startTime,
-          teachers: sub.oldTeachers[0].shortName,
-          subject: sub.oldSubject,
-          room: sub.oldRooms[0].shortName,
-          notes: sub.comment,
-        };
-      });
+      return data.substitutions;
     },
   },
 };