From e5d6dd60f6924c8e58e3e8891cc2436224dfc796 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 13 Sep 2023 15:42:32 +0200
Subject: [PATCH] Add ActionCompetences page

---
 .../pages/cockpit/CockpitUserProfilePage.vue  |  2 +-
 .../competence-old/CompetenceListPage.vue     | 51 -------------------
 .../ActionCompetenceDetail.vue}               |  0
 .../competence/ActionCompetenceListPage.vue   | 34 +++++++++++++
 .../competence/CompetenceAssignmentRow.vue    |  1 -
 .../pages/competence/CompetenceParentPage.vue | 12 +++++
 client/src/router/index.ts                    |  7 ++-
 7 files changed, 53 insertions(+), 54 deletions(-)
 delete mode 100644 client/src/pages/competence-old/CompetenceListPage.vue
 rename client/src/pages/{competence-old/CompetenceDetail.vue => competence/ActionCompetenceDetail.vue} (100%)
 create mode 100644 client/src/pages/competence/ActionCompetenceListPage.vue

diff --git a/client/src/pages/cockpit/CockpitUserProfilePage.vue b/client/src/pages/cockpit/CockpitUserProfilePage.vue
index 4e859009..360350cf 100644
--- a/client/src/pages/cockpit/CockpitUserProfilePage.vue
+++ b/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<{
diff --git a/client/src/pages/competence-old/CompetenceListPage.vue b/client/src/pages/competence-old/CompetenceListPage.vue
deleted file mode 100644
index 64e8dbf2..00000000
--- a/client/src/pages/competence-old/CompetenceListPage.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/pages/competence-old/CompetenceDetail.vue b/client/src/pages/competence/ActionCompetenceDetail.vue
similarity index 100%
rename from client/src/pages/competence-old/CompetenceDetail.vue
rename to client/src/pages/competence/ActionCompetenceDetail.vue
diff --git a/client/src/pages/competence/ActionCompetenceListPage.vue b/client/src/pages/competence/ActionCompetenceListPage.vue
new file mode 100644
index 00000000..9f15586a
--- /dev/null
+++ b/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>
diff --git a/client/src/pages/competence/CompetenceAssignmentRow.vue b/client/src/pages/competence/CompetenceAssignmentRow.vue
index 704b110a..099f225c 100644
--- a/client/src/pages/competence/CompetenceAssignmentRow.vue
+++ b/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", {
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 2e72b69b..a4b26000 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/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>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index ccbf05d6..43baf170 100644
--- a/client/src/router/index.ts
+++ b/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",