Resolve "Frontend for Models"

Closes #1 (closed)

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

 <template>
   <div id="slot-container">
     <v-card class="sidebar">
-      <v-navigation-drawer
-          floating
-          permanent
-      >
+      <v-navigation-drawer floating permanent>
         <v-list dense rounded>
           <validity-range-field
-              solo
-              rounded
-              hide-details
-              v-model="internalValidityRange"
-              :loading="$apollo.queries.currentValidityRange.loading"
+            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"
+            :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
+                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-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
+                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-title>{{
+                    $t("lesrooster.break.create_items")
+                  }}</v-list-item-title>
                 </v-list-item-content>
               </v-list-item>
             </template>
@@ -43,24 +54,27 @@
     </v-card>
 
     <v-hover
-        v-for="weekday in weekdays"
-        :style="{
-          gridColumn: weekday,
-        }"
-        v-slot="{ hover }"
+      v-for="weekday in weekdays"
+      :key="weekday"
+      :style="{
+        gridColumn: weekday,
+      }"
+      v-slot="{ hover }"
     >
       <v-card :loading="$apollo.queries.items.loading">
-        <v-card-title class="d-flex flex-wrap justify-space-between align-center fill-height">
+        <v-card-title
+          class="d-flex flex-wrap justify-space-between align-center fill-height"
+        >
           <span class="min-height">{{ $t("weekdays." + weekday) }}</span>
 
           <v-tooltip bottom>
             <template #activator="{ on, attrs }">
               <v-btn
-                  @click="deleteSlotsOfDay(weekday)"
-                  icon
-                  v-bind="attrs"
-                  v-on="on"
-                  v-show="hover"
+                @click="deleteSlotsOfDay(weekday)"
+                icon
+                v-bind="attrs"
+                v-on="on"
+                v-show="hover"
               >
                 <v-icon>$deleteContent</v-icon>
               </v-btn>
@@ -73,11 +87,11 @@
               <v-tooltip bottom>
                 <template #activator="{ on: tooltip }">
                   <v-btn
-                      icon
-                      v-bind="attrs"
-                      v-on="{ ...tooltip, ...menu }"
-                      :loading="loading[weekday]"
-                      v-show="hover"
+                    icon
+                    v-bind="attrs"
+                    v-on="{ ...tooltip, ...menu }"
+                    :loading="loading[weekday]"
+                    v-show="hover"
                   >
                     <v-icon>mdi-application-export</v-icon>
                   </v-btn>
@@ -87,41 +101,44 @@
             </template>
             <v-list>
               <v-list-item
-                  v-for="(item, index) in weekdays.filter(day => day !== weekday)"
-                  :key="index"
-                  link
+                v-for="(item, index) in weekdays.filter(
+                  (day) => day !== weekday
+                )"
+                :key="index"
+                link
               >
-                <v-list-item-title @click="copyTo(weekday, item)">{{ $t("weekdays." + item) }}</v-list-item-title>
+                <v-list-item-title @click="copyTo(weekday, item)">{{
+                  $t("weekdays." + item)
+                }}</v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
 
-
           <v-btn
-              v-if="canAddDay(left(weekday))"
-              v-show="hover"
-              color="secondary"
-              fab
-              dark
-              small
-              absolute
-              left
-              style="left: calc(-20px - 0.5rem)"
-              @click="add(left(weekday))"
+            v-if="canAddDay(left(weekday))"
+            v-show="hover"
+            color="secondary"
+            fab
+            dark
+            small
+            absolute
+            left
+            style="left: calc(-20px - 0.5rem)"
+            @click="add(left(weekday))"
           >
             <v-icon>mdi-table-column-plus-before</v-icon>
           </v-btn>
           <v-btn
-              v-if="canAddDay(right(weekday))"
-              v-show="hover"
-              color="secondary"
-              fab
-              dark
-              small
-              absolute
-              right
-              style="right: calc(-20px - 0.5rem)"
-              @click="add(right(weekday))"
+            v-if="canAddDay(right(weekday))"
+            v-show="hover"
+            color="secondary"
+            fab
+            dark
+            small
+            absolute
+            right
+            style="right: calc(-20px - 0.5rem)"
+            @click="add(right(weekday))"
           >
             <v-icon>mdi-table-column-plus-after</v-icon>
           </v-btn>
@@ -129,28 +146,28 @@
       </v-card>
     </v-hover>
 
-    <template
-        v-for="slot in slots"
-    >
+    <template v-for="slot in slots">
       <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"
+            :key="slot.id"
+            :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-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 @click="copySingularSlotTodDay(slot, item)"
+              >{{ $t("weekdays." + item) }}
             </v-list-item-title>
           </v-list-item>
         </v-list>
@@ -158,29 +175,38 @@
     </template>
 
     <delete-dialog
-        :gql-mutation="deleteMutation"
-        :gql-query="$apollo.queries.items"
-        v-model="deleteDialog"
-        :item="itemToDelete"
+      :gql-mutation="deleteMutation"
+      :gql-query="$apollo.queries.items"
+      v-model="deleteDialog"
+      :item="itemToDelete"
     >
       <template #body>
-        {{ $t("lesrooster." + itemToDelete.model.toLowerCase() + ".repr", itemToDelete) }}
+        {{
+          $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"
+      :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])}) }}
+        {{
+          $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">
+          <li v-for="item in itemsToDelete" :key="item.id">
             {{ $t("lesrooster." + item.model.toLowerCase() + ".repr", item) }}
           </li>
         </ul>
@@ -190,49 +216,53 @@
 </template>
 
 <script>
-import {createBreakSlot, deleteBreakSlots} from "../break.graphql";
 import {
   carryOverSlots,
   slots,
-  createSlot,
   deleteSlot,
   deleteSlots,
-  updateSlots,
 } from "../slot.graphql";
-import {currentValidityRange} from "../validityRange.graphql";
+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: {SlotCreator, DeleteDialog, DeleteMultipleDialog, SlotCard, SecondaryActionButton, ValidityRangeField},
+  components: {
+    SlotCreator,
+    DeleteDialog,
+    DeleteMultipleDialog,
+    SlotCard,
+    ValidityRangeField,
+  },
   apollo: {
     items: {
       query: slots,
       variables() {
         return {
           filters: JSON.stringify({
-            "validity_range": this.internalValidityRange.id
-          })
-        }
+            validity_range: this.internalValidityRange.id,
+          }),
+        };
       },
       result(data) {
-        this.weekdays = Array.from(new Set(data.data.items.map(slot => slot.weekday)));
+        this.weekdays = Array.from(
+          new Set(data.data.items.map((slot) => slot.weekday))
+        );
       },
       skip() {
         return this.internalValidityRange === null;
-      }
+      },
     },
     currentValidityRange: {
       query: currentValidityRange,
       result(data) {
         this.internalValidityRange = data.data.currentValidityRange;
-      }
-    }
+      },
+    },
   },
   data() {
     return {
@@ -247,17 +277,17 @@ export default {
       itemToDelete: null,
       itemsToDelete: [],
       createBreaks: false,
-    }
+    };
   },
   computed: {
     slots() {
       return this.items;
     },
     columns() {
-      return "[side] 256px " + this.weekdays.map(
-          day => `[${day}] 1fr`
-      ).join(" ");
-    }
+      return (
+        "[side] 256px " + this.weekdays.map((day) => `[${day}] 1fr`).join(" ")
+      );
+    },
   },
   methods: {
     intDay(weekday) {
@@ -272,26 +302,31 @@ export default {
     },
     add(weekday) {
       if (!this.weekdays.includes(weekday)) {
-        this.weekdays.push(weekday)
+        this.weekdays.push(weekday);
         this.weekdays.sort();
       }
     },
     right(weekday) {
-      return weekday === "A_6" ? null : weekday.replace(/\d+$/, (match) => parseInt(match) + 1);
+      return weekday === "A_6"
+        ? null
+        : weekday.replace(/\d+$/, (match) => parseInt(match) + 1);
     },
     left(weekday) {
-      return weekday === "A_0" ? null : weekday.replace(/\d+$/, (match) => parseInt(match) - 1);
+      return weekday === "A_0"
+        ? null
+        : weekday.replace(/\d+$/, (match) => parseInt(match) - 1);
     },
     async copyTo(src, dest) {
       this.loading[dest] = true;
       const slotsToDelete = this.items
-          .filter(slot => slot.weekday === dest && slot.model === "Slot")
-          .map(slot => slot.id);
+        .filter((slot) => slot.weekday === dest && slot.model === "Slot")
+        .map((slot) => slot.id);
       const breaksToDelete = this.items
-          .filter(slot => slot.weekday === dest && slot.model === "Break")
-          .map(slot => slot.id);
+        .filter((slot) => slot.weekday === dest && slot.model === "Break")
+        .map((slot) => slot.id);
 
       // As there is an error when deleting breaks and normal slots in one action, we delete them separately
+      // FIXME NO ACtion
 
       let that = this;
 
@@ -302,11 +337,20 @@ export default {
           fromDay: this.intDay(src),
           toDay: this.intDay(dest),
         },
-        update(store, {data: {carryOverSlots: {result}}}) {
+        update(
+          store,
+          {
+            data: {
+              carryOverSlots: { result },
+            },
+          }
+        ) {
           let query = {
             ...that.$apollo.queries.items.options,
-            variables: JSON.parse(that.$apollo.queries.items.previousVariablesJson)
-          }
+            variables: JSON.parse(
+              that.$apollo.queries.items.previousVariablesJson
+            ),
+          };
           // Read the data from cache for query
           const storedData = store.readQuery(query);
 
@@ -316,16 +360,16 @@ export default {
           }
 
           storedData.items = [
-            ...storedData.items.filter(item => item.weekday !== dest),
+            ...storedData.items.filter((item) => item.weekday !== dest),
             ...result,
-          ]
+          ];
 
           // Write data back to the cache
-          store.writeQuery({...query, data: storedData});
-        }
-      })
+          store.writeQuery({ ...query, data: storedData });
+        },
+      });
 
-      this.weekdays = this.weekdays.sort((a, b) => a[2] - b[2])
+      this.weekdays = this.weekdays.sort((a, b) => a[2] - b[2]);
       this.loading[dest] = false;
     },
     async copySingularSlotTodDay(slot, day) {
@@ -338,7 +382,7 @@ export default {
           toDay: this.intDay(day),
           only: [slot.id],
         },
-      })
+      });
       // FIXME: Optimistic response; add to store?
       await this.$apollo.queries.items.refetch();
       this.loading[day] = false;
@@ -348,11 +392,13 @@ export default {
       this.deleteDialog = true;
     },
     deleteSlotsOfDay(weekday) {
-      this.itemsToDelete = this.items.filter(slot => slot.weekday === weekday)
+      this.itemsToDelete = this.items.filter(
+        (slot) => slot.weekday === weekday
+      );
       this.deleteMultipleDialog = true;
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -374,4 +420,4 @@ export default {
   position: fixed;
   z-index: 1;
 }
-</style>
\ No newline at end of file
+</style>