From 59c695b838d5b2dfb5e4353b4f681c95ccb9e94f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 15 Jul 2024 16:42:28 +0200
Subject: [PATCH] Display chosen profile on user profile page

---
 client/src/gql/schema.graphql                 |  3 +-
 client/src/graphql/queries.ts                 |  4 +--
 .../userProfile/LearningPathProfilePage.vue   | 28 ++++++++++++++++++-
 server/vbv_lernwelt/course/graphql/types.py   | 13 +++++++--
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/client/src/gql/schema.graphql b/client/src/gql/schema.graphql
index 53a7aeb7..b3165147 100644
--- a/client/src/gql/schema.graphql
+++ b/client/src/gql/schema.graphql
@@ -267,7 +267,8 @@ type CourseObjectType {
   learning_path: LearningPathObjectType!
   action_competences: [ActionCompetenceObjectType!]!
   profiles: [String]
-  course_session_users: [CourseSessionUserType]!
+  course_session_users(id: String): [CourseSessionUserType]!
+  chosen_profile(user: String!): String
 }
 
 type ActionCompetenceObjectType implements CoursePageInterface {
diff --git a/client/src/graphql/queries.ts b/client/src/graphql/queries.ts
index f286ca75..95386f4d 100644
--- a/client/src/graphql/queries.ts
+++ b/client/src/graphql/queries.ts
@@ -264,14 +264,14 @@ export const COURSE_SESSION_DETAIL_QUERY = graphql(`
 `);
 
 export const COURSE_QUERY = graphql(`
-  query courseQuery($slug: String!) {
+  query courseQuery($slug: String!, $user: String) {
     course(slug: $slug) {
       id
       title
       slug
       category_name
       profiles
-      course_session_users {
+      course_session_users(id: $user) {
         id
         __typename
         chosen_profile
diff --git a/client/src/pages/userProfile/LearningPathProfilePage.vue b/client/src/pages/userProfile/LearningPathProfilePage.vue
index 34413b25..6517a2fb 100644
--- a/client/src/pages/userProfile/LearningPathProfilePage.vue
+++ b/client/src/pages/userProfile/LearningPathProfilePage.vue
@@ -4,8 +4,10 @@ import { useCourseDataWithCompletion } from "@/composables";
 import UserProfileContent from "@/components/userProfile/UserProfileContent.vue";
 import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
 import LearningSequence from "@/pages/learningPath/circlePage/LearningSequence.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import type { CircleType } from "@/types";
+import { COURSE_QUERY } from "@/graphql/queries";
+import { useQuery } from "@urql/vue";
 
 const props = defineProps<{
   userId: string;
@@ -20,6 +22,23 @@ function selectCircle(circle: CircleType) {
   selectedCircle.value = circle;
 }
 
+const courseReactiveResult = useQuery({
+  query: COURSE_QUERY,
+  variables: { slug: props.courseSlug, user: props.userId },
+});
+
+const courseReactive = computed(() => courseReactiveResult.data.value?.course);
+const courseSessionUsers = computed(() => {
+  return courseReactive.value?.course_session_users;
+});
+
+const chosenProfile = computed(() => {
+  if (courseSessionUsers.value && courseSessionUsers.value.length > 0) {
+    return courseSessionUsers.value[0]?.chosen_profile;
+  }
+  return null;
+});
+
 watch(lpQueryResult.learningPath, () => {
   if (lpQueryResult.learningPath?.value?.topics?.length) {
     selectCircle(lpQueryResult.learningPath.value.topics[0].circles[0]);
@@ -30,6 +49,13 @@ watch(lpQueryResult.learningPath, () => {
 <template>
   <UserProfileContent>
     <template #side>
+      <div v-if="chosenProfile">
+        <h3 class="mb-4 text-base font-bold">
+          Zulassungsprofil:
+          <br />
+          {{ $t(`profile.${chosenProfile}`) }}
+        </h3>
+      </div>
       <div
         v-for="topic in lpQueryResult.learningPath?.value?.topics ?? []"
         :key="topic.id"
diff --git a/server/vbv_lernwelt/course/graphql/types.py b/server/vbv_lernwelt/course/graphql/types.py
index 1782d8d9..6d49f9ec 100644
--- a/server/vbv_lernwelt/course/graphql/types.py
+++ b/server/vbv_lernwelt/course/graphql/types.py
@@ -8,6 +8,7 @@ from graphql import GraphQLError
 from rest_framework.exceptions import PermissionDenied
 
 from vbv_lernwelt.competence.graphql.types import ActionCompetenceObjectType
+from vbv_lernwelt.core.models import User
 from vbv_lernwelt.course.models import (
     CircleDocument,
     Course,
@@ -108,7 +109,9 @@ class CourseObjectType(DjangoObjectType):
     configuration = graphene.Field(CourseConfigurationObjectType, required=True)
     profiles = graphene.List(graphene.String)
     course_session_users = graphene.List(
-        "vbv_lernwelt.course.graphql.types.CourseSessionUserType", required=True
+        "vbv_lernwelt.course.graphql.types.CourseSessionUserType",
+        required=True,
+        id=graphene.String(),
     )
 
     class Meta:
@@ -134,8 +137,12 @@ class CourseObjectType(DjangoObjectType):
         return CourseProfile.objects.all().values_list("code", flat=True)
 
     @staticmethod
-    def resolve_course_session_users(root: Course, info, **kwargs):
-        user = info.context.user
+    def resolve_course_session_users(root: Course, info, id=None, **kwargs):
+        # todo: restrict users that can be queried
+        if id is not None:
+            user = User.objects.get(id=id)
+        else:
+            user = info.context.user
         users = CourseSessionUser.objects.filter(user=user, course_session__course=root)
         return users