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-list>
+      </v-card-text>
+    </v-card>
+
+    <v-hover
+        v-for="weekday in weekdays"
+        :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">
+          <span class="min-height">{{ $t("weekdays." + weekday) }}</span>
+
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-btn
+                  disabled
+                  icon
+                  v-bind="attrs"
+                  v-on="on"
+                  v-show="hover"
+              >
+                <v-icon>$deleteContent</v-icon>
+              </v-btn>
+            </template>
+            <span v-t="'actions.delete'"></span>
+          </v-tooltip>
+
+          <v-menu offset-y>
+            <template #activator="{ on: menu, attrs }">
+              <v-tooltip bottom>
+                <template #activator="{ on: tooltip }">
+                  <v-btn
+                      icon
+                      v-bind="attrs"
+                      v-on="{ ...tooltip, ...menu }"
+                      :loading="loading[weekday]"
+                      v-show="hover"
+                  >
+                    <v-icon>mdi-application-export</v-icon>
+                  </v-btn>
+                </template>
+                <span v-t="'actions.copy_to_day'"></span>
+              </v-tooltip>
+            </template>
+            <v-list>
+              <v-list-item
+                  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>
+            </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-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-icon>mdi-table-column-plus-after</v-icon>
+          </v-btn>
+        </v-card-title>
+      </v-card>
+    </v-hover>
+
+    <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"
+          />
+        </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,
+  deleteSlots,
+  updateSlots,
+} 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: {DeleteDialog, SlotCard, SecondaryActionButton, ValidityRangeField},
+  apollo: {
+    items: {
+      query: slots,
+      variables() {
+        return {
+          filters: JSON.stringify({
+            "validity_range": this.internalValidityRange.id
+          })
+        }
+      },
+      result(data) {
+        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 {
+      weekdays: [],
+      internalValidityRange: null,
+      loading: {},
+      gqlQuery: slots,
+      deleteMutation: deleteSlot,
+      deleteDialog: false,
+      itemToDelete: null,
+    }
+  },
+  computed: {
+    slots() {
+      return this.items;
+    },
+    columns() {
+      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;
+      }
+
+      return !this.weekdays.includes(weekday);
+    },
+    add(weekday) {
+      if (!this.weekdays.includes(weekday)) {
+        this.weekdays.push(weekday)
+        this.weekdays.sort();
+      }
+    },
+    right(weekday) {
+      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);
+    },
+    async copyTo(src, dest) {
+      this.loading[dest] = true;
+      const slotsToDelete = this.items
+          .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);
+
+      // As there is an error when deleting breaks and normal slots in one action, we delete them separately
+
+      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[day] = false;
+    },
+    deleteSingularSlot(slot) {
+      this.itemToDelete = slot;
+      this.deleteDialog = true;
+    }
+  },
+}
+</script>
+
+<style scoped>
+#slot-container {
+  display: grid;
+  grid-template-columns: v-bind(columns);
+  grid-auto-rows: 1fr auto;
+  gap: 1rem;
+  overflow-x: scroll;
+  margin: -1em;
+  padding: 1em;
+}
+
+.min-height {
+  min-height: 36px;
+}
+</style>
\ No newline at end of file