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 / span 7;">
-      <v-card-text>
-        <validity-range-field
-            solo
-            hide-details
-            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-card class="sidebar">
+      <v-navigation-drawer
+          floating
+          permanent
+      >
+        <v-list dense rounded>
+          <validity-range-field
+              solo
+              rounded
+              hide-details
+              v-model="internalValidityRange"
+              :loading="$apollo.queries.currentValidityRange.loading"
+          />
+          <slot-creator
+              :query="$apollo.queries.items"
+              :validity-range="internalValidityRange.id"
+              v-if="internalValidityRange"
+              :breaks="createBreaks"
+          >
+            <template #activator="{ on, attrs }">
+              <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>
+            </template>
+          </slot-creator>
         </v-list>
-      </v-card-text>
+      </v-navigation-drawer>
     </v-card>
 
     <v-hover
@@ -43,7 +56,7 @@
           <v-tooltip bottom>
             <template #activator="{ on, attrs }">
               <v-btn
-                  disabled
+                  @click="deleteSlotsOfDay(weekday)"
                   icon
                   v-bind="attrs"
                   v-on="on"
@@ -146,10 +159,33 @@
 
     <delete-dialog
         :gql-mutation="deleteMutation"
-        :gql-query="gqlQuery"
+        :gql-query="$apollo.queries.items"
         v-model="deleteDialog"
         :item="itemToDelete"
-    />
+    >
+      <template #body>
+        {{ $t("lesrooster." + itemToDelete.model.toLowerCase() + ".repr", itemToDelete) }}
+      </template>
+    </delete-dialog>
+
+    <delete-multiple-dialog
+        :gql-mutation="deleteMultipleMutation"
+        :gql-query="$apollo.queries.items"
+        :items="itemsToDelete"
+        v-model="deleteMultipleDialog"
+    >
+      <template #title>
+        {{ $t('lesrooster.slot.confirm_delete_multiple_slots', {day: $t("weekdays." + weekdays[0])}) }}
+      </template>
+
+      <template #body>
+        <ul class="text-body-1">
+          <li v-for="item in itemsToDelete">
+            {{ $t("lesrooster." + item.model.toLowerCase() + ".repr", item) }}
+          </li>
+        </ul>
+      </template>
+    </delete-multiple-dialog>
   </div>
 </template>
 
@@ -166,12 +202,14 @@ import {
 import {currentValidityRange} from "../validityRange.graphql";
 import ValidityRangeField from "../ValidityRangeField.vue";
 import DeleteDialog from "aleksis.core/components/generic/dialogs/DeleteDialog.vue";
+import DeleteMultipleDialog from "aleksis.core/components/generic/dialogs/DeleteMultipleDialog.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, DeleteMultipleDialog, SlotCard, SecondaryActionButton, ValidityRangeField},
   apollo: {
     items: {
       query: slots,
@@ -203,8 +241,12 @@ export default {
       loading: {},
       gqlQuery: slots,
       deleteMutation: deleteSlot,
+      deleteMultipleMutation: deleteSlots,
       deleteDialog: false,
+      deleteMultipleDialog: false,
       itemToDelete: null,
+      itemsToDelete: [],
+      createBreaks: false,
     }
   },
   computed: {
@@ -212,7 +254,7 @@ export default {
       return this.items;
     },
     columns() {
-      return "[side] 15vw " + this.weekdays.map(
+      return "[side] 256px " + this.weekdays.map(
           day => `[${day}] 1fr`
       ).join(" ");
     }
@@ -251,6 +293,8 @@ export default {
 
       // As there is an error when deleting breaks and normal slots in one action, we delete them separately
 
+      let that = this;
+
       await this.$apollo.mutate({
         mutation: carryOverSlots,
         variables: {
@@ -258,10 +302,30 @@ export default {
           fromDay: this.intDay(src),
           toDay: this.intDay(dest),
         },
+        update(store, {data: {carryOverSlots: {result}}}) {
+          let query = {
+            ...that.$apollo.queries.items.options,
+            variables: JSON.parse(that.$apollo.queries.items.previousVariablesJson)
+          }
+          // Read the data from cache for query
+          const storedData = store.readQuery(query);
+
+          if (!storedData) {
+            // There are no data in the cache yet
+            return;
+          }
+
+          storedData.items = [
+            ...storedData.items.filter(item => item.weekday !== dest),
+            ...result,
+          ]
+
+          // Write data back to the cache
+          store.writeQuery({...query, data: storedData});
+        }
       })
 
-      // FIXME: Optimistic response; add to store?
-      await this.$apollo.queries.items.refetch();
+      this.weekdays = this.weekdays.sort((a, b) => a[2] - b[2])
       this.loading[dest] = false;
     },
     async copySingularSlotTodDay(slot, day) {
@@ -282,6 +346,10 @@ export default {
     deleteSingularSlot(slot) {
       this.itemToDelete = slot;
       this.deleteDialog = true;
+    },
+    deleteSlotsOfDay(weekday) {
+      this.itemsToDelete = this.items.filter(slot => slot.weekday === weekday)
+      this.deleteMultipleDialog = true;
     }
   },
 }
@@ -292,7 +360,7 @@ export default {
   display: grid;
   grid-template-columns: v-bind(columns);
   grid-auto-rows: 1fr auto;
-  gap: 1rem;
+  gap: 0.7rem;
   overflow-x: scroll;
   margin: -1em;
   padding: 1em;
@@ -301,4 +369,9 @@ export default {
 .min-height {
   min-height: 36px;
 }
+
+.sidebar {
+  position: fixed;
+  z-index: 1;
+}
 </style>
\ No newline at end of file