Use absence reason group select component

aleksis/apps/alsijil/frontend/components/coursebook/absences/ParticipationList.vue

 <script setup>
 import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
 
-import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 
 import selectParticipationMixin from "./selectParticipationMixin.js";
-import documentationPartMixin from "../documentation/documentationPartMixin";
+import updateParticipationMixin from "./updateParticipationMixin.js";
 </script>
 
 <template>
@@ -29,9 +28,12 @@ import documentationPartMixin from "../documentation/documentationPartMixin";
           {{ participation.person.fullName }}
         </v-list-item-title>
         <v-list-item-subtitle v-if="participation.absenceReason">
-          <absence-reason-chip
-            small
-            :absence-reason="participation.absenceReason"
+          <absence-reason-group-select
+            allow-empty
+            empty-value="present"
+            :loadSelectedChip="loading"
+            :value="participation.absenceReason?.id || 'present'"
+            @input="sendToServer([participation], 'absenceReason', $event)"
           />
         </v-list-item-subtitle>
         <v-list-item-action>
@@ -75,7 +77,7 @@ import documentationPartMixin from "../documentation/documentationPartMixin";
 <script>
 export default {
   name: "ParticipationList",
-  mixins: [documentationPartMixin, selectParticipationMixin],
+  mixins: [selectParticipationMixin, updateParticipationMixin],
   data() {
     return {
       loading: false,