Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/lesson_raster/LessonRaster.vue

@@ -8,24 +8,33 @@
             v-model="internalValidityRange"
             :loading="$apollo.queries.currentValidityRange.loading"
         />
-        <v-list>
-          <v-list-item link>
-            <v-list-item-icon>
-              <v-icon>$plus</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title>{{ $t("lesrooster.slot.create_slot") }}</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item link>
-            <v-list-item-icon>
-              <v-icon>$plus</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title>{{ $t("lesrooster.break.create_item") }}</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list>
+        <slot-creator
+            :query="gqlQuery"
+            :validity-range="internalValidityRange.id"
+            v-if="internalValidityRange"
+            :breaks="createBreaks"
+        >
+          <template #activator="{ on, attrs }">
+            <v-list>
+              <v-list-item link v-bind="attrs" v-on="on" @click="createBreaks = false">
+                <v-list-item-icon>
+                  <v-icon>$plus</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title>{{ $t("lesrooster.slot.create_items") }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item link v-bind="attrs" v-on="on" @click="createBreaks = true">
+                <v-list-item-icon>
+                  <v-icon>$plus</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title>{{ $t("lesrooster.break.create_items") }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </template>
+        </slot-creator>
       </v-card-text>
     </v-card>
 
@@ -168,10 +177,11 @@ import ValidityRangeField from "../ValidityRangeField.vue";
 import DeleteDialog from "aleksis.core/components/generic/dialogs/DeleteDialog.vue";
 import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
 import SlotCard from "./SlotCard.vue";
+import SlotCreator from "./SlotCreator.vue";
 
 export default {
   name: "LessonRaster",
-  components: {DeleteDialog, SlotCard, SecondaryActionButton, ValidityRangeField},
+  components: {SlotCreator, DeleteDialog, SlotCard, SecondaryActionButton, ValidityRangeField},
   apollo: {
     items: {
       query: slots,
@@ -205,6 +215,7 @@ export default {
       deleteMutation: deleteSlot,
       deleteDialog: false,
       itemToDelete: null,
+      createBreaks: false,
     }
   },
   computed: {