Use generic chips for groups and persons

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

 <script setup>
 import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
 import PrimaryActionButton from "aleksis.core/components/generic/buttons/PrimaryActionButton.vue";
+import PersonChip from "aleksis.core/components/person/PersonChip.vue";
+import GroupChip from "aleksis.core/components/group/GroupChip.vue";
 import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
 </script>
 
@@ -32,9 +34,10 @@ import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.v
       </v-row>
       <v-card-text v-if="affectedTeachers.length>0">
         <span> {{ $t("chronos.substitutions.affected_teachers") }} </span>
-        <v-chip
+        <person-chip
           v-for="(teacher, i) in affectedTeachers"
           class="ma-1"
+          :person="teacher"
           :to="{
             name: 'chronos.timetableWithId',
             params: {
@@ -42,21 +45,19 @@ import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.v
               id: teacher.id,
             },
           }"
-        >
-          {{ teacher.shortName || teacher.fullName }}
-        </v-chip>
+        />
       </v-card-text>
       <v-card-text v-if="affectedGroups.length>0">
         <span> {{ $t("chronos.substitutions.affected_groups") }} </span>
         <!-- TODO: Link to group-timetable as well -->
         <!-- as soon as it becomes possible to resolve a -->
         <!-- group-timetable from the lesson-event group too. -->
-        <v-chip
+        <group-chip
           v-for="group in affectedGroups"
           class="ma-1"
-        >
-          {{ group.shortName }}
-        </v-chip>
+          :group="group"
+          format="short"
+        />
       </v-card-text>
     </template>
     <!-- TODO: Extract strike -> bold || normal pattern into own -->