Create inline crud list for extra marks

aleksis/apps/alsijil/frontend/components/extra_marks/ExtraMarks.vue

+<script setup>
+import ColorField from "aleksis.core/components/generic/forms/ColorField.vue";
+import InlineCRUDList from "aleksis.core/components/generic/InlineCRUDList.vue";
+</script>
+
+<template>
+  <v-container>
+    <inline-c-r-u-d-list
+      :headers="headers"
+      :i18n-key="i18nKey"
+      create-item-i18n-key="alsijil.extra_marks.create"
+      :gql-query="gqlQuery"
+      :gql-create-mutation="gqlCreateMutation"
+      :gql-patch-mutation="gqlPatchMutation"
+      :gql-delete-mutation="gqlDeleteMutation"
+      :default-item="defaultItem"
+    >
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #name.field="{ attrs, on }">
+        <div aria-required="true">
+          <v-text-field
+            v-bind="attrs"
+            v-on="on"
+            :rules="$rules().required.build()"
+          />
+        </div>
+      </template>
+
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #shortName.field="{ attrs, on }">
+        <div aria-required="true">
+          <v-text-field
+            v-bind="attrs"
+            v-on="on"
+            :rules="$rules().required.build()"
+          />
+        </div>
+      </template>
+
+      <template #colourFg="{ item }">
+        <v-chip :color="item.colourFg" outlined v-if="item.colourFg">
+          {{ item.colourFg }}
+        </v-chip>
+        <span v-else>–</span>
+      </template>
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #colourFg.field="{ attrs, on }">
+        <color-field v-bind="attrs" v-on="on" />
+      </template>
+
+      <template #colourBg="{ item }">
+        <v-chip :color="item.colourBg" outlined v-if="item.colourBg">
+          {{ item.colourBg }}
+        </v-chip>
+        <span v-else>–</span>
+      </template>
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #colourBg.field="{ attrs, on }">
+        <color-field v-bind="attrs" v-on="on" />
+      </template>
+
+      <template #showInCoursebook="{ item }">
+        <v-switch
+          :input-value="item.showInCoursebook"
+          disabled
+          inset
+          :false-value="false"
+          :true-value="true"
+        />
+      </template>
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #showInCoursebook.field="{ attrs, on }">
+        <v-switch
+          v-bind="attrs"
+          v-on="on"
+          inset
+          :false-value="false"
+          :true-value="true"
+          :hint="$t('alsijil.extra_marks.show_in_coursebook_helptext')"
+          persistent-hint
+        />
+      </template>
+    </inline-c-r-u-d-list>
+  </v-container>
+</template>
+
+<script>
+import formRulesMixin from "aleksis.core/mixins/formRulesMixin.js";
+import {
+  extraMarks,
+  createExtraMarks,
+  deleteExtraMarks,
+  updateExtraMarks,
+} from "./extra_marks.graphql";
+
+export default {
+  name: "ExtraMarks",
+  mixins: [formRulesMixin],
+  data() {
+    return {
+      headers: [
+        {
+          text: this.$t("alsijil.extra_marks.short_name"),
+          value: "shortName",
+        },
+        {
+          text: this.$t("alsijil.extra_marks.name"),
+          value: "name",
+        },
+        {
+          text: this.$t("alsijil.extra_marks.colour_fg"),
+          value: "colourFg",
+        },
+        {
+          text: this.$t("alsijil.extra_marks.colour_bg"),
+          value: "colourBg",
+        },
+        {
+          text: this.$t("alsijil.extra_marks.show_in_coursebook"),
+          value: "showInCoursebook",
+        },
+      ],
+      i18nKey: "alsijil.extra_marks",
+      gqlQuery: extraMarks,
+      gqlCreateMutation: createExtraMarks,
+      gqlPatchMutation: updateExtraMarks,
+      gqlDeleteMutation: deleteExtraMarks,
+      defaultItem: {
+        shortName: "",
+        name: "",
+        colourFg: "",
+        colourBg: "",
+        showInCoursebook: true,
+      },
+    };
+  },
+};
+</script>

aleksis/apps/alsijil/frontend/components/extra_marks/extra_marks.graphql

+query extraMarks($orderBy: [String], $filters: JSONString) {
+  items: extraMarks(orderBy: $orderBy, filters: $filters) {
+    id
+    shortName
+    name
+    colourFg
+    colourBg
+    showInCoursebook
+    canEdit
+    canDelete
+  }
+}
+
+mutation createExtraMarks($input: [BatchCreateExtraMarkInput]!) {
+  createExtraMarks(input: $input) {
+    items: extraMarks {
+      id
+      shortName
+      name
+      colourFg
+      colourBg
+      showInCoursebook
+      canEdit
+      canDelete
+    }
+  }
+}
+
+mutation deleteExtraMarks($ids: [ID]!) {
+  deleteExtraMarks(ids: $ids) {
+    deletionCount
+  }
+}
+
+mutation updateExtraMarks($input: [BatchPatchExtraMarkInput]!) {
+  updateExtraMarks(input: $input) {
+    items: extraMarks {
+      id
+      shortName
+      name
+      colourFg
+      colourBg
+      showInCoursebook
+      canEdit
+      canDelete
+    }
+  }
+}

aleksis/apps/alsijil/frontend/messages/de.json

@@ -27,7 +27,14 @@
       "menu_title_manage": "Gruppenrollen verwalten"
     },
     "extra_marks": {
-      "menu_title": "Zusätzliche Markierungen"
+      "menu_title": "Zusätzliche Markierungen",
+      "create": "Markierung erstellen",
+      "name": "Markierung",
+      "short_name": "Abkürzung",
+      "colour_fg": "Schriftfarbe",
+      "colour_bg": "Hintergrundfarbe",
+      "show_in_coursebook": "In Kursbuch-Übersicht zeigen",
+      "show_in_coursebook_helptext": "Wenn aktiviert tauchen diese Markierungen in den Zeilen im Kursbuch auf."
     },
     "all_lessons": {
       "menu_title": "Alle Stunden"

aleksis/apps/alsijil/frontend/messages/en.json

@@ -19,7 +19,14 @@
       "menu_title": "My overview"
     },
     "extra_marks": {
-      "menu_title": "Extra marks"
+      "menu_title": "Extra marks",
+      "create": "Create Extra Mark",
+      "name": "Mark",
+      "short_name": "Abbreviation",
+      "colour_fg": "Foreground Colour",
+      "colour_bg": "Background Colour",
+      "show_in_coursebook": "Show in Coursebook Overview",
+      "show_in_coursebook_helptext": "When checked, this extra mark will be displayed in the lesson summary in the coursebook"
     },
     "excuse_types": {
       "menu_title": "Excuse types"