Initial frontend for managing holidays

aleksis/core/frontend/app/vuetify.js

@@ -28,6 +28,7 @@ const vuetifyOpts = {
       filterEmpty: "mdi-filter-outline",
       filterSet: "mdi-filter",
       send: "mdi-send-outline",
+      holidays: "mdi-calendar-weekend-outline"
     },
   },
 };

aleksis/core/frontend/components/holiday/HolidayInlineList.vue

+<script setup>
+import InlineCRUDList from "../generic/InlineCRUDList.vue";
+import DateField from "../generic/forms/DateField.vue";
+</script>
+
+<template>
+  <inline-c-r-u-d-list
+      :headers="headers"
+      :i18n-key="i18nKey"
+      create-item-i18n-key="holidays.create_holiday"
+      :gql-query="gqlQuery"
+      :gql-create-mutation="gqlCreateMutation"
+      :gql-patch-mutation="gqlPatchMutation"
+      :gql-delete-mutation="gqlDeleteMutation"
+      :gql-delete-multiple-mutation="gqlDeleteMultipleMutation"
+      :default-item="defaultItem"
+      ref="crudList"
+  >
+    <template #holidayName.field="{ attrs, on, isCreate }">
+      <div aria-required="true">
+        <v-text-field
+            v-bind="attrs"
+            v-on="on"
+            required
+            :rules="required"
+        ></v-text-field>
+      </div>
+    </template>
+
+    <template #dateStart="{ item }">
+      {{ $d(new Date(item.dateStart), "short") }}
+    </template>
+    <template #dateStart.field="{ attrs, on, item, isCreate }">
+      <div aria-required="true">
+        <date-field
+            v-bind="attrs"
+            v-on="on"
+            :rules="required"
+            :max="item ? item.dateEnd : undefined"
+            @input="updateEndDate($event, item, isCreate)"
+        ></date-field>
+      </div>
+    </template>
+
+    <template #dateEnd="{ item }">
+      {{ $d(new Date(item.dateEnd), "short") }}
+    </template>
+    <template #dateEnd.field="{ attrs, on, item }">
+      <div aria-required="true">
+        <date-field
+            v-bind="attrs"
+            v-on="on"
+            required
+            :rules="required"
+            :min="item ? item.dateStart : undefined"
+        ></date-field>
+      </div>
+    </template>
+  </inline-c-r-u-d-list>
+</template>
+
+<script>
+import {holidays, createHoliday, deleteHoliday, deleteHolidays, updateHolidays} from "./holiday.graphql";
+
+export default {
+  name: "HolidayInlineList",
+  data() {
+    return {
+      headers: [
+        {
+          text: this.$t("holidays.holiday_name"),
+          value: "holidayName",
+        },
+        {
+          text: this.$t("holidays.date_start"),
+          value: "dateStart",
+        },
+        {
+          text: this.$t("holidays.date_end"),
+          value: "dateEnd",
+        },
+      ],
+      i18nKey: "holidays",
+      gqlQuery: holidays,
+      gqlCreateMutation: createHoliday,
+      gqlPatchMutation: updateHolidays,
+      gqlDeleteMutation: deleteHoliday,
+      gqlDeleteMultipleMutation: deleteHolidays,
+      defaultItem: {
+        holidayName: "",
+        dateStart: null,
+        dateEnd: null,
+      },
+      required: [(value) => !!value || this.$t("forms.errors.required")],
+    };
+  },
+  methods: {
+    updateEndDate(newStartDate, item, isCreate) {
+      console.log("method called", item)
+      let start = new Date(newStartDate);
+      console.log(start)
+      if (!item.endDate) {
+        if (isCreate) {
+          this.$refs.crudList.createModel.dateEnd = newStartDate;
+          console.log("Changed of createmodel");
+        } else {
+          this.$refs.crudList.editableItems.find(holiday => holiday.id === item.id)[0].dateEnd = newStartDate;
+          console.log("Changed of editableitems");
+        }
+      } else {
+        console.log(item, newStartDate);
+      }
+    }
+  },
+};
+</script>
+
+<style scoped></style>

aleksis/core/frontend/components/holiday/holiday.graphql

+query holidays($orderBy: [String], $filters: JSONString) {
+    items: holidays(orderBy: $orderBy, filters: $filters) {
+        id
+        holidayName
+        dateStart
+        dateEnd
+        canEdit
+        canDelete
+    }
+}
+
+mutation createHoliday($input: CreateHolidayInput!) {
+    createHoliday(input: $input) {
+        holiday {
+            id
+            holidayName
+            dateStart
+            dateEnd
+            canEdit
+            canDelete
+        }
+    }
+}
+
+mutation deleteHoliday($id: ID!) {
+    deleteHoliday(id: $id) {
+        ok
+    }
+}
+
+mutation deleteHolidays($ids: [ID]!) {
+    deleteHolidays(ids: $ids) {
+        deletionCount
+    }
+}
+
+mutation updateHolidays($input: [BatchPatchHolidayInput]!) {
+    batchMutation: updateHolidays(input: $input) {
+        items: holidays {
+            id
+            holidayName
+            dateStart
+            dateEnd
+            canEdit
+            canDelete
+        }
+    }
+}

aleksis/core/frontend/routes.js

@@ -363,6 +363,17 @@ const routes = [
           permission: "core.view_schoolterm_rule",
         },
       },
+      {
+        path: "/holidays/",
+        component: () => import("./components/holiday/HolidayInlineList.vue"),
+        name: "core.holidays",
+        meta: {
+          inMenu: true,
+          titleKey: "holidays.menu_title",
+          icon: "$holidays",
+          permission: "core.view_holiday_rule",
+        },
+      },
       {
         path: "/dashboard_widgets/",
         component: () => import("./components/LegacyBaseTemplate.vue"),