vbv/client/src/components/FeedbackForm.vue

<template>
  <div>
    <p class="text-gray-800 mb-4">Schritt {{ stepNo + 1 }} von {{ MAX_STEPS }}</p>
    <p class="mb-10 text-xl" v-html="$t('feedback.intro')"></p>
    <ItRadioGroup
      v-if="stepNo === 0"
      v-model="wouldRecommend"
      :label="$t('feedback.recommendLabel')"
      class="mb-8"
      :items="YES_NO"
    />
    <ItRadioGroup
      v-if="stepNo === 1"
      v-model="satisfaction"
      :label="$t('feedback.satisfactionLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 2"
      v-model="goalAttainment"
      :label="$t('feedback.goalAttainmentLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 3"
      v-model="proficiency"
      :label="$t('feedback.proficiencyLabel')"
      class="mb-8"
      :items="PERCENTAGES"
    />
    <ItRadioGroup
      v-if="stepNo === 4"
      v-model="receivedMaterials"
      :label="$t('feedback.receivedMaterialsLabel')"
      class="mb-8"
      :items="YES_NO"
    />
    <ItRadioGroup
      v-if="stepNo === 4 && receivedMaterials"
      v-model="materialsRating"
      :label="$t('feedback.materialsRatingLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 5"
      v-model="instructorCompetence"
      :label="$t('feedback.instructorCompetenceLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 6"
      v-model="instructorRespect"
      class="mb-8"
      :label="$t('feedback.instructorRespectLabel')"
      :items="RATINGS"
    />
    <ItTextarea
      v-if="stepNo === 7"
      v-model="instructorOpenFeedback"
      :label="$t('feedback.instructorOpenFeedbackLabel')"
      class="mb-8"
    />
    <ItTextarea
      v-if="stepNo === 8"
      v-model="courseNegativeFeedback"
      :label="$t('feedback.courseNegativeFeedbackLabel')"
      class="mb-8"
    />
    <ItTextarea
      v-if="stepNo === 9"
      v-model="coursePositiveFeedback"
      :label="$t('feedback.coursePositiveFeedbackLabel')"
      class="mb-8"
    />
    <button class="btn-blue" @click="sendFeedback">Senden und abschliessen</button>
    <button class="btn-blue mr-4" :disabled="stepNo <= 0" @click="previousStep">
      Zurück
    </button>
    <button class="btn-blue" :disabled="stepNo >= MAX_STEPS - 1" @click="nextStep">
      Weiter
    </button>
    <hr class="mb-10 mt-10" />
    <pre>
     satisfaction {{ satisfaction }}
     goalAttainment {{ goalAttainment }}
     proficiency {{ proficiency }}
     receivedMaterials {{ receivedMaterials }}
     materialsRating {{ materialsRating }}
     instructorCompetence {{ instructorCompetence }}
     instructorRespect {{ instructorRespect }}
     instructorOpenFeedback {{ instructorOpenFeedback }}
     wouldRecommend {{ wouldRecommend }}
     coursePositiveFeedback {{ coursePositiveFeedback }}
     courseNegativeFeedback {{ courseNegativeFeedback }}
     mutationResult: {{ mutationResult }}
    </pre>
  </div>
</template>

<script setup lang="ts">
import {
  PERCENTAGES,
  RATINGS,
  YES_NO,
} from "@/components/learningPath/feedback.constants";
import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
import ItTextarea from "@/components/ui/ItTextarea.vue";
import { graphql } from "@/gql/";
import type { SendFeedbackInput } from "@/gql/graphql";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { LearningContent } from "@/types";
import { useMutation } from "@urql/vue";
import log from "loglevel";
import { onMounted, reactive, ref } from "vue";

const props = defineProps<{ page: LearningContent }>();
const courseSessionsStore = useCourseSessionsStore();

onMounted(async () => {
  log.debug("Feedback mounted");
});

const stepNo = ref(0);
const MAX_STEPS = 10;

const sendFeedbackMutation = graphql(`
  mutation SendFeedbackMutation($input: SendFeedbackInput!) {
    sendFeedback(input: $input) {
      id
      satisfaction
      goalAttainment
      proficiency
      receivedMaterials
      materialsRating
      errors {
        field
        messages
      }
    }
  }
`);
const { executeMutation } = useMutation(sendFeedbackMutation);

const satisfaction = ref(null);
const goalAttainment = ref(null);
const wouldRecommend = ref(null);
const proficiency = ref(null);
const receivedMaterials = ref(null);
const materialsRating = ref(null);
const instructorCompetence = ref(null);
const instructorRespect = ref(null);
const coursePositiveFeedback = ref("");
const courseNegativeFeedback = ref("");
const instructorOpenFeedback = ref("");

const mutationResult = ref<any>(null);

const previousStep = () => {
  if (stepNo.value > 0) {
    stepNo.value -= 1;
  }
};
const nextStep = () => {
  if (stepNo.value < MAX_STEPS - 1) {
    stepNo.value += 1;
  }
};

const sendFeedback = () => {
  log.info("sending feedback");
  const courseSession = courseSessionsStore.courseSessionForRoute;
  if (!courseSession || !courseSession.id) {
    log.error("no course session set");
    return;
  }
  const input: SendFeedbackInput = reactive({
    materialsRating,
    courseNegativeFeedback,
    coursePositiveFeedback,
    goalAttainment,
    instructorCompetence,
    instructorRespect,
    instructorOpenFeedback,
    satisfaction,
    proficiency,
    receivedMaterials,
    wouldRecommend,
    page: props.page.translation_key,
    courseSession: courseSession.id,
  });
  const variables = reactive({
    input,
  });
  log.debug(variables);
  executeMutation(variables)
    .then(({ data, error }) => {
      log.debug(data);
      log.error(error);
      mutationResult.value = data;
    })
    .catch((e) => log.error(e));
};
</script>