vbv/client/src/components/FeedbackForm.vue

<template>
  <div>
    <FeedbackIntro
      v-if="stepNo === 0"
      :title="circleStore.circle?.title"
      :intro="
        $t('feedback.intro', {
          name: `${courseSessionsStore.circleExperts[0].first_name} ${courseSessionsStore.circleExperts[0].last_name}`,
        })
      "
      @start="stepNo = 1"
    ></FeedbackIntro>
    <ItRadioGroup
      v-if="stepNo === 1"
      v-model="wouldRecommend"
      :label="$t('feedback.recommendLabel')"
      class="mb-8"
      :items="YES_NO"
    />
    <ItRadioGroup
      v-if="stepNo === 2"
      v-model="satisfaction"
      :label="$t('feedback.satisfactionLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 3"
      v-model="goalAttainment"
      :label="$t('feedback.goalAttainmentLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 4"
      v-model="proficiency"
      :label="$t('feedback.proficiencyLabel')"
      class="mb-8"
      :items="PERCENTAGES"
    />
    <ItRadioGroup
      v-if="stepNo === 5"
      v-model="receivedMaterials"
      :label="$t('feedback.receivedMaterialsLabel')"
      class="mb-8"
      :items="YES_NO"
    />
    <ItRadioGroup
      v-if="stepNo === 5 && receivedMaterials"
      v-model="materialsRating"
      :label="$t('feedback.materialsRatingLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 6"
      v-model="instructorCompetence"
      :label="$t('feedback.instructorCompetenceLabel')"
      class="mb-8"
      :items="RATINGS"
    />
    <ItRadioGroup
      v-if="stepNo === 7"
      v-model="instructorRespect"
      class="mb-8"
      :label="$t('feedback.instructorRespectLabel')"
      :items="RATINGS"
    />
    <ItTextarea
      v-if="stepNo === 8"
      v-model="instructorOpenFeedback"
      :label="$t('feedback.instructorOpenFeedbackLabel')"
      class="mb-8"
    />
    <ItTextarea
      v-if="stepNo === 9"
      v-model="courseNegativeFeedback"
      :label="$t('feedback.courseNegativeFeedbackLabel')"
      class="mb-8"
    />
    <ItTextarea
      v-if="stepNo === 10"
      v-model="coursePositiveFeedback"
      :label="$t('feedback.coursePositiveFeedbackLabel')"
      class="mb-8"
    />
    <FeedbackCompletition
      v-if="stepNo === 11"
      :avatar-url="courseSessionsStore.circleExperts[0].avatar_url"
      :title="
        $t('feedback.completionTitle', {
          name: `${courseSessionsStore.circleExperts[0].first_name} ${courseSessionsStore.circleExperts[0].last_name}`,
        })
      "
      :description="$t('feedback.completionDescription')"
      :feedback-sent="mutationResult != null"
      @send-feedback="sendFeedback"
    />

    <LearningContentNavigation
      :show-back-button="stepNo > 0"
      :show-next-button="stepNo > 0 && stepNo < MAX_STEPS - 1"
      :question-index="stepNo"
      :max-question-index="MAX_STEPS"
      @back="previousStep"
      @continue="nextStep"
    ></LearningContentNavigation>
    <!-- <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 FeedbackCompletition from "@/components/learningPath/FeedbackCompletition.vue";
import FeedbackIntro from "@/components/learningPath/FeedbackIntro.vue";
import LearningContentNavigation from "@/components/learningPath/LearningContentNavigation.vue";
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 { useCircleStore } from "@/stores/circle";
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();
const circleStore = useCircleStore();

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

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

const sendFeedbackMutation = graphql(`
  mutation SendFeedbackMutation($input: SendFeedbackInput!) {
    sendFeedback(input: $input) {
      feedbackResponse {
        id
      }
      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({
    data: {
      materials_rating: materialsRating,
      course_negative_feedback: courseNegativeFeedback,
      course_positive_feedback: coursePositiveFeedback,
      goald_attainment: goalAttainment,
      instructor_competence: instructorCompetence,
      instructor_respect: instructorRespect,
      instructor_open_feedback: instructorOpenFeedback,
      satisfaction,
      proficiency,
      received_materials: receivedMaterials,
      would_recommend: 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>