Use generic PersonField from core

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

@@ -4,10 +4,9 @@
       <v-row>
         <div aria-required="true" class="full-width">
           <!-- FIXME Vue 3: clear-on-select -->
-          <v-autocomplete
+          <person-field
+            :gql-query="gqlQuery"
             :label="$t('forms.labels.persons')"
-            :items="allPersons"
-            item-text="fullName"
             return-object
             multiple
             chips
@@ -18,7 +17,6 @@
               ])
             "
             :value="persons"
-            :loading="$apollo.queries.allPersons.loading"
             @input="$emit('persons', $event)"
           />
         </div>
@@ -77,7 +75,8 @@
 <script>
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 import DateTimeField from "aleksis.core/components/generic/forms/DateTimeField.vue";
-import { persons } from "./absenceCreation.graphql";
+import PersonField from "aleksis.core/components/generic/forms/PersonField.vue";
+import { gqlPersons } from "./absenceCreation.graphql";
 import formRulesMixin from "aleksis.core/mixins/formRulesMixin.js";
 import { DateTime } from "luxon";
 
@@ -86,6 +85,7 @@ export default {
   components: {
     AbsenceReasonGroupSelect,
     DateTimeField,
+    PersonField,
   },
   mixins: [formRulesMixin],
   emits: [
@@ -96,8 +96,10 @@ export default {
     "comment",
     "absence-reason",
   ],
-  apollo: {
-    allPersons: persons,
+  data() {
+    return {
+      gqlQuery: gqlPersons,
+    };
   },
   props: {
     persons: {

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

 # Uses core persons query
-query persons {
-  allPersons: absenceCreationPersons {
+query gqlPersons {
+  items: absenceCreationPersons {
     id
     fullName
+    shortName
   }
 }