Resolve "Add teacher select field"

Closes #19 (closed)

aleksis/apps/cursus/frontend/components/TeacherField.vue

+<template>
+  <v-autocomplete
+    v-bind="$attrs"
+    v-on="$listeners"
+    multiple
+    :items="getTeacherList"
+    item-text="fullName"
+    item-value="id"
+    :loading="$apollo.queries.persons.loading"
+  >
+    <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>
+    <template #prepend-inner>
+      <slot name="prepend-inner" />
+    </template>
+    <template #selection="data">
+      <slot name="selection" v-bind="data" />
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+import { gqlTeachers } from "./helper.graphql";
+
+export default {
+  name: "TeacherField",
+  data() {
+    return {
+      persons: [],
+    };
+  },
+  props: {
+    subject: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    getTeacherList() {
+      return [
+        {
+          header: this.$t("cursus.teacher.field.subject_teachers"),
+        },
+        ...this.persons.filter((person) =>
+          this.subject.teachers.find((teacher) => teacher.id === person.id),
+        ),
+        { divider: true },
+        { header: this.$t("cursus.teacher.field.all_teachers") },
+        ...this.persons.filter(
+          (person) =>
+            !this.subject.teachers.find((teacher) => teacher.id === person.id),
+        ),
+      ];
+    },
+  },
+  apollo: {
+    persons: {
+      query: gqlTeachers,
+    },
+  },
+};
+</script>
+
+<style scoped></style>