Resolve "Frontend for Models"

Closes #1 (closed)

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

@@ -107,6 +107,13 @@
           @click:delete="deleteSingularSlot"
       />
     </template>
+
+    <delete-dialog
+        :gql-mutation="deleteMutation"
+        :gql-query="gqlQuery"
+        v-model="deleteDialog"
+        :item="itemToDelete"
+    />
   </div>
 </template>
 
@@ -121,13 +128,13 @@ import {
 } from "../slot.graphql";
 import {currentValidityRange} from "../validityRange.graphql";
 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";
 
 export default {
   name: "LessonRaster",
-  components: {SlotCard, SecondaryActionButton, ValidityRangeField},
+  components: {DeleteDialog, SlotCard, SecondaryActionButton, ValidityRangeField},
   apollo: {
     items: {
       query: slots,
@@ -156,7 +163,11 @@ export default {
     return {
       weekdays: [],
       internalValidityRange: null,
-      loading: {}
+      loading: {},
+      gqlQuery: slots,
+      deleteMutation: deleteSlot,
+      deleteDialog: false,
+      itemToDelete: null,
     }
   },
   computed: {
@@ -240,13 +251,8 @@ export default {
       this.loading[src] = false;
     },
     deleteSingularSlot(slot) {
-      this.$apollo.mutate({
-        mutation: deleteSlot,
-        variables: {
-          id: slot.id,
-        },
-      }).then(() => console.log("Deleted", slot))
-      // FIXME: Optimistic response; delete from store
+      this.itemToDelete = slot;
+      this.deleteDialog = true;
     }
   },
 }