From 7de9766381957f1868d010aa3d9deb0b18935b0f Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 6 Mar 2024 12:09:18 +0100
Subject: [PATCH] feat: competence navi in profile

---
 ...pitProfileCompetenceFeedbackEvaluation.vue | 14 ----
 .../CockpitProfileCompetenceOverview.vue      | 13 ----
 .../FeedbackByLearningUnitSummary.vue         | 18 ++---
 .../SelfEvaluationAndFeedbackList.vue         | 72 +++++++++++++++++++
 .../SelfEvaluationAndFeedbackOverview.vue     | 10 +--
 .../profilePage/CompetenceProfilePage.vue     | 21 +++---
 .../pages/competence/CompetenceIndexPage.vue  |  4 +-
 .../SelfEvaluationAndFeedbackPage.vue         | 65 +----------------
 8 files changed, 96 insertions(+), 121 deletions(-)
 delete mode 100644 client/src/components/cockpit/profile/CockpitProfileCompetenceFeedbackEvaluation.vue
 delete mode 100644 client/src/components/cockpit/profile/CockpitProfileCompetenceOverview.vue
 create mode 100644 client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue
 rename client/src/components/{cockpit => selfEvaluationFeedback}/SelfEvaluationAndFeedbackOverview.vue (97%)

diff --git a/client/src/components/cockpit/profile/CockpitProfileCompetenceFeedbackEvaluation.vue b/client/src/components/cockpit/profile/CockpitProfileCompetenceFeedbackEvaluation.vue
deleted file mode 100644
index 2f1bb0e3..00000000
--- a/client/src/components/cockpit/profile/CockpitProfileCompetenceFeedbackEvaluation.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  profileUserId: string;
-  courseSessionId: string;
-}>();
-</script>
-
-<template>
-  <h1>COMPETENCE FEEDBACK EVALUATION</h1>
-  <h2>{{ profileUserId }}</h2>
-  <h2>{{ courseSessionId }}</h2>
-</template>
-
-<style scoped></style>
diff --git a/client/src/components/cockpit/profile/CockpitProfileCompetenceOverview.vue b/client/src/components/cockpit/profile/CockpitProfileCompetenceOverview.vue
deleted file mode 100644
index 8ee67a04..00000000
--- a/client/src/components/cockpit/profile/CockpitProfileCompetenceOverview.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import SelfEvaluationAndFeedbackOverview from "@/components/cockpit/SelfEvaluationAndFeedbackOverview.vue";
-
-defineProps<{
-  profileUserId: string;
-}>();
-</script>
-
-<template>
-  <SelfEvaluationAndFeedbackOverview :target-user-id="profileUserId" detail-url="#" />
-</template>
-
-<style scoped></style>
diff --git a/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue b/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue
index 7939e216..13a7d9ca 100644
--- a/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue
+++ b/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue
@@ -32,7 +32,7 @@ const feedbackProviderName = computed(() => {
         <b>{{ props.summary.title }}</b>
         <span>Circle «{{ props.summary.circle_title }}»</span>
       </div>
-      <span class="underline">
+      <span class="pl-4 underline">
         <router-link
           :to="props.summary.detail_url"
           :data-cy="`self-eval-${summary.id}-detail-url`"
@@ -47,21 +47,17 @@ const feedbackProviderName = computed(() => {
         <div class="w-1/2">
           {{ $t("a.Deine Selbsteinschätzung") }}
         </div>
-        <div class="cell">
+        <div class="smily-row">
           <SmileyCell
             :count="props.summary.self_assessment.counts.pass"
             :cypress-identifier="`self-eval-${props.summary.id}-pass`"
             smiley="it-icon-smiley-happy"
           />
-        </div>
-        <div class="cell">
           <SmileyCell
             :count="props.summary.self_assessment.counts.fail"
             :cypress-identifier="`self-eval-${props.summary.id}-fail`"
             smiley="it-icon-smiley-thinking"
           />
-        </div>
-        <div class="cell">
           <SmileyCell
             :count="props.summary.self_assessment.counts.unknown"
             :cypress-identifier="`self-eval-${props.summary.id}-unknown`"
@@ -82,19 +78,15 @@ const feedbackProviderName = computed(() => {
             </span>
             <img class="ml-2 h-7 w-7 rounded-full" :src="feedbackProviderAvatar" />
           </div>
-          <div class="cell">
+          <div class="smily-row">
             <SmileyCell
               :count="props.summary.feedback_assessment?.counts.pass ?? 0"
               smiley="it-icon-smiley-happy"
             />
-          </div>
-          <div class="cell">
             <SmileyCell
               :count="props.summary.feedback_assessment?.counts.fail ?? 0"
               smiley="it-icon-smiley-thinking"
             />
-          </div>
-          <div class="cell">
             <SmileyCell
               :count="props.summary.feedback_assessment?.counts.unknown ?? 0"
               smiley="it-icon-smiley-neutral"
@@ -107,7 +99,7 @@ const feedbackProviderName = computed(() => {
 </template>
 
 <style lang="postcss" scoped>
-.cell {
-  @apply w-12;
+.smily-row {
+  @apply flex flex-1 justify-end pl-8 lg:justify-start;
 }
 </style>
diff --git a/client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue b/client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue
new file mode 100644
index 00000000..00ad9135
--- /dev/null
+++ b/client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
+import { useCurrentCourseSession } from "@/composables";
+import { computed, ref } from "vue";
+import FeedbackByLearningUnitSummary from "@/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import { t } from "i18next";
+
+const props = defineProps<{
+  profileUserId: string;
+}>();
+
+const courseSession = useCurrentCourseSession();
+const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
+  courseSession.value.id,
+  props.profileUserId
+);
+
+const course = computed(() => courseSession.value.course);
+const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
+const selectedCircle = ref({ name: t("a.AlleCircle"), id: "_all" });
+
+const circles = computed(() => [
+  { name: t("a.AlleCircle"), id: "_all" },
+  ...selfEvaluationFeedbackSummaries.circles.value.map((circle) => ({
+    name: `Circle: ${circle.title}`,
+    id: circle.id,
+  })),
+]);
+
+const summaries = computed(() => {
+  if (selectedCircle.value.id === "_all") {
+    return selfEvaluationFeedbackSummaries.summaries.value;
+  }
+  return selfEvaluationFeedbackSummaries.summaries.value.filter(
+    (summary) => summary.circle_id === selectedCircle.value.id
+  );
+});
+
+const headerTitle = computed(() => {
+  if (course.value.configuration.enable_learning_mentor) {
+    return t("a.Selbst- und Fremdeinschätzungen");
+  } else {
+    return t("a.Selbsteinschätzungen");
+  }
+});
+</script>
+
+<template>
+  <div v-if="isLoaded">
+    <div>
+      <div class="flex flex-col items-center justify-between pb-4 md:flex-row">
+        <h2 class="py-4">{{ headerTitle }}</h2>
+        <ItDropdownSelect
+          v-model="selectedCircle"
+          class="text-bold w-full min-w-[18rem] border-2 border-gray-300 md:w-24"
+          :items="circles"
+          borderless
+        ></ItDropdownSelect>
+      </div>
+      <div class="space-y-3">
+        <FeedbackByLearningUnitSummary
+          v-for="summary in summaries"
+          :key="summary.id"
+          :summary="summary"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/components/cockpit/SelfEvaluationAndFeedbackOverview.vue b/client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue
similarity index 97%
rename from client/src/components/cockpit/SelfEvaluationAndFeedbackOverview.vue
rename to client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue
index 60051b54..1dafa970 100644
--- a/client/src/components/cockpit/SelfEvaluationAndFeedbackOverview.vue
+++ b/client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue
@@ -4,15 +4,15 @@ import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFee
 import { useCurrentCourseSession } from "@/composables";
 
 const props = defineProps<{
-  targetUserId: string;
-  detailUrl: string;
+  profileUserId: string;
+  detailUrl?: string;
 }>();
 
 const courseSession = useCurrentCourseSession();
 
 const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
   useCurrentCourseSession().value.id,
-  props.targetUserId
+  props.profileUserId
 );
 
 const selfAssessmentCounts = computed(
@@ -78,7 +78,7 @@ const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
       <!-- Feedback Evaluation -->
       <div
         v-if="courseSession.course.configuration.enable_learning_mentor"
-        class="mb-8 border-t pt-8"
+        class="border-t pt-8"
       >
         <h3 class="mb-4 pb-4 lg:pb-0">
           {{ $t("a.Fremdeinschätzungen") }}
@@ -116,7 +116,7 @@ const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
         </ul>
       </div>
       <!-- Show All (always)-->
-      <div>
+      <div v-if="detailUrl" class="pt-8">
         <router-link
           :to="detailUrl"
           class="btn-text inline-flex items-center py-2 pl-0"
diff --git a/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue b/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue
index be9170f1..6acf2684 100644
--- a/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue
+++ b/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import CockpitProfileContent from "@/components/cockpit/profile/CockpitProfileContent.vue";
 import { ref } from "vue";
-import CockpitProfileCompetenceOverview from "@/components/cockpit/profile/CockpitProfileCompetenceOverview.vue";
-import CockpitProfileCompetenceFeedbackEvaluation from "@/components/cockpit/profile/CockpitProfileCompetenceFeedbackEvaluation.vue";
-import { useCurrentCourseSession } from "@/composables";
+import SelfEvaluationAndFeedbackList from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue";
+import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
+
+type SubMenuType = "OVERVIEW" | "DETAILS";
 
 const props = defineProps<{
   userId: string;
   courseSlug: string;
 }>();
 
-type SubMenuType = "OVERVIEW" | "EVALUATION";
-
 interface SubMenuItem {
   type: SubMenuType;
   label: string;
@@ -19,11 +18,9 @@ interface SubMenuItem {
 
 const MENU_ENTRIES: SubMenuItem[] = [
   { type: "OVERVIEW", label: "a.Übersicht" },
-  { type: "EVALUATION", label: "a.Selbst- und Fremdeinschätzungen" },
+  { type: "DETAILS", label: "a.Selbst- und Fremdeinschätzungen" },
 ];
 
-const currentCourseSession = useCurrentCourseSession();
-
 const active = ref<SubMenuItem>(MENU_ENTRIES[0]);
 </script>
 
@@ -41,13 +38,13 @@ const active = ref<SubMenuItem>(MENU_ENTRIES[0]);
       </div>
     </template>
     <template #main>
-      <CockpitProfileCompetenceOverview
+      <SelfEvaluationAndFeedbackOverview
         v-if="active.type === 'OVERVIEW'"
         :profile-user-id="props.userId"
       />
-      <CockpitProfileCompetenceFeedbackEvaluation
-        v-else-if="active.type === 'EVALUATION'"
-        :course-session-id="currentCourseSession.id"
+      <SelfEvaluationAndFeedbackList
+        v-else-if="active.type === 'DETAILS'"
+        class="w-full"
         :profile-user-id="props.userId"
       />
     </template>
diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index 38605bbd..6823addd 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -11,7 +11,7 @@ import {
   competenceCertificateProgressStatusCount,
 } from "@/pages/competence/utils";
 import ItProgress from "@/components/ui/ItProgress.vue";
-import SelfEvaluationAndFeedbackOverview from "@/components/cockpit/SelfEvaluationAndFeedbackOverview.vue";
+import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
 import { useUserStore } from "@/stores/user";
 
 const props = defineProps<{
@@ -132,7 +132,7 @@ const isLoaded = computed(() => !certificatesQuery.fetching.value);
       </div>
     </section>
     <SelfEvaluationAndFeedbackOverview
-      :target-user-id="useUserStore().id"
+      :profile-user-id="useUserStore().id"
       :detail-url="`/course/${props.courseSlug}/competence/self-evaluation-and-feedback`"
     />
   </div>
diff --git a/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue b/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue
index 6f210ff6..8d7b92d9 100644
--- a/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue
+++ b/client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue
@@ -1,71 +1,12 @@
 <script setup lang="ts">
-import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
-import { useCurrentCourseSession } from "@/composables";
-import { computed, ref } from "vue";
-import FeedbackByLearningUnitSummary from "@/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue";
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { t } from "i18next";
 import { useUserStore } from "@/stores/user";
+import SelfEvaluationAndFeedbackList from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue";
 
-const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
-  useCurrentCourseSession().value.id,
-  useUserStore().id
-);
-
-const courseSession = useCurrentCourseSession();
-const course = computed(() => courseSession.value.course);
-
-const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
-
-const selectedCircle = ref({ name: t("a.AlleCircle"), id: "_all" });
-
-const circles = computed(() => [
-  { name: t("a.AlleCircle"), id: "_all" },
-  ...selfEvaluationFeedbackSummaries.circles.value.map((circle) => ({
-    name: `Circle: ${circle.title}`,
-    id: circle.id,
-  })),
-]);
-
-const summaries = computed(() => {
-  if (selectedCircle.value.id === "_all") {
-    return selfEvaluationFeedbackSummaries.summaries.value;
-  }
-  return selfEvaluationFeedbackSummaries.summaries.value.filter(
-    (summary) => summary.circle_id === selectedCircle.value.id
-  );
-});
-
-const headerTitle = computed(() => {
-  if (course.value.configuration.enable_learning_mentor) {
-    return t("a.Selbst- und Fremdeinschätzungen");
-  } else {
-    return t("a.Selbsteinschätzungen");
-  }
-});
+const userId = useUserStore().id;
 </script>
 
 <template>
-  <div v-if="isLoaded">
-    <div class="container-large">
-      <div class="col flex items-center justify-between pb-4">
-        <h2 class="py-4">{{ headerTitle }}</h2>
-        <ItDropdownSelect
-          v-model="selectedCircle"
-          class="text-bold w-24 min-w-[18rem] border-2 border-gray-300"
-          :items="circles"
-          borderless
-        ></ItDropdownSelect>
-      </div>
-      <div class="space-y-3">
-        <FeedbackByLearningUnitSummary
-          v-for="summary in summaries"
-          :key="summary.id"
-          :summary="summary"
-        />
-      </div>
-    </div>
-  </div>
+  <SelfEvaluationAndFeedbackList :profile-user-id="userId" class="container-large" />
 </template>
 
 <style scoped></style>