feat: kompetenz navi tab

client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { LearningUnitSummary } from "@/services/selfEvaluationFeedback";
+import SmileyCell from "@/components/selfEvaluationFeedback/SmileyCell.vue";
+
+const props = defineProps<{
+  summary: LearningUnitSummary;
+}>();
+
+const hasFeedbackReceived = computed(() => {
+  return props.summary.feedback_assessment?.provider_user !== undefined;
+});
+
+const feedbackProviderAvatar = computed(() => {
+  return props.summary.feedback_assessment?.provider_user.avatar_url ?? "";
+});
+
+const feedbackProviderName = computed(() => {
+  if (!props.summary.feedback_assessment?.provider_user) {
+    return "";
+  } else {
+    return `${props.summary.feedback_assessment.provider_user.first_name} ${props.summary.feedback_assessment.provider_user.last_name}`;
+  }
+});
+</script>
+
+<template>
+  <div class="bg-white">
+    <!-- Top Row -->
+    <div class="flex items-center justify-between border-b-2 border-gray-200 p-4">
+      <div class="flex flex-col">
+        <b>{{ props.summary.title }}</b>
+        <span>Circle «{{ props.summary.circle_title }}»</span>
+      </div>
+      <span class="underline">
+        <router-link :to="props.summary.detail_url">
+          {{ $t("a.Selbsteinschätzung anschauen") }}
+        </router-link>
+      </span>
+    </div>
+    <div class="ml-4 mr-4">
+      <!-- Self Assessment Row-->
+      <div class="flex pb-2 pt-2">
+        <div class="w-1/2">
+          {{ $t("a.Deine Selbsteinschätzung") }}
+        </div>
+        <div class="cell">
+          <SmileyCell
+            :count="props.summary.self_assessment.counts.pass + 1"
+            smiley="it-icon-smiley-happy"
+          />
+        </div>
+        <div class="cell">
+          <SmileyCell
+            :count="props.summary.self_assessment.counts.fail + 1"
+            smiley="it-icon-smiley-thinking"
+          />
+        </div>
+        <div class="cell">
+          <SmileyCell
+            :count="props.summary.self_assessment.counts.unknown + 1"
+            smiley="it-icon-smiley-neutral"
+          />
+        </div>
+      </div>
+      <!-- Feedback Assessment Row -->
+      <div v-if="hasFeedbackReceived" class="border-t-2 border-gray-200">
+        <div class="flex pb-2 pt-2">
+          <div class="flex w-1/2 items-center">
+            <span>
+              {{
+                $t("a.Fremdeinschätzung von FEEDBACK_PROVIDER_NAME", {
+                  FEEDBACK_PROVIDER_NAME: feedbackProviderName,
+                })
+              }}
+            </span>
+            <img class="ml-2 h-7 w-7 rounded-full" :src="feedbackProviderAvatar" />
+          </div>
+          <div class="cell">
+            <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"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.cell {
+  @apply w-12;
+}
+</style>

client/src/components/selfEvaluationFeedback/SmileyCell.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  count: number;
+  smiley: string;
+}>();
+</script>
+
+<template>
+  <template v-if="count > 0">
+    <div class="flex items-center justify-center">
+      <component :is="smiley" class="mr-1 inline-block h-6 w-6"></component>
+      <p class="inline-block w-6">
+        {{ count }}
+      </p>
+    </div>
+  </template>
+  <template v-else>
+    <div />
+  </template>
+</template>
+
+<style scoped></style>

client/src/components/ui/ItDropdownSelect.vue

@@ -37,7 +37,7 @@ const dropdownSelected = computed<DropdownSelectable>({
 
 <template>
   <Listbox v-model="dropdownSelected" as="div">
-    <div class="relative mt-1 w-full">
+    <div class="relative w-full">
       <ListboxButton
         class="relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left"
         :class="{

client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue

@@ -1,8 +1,60 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import log from "loglevel";
+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 selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
+  useCurrentCourseSession().value.id
+);
+
+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
+  );
+});
+
+log.info("SelfEvaluationsAndFeedbackPage created");
+</script>
 
 <template>
-  <div>
+  <div v-if="isLoaded">
-    <h1>SelfEvaluationsAndFeedback</h1>
+    <div class="container-large">
+      <div class="col flex items-center justify-between pb-4">
+        <h2 class="py-4">{{ $t("a.Selbst- und Fremdeinschätzungen") }}</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>
 </template>
 

client/src/services/selfEvaluationFeedback.ts

@@ -54,6 +54,7 @@ export interface LearningUnitSummary {
   circle_title: string;
   feedback_assessment?: FeedbackAssessmentSummary;
   self_assessment: SelfAssessmentSummary;
+  detail_url: string;
 }
 
 interface Circle {