Remove typecheck errors

client/src/components/MainNavigationBar.vue

@@ -55,7 +55,6 @@ function learninPathSlug(): string {
 }
 
 function handleDropdownSelect(data: DropdownData) {
-  log.debug("Selected action:", data.action);
   switch (data.action) {
     case "settings":
       router.push("/profile");
@@ -76,25 +75,21 @@ onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
 
-const profileDropdownData: DropdownListItem[][] = [
-  [
-    {
-      title: "Kontoeinstellungen",
-      icon: IconSettings as Component,
-      data: {
-        action: "settings",
-      },
+const profileDropdownData: DropdownListItem[] = [
+  {
+    title: "Kontoeinstellungen",
+    icon: IconSettings as Component,
+    data: {
+      action: "settings",
     },
-  ],
-  [
-    {
-      title: "Abmelden",
-      icon: IconLogout as Component,
-      data: {
-        action: "logout",
-      },
+  },
+  {
+    title: "Abmelden",
+    icon: IconLogout as Component,
+    data: {
+      action: "logout",
     },
-  ],
+  },
 ];
 </script>
 
@@ -102,7 +97,6 @@ const profileDropdownData: DropdownListItem[][] = [
   <div>
     <Teleport to="body">
       <MobileMenu
-        :user-store="userStore"
         :show="state.showMenu"
         :learning-path-slug="learninPathSlug()"
         :learning-path-name="learningPathName()"

client/src/components/MobileMenu.vue

@@ -2,13 +2,14 @@
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
+import { useUserStore } from "@/stores/user";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
+const userStore = useUserStore();
 
 const props = defineProps<{
   show: boolean;
-  userStore: object;
   learningPathName: string;
   learningPathSlug: string;
 }>();

client/src/components/competences/PerformanceCriteriaRow.vue

@@ -8,7 +8,6 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  criteria: undefined,
   showState: false,
 });
 

client/src/components/mediaLibrary/LinkCard.vue

@@ -23,9 +23,9 @@ const props = withDefaults(defineProps<Props>(), {
     <div>
       <h4 class="mb-2 text-bold">{{ title }}</h4>
       <p class="mb-2">{{ description }}</p>
-      <media-link :to="url" :blank="openWindow" class="link">
+      <MediaLink :to="url" :blank="openWindow" class="link">
         <span class="inline">{{ linkText }}</span>
-      </media-link>
+      </MediaLink>
     </div>
   </div>
 </template>

client/src/components/mediaLibrary/MediaLink.vue

@@ -3,14 +3,14 @@
 // https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/
 
 import { computed } from "vue";
-import { RouterLink } from "vue-router";
+import type { RouterLinkProps } from "vue-router";
 
-const props = defineProps({
-  ...RouterLink.props, // @ts-ignore
-  blank: {
-    type: Boolean,
-    default: false,
-  },
+export interface Props extends RouterLinkProps {
+  blank?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  blank: false,
 });
 
 const isExternalLink = computed(
@@ -24,7 +24,7 @@ const isExternalLink = computed(
       v-if="isExternalLink"
       :target="props.blank ? '_blank' : '_self'"
       rel="noopener"
-      :href="props.to"
+      :href="(props.to as string)"
     >
       <slot />
     </a>

client/src/components/ui/ItDropdown.vue

@@ -3,13 +3,13 @@ import type { DropdownListItem } from "@/types";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 
 const props = defineProps<{
-  buttonClasses: [string];
-  listItems: [[DropdownListItem]];
+  buttonClasses: [string] | [];
+  listItems: DropdownListItem[];
   align: "left" | "right";
 }>();
 
 const emit = defineEmits<{
-  (e: "select", data: object): void;
+  (e: "select", data: any): void;
 }>();
 </script>
 
@@ -33,20 +33,18 @@ const emit = defineEmits<{
         class="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="[align === 'left' ? 'left-0' : 'right-0']"
       >
-        <div v-for="section in listItems" :key="section" class="">
-          <div v-for="item in section" :key="item" class="px-1 py-1">
-            <MenuItem>
-              <button
-                class="text-black group flex w-full items-center px-0 py-2 text-sm"
-                @click="$emit('select', item.data)"
-              >
-                <span class="inline-block pr-2">
-                  <component :is="item.icon" v-if="item.icon"></component>
-                </span>
-                {{ item.title }}
-              </button>
-            </MenuItem>
-          </div>
+        <div v-for="item in listItems" :key="item.title" class="px-1 py-1">
+          <MenuItem>
+            <button
+              class="text-black group flex w-full items-center px-0 py-2 text-sm"
+              @click="$emit('select', item.data)"
+            >
+              <span class="inline-block pr-2">
+                <component :is="item.icon" v-if="item.icon"></component>
+              </span>
+              {{ item.title }}
+            </button>
+          </MenuItem>
         </div>
       </MenuItems>
     </transition>

client/src/i18n.ts

@@ -23,7 +23,7 @@ export function setI18nLanguage(i18n: any, locale: string) {
    *
    * axios.defaults.headers.common['Accept-Language'] = locale
    */
-  document.querySelector("html").setAttribute("lang", locale);
+  document.querySelector("html")?.setAttribute("lang", locale);
 }
 
 export async function loadLocaleMessages(i18n: any, locale: any) {

client/src/pages/LoginPage.vue

@@ -25,7 +25,11 @@ const userStore = useUserStore();
       <form
         class="bg-white p-4 lg:p-8"
         @submit.prevent="
-          userStore.handleLogin(state.username, state.password, route.query.next)
+          userStore.handleLogin(
+            state.username,
+            state.password,
+            route.query.next as string
+          )
         "
       >
         <div class="mb-4">

client/src/pages/StyleGuidePage.vue

@@ -27,29 +27,25 @@ const state = reactive({
 });
 
 const dropdownData = [
-  [
-    {
-      title: "Option 1",
-      icon: IconLogout,
-      data: {},
+  {
+    title: "Option 1",
+    icon: IconLogout,
+    data: {},
+  },
+  {
+    title: "Option 2",
+    icon: IconLogout,
+    data: {
+      test: 12,
     },
-    {
-      title: "Option 2",
-      icon: null,
-      data: {
-        test: 12,
-      },
+  },
+  {
+    title: "Option 3",
+    icon: IconSettings,
+    data: {
+      amount: 34,
     },
-  ],
-  [
-    {
-      title: "Option 3",
-      icon: IconSettings,
-      data: {
-        amount: 34,
-      },
-    },
-  ],
+  },
 ];
 
 // TODO: die CSS-Klasse für die Farben wird hier in der StyleGuideView.vue generiert.

client/src/pages/competence/CompetenceListPage.vue

@@ -14,6 +14,7 @@ const competenceStore = useCompetenceStore();
     <nav class="py-4 lg:pb-8">
       <router-link
         class="btn-text inline-flex items-center pl-0"
+        v-if="competenceStore.competenceProfilePage"
         :to="competenceStore.competenceProfilePage?.frontend_url"
       >
         <it-icon-arrow-left />

client/src/pages/competence/SinglePerformanceCriteriaPage.vue

@@ -21,7 +21,7 @@ let competencePage: CompetencePage | undefined;
 const findCriteria = () => {
   for (const page of competenceStore.competenceProfilePage
     ?.children as CompetencePage[]) {
-    for (let criteria of page.children) {
+    for (const criteria of page.children) {
       if (criteria.slug === route.params["criteriaSlug"]) {
         currentQuestion = criteria;
         competencePage = page;
@@ -63,7 +63,7 @@ findCriteria();
       @back="router.back()"
       @next="router.back()"
     >
-      <div class="container-medium">
+      <div class="container-medium" v-if="currentQuestion">
         <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
           <h2 class="heading-2">
             {{ currentQuestion.competence_id }} {{ currentQuestion.title }}

client/src/pages/learningPath/CirclePage.vue

@@ -52,9 +52,11 @@ onMounted(async () => {
         const learningUnits = circleStore.circle?.learningSequences.flatMap(
           (ls) => ls.learningUnits
         );
-        wagtailPage = learningUnits.find((lu) => {
-          return lu.slug.endsWith(slugEnd);
-        });
+        if (learningUnits) {
+          wagtailPage = learningUnits.find((lu) => {
+            return lu.slug.endsWith(slugEnd);
+          });
+        }
       }
       if (wagtailPage) {
         document

client/src/pages/mediaLibrary/MLMediaListPage.vue

@@ -26,7 +26,6 @@ const mediaList = computed(() => {
         return contentCollection.value.contents[0].type === "learn_media";
       }
     });
-    console.log(learnMediaCollection);
     return learnMediaCollection?.value;
   }
   return undefined;
@@ -35,7 +34,7 @@ const mediaList = computed(() => {
 
 <template>
   <div
-    v-if="mediaCategory"
+    v-if="mediaCategory && mediaStore.mediaLibraryPage && mediaList"
     class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
   >
     <div class="bg-gray-200">

client/src/stores/circle.ts

@@ -8,6 +8,7 @@ import type {
   LearningContent,
   LearningUnit,
   LearningUnitPerformanceCriteria,
+  PerformanceCriteria,
 } from "@/types";
 import { defineStore } from "pinia";
 
@@ -85,16 +86,22 @@ export const useCircleStore = defineStore({
       return learningUnit;
     },
     async markCompletion(
-      page: LearningContent | LearningUnitPerformanceCriteria,
+      page:
+        | LearningContent
+        | LearningUnitPerformanceCriteria
+        | PerformanceCriteria
+        | undefined,
       completion_status: CourseCompletionStatus = "success"
     ) {
       const completionStore = useCompletionStore();
 
       try {
-        page.completion_status = completion_status;
-        const completionData = await completionStore.markPage(page);
-        if (this.circle) {
-          this.circle.parseCompletionData(completionData);
+        if (page) {
+          page.completion_status = completion_status;
+          const completionData = await completionStore.markPage(page);
+          if (this.circle) {
+            this.circle.parseCompletionData(completionData);
+          }
         }
       } catch (error) {
         log.error(error);

client/src/types.ts

@@ -3,7 +3,6 @@ import type { Component } from "vue";
 
 export type CourseCompletionStatus = "unknown" | "fail" | "success";
 
-
 export interface BaseCourseWagtailPage {
   readonly id: number;
   readonly title: string;