Add ActionCompetences page

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -5,7 +5,7 @@ import { useLearningPathStore } from "@/stores/learningPath";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
 
-import CompetenceDetail from "@/pages/competence-old/CompetenceDetail.vue";
+import CompetenceDetail from "@/pages/competence/ActionCompetenceDetail.vue";
 import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
 
 const props = defineProps<{

client/src/pages/competence-old/CompetenceListPage.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import CompetenceDetail from "@/pages/competence-old/CompetenceDetail.vue";
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { useCompetenceStore } from "@/stores/competence";
-import * as log from "loglevel";
-
-log.debug("CompetenceListPage created");
-
-const props = defineProps<{
-  courseSlug: string;
-}>();
-
-const competenceStore = useCompetenceStore();
-</script>
-
-<template>
-  <div class="container-large">
-    <nav class="py-4 lg:pb-8">
-      <router-link
-        v-if="competenceStore.competenceProfilePage()"
-        class="btn-text inline-flex items-center pl-0"
-        :to="`${competenceStore.competenceProfilePage()?.frontend_url}-old` as string"
-      >
-        <it-icon-arrow-left />
-        <span>{{ $t("general.back") }}</span>
-      </router-link>
-    </nav>
-    <div class="mb-10 flex flex-col items-center justify-between lg:flex-row">
-      <h1>Kompetenzen</h1>
-      <ItDropdownSelect
-        v-model="competenceStore.selectedCircle"
-        class="mt-4 w-full lg:mt-0 lg:w-96"
-        :items="competenceStore.availableCircles"
-      ></ItDropdownSelect>
-    </div>
-    <ul v-if="competenceStore.competenceProfilePage()">
-      <li
-        v-for="competence in competenceStore.competences()"
-        :key="competence.id"
-        class="mb-8 bg-white p-8"
-      >
-        <CompetenceDetail
-          :competence="competence"
-          :course-slug="props.courseSlug"
-        ></CompetenceDetail>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped></style>

client/src/pages/competence/ActionCompetenceListPage.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import CompetenceDetail from "@/pages/competence/ActionCompetenceDetail.vue";
+import { useCompetenceStore } from "@/stores/competence";
+import * as log from "loglevel";
+
+log.debug("CompetenceListPage created");
+
+const props = defineProps<{
+  courseSlug: string;
+}>();
+
+const competenceStore = useCompetenceStore();
+</script>
+
+<template>
+  <div class="container-large">
+    <h2 class="mb-4 lg:py-4">{{ $t("a.Handlungskompetenzen") }}</h2>
+
+    <ul v-if="competenceStore.competenceProfilePage()">
+      <li
+        v-for="competence in competenceStore.competences()"
+        :key="competence.id"
+        class="mb-8 bg-white p-8"
+      >
+        <CompetenceDetail
+          :competence="competence"
+          :course-slug="props.courseSlug"
+        ></CompetenceDetail>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped></style>

client/src/pages/competence/CompetenceAssignmentRow.vue

@@ -31,7 +31,6 @@ const getIconName = () => {
           v-if="assignment.learning_content"
           :href="assignment.frontend_url"
           class="link"
-          target="_blank"
         >
           {{
             $t("general.im circle x anschauen", {

client/src/pages/competence/CompetenceParentPage.vue

@@ -22,6 +22,10 @@ function routeInCompetenceCertificate() {
   return route.path.includes("/certificate");
 }
 
+function routeInActionCompetences() {
+  return route.path.endsWith("/competences");
+}
+
 onMounted(async () => {
   log.debug("CompetenceParentPage mounted", props.courseSlug);
 
@@ -54,6 +58,14 @@ onMounted(async () => {
             {{ $t("a.Kompetenznachweise") }}
           </router-link>
         </li>
+        <li
+          class="ml-6 inline-block border-t-2 border-t-transparent py-3 lg:ml-12"
+          :class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
+        >
+          <router-link :to="`/course/${courseSlug}/competence/competences`">
+            {{ $t("a.Handlungskompetenzen") }}
+          </router-link>
+        </li>
 
         <!-- Add similar logic for other `li` items as you expand the list -->
         <li class="ml-6 inline-block lg:ml-12"></li>

client/src/router/index.ts

@@ -84,6 +84,11 @@ const router = createRouter({
           component: () =>
             import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
         },
+        {
+          path: "competences",
+          props: true,
+          component: () => import("@/pages/competence/ActionCompetenceListPage.vue"),
+        },
       ],
     },
 
@@ -100,7 +105,7 @@ const router = createRouter({
         {
           path: "competences",
           props: true,
-          component: () => import("@/pages/competence-old/CompetenceListPage.vue"),
+          component: () => import("@/pages/competence/ActionCompetenceListPage.vue"),
         },
         {
           path: "criteria",