Resolve "Frontend for Models"

Closes #1 (closed)

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

 <template>
   <div id="slot-container">
-    <v-card style="grid-column: side; grid-row: 1">
+    <v-card style="grid-column: side; grid-row: 1 / span 7;">
       <v-card-text>
         <validity-range-field
             solo
@@ -8,6 +8,33 @@
             v-model="internalValidityRange"
             :loading="$apollo.queries.currentValidityRange.loading"
         />
+        <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>
 
@@ -20,7 +47,7 @@
     >
       <v-card :loading="$apollo.queries.items.loading">
         <v-card-title class="d-flex flex-wrap justify-space-between align-center fill-height">
-          <span>{{ $t("weekdays." + weekday) }}</span>
+          <span class="min-height">{{ $t("weekdays." + weekday) }}</span>
 
           <v-tooltip bottom>
             <template #activator="{ on, attrs }">
@@ -78,7 +105,7 @@
               style="left: calc(-20px - 0.5rem)"
               @click="add(left(weekday))"
           >
-            <v-icon>mdi-plus</v-icon>
+            <v-icon>mdi-table-column-plus-before</v-icon>
           </v-btn>
           <v-btn
               v-if="canAddDay(right(weekday))"
@@ -92,7 +119,7 @@
               style="right: calc(-20px - 0.5rem)"
               @click="add(right(weekday))"
           >
-            <v-icon>mdi-plus</v-icon>
+            <v-icon>mdi-table-column-plus-after</v-icon>
           </v-btn>
         </v-card-title>
       </v-card>
@@ -101,17 +128,44 @@
     <template
         v-for="slot in slots"
     >
-      <slot-card
-          :item="slot"
-          :disabled="$apollo.queries.items.loading"
-      />
+      <v-menu offset-y>
+        <template #activator="{ on, attrs }">
+          <slot-card
+              :item="slot"
+              :disabled="$apollo.queries.items.loading"
+              @click:delete="deleteSingularSlot"
+              @click:copy="on.click"
+              v-bind="attrs"
+          />
+        </template>
+        <v-list>
+          <v-list-item
+              v-for="(item, index) in weekdays.filter(day => day !== slot.weekday)"
+              :key="index"
+              link
+          >
+            <v-list-item-title @click="copySingularSlotTodDay(slot, item)">{{
+                $t("weekdays." + item)
+              }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </template>
+
+    <delete-dialog
+        :gql-mutation="deleteMutation"
+        :gql-query="gqlQuery"
+        v-model="deleteDialog"
+        :item="itemToDelete"
+    />
   </div>
 </template>
 
 <script>
 import {createBreakSlot, deleteBreakSlots} from "../break.graphql";
 import {
+  carryOverSlots,
   slots,
   createSlot,
   deleteSlot,
@@ -120,13 +174,14 @@ 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";
+import SlotCreator from "./SlotCreator.vue";
 
 export default {
   name: "LessonRaster",
-  components: {SlotCard, SecondaryActionButton, ValidityRangeField},
+  components: {SlotCreator, DeleteDialog, SlotCard, SecondaryActionButton, ValidityRangeField},
   apollo: {
     items: {
       query: slots,
@@ -155,7 +210,12 @@ export default {
     return {
       weekdays: [],
       internalValidityRange: null,
-      loading: {}
+      loading: {},
+      gqlQuery: slots,
+      deleteMutation: deleteSlot,
+      deleteDialog: false,
+      itemToDelete: null,
+      createBreaks: false,
     }
   },
   computed: {
@@ -163,12 +223,15 @@ export default {
       return this.items;
     },
     columns() {
-      return "[side] 10vw " + this.weekdays.map(
+      return "[side] 15vw " + this.weekdays.map(
           day => `[${day}] 1fr`
       ).join(" ");
     }
   },
   methods: {
+    intDay(weekday) {
+      return Number.isInteger(weekday) ? weekday : parseInt(weekday[2]);
+    },
     canAddDay(weekday) {
       if (!weekday) {
         return false;
@@ -189,7 +252,7 @@ export default {
       return weekday === "A_0" ? null : weekday.replace(/\d+$/, (match) => parseInt(match) - 1);
     },
     async copyTo(src, dest) {
-      this.loading[src] = true;
+      this.loading[dest] = true;
       const slotsToDelete = this.items
           .filter(slot => slot.weekday === dest && slot.model === "Slot")
           .map(slot => slot.id);
@@ -199,42 +262,37 @@ export default {
 
       // As there is an error when deleting breaks and normal slots in one action, we delete them separately
 
-      await Promise.all([
-            this.$apollo.mutate({
-              mutation: deleteSlots,
-              variables: {
-                ids: slotsToDelete
-              },
-            }),
-            this.$apollo.mutate({
-              mutation: deleteBreakSlots,
-              variables: {
-                ids: breaksToDelete
-              },
-            }),
-          ]
-      );
-      await Promise.all(
-          this.items
-              .filter(slot => slot.weekday === src)
-              .map(slot => {
-                this.$apollo.mutate({
-                  mutation: slot.model === "Slot" ? createSlot : createBreakSlot,
-                  variables: {
-                    input: {
-                      name: slot.name,
-                      validityRange: slot.validityRange.id,
-                      weekday: parseInt(dest[2]),
-                      period: slot.period,
-                      timeStart: slot.timeStart,
-                      timeEnd: slot.timeEnd,
-                    }
-                  },
-                })
-              })
-      )
+      await this.$apollo.mutate({
+        mutation: carryOverSlots,
+        variables: {
+          validityRange: this.internalValidityRange.id,
+          fromDay: this.intDay(src),
+          toDay: this.intDay(dest),
+        },
+      })
+
+      // FIXME: Optimistic response; add to store?
+      await this.$apollo.queries.items.refetch();
+      this.loading[dest] = false;
+    },
+    async copySingularSlotTodDay(slot, day) {
+      this.loading[day] = true;
+      this.$apollo.mutate({
+        mutation: carryOverSlots,
+        variables: {
+          validityRange: this.internalValidityRange.id || slot.validityRange.id,
+          fromDay: this.intDay(slot.weekday),
+          toDay: this.intDay(day),
+          only: [slot.id],
+        },
+      })
+      // FIXME: Optimistic response; add to store?
       await this.$apollo.queries.items.refetch();
-      this.loading[src] = false;
+      this.loading[day] = false;
+    },
+    deleteSingularSlot(slot) {
+      this.itemToDelete = slot;
+      this.deleteDialog = true;
     }
   },
 }
@@ -250,4 +308,8 @@ export default {
   margin: -1em;
   padding: 1em;
 }
+
+.min-height {
+  min-height: 36px;
+}
 </style>
\ No newline at end of file