Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/ValidityRange.vue

+<script setup>
+import InlineCRUDList from "aleksis.core/components/generic/InlineCRUDList.vue";
+import DateField from "aleksis.core/components/generic/forms/DateField.vue";
+import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField.vue";</script>
+
+<template>
+  <inline-c-r-u-d-list
+      :headers="headers"
+      :i18n-key="i18nKey"
+      create-item-i18n-key="lesrooster.validity_range.create_validity_range"
+      :gql-query="gqlQuery"
+      :gql-create-mutation="gqlCreateMutation"
+      :gql-patch-mutation="gqlPatchMutation"
+      :gql-delete-mutation="gqlDeleteMutation"
+      :default-item="defaultItem"
+      :get-create-data="getCreateData"
+      :get-patch-data="getPatchData"
+  >
+    <template #schoolTerm="{ item }">
+      {{ item.schoolTerm.name }}
+    </template>
+    <template #schoolTerm.field="{ attrs, on }">
+      <school-term-field
+          v-bind="attrs"
+          v-on="on"
+      />
+    </template>
+
+    <template #dateStart="{ item }">
+      {{ $d(new Date(item.dateStart), "short") }}
+    </template>
+    <template #dateStart.field="{ attrs, on, item }">
+      <date-field
+          v-bind="attrs"
+          v-on="on"
+          :rules="dateStartRules"
+          :max="item ? item.dateEnd : undefined"
+      ></date-field>
+    </template>
+
+    <template #dateEnd="{ item }">
+      {{ $d(new Date(item.dateEnd), "short") }}
+    </template>
+    <template #dateEnd.field="{ attrs, on, item }">
+      <date-field
+          v-bind="attrs"
+          v-on="on"
+          required
+          :rules="dateStartRules"
+          :min="item ? item.dateStart : undefined"
+      ></date-field>
+    </template>
+  </inline-c-r-u-d-list>
+</template>
+
+<script>
+import {
+  validityRanges,
+  createValidityRange,
+  deleteValidityRange,
+  updateValidityRanges,
+} from "./validityRange.graphql";
+
+export default {
+  name: "ValidityRange",
+  data() {
+    return {
+      headers: [
+        {
+          text: this.$t("lesrooster.validity_range.name"),
+          value: "name",
+        },
+        {
+          text: this.$t("school_term.title"),
+          value: "schoolTerm",
+        },
+        {
+          text: this.$t("lesrooster.validity_range.date_start"),
+          value: "dateStart",
+        },
+        {
+          text: this.$t("lesrooster.validity_range.date_end"),
+          value: "dateEnd",
+        },
+      ],
+      i18nKey: "lesrooster.validity_range",
+      gqlQuery: validityRanges,
+      gqlCreateMutation: createValidityRange,
+      gqlPatchMutation: updateValidityRanges,
+      gqlDeleteMutation: deleteValidityRange,
+      defaultItem: {
+        name: "",
+        dateStart: "",
+        dateEnd: "",
+        schoolTerm: "",
+      },
+      dateStartRules: [(value) => !!value || this.$t("forms.errors.required")],
+    };
+  },
+  methods: {
+    getCreateData(item) {
+      console.log("in getCreateData", item);
+      return {
+        ...item,
+        schoolTerm: item.schoolTerm?.id
+      }
+    },
+    getPatchData(items) {
+      console.log("patch items", items);
+      return items.map(item => ({
+        id: item.id,
+        name: item.name,
+        dateStart: item.dateStart,
+        dateEnd: item.dateEnd,
+        schoolTerm: item.schoolTerm.id,
+      }));
+    }
+  },
+};
+</script>
+
+<style scoped></style>