Add Feedback mutation call, also codegen for typing

client/codegen.ts

@@ -0,0 +1,17 @@
+import type { CodegenConfig } from "@graphql-codegen/cli";
+const config: CodegenConfig = {
+  schema: "../server/schema.graphql",
+  documents: ["src/**/*.vue"],
+  ignoreNoDocuments: true,
+  generates: {
+    "./src/gql/": {
+      preset: "client",
+      config: {
+        useTypeImports: true,
+      },
+      plugins: [],
+    },
+  },
+};
+
+export default config;

client/src/components/Feedback.vue

@@ -1,141 +1,266 @@
 <template>
   <div>
-    <h1>Feedback</h1>
     <div>
       <p>Würden Sie den Kurs weiterempfehlen?</p>
-      <ItCheckbox :checked="recommend" @toggle="recommend = !recommend"/>
+      <ItCheckbox :checked="wouldRecommend" @toggle="recommend = !recommend" />
     </div>
     <div>
-      <ItRadioGroup v-model="satisfaction" label="Zufriedenheit insgesamt" :items="ratings"/>
+      <ItRadioGroup
-      <ItRadioGroup v-model="goalAttainment" label="Zielerreichung insgesamt" :items="ratings"/>
+        v-model="satisfaction"
-      <ItRadioGroup v-model="proficiency"
+        label="Zufriedenheit insgesamt"
+        :items="ratings"
+      />
+      <ItRadioGroup
+        v-model="goalAttainment"
+        label="Zielerreichung insgesamt"
+        :items="ratings"
+      />
+      <ItRadioGroup
+        v-model="proficiency"
         label="Wie beurteilen Sie Ihre Sicherheit bezüglichen den Themen nach dem Kurs?"
-                    :items="percentages"/>
+        :items="percentages"
+      />
+    </div>
+    <ItRadioGroup
+      v-model="receivedMaterials"
+      label="Haben Sie Vorbereitungsunterlagen (z.B. eLearning) erhalten?"
+      :items="yesNo"
+    />
+    <ItRadioGroup
+      v-model="materialsRating"
+      label="Falls ja: Wie beurteilen Sie die Vorbereitungsunterlagen (z.B.
+eLearning)?"
+      :items="ratings"
+    />
+    <ItRadioGroup
+      v-model="instructorCompetence"
+      label="Der Kursleiter war themenstark, fachkompetent."
+      :items="ratings"
+    />
+    <ItRadioGroup
+      v-model="instructorRespect"
+      label="Fragen und Anregungen der Kursteilnehmenden wurden ernst
+genommen u. aufgegriffen."
+      :items="ratings"
+    />
+    <ItRadioGroup
+      v-model="howDiscovered"
+      label="Wie sind Sie auf das Kursangebot aufmerksam geworden?"
+      :items="discoveryReasons"
+    />
+    <p>Was ich dem Kursleiter sonst noch sagen wollte:</p>
+    <textarea
+      v-model="instructorOpenFeedback"
+      rows="4"
+      class="block w-96 rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+    />
+    <div>
+      <p>Wo sehen Sie Verbesserungspotenzial?</p>
+      <textarea
+        v-model="courseNegativeFeedback"
+        rows="4"
+        class="block w-96 rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+      />
+      <!--      class="block w-full rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"-->
+    </div>
+    <div>
+      <p>Was hat Ihnen besonders gut gefallen?</p>
+      <textarea
+        v-model="coursePositiveFeedback"
+        rows="4"
+        class="block w-96 rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+      />
+      <!--      class="block w-full rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"-->
     </div>
-    <ItRadioGroup label="Motivation" v-model="selected" :items="motivations"/>
-    <ItRadioGroup v-model="materialsReceived" label="Haben Sie Vorbereitungsunterlagen (z.B. eLearning) erhalten?" :items="yesNo" />
-    <ItRadioGroup v-model="materialsRating" label="Falls ja: Wie beurteilen Sie die Vorbereitungsunterlagen (z.B.
-eLearning)?" :items="ratings" />
-    <ItRadioGroup v-model="instructorCompetence" label="Der Kursleiter war themenstark, fachkompetent." :items="ratings" />
-    <ItRadioGroup v-model="instructorRespect" label="Fragen und Anregungen der Kursteilnehmenden wurden ernst
-genommen u. aufgegriffen." :items="ratings" />
-    <ItRadioGroup v-model="howDiscovered" label="Wie sind Sie auf das Kursangebot aufmerksam geworden?" :items="discoveryReasons" />
     <h3>Motivation</h3>
-    <ItCheckbox /> Persönliches Interesse
+    <ItCheckbox />
-    <ItCheckbox /> Berufliches Interesse
+    Persönliches Interesse
-    <ItCheckbox /> Pflichtkurs
+    <ItCheckbox />
-    <ItCheckbox /> Andere Gründe
+    Berufliches Interesse
+    <ItCheckbox />
+    Pflichtkurs
+    <ItCheckbox />
+    Andere Gründe
+    <button @click="sendFeedback">Send!</button>
+    <pre>
+     satisfaction {{ satisfaction }}
+     goalAttainment {{ goalAttainment }}
+     proficiency {{ proficiency }}
+     receivedMaterials {{ receivedMaterials }}
+     materialsRating {{ materialsRating }}
+     instructorCompetence {{ instructorCompetence }}
+     instructorRespect {{ instructorRespect }}
+     instructorOpenFeedback {{ instructorOpenFeedback }}
+     wouldRecommend {{ wouldRecommend }}
+     coursePositiveFeedback {{ coursePositiveFeedback }}
+     courseNegativeFeedback {{ courseNegativeFeedback }}
+     howDiscovered {{ howDiscovered }}
+     motivation {{ motivation }}
+     mutationResult: {{ mutationResult }}
+    </pre>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-  import ItCheckbox from '@/components/ui/ItCheckbox.vue';
+import ItCheckbox from "@/components/ui/ItCheckbox.vue";
-  import {ref} from 'vue';
+import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
-  import ItRadioGroup from '@/components/ui/ItRadioGroup.vue';
+import { graphql } from "@/gql/";
+import type { SendFeedbackInput } from "@/gql/graphql";
+import { useMutation } from "@urql/vue";
+import log from "loglevel";
+import { reactive, ref } from "vue";
+
+const sendFeedbackMutation = graphql(`
+  mutation SendFeedbackMutation($input: SendFeedbackInput!) {
+    sendFeedback(input: $input) {
+      id
+      satisfaction
+      goalAttainment
+      proficiency
+      receivedMaterials
+      materialsRating
+      errors {
+        field
+        messages
+      }
+    }
+  }
+`);
+const { executeMutation } = useMutation(sendFeedbackMutation);
 
 const discoveryReasons = [
   {
-      name: 'Internet',
+    name: "Internet",
-      id: 'I'
+    id: "I",
   },
   {
-      name: 'Prospekt',
+    name: "Prospekt",
-      id: 'L'
+    id: "L",
   },
   {
-      name: 'Zeitung',
+    name: "Zeitung",
-      id: 'N'
+    id: "N",
   },
   {
-      name: 'Persönliche Empfehlung',
+    name: "Persönliche Empfehlung",
-      id: 'R'
+    id: "R",
   },
   {
-      name: 'Öffentliche Veranstaltung',
+    name: "Öffentliche Veranstaltung",
-      id: 'E'
+    id: "E",
   },
   {
-      name: 'Andere',
+    name: "Andere",
-      id: 'O'
+    id: "O",
   },
 ];
 const yesNo = [
   {
-      name: 'Ja',
+    name: "Ja",
-      id: true
+    id: true,
   },
   {
-      name: 'Nein',
+    name: "Nein",
-      id: false
+    id: false,
   },
 ];
 const ratings = [
   {
-      name: 'sehr unzufrieden',
+    name: "sehr unzufrieden",
     id: 1,
   },
   {
-      name: 'unzufrieden',
+    name: "unzufrieden",
     id: 2,
   },
   {
-      name: 'zufrieden',
+    name: "zufrieden",
     id: 3,
   },
   {
-      name: 'sehr zufrieden',
+    name: "sehr zufrieden",
     id: 4,
   },
 ];
 const percentages = [
   {
-      name: '20%',
+    name: "20%",
     id: 20,
   },
   {
-      name: '40%',
+    name: "40%",
     id: 40,
   },
   {
-      name: '60%',
+    name: "60%",
     id: 60,
   },
   {
-      name: '80%',
+    name: "80%",
     id: 80,
   },
   {
-      name: '100%',
+    name: "100%",
     id: 100,
   },
 ];
 const motivations = [
   {
-      name: 'Persönliches Interesse',
+    name: "Persönliches Interesse",
     id: 1,
   },
   {
-      name: 'Berufliches Interesse',
+    name: "Berufliches Interesse",
     id: 2,
   },
   {
-      name: 'Pflichtkurs',
+    name: "Pflichtkurs",
     id: 3,
   },
   {
-      name: 'Andere Gründe',
+    name: "Andere Gründe",
     id: 4,
   },
 ];
 
-  const selected = ref(null);
+const motivation = ref("");
-  const satisfaction = ref(null);
+const satisfaction = ref(0);
-  const goalAttainment = ref(null);
+const goalAttainment = ref(0);
-  const recommend = ref(true);
+const wouldRecommend = ref(true);
-  const proficiency = ref(null);
+const proficiency = ref(0);
-  const materialsReceived = ref(null);
+const receivedMaterials = ref(false);
 const materialsRating = ref(null);
-  const instructorCompetence = ref(null);
+const instructorCompetence = ref(0);
-  const instructorRespect = ref(null);
+const instructorRespect = ref(0);
-  const howDiscovered = ref(null);
+const howDiscovered = ref("");
+const coursePositiveFeedback = ref("");
+const courseNegativeFeedback = ref("");
+const instructorOpenFeedback = ref("");
+
+const mutationResult = ref<any>(null);
+
+const sendFeedback = () => {
+  const input: SendFeedbackInput = reactive({
+    materialsRating,
+    courseNegativeFeedback,
+    coursePositiveFeedback,
+    goalAttainment,
+    howDiscovered,
+    instructorCompetence,
+    instructorRespect,
+    instructorOpenFeedback,
+    satisfaction,
+    proficiency,
+    receivedMaterials,
+    wouldRecommend,
+    motivation,
+  });
+  const variables = reactive({
+    input,
+  });
+  executeMutation(variables).then(({ data }) => {
+    log.debug(data);
+    mutationResult.value = data;
+  });
+};
 </script>

client/src/gql/fragment-masking.ts

@@ -0,0 +1,40 @@
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+
+export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType extends { ' $fragmentName'?: infer TKey }
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any
+}

client/src/gql/gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as types from './graphql';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+const documents = {
+    "\n  mutation SendFeedbackMutation($input: SendFeedbackInput!) {\n    sendFeedback(input: $input) {\n      id\n      satisfaction\n      goalAttainment\n      proficiency\n      receivedMaterials\n      materialsRating\n      errors {\n        field\n        messages\n      }\n    }\n  }\n": types.SendFeedbackMutationDocument,
+};
+
+export function graphql(source: "\n  mutation SendFeedbackMutation($input: SendFeedbackInput!) {\n    sendFeedback(input: $input) {\n      id\n      satisfaction\n      goalAttainment\n      proficiency\n      receivedMaterials\n      materialsRating\n      errors {\n        field\n        messages\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation SendFeedbackMutation($input: SendFeedbackInput!) {\n    sendFeedback(input: $input) {\n      id\n      satisfaction\n      goalAttainment\n      proficiency\n      receivedMaterials\n      materialsRating\n      errors {\n        field\n        messages\n      }\n    }\n  }\n"];
+
+export function graphql(source: string): unknown;
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;

client/src/gql/index.ts

@@ -0,0 +1,2 @@
+export * from "./gql"
+export * from "./fragment-masking"