feat: mentor feedback UI

client/src/pages/cockpit/cockpitPage/mentor/MentorOverview.vue

@@ -87,7 +87,7 @@ const filteredAssignments: Ref<Assignment[]> = computed(() => {
         :pending-tasks="item.pending_evaluations"
         :task-link="{
           name: 'mentorCockpitSelfEvaluationFeedbackAssignments',
-          params: { selfEvaluationFeedbackId: item.id },
+          params: { learningUnitId: item.id },
         }"
         :task-title="item.title"
       />

client/src/pages/cockpit/cockpitPage/mentor/MentorSelfEvaluationFeedbackAssignment.vue

@@ -5,14 +5,14 @@ import { computed, type Ref } from "vue";
 import { useCurrentCourseSession } from "@/composables";
 
 const props = defineProps<{
-  selfEvaluationFeedbackId: string;
+  learningUnitId: string;
 }>();
 
 const courseSession = useCurrentCourseSession();
 const mentorCockpitStore = useMentorCockpit(courseSession.value.id);
 
 const selfEvaluationFeedback: Ref<Assignment | null> = computed(() =>
-  mentorCockpitStore.getAssignmentById(props.selfEvaluationFeedbackId)
+  mentorCockpitStore.getAssignmentById(props.learningUnitId)
 );
 
 const getParticipantById = (id: string): Participant | null => {
@@ -107,7 +107,7 @@ const getParticipantById = (id: string): Participant | null => {
               :to="{
                 name: 'mentorSelfEvaluationFeedback',
                 params: {
-                  selfEvaluationFeedbackId: selfEvaluationFeedback.id,
+                  learningUnitId: learningUnitId,
                 },
               }"
             >

client/src/pages/cockpit/cockpitPage/mentor/SelfEvaluationFeedback.vue

@@ -1,7 +1,97 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import LearningContentMultiLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue";
+import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
+import { useRouter } from "vue-router";
+import { computed, onMounted, ref, toValue } from "vue";
+import { useCSRFFetch } from "@/fetchHelpers";
+import type { FeedbackRequest } from "@/services/selfEvaluationFeedback";
+
+const router = useRouter();
+const props = defineProps<{
+  learningUnitId: string;
+  courseSlug: string;
+}>();
+
+const url = computed(
+  () =>
+    `/api/self-evaluation-feedback/provider/${toValue(props.learningUnitId)}/feedback`
+);
+
+const feedback = ref<FeedbackRequest | null>();
+const isFeedbackLoading = ref(false);
+
+onMounted(async () => {
+  feedback.value = null;
+  isFeedbackLoading.value = true;
+  const { data, error } = await useCSRFFetch(url.value).json();
+  isFeedbackLoading.value = false;
+  if (error.value) {
+    console.error(error.value);
+    return;
+  } else {
+    feedback.value = data.value;
+  }
+});
+
+const stepsCount = computed(() => 10);
+const currentStep = 1;
+
+const title = "TITLE " + props.learningUnitId;
+
+const showNextButton = true;
+const showExitButton = true;
+const showPreviousButton = true;
+const base_url = "BASE_URL";
+
+const endBadgeText = "END_BADGE_TEXT";
+
+const handleBack = () => {
+  console.log("handleBack");
+};
+const handleContinue = () => {
+  console.log("handleContinue");
+};
+
+const clickExit = () => {
+  router.push({
+    name: "mentorCockpitSelfEvaluationFeedbackAssignments",
+    params: {
+      learningUnitId: props.learningUnitId,
+    },
+  });
+};
+</script>
 
 <template>
-  <b>TODO Continue Here</b>
+  <LearningContentContainer v-if="feedback" @exit="clickExit">
+    <LearningContentMultiLayout
+      :current-step="currentStep"
+      :sub-title="$t('a.Selbsteinschätzung')"
+      :title="title"
+      icon="it-icon-lc-learning-module"
+      :steps-count="stepsCount"
+      :show-next-button="showNextButton"
+      :show-exit-button="showExitButton"
+      :show-start-button="false"
+      :show-previous-button="showPreviousButton"
+      :base-url="base_url"
+      :end-badge-text="endBadgeText"
+      @exit="clickExit"
+      @previous="handleBack()"
+      @next="handleContinue()"
+    >
+      <div v-if="currentStep" class="h-full">
+        <div class="mt-8">
+          <h3 class="heading-3">{{ "Some title " }}}</h3>
+          <div
+            class="mt-4 flex flex-col justify-between gap-8 lg:mt-8 lg:flex-row lg:gap-12"
+          >
+            <div>TEST {{ feedback }}</div>
+          </div>
+        </div>
+      </div>
+    </LearningContentMultiLayout>
+  </LearningContentContainer>
 </template>
 
 <style scoped></style>

client/src/router/index.ts

@@ -196,7 +196,7 @@ const router = createRouter({
               },
             },
             {
-              path: "self-evaluation-feedback/:selfEvaluationFeedbackId",
+              path: "self-evaluation-feedback/:learningUnitId",
               component: () =>
                 import("@/pages/cockpit/cockpitPage/mentor/SelfEvaluationFeedback.vue"),
               name: "mentorSelfEvaluationFeedback",
@@ -226,7 +226,7 @@ const router = createRouter({
                   props: true,
                 },
                 {
-                  path: "self-evaluation-feedback-assignments/:selfEvaluationFeedbackId",
+                  path: "self-evaluation-feedback-assignments/:learningUnitId",
                   component: () =>
                     import(
                       "@/pages/cockpit/cockpitPage/mentor/MentorSelfEvaluationFeedbackAssignment.vue"

server/vbv_lernwelt/self_evaluation_feedback/tests/test_api.py

@@ -270,7 +270,7 @@ class SelfEvaluationFeedbackAPI(APITestCase):
         response = self.client.get(
             reverse(
                 "get_self_evaluation_feedback_as_provider",
-                args=[self_evaluation_feedback.id],
+                args=[self_evaluation_feedback.learning_unit.id],
             )
         )
 

server/vbv_lernwelt/self_evaluation_feedback/urls.py

@@ -19,6 +19,11 @@ urlpatterns = [
         get_self_evaluation_feedback_as_requester,
         name="get_self_evaluation_feedback_as_requester",
     ),
+    path(
+        "provider/<int:learning_unit_id>/feedback",
+        get_self_evaluation_feedback_as_provider,
+        name="get_self_evaluation_feedback_as_provider",
+    ),
     path(
         "provider/feedback/<int:feedback_id>/submit",
         submit_provider_self_evaluation_feedback,
@@ -29,9 +34,4 @@ urlpatterns = [
         add_provider_self_evaluation_feedback,
         name="add_self_evaluation_feedback_assessment",
     ),
-    path(
-        "provider/feedback/<int:feedback_id>",
-        get_self_evaluation_feedback_as_provider,
-        name="get_self_evaluation_feedback_as_provider",
-    ),
 ]

server/vbv_lernwelt/self_evaluation_feedback/views.py

@@ -61,9 +61,11 @@ def submit_provider_self_evaluation_feedback(request, feedback_id):
 
 @api_view(["GET"])
 @permission_classes([IsAuthenticated])
-def get_self_evaluation_feedback_as_provider(request, feedback_id):
+def get_self_evaluation_feedback_as_provider(request, learning_unit_id):
     feedback = get_object_or_404(
-        SelfEvaluationFeedback, id=feedback_id, feedback_provider_user=request.user
+        SelfEvaluationFeedback,
+        learning_unit_id=learning_unit_id,
+        feedback_provider_user=request.user,
     )
 
     return Response(SelfEvaluationFeedbackSerializer(feedback).data)