Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/breaks_and_slots/Break.vue

+<script>
+import {
+  breakSlots,
+  createBreakSlot,
+  deleteBreakSlot,
+  deleteBreakSlots,
+  updateBreakSlots,
+} from "./break.graphql";
+import LesroosterSlot from "./LesroosterSlot.vue";
+
+export default {
+  name: "Break",
+  extends: LesroosterSlot,
+  data() {
+    return {
+      headers: [
+        {
+          text: this.$t("lesrooster.slot.name"),
+          value: "name",
+        },
+        {
+          text: this.$t("lesrooster.validity_range.title"),
+          value: "validityRange",
+          orderKey: "validity_range__date_start",
+        },
+        {
+          text: this.$t("lesrooster.slot.weekday"),
+          value: "weekday",
+        },
+        {
+          text: this.$t("lesrooster.break.period_after"),
+          value: "period",
+        },
+        {
+          text: this.$t("lesrooster.slot.time_start"),
+          value: "timeStart",
+        },
+        {
+          text: this.$t("lesrooster.slot.time_end"),
+          value: "timeEnd",
+        },
+      ],
+      i18nKey: "lesrooster.break",
+      createItemI18nKey: "lesrooster.break.create_item",
+      gqlQuery: breakSlots,
+      gqlCreateMutation: createBreakSlot,
+      gqlPatchMutation: updateBreakSlots,
+      gqlDeleteMutation: deleteBreakSlot,
+      gqlDeleteMultipleMutation: deleteBreakSlots,
+    };
+  },
+  methods: {
+    getCreateData(item) {
+      console.log("in getCreateData", item);
+      return {
+        ...item,
+        period: null,
+        periodAfter: item.period,
+        weekday: this.weekdayAsInt(item.weekday),
+        validityRange: item.validityRange.id,
+      };
+    },
+    getPatchData(items) {
+      console.log("patch items", items);
+      return items.map((item) => ({
+        id: item.id,
+        name: item.name,
+        weekday: this.weekdayAsInt(item.weekday),
+        periodAfter: item.period,
+        timeStart: item.timeStart,
+        timeEnd: item.timeEnd,
+        validityRange: item.validityRange.id,
+      }));
+    },
+  },
+};
+</script>
+
+<style scoped></style>