Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/supervision/Supervision.vue

 <script setup>
+import CreateSubject from "aleksis.apps.cursus/components/CreateSubject.vue";
+import ForeignKeyField from "aleksis.core/components/generic/forms/ForeignKeyField.vue";
+import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 import InlineCRUDList from "aleksis.core/components/generic/InlineCRUDList.vue";
 import WeekDayField from "aleksis.core/components/generic/forms/WeekDayField.vue";
 import TimeGridField from "../validity_range/TimeGridField.vue";
@@ -93,6 +96,29 @@ import TimeGridField from "../validity_range/TimeGridField.vue";
       </div>
     </template>
 
+    <template #subject="{ item }">
+      <subject-chip v-if="item.subject" :subject="item.subject" />
+    </template>
+    <!-- eslint-disable-next-line vue/valid-v-slot -->
+    <template #subject.field="{ attrs, on }">
+      <foreign-key-field
+        v-bind="attrs"
+        v-on="on"
+        :fields="subject.fields"
+        :default-item="subject.defaultItem"
+        :gql-query="subject.gqlQuery"
+        :gql-patch-mutation="{}"
+        :gql-create-mutation="subject.gqlCreateMutation"
+        :get-create-data="subject.transformCreateData"
+        create-item-i18n-key="cursus.subject.create"
+        return-object
+      >
+        <template #createComponent="{ attrs, on }">
+          <create-subject v-bind="attrs" v-on="on"></create-subject>
+        </template>
+      </foreign-key-field>
+    </template>
+
     <!--<template #filters="{ attrs, on }">-->
     <!--  <time-grid-field-->
     <!--    outlined-->
@@ -118,6 +144,7 @@ import {
 import { gqlTeachers } from "../helper.graphql";
 import { rooms } from "aleksis.core/components/room/room.graphql";
 import { breakSlots } from "../breaks_and_slots/break.graphql";
+import { subjects, createSubject } from "aleksis.apps.cursus/components/subject.graphql";
 
 import { RRule } from "rrule";
 
@@ -138,6 +165,10 @@ export default {
           text: this.$t("lesrooster.supervision.teachers"),
           value: "teachers",
         },
+        {
+          text: this.$t("lesrooster.supervision.subject"),
+          value: "subject",
+        },
       ],
       i18nKey: "lesrooster.supervision",
       createItemI18nKey: "lesrooster.supervision.create_supervision",
@@ -151,7 +182,52 @@ export default {
         teachers: [],
         rooms: [],
       },
-      required: [(value) => !!value || this.$t("forms.errors.required")],
+      subject: {
+        gqlQuery: subjects,
+        gqlCreateMutation: createSubject,
+        transformCreateData(item) {
+          return { ...item, parent: item.parent?.id };
+        },
+        defaultItem: {
+          name: "",
+          shortName: "",
+          parent: null,
+          colourFg: "",
+          colourBg: "",
+        },
+        fields: [
+          {
+            text: this.$t("cursus.subject.fields.name"),
+            value: "name",
+          },
+          {
+            text: this.$t("cursus.subject.fields.short_name"),
+            value: "shortName",
+          },
+          {
+            text: this.$t("cursus.subject.fields.parent"),
+            value: "parent",
+          },
+          {
+            text: this.$t("cursus.subject.fields.colour_fg"),
+            value: "colourFg",
+          },
+          {
+            text: this.$t("cursus.subject.fields.colour_bg"),
+            value: "colourBg",
+          },
+          {
+            text: this.$t("cursus.subject.fields.teachers"),
+            value: "teachers",
+          },
+          ],
+      },
+      rules: {
+        required: [(value) => !!value || this.$t("forms.errors.required")],
+        subject: [
+          (subject) => !!subject || this.$t("cursus.errors.subject_required"),
+          ],
+      },
     };
   },
   apollo: {
@@ -200,6 +276,7 @@ export default {
         breakSlot: item.breakSlot.id,
         rooms: item.rooms.map((r) => r.id),
         teachers: item.teachers.map((t) => t.id),
+        subject: item.subject?.id,
         recurrence: this.getRRule(item.breakSlot.timeGrid).toString(),
       };
     },
@@ -209,6 +286,7 @@ export default {
         breakSlot: item.breakSlot.id,
         rooms: item.rooms.map((r) => r.id),
         teachers: item.teachers.map((t) => t.id),
+        subject: item.subject?.id,
         recurrence: this.getRRule(item.breakSlot.timeGrid).toString(),
       }));
     },