ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: Update UK feedback component

This commit is contained in:
Christian Cueni 2023-12-05 11:47:34 +01:00
parent 2a6b6c9658
commit fa76989bbf
6 changed files with 32 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/gql/gql.ts
View File

@ -25,7 +25,6 @@ const documents = {
"\n query dashboardProgress($courseId: ID!) {\n course_progress(course_id: $courseId) {\n _id\n course_id\n session_to_continue_id\n competence {\n _id\n total_count\n success_count\n fail_count\n }\n assignment {\n _id\n total_count\n points_max_count\n points_achieved_count\n }\n }\n }\n": types.DashboardProgressDocument, "\n query dashboardProgress($courseId: ID!) {\n course_progress(course_id: $courseId) {\n _id\n course_id\n session_to_continue_id\n competence {\n _id\n total_count\n success_count\n fail_count\n }\n assignment {\n _id\n total_count\n points_max_count\n points_achieved_count\n }\n }\n }\n": types.DashboardProgressDocument,
"\n query courseStatistics($courseId: ID!) {\n course_statistics(course_id: $courseId) {\n _id\n course_id\n course_title\n course_slug\n course_session_properties {\n _id\n sessions {\n id\n name\n }\n generations\n circles {\n id\n name\n }\n }\n course_session_selection_ids\n course_session_selection_metrics {\n _id\n session_count\n participant_count\n expert_count\n }\n attendance_day_presences {\n _id\n records {\n _id\n course_session_id\n generation\n circle_id\n due_date\n participants_present\n participants_total\n details_url\n }\n summary {\n _id\n days_completed\n participants_present\n }\n }\n feedback_responses {\n _id\n records {\n _id\n course_session_id\n generation\n circle_id\n experts\n satisfaction_average\n satisfaction_max\n details_url\n }\n summary {\n _id\n satisfaction_average\n satisfaction_max\n total_responses\n }\n }\n assignments {\n _id\n summary {\n _id\n completed_count\n average_passed\n }\n records {\n _id\n course_session_id\n course_session_assignment_id\n circle_id\n generation\n assignment_title\n assignment_type_translation_key\n details_url\n deadline\n metrics {\n _id\n passed_count\n failed_count\n unranked_count\n ranking_completed\n average_passed\n }\n }\n }\n competences {\n _id\n summary {\n _id\n success_total\n fail_total\n }\n records {\n _id\n course_session_id\n generation\n circle_id\n title\n success_count\n fail_count\n details_url\n }\n }\n }\n }\n": types.CourseStatisticsDocument, "\n query courseStatistics($courseId: ID!) {\n course_statistics(course_id: $courseId) {\n _id\n course_id\n course_title\n course_slug\n course_session_properties {\n _id\n sessions {\n id\n name\n }\n generations\n circles {\n id\n name\n }\n }\n course_session_selection_ids\n course_session_selection_metrics {\n _id\n session_count\n participant_count\n expert_count\n }\n attendance_day_presences {\n _id\n records {\n _id\n course_session_id\n generation\n circle_id\n due_date\n participants_present\n participants_total\n details_url\n }\n summary {\n _id\n days_completed\n participants_present\n }\n }\n feedback_responses {\n _id\n records {\n _id\n course_session_id\n generation\n circle_id\n experts\n satisfaction_average\n satisfaction_max\n details_url\n }\n summary {\n _id\n satisfaction_average\n satisfaction_max\n total_responses\n }\n }\n assignments {\n _id\n summary {\n _id\n completed_count\n average_passed\n }\n records {\n _id\n course_session_id\n course_session_assignment_id\n circle_id\n generation\n assignment_title\n assignment_type_translation_key\n details_url\n deadline\n metrics {\n _id\n passed_count\n failed_count\n unranked_count\n ranking_completed\n average_passed\n }\n }\n }\n competences {\n _id\n summary {\n _id\n success_total\n fail_total\n }\n records {\n _id\n course_session_id\n generation\n circle_id\n title\n success_count\n fail_count\n details_url\n }\n }\n }\n }\n": types.CourseStatisticsDocument,
"\n mutation SendFeedbackMutation(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n": types.SendFeedbackMutationDocument, "\n mutation SendFeedbackMutation(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n": types.SendFeedbackMutationDocument,
"\n mutation SendFeedbackMutation2(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n": types.SendFeedbackMutation2Document,
}; };
/** /**
@ -90,10 +89,6 @@ export function graphql(source: "\n query courseStatistics($courseId: ID!) {\n
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */
export function graphql(source: "\n mutation SendFeedbackMutation(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n"): (typeof documents)["\n mutation SendFeedbackMutation(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n"]; export function graphql(source: "\n mutation SendFeedbackMutation(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n"): (typeof documents)["\n mutation SendFeedbackMutation(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n mutation SendFeedbackMutation2(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n"): (typeof documents)["\n mutation SendFeedbackMutation2(\n $courseSessionId: ID!\n $learningContentId: ID!\n $learningContentType: String!\n $data: GenericScalar!\n $submitted: Boolean\n ) {\n send_feedback(\n course_session_id: $courseSessionId\n learning_content_page_id: $learningContentId\n learning_content_type: $learningContentType\n data: $data\n submitted: $submitted\n ) {\n feedback_response {\n id\n data\n submitted\n }\n errors {\n field\n messages\n }\n }\n }\n"];
export function graphql(source: string) { export function graphql(source: string) {
return (documents as any)[source] ?? {}; return (documents as any)[source] ?? {};

12
client/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long

219
client/src/pages/learningPath/learningContentPage/feedback/FeedbackBlockUK.vue
View File

@ -1,36 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { graphql } from "@/gql";
import ItRadioGroup from "@/components/ui/ItRadioGroup.vue"; import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
import ItTextarea from "@/components/ui/ItTextarea.vue"; import ItTextarea from "@/components/ui/ItTextarea.vue";
import FeedbackCompletition from "@/pages/learningPath/learningContentPage/feedback/FeedbackCompletition.vue";
import { import {
PERCENTAGES, PERCENTAGES,
RATINGS, RATINGS,
YES_NO, YES_NO,
} from "@/pages/learningPath/learningContentPage/feedback/feedback.constants"; } from "@/pages/learningPath/learningContentPage/feedback/feedback.constants";
import LearningContentMultiLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue"; import { LearningContentFeedbackUK, LearningContentFeedbackVV } from "@/types";
import { useMutation } from "@urql/vue"; import { computed } from "vue";
import type { LearningContentFeedback } from "@/types";
import { useRouteQuery } from "@vueuse/router";
import log from "loglevel";
import { computed, onMounted, reactive, ref } from "vue";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables"; import { useCourseSessionDetailQuery } from "@/composables";
import FeedbackBase from "@/pages/learningPath/learningContentPage/feedback/FeedbackBase.vue";
const props = defineProps<{ const props = defineProps<{
content: LearningContentFeedback; content: LearningContentFeedbackVV | LearningContentFeedbackUK;
}>(); }>();
const courseSession = useCurrentCourseSession();
const courseSessionDetailResult = useCourseSessionDetailQuery(); const courseSessionDetailResult = useCourseSessionDetailQuery();
const { t } = useTranslation(); const { t } = useTranslation();
const stepNo = useRouteQuery("step", "0", { transform: Number, mode: "push" });
const title = computed(
() => `«${props.content.circle?.title}»: ${t("feedback.areYouSatisfied")}`
);
const circleExperts = computed(() => { const circleExperts = computed(() => {
if (props.content?.circle?.slug) { if (props.content?.circle?.slug) {
return courseSessionDetailResult.filterCircleExperts(props.content.circle.slug); return courseSessionDetailResult.filterCircleExperts(props.content.circle.slug);
@ -53,58 +41,6 @@ const stepLabels = [
t("general.submission"), t("general.submission"),
]; ];
const numSteps = stepLabels.length;
// noinspection GraphQLUnresolvedReference -> mute IntelliJ warning
const sendFeedbackMutation = graphql(`
mutation SendFeedbackMutation2(
$courseSessionId: ID!
$learningContentId: ID!
$learningContentType: String!
$data: GenericScalar!
$submitted: Boolean
) {
send_feedback(
course_session_id: $courseSessionId
learning_content_page_id: $learningContentId
learning_content_type: $learningContentType
data: $data
submitted: $submitted
) {
feedback_response {
id
data
submitted
}
errors {
field
messages
}
}
}
`);
const feedbackSubmitted = ref(false);
const { executeMutation } = useMutation(sendFeedbackMutation);
interface FeedbackData {
[key: string]: number | string | null;
}
const feedbackData: FeedbackData = reactive({
satisfaction: null,
goal_attainment: null,
proficiency: null,
preparation_task_clarity: null,
instructor_competence: null,
instructor_respect: null,
instructor_open_feedback: "",
would_recommend: null,
course_positive_feedback: "",
course_negative_feedback: "",
});
const questionData = [ const questionData = [
{ {
modelKey: "satisfaction", modelKey: "satisfaction",
@ -154,134 +90,25 @@ const questionData = [
component: ItTextarea, component: ItTextarea,
}, },
]; ];
const previousStep = () => {
if (stepNo.value > 0) {
stepNo.value -= 1;
}
};
const nextStep = () => {
if (stepNo.value < numSteps && hasStepValidInput(stepNo.value)) {
stepNo.value += 1;
}
log.debug(`next step ${stepNo.value} of ${numSteps}`);
mutateFeedback(feedbackData);
};
function hasStepValidInput(stepNumber: number) {
const question = questionData[stepNumber - 1];
if (question) {
if (
[
"instructor_open_feedback",
"course_negative_feedback",
"course_positive_feedback",
].includes(question.modelKey)
) {
// text response questions need to have a "truthy" value (not "" or null)
return feedbackData[question.modelKey];
} else {
// other responses need to have data, can be `0` or `false`
return feedbackData[question.modelKey] !== null;
}
}
return true;
}
function mutateFeedback(data: FeedbackData, submit = false) {
log.debug("mutate feedback", feedbackData);
return executeMutation({
courseSessionId: courseSession.value.id,
learningContentId: props.content.id,
data: data,
submitted: submit,
})
.then((result) => {
log.debug("feedback mutation result", result);
if (result.data?.send_feedback?.feedback_response?.data) {
const responseData = result.data.send_feedback.feedback_response.data;
if (!responseData.instructor_open_feedback) {
responseData.instructor_open_feedback = "";
}
if (!responseData.course_negative_feedback) {
responseData.course_negative_feedback = "";
}
if (!responseData.course_positive_feedback) {
responseData.course_positive_feedback = "";
}
Object.assign(feedbackData, responseData);
log.debug("feedback data", feedbackData);
feedbackSubmitted.value =
result.data?.send_feedback?.feedback_response?.submitted || false;
}
})
.catch((e) => log.error(e));
}
onMounted(async () => {
log.debug("Feedback mounted");
await mutateFeedback({});
if (feedbackSubmitted.value) {
stepNo.value = numSteps - 1;
}
});
</script> </script>
<template> <template>
<LearningContentMultiLayout <FeedbackBase
:title="title" :step-labels="stepLabels"
sub-title="Feedback" :question-data="questionData"
:learning-content="content" :content="props.content"
:show-start-button="stepNo === 0" :introduction="
:show-next-button="stepNo > 0 && stepNo + 1 < numSteps" $t('feedback.intro', {
:disable-next-button="!hasStepValidInput(stepNo)" name: `${circleExperts[0]?.first_name} ${circleExperts[0]?.last_name}`,
:show-previous-button="stepNo > 0 && !feedbackSubmitted" })
:show-exit-button="stepNo + 1 === numSteps" "
:current-step="stepNo" :title="$t('feedback.areYouSatisfied')"
:steps-count="numSteps" :completion-title="
:start-badge-text="$t('general.introduction')" $t('feedback.completionTitle', {
:end-badge-text="$t('general.submission')" name: `${circleExperts[0].first_name} ${circleExperts[0].last_name}`,
:base-url="props.content.frontend_url" })
close-button-variant="close" "
@previous="previousStep()" :completion-description="$t('feedback.completionDescription')"
@next="nextStep()" :show-avatar="true"
> />
<div>
<p v-if="stepNo === 0" class="mt-10">
{{
$t("feedback.intro", {
name: `${circleExperts[0]?.first_name} ${circleExperts[0]?.last_name}`,
})
}}
</p>
<p v-if="stepNo > 0 && stepNo + 1 < numSteps" class="pb-2">
{{ stepLabels[stepNo] }}
</p>
<div v-for="(question, index) in questionData" :key="index">
<!-- eslint-disable -->
<!-- eslint does not like the dynamic v-model... -->
<component
:is="question.component"
v-if="index + 1 === stepNo"
v-model="feedbackData[question.modelKey] as any"
:items="question['items']"
:cy-key="question.modelKey"
/>
<!-- eslint-enable -->
</div>
<FeedbackCompletition
v-if="stepNo === 11"
:avatar-url="circleExperts[0].avatar_url"
:title="
$t('feedback.completionTitle', {
name: `${circleExperts[0].first_name} ${circleExperts[0].last_name}`,
})
"
:description="$t('feedback.completionDescription')"
:feedback-sent="feedbackSubmitted"
@send-feedback="mutateFeedback(feedbackData, true)"
/>
</div>
</LearningContentMultiLayout>
</template> </template>

4
client/src/pages/learningPath/learningContentPage/feedback/FeedbackBlockVV.vue
View File

@ -6,12 +6,12 @@ import {
RATINGS, RATINGS,
YES_NO, YES_NO,
} from "@/pages/learningPath/learningContentPage/feedback/feedback.constants"; } from "@/pages/learningPath/learningContentPage/feedback/feedback.constants";
import type { LearningContentFeedback } from "@/types"; import { LearningContentFeedbackUK, LearningContentFeedbackVV } from "@/types";
import FeedbackBase from "@/pages/learningPath/learningContentPage/feedback/FeedbackBase.vue"; import FeedbackBase from "@/pages/learningPath/learningContentPage/feedback/FeedbackBase.vue";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
const props = defineProps<{ const props = defineProps<{
content: LearningContentFeedback; content: LearningContentFeedbackVV | LearningContentFeedbackUK;
}>(); }>();
const { t } = useTranslation(); const { t } = useTranslation();

3
server/vbv_lernwelt/course/creators/test_course.py
View File

@ -71,6 +71,7 @@ from vbv_lernwelt.learnpath.tests.learning_path_factories import (
LearningContentAttendanceCourseFactory, LearningContentAttendanceCourseFactory,
LearningContentEdoniqTestFactory, LearningContentEdoniqTestFactory,
LearningContentFeedbackUKFactory, LearningContentFeedbackUKFactory,
LearningContentFeedbackVVFactory,
LearningContentKnowledgeAssessmentFactory, LearningContentKnowledgeAssessmentFactory,
LearningContentLearningModuleFactory, LearningContentLearningModuleFactory,
LearningContentMediaLibraryFactory, LearningContentMediaLibraryFactory,
@ -80,7 +81,7 @@ from vbv_lernwelt.learnpath.tests.learning_path_factories import (
LearningPathFactory, LearningPathFactory,
LearningSequenceFactory, LearningSequenceFactory,
LearningUnitFactory, LearningUnitFactory,
TopicFactory, LearningContentFeedbackVVFactory, TopicFactory,
) )
from vbv_lernwelt.media_library.tests.media_library_factories import ( from vbv_lernwelt.media_library.tests.media_library_factories import (
MediaLibraryCategoryPageFactory, MediaLibraryCategoryPageFactory,

5
server/vbv_lernwelt/feedback/graphql/mutations.py
View File

@ -10,7 +10,10 @@ from vbv_lernwelt.feedback.graphql.types import (
from vbv_lernwelt.feedback.serializers import CourseFeedbackSerializer from vbv_lernwelt.feedback.serializers import CourseFeedbackSerializer
from vbv_lernwelt.feedback.services import update_feedback_response from vbv_lernwelt.feedback.services import update_feedback_response
from vbv_lernwelt.iam.permissions import has_course_session_access from vbv_lernwelt.iam.permissions import has_course_session_access
from vbv_lernwelt.learnpath.models import LearningContentFeedbackVV, LearningContentFeedbackUK from vbv_lernwelt.learnpath.models import (
LearningContentFeedbackUK,
LearningContentFeedbackVV,
)
logger = structlog.get_logger(__name__) logger = structlog.get_logger(__name__)