Add SelfEvaluation component

client/src/components/circle/CircleOverview.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="circle-overview px-16 py-24 relative">
+  <div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 relative">
     <div
       class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
       @click="$emit('close')"
@@ -25,9 +25,9 @@ const props = defineProps<{
       <h3>Du wirst in der Lage sein, ... </h3>
 
       <ul class="mt-4">
-        <li class="text-xl flex items-center h-12" v-for="goal in circleData.goals" :key="goal.id">
-          <it-icon-check class="w-12 h-12 text-sky-500"></it-icon-check>
-          <div>{{ goal.value }}</div>
+        <li class="text-xl flex items-center" v-for="goal in circleData.goals" :key="goal.id">
+          <it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
+          <div class="mt-4">{{ goal.value }}</div>
         </li>
       </ul>
     </div>
@@ -36,7 +36,7 @@ const props = defineProps<{
       Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
     </h3>
 
-    <ul class="grid grid-cols-3 auto-rows-fr gap-6 mt-8">
+    <ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
       <li
         v-for="jobSituation in circleData.job_situations"
         :key="jobSituation.id"

client/src/components/circle/LearningContent.vue

@@ -1,29 +1,24 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
-
-import type {Circle, LearningContent} from '@/types';
 import {computed} from 'vue';
 import {useCircleStore} from '@/stores/circle';
 
 log.debug('LearningContent.vue setup');
 
-const props = defineProps<{
-  circleData: Circle,
-  learningContent: LearningContent,
-}>()
+const circleStore = useCircleStore();
+
+const learningContent = computed(() => circleStore.currentLearningContent);
 
 const block = computed(() => {
-  if(props.learningContent) {
-    return props.learningContent.contents[0];
+  if (learningContent.value) {
+    return learningContent.value.contents[0];
   }
 })
 
-const circleStore = useCircleStore();
-
 </script>
 
 <template>
-  <div v-if="learningContent">
+  <div>
     <nav
       class="
         px-8

client/src/components/circle/LearningSequence.vue

@@ -66,6 +66,15 @@ const someFinished = computed(() => {
           </ItCheckbox>
         </div>
 
+        <div
+          v-if="learningUnit.id"
+          class="flex items-center gap-4 pb-3 hover:cursor-pointer"
+          @click="circleStore.openSelfEvaluation(learningUnit)"
+        >
+          <it-icon-smiley-neutral/>
+          <span>Selbsteinschätzung</span>
+        </div>
+
         <hr class="-mx-4 text-gray-500">
 
       </div>

client/src/components/circle/SelfEvaluation.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+import {computed} from 'vue';
+import {useCircleStore} from '@/stores/circle';
+
+log.debug('LearningContent.vue setup');
+
+const circleStore = useCircleStore();
+
+const questions = computed(() => circleStore.currentSelfEvaluation?.questions);
+let questionIndex = 0;
+const currentQuestion = computed(() => questions.value[questionIndex]);
+
+</script>
+
+<template>
+  <div>
+    <nav
+      class="
+        px-8
+        py-4
+        lg:flex lg:justify-between lg:items-center
+        border-b border-gray-500
+      "
+    >
+      <button
+        type="button"
+        class="btn-text inline-flex items-center px-3 py-2 font-normal"
+        @click="circleStore.closeSelfEvaluation()"
+      >
+        <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
+        <span class="">zurück zum Circle</span>
+      </button>
+
+      <h1 class="text-xl">{{ circleStore.currentSelfEvaluation.title }}</h1>
+
+      <button
+        type="button"
+        class="btn-blue"
+        @click="circleStore.continueToNextLearningContent()"
+      >
+        Weiter
+      </button>
+    </nav>
+
+
+    <div class="mx-auto max-w-6xl px-8 py-4">
+
+      <div class="mt-8 text-gray-700">Schritt {{ questionIndex + 1 }} von {{ questions.length }}</div>
+
+      <p class="text-xl mt-4">
+        Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>
+        Lies die folgende Aussage und bewerte sie:
+      </p>
+
+      <div class="mt-8 p-12 border border-gray-500">
+        <h2 class="heading-2">{{ currentQuestion.value }}</h2>
+
+        <div class="mt-12 flex justify-between gap-6">
+          <button class="flex-1 inline-flex items-center text-left p-4 border border-gray-500">
+            <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
+            <span class="font-bold text-xl">
+            Ja, ich kann das.
+            </span>
+          </button>
+          <button class="flex-1 inline-flex items-center text-left p-4 border border-gray-500">
+            <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
+            <span class="font-bold text-xl">
+              Das muss ich nochmals anschauen.
+            </span>
+          </button>
+        </div>
+
+        <div class="mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<style scoped>
+</style>

client/src/stores/circle.ts

@@ -2,7 +2,7 @@ import * as log from 'loglevel';
 
 import {defineStore} from 'pinia'
 
-import type {Circle, LearningContent} from '@/types'
+import type {Circle, LearningContent, LearningUnit} from '@/types'
 import {itGet, itPost} from '@/fetchHelpers';
 import {parseLearningSequences} from '@/services/circle';
 
@@ -10,7 +10,8 @@ export type CircleStoreState = {
   circleData: Circle;
   completionData: any;
   currentLearningContent: LearningContent | undefined;
-  page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT',
+  currentSelfEvaluation: LearningUnit | undefined;
+  page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION';
 }
 
 export const useCircleStore = defineStore({
@@ -20,6 +21,7 @@ export const useCircleStore = defineStore({
       circleData: {},
       completionData: {},
       currentLearningContent: undefined,
+      currentSelfEvaluation: undefined,
       page: 'INDEX',
     } as CircleStoreState;
   },
@@ -77,6 +79,14 @@ export const useCircleStore = defineStore({
       this.currentLearningContent = undefined;
       this.page = 'INDEX';
     },
+    openSelfEvaluation(learningUnit: LearningUnit) {
+      this.page = 'SELF_EVALUATION';
+      this.currentSelfEvaluation = learningUnit;
+    },
+    closeSelfEvaluation() {
+      this.page = 'INDEX';
+      this.currentSelfEvaluation = undefined;
+    },
     continueToNextLearningContent() {
       if (this.currentLearningContent) {
         this.toggleCompleted(this.currentLearningContent, true);

client/src/views/CircleView.vue

@@ -8,6 +8,7 @@ import LearningContent from '@/components/circle/LearningContent.vue';
 
 import {onMounted} from 'vue'
 import {useCircleStore} from '@/stores/circle';
+import SelfEvaluation from '@/components/circle/SelfEvaluation.vue';
 
 const props = defineProps<{
   circleSlug: string
@@ -28,11 +29,10 @@ onMounted(async () => {
       <CircleOverview :circle-data="circleStore.circleData" @close="circleStore.page = 'INDEX'"/>
     </div>
     <div v-else-if="circleStore.page === 'LEARNING_CONTENT'">
-      <LearningContent
-        :circle-data="circleStore.circleData"
-        :learning-content="circleStore.currentLearningContent"
-        :key="circleStore.currentLearningContent.translation_key"
-      />
+      <LearningContent :key="circleStore.currentLearningContent.translation_key"/>
+    </div>
+    <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
+      <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
     </div>
     <div v-else>
       <MainNavigationBar/>