Create Create effort component

aleksis/apps/maka/frontend/components/efforts/CreateEffort.vue

+<script setup>
+import GroupChip from "aleksis.core/components/group/GroupChip.vue";
+import DialogObjectForm from "aleksis.core/components/generic/dialogs/DialogObjectForm.vue";
+import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
+import EffortTypeChip from "../effort_types/EffortTypeChip.vue";
+</script>
+
+<template>
+  <v-container>
+    <dialog-object-form
+      :fields="headers"
+      :i18n-key="i18nKey"
+      create-item-i18n-key="maka.efforts.create"
+      :gql-query="gqlQuery"
+      :gql-create-mutation="gqlCreateMutation"
+      :gql-patch-mutation="gqlPatchMutation"
+      :gql-delete-mutation="gqlDeleteMutation"
+      :default-item="defaultItem"
+    >
+      <template #activator="{ attrs, on }">
+        <secondary-action-button i18n-key="maka.efforts.create" icon-text="$plus" v-bind="attrs" v-on="on" />
+      </template>
+
+      <!-- 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>
+
+      <template #effortType="{ item }">
+        <effort-type-chip :effort-type="item.effortType" v-if="item.effortType" />
+        <span v-else>–</span>
+      </template>
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #effortType.field="{ attrs, on }">
+        <div aria-required="true">
+          <v-autocomplete v-bind="attrs" v-on="on" :items="effortTypes" item-text="name" item-value="id" :rules="$rules().required.build()" />
+        </div>
+      </template>
+
+      <template #group="{ item }">
+        <group-chip :group="item.group"/>
+      </template>
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #group.field="{ attrs, on }">
+        <div aria-required="true">
+          <v-autocomplete v-bind="attrs" v-on="on" :items="groups" item-text="name" item-value="id" :rules="$rules().required.build()" />
+        </div>
+      </template>
+
+      <template #gradeSet="{ item }">
+        {{ item.gradeSet.name }}
+      </template>
+      <!-- eslint-disable-next-line vue/valid-v-slot -->
+      <template #gradeSet.field="{ attrs, on }">
+        <div aria-required="true">
+          <v-autocomplete v-bind="attrs" v-on="on" :items="gradeSets" item-text="name" item-value="id" :rules="$rules().required.build()" />
+        </div>
+      </template>
+    </dialog-object-form>
+  </v-container>
+</template>
+
+<script>
+import formRulesMixin from "aleksis.core/mixins/formRulesMixin.js";
+import {
+  helperGroups,
+  helperGradeSets,
+  helperEffortTypes,
+} from "./helper.graphql";
+import {
+  efforts,
+  createEfforts,
+  deleteEfforts,
+  updateEfforts,
+} from "./efforts.graphql";
+
+export default {
+  name: "Efforts",
+  mixins: [formRulesMixin],
+  apollo: {
+    groups: {
+      query: helperGroups,
+    },
+    gradeSets: {
+      query: helperGradeSets,
+    },
+    effortTypes: {
+      query: helperEffortTypes,
+    },
+  },
+  data() {
+    return {
+      headers: [
+        {
+          text: this.$t("maka.efforts.name"),
+          value: "name",
+        },
+        {
+          text: this.$t("maka.efforts.effort_type"),
+          value: "effortType",
+        },
+        {
+          text: this.$t("maka.efforts.group"),
+          value: "group",
+        },
+        {
+          text: this.$t("maka.efforts.grade_set"),
+          value: "gradeSet",
+        },
+      ],
+      i18nKey: "maka.efforts",
+      gqlQuery: efforts,
+      gqlCreateMutation: createEfforts,
+      gqlPatchMutation: updateEfforts,
+      gqlDeleteMutation: deleteEfforts,
+      defaultItem: {
+        name: "",
+        effortType: null,
+        group: null,
+        gradeSet: null,
+      },
+      effortTypes: [],
+      groups: [],
+      gradeSets: [],
+    };
+  },
+};
+</script>
\ No newline at end of file