Use TeacherField instead of custom autocomplete

aleksis/apps/lesrooster/frontend/components/timebound_course_config/TimeboundCourseConfigRaster.vue

@@ -2,6 +2,7 @@
 import PositiveSmallIntegerField from "aleksis.core/components/generic/forms/PositiveSmallIntegerField.vue";
 import ValidityRangeField from "../validity_range/ValidityRangeField.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
+import TeacherField from "aleksis.apps.cursus/components/TeacherField.vue"
 </script>
 
 <template>
@@ -112,14 +113,9 @@ import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
                 />
               </v-col>
               <v-col cols="6">
-                <v-autocomplete
-                  counter
+                <teacher-field
                   dense
                   filled
-                  multiple
-                  :items="getTeacherList(item.subject.teachers)"
-                  item-text="fullName"
-                  item-value="id"
                   class="mx-1"
                   :disabled="loading"
                   :label="$t('lesrooster.timebound_course_config.teachers')"
@@ -128,32 +124,15 @@ import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
                       ? getCurrentCourseConfig(course).teachers
                       : course.teachers
                   "
+                  :show-subjects="true"
+                  :priority-subject="item.subject"
                   @input="
                     (event) =>
                       setCourseConfigData(course, item.subject, header, {
                         teachers: event,
                       })
                   "
-                >
-                  <template #item="data">
-                    <template v-if="typeof data.item !== 'object'">
-                      <v-list-item-content>{{ data.item }}</v-list-item-content>
-                    </template>
-                    <template v-else>
-                      <v-list-item-action>
-                        <v-checkbox v-model="data.attrs.inputValue" />
-                      </v-list-item-action>
-                      <v-list-item-content>
-                        <v-list-item-title>{{
-                          data.item.fullName
-                        }}</v-list-item-title>
-                        <v-list-item-subtitle v-if="data.item.shortName">{{
-                          data.item.shortName
-                        }}</v-list-item-subtitle>
-                      </v-list-item-content>
-                    </template>
-                  </template>
-                </v-autocomplete>
+                />
               </v-col>
             </v-row>
           </div>
@@ -184,7 +163,7 @@ import {
 
 import { currentValidityRange as gqlCurrentValidityRange } from "../validity_range/validityRange.graphql";
 
-import { gqlGroupsForPlanning, gqlTeachers } from "../helper.graphql";
+import { gqlGroupsForPlanning } from "../helper.graphql";
 
 import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
 import formRulesMixin from "aleksis.core/mixins/formRulesMixin";
@@ -323,24 +302,6 @@ export default {
 
       return cachedSubjects;
     },
-    getTeacherList(subjectTeachers) {
-      return [
-        {
-          header: this.$t(
-            "lesrooster.timebound_course_config.subject_teachers",
-          ),
-        },
-        ...this.persons.filter((person) =>
-          subjectTeachers.find((teacher) => teacher.id === person.id),
-        ),
-        { divider: true },
-        { header: this.$t("lesrooster.timebound_course_config.all_teachers") },
-        ...this.persons.filter(
-          (person) =>
-            !subjectTeachers.find((teacher) => teacher.id === person.id),
-        ),
-      ];
-    },
     addCourse(subject, groups) {
       this.$set(
         this.items.find((i) => i.subject.id === subject),
@@ -538,8 +499,7 @@ export default {
       skip() {
         return (
           !this.groupIDSet.size ||
-          !this.internalValidityRange ||
-          !this.persons.length
+          !this.internalValidityRange
         );
       },
       variables() {
@@ -554,9 +514,6 @@ export default {
         this.items = this.generateTableItems(data.items);
       },
     },
-    persons: {
-      query: gqlTeachers,
-    },
   },
 };
 </script>