Fix some typescript warnings

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 16.10.0
+nodejs 16.17.0
 python 3.10.5

client/package.json

@@ -7,7 +7,7 @@
     "build:tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --minify",
     "test": "vitest run",
     "coverage": "vitest run --coverage",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --watch"
   },
@@ -30,6 +30,7 @@
     "@testing-library/vue": "^6.6.1",
     "@types/d3": "^7.4.0",
     "@types/jsdom": "^20.0.0",
+    "@types/lodash": "^4.14.184",
     "@types/node": "^18.7.14",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vue/eslint-config-prettier": "^7.0.0",

client/src/components/circle/CircleOverview.vue

@@ -1,27 +1,23 @@
 <script setup lang="ts">
-import {Circle} from '@/services/circle';
+import { Circle } from '@/services/circle'
 import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
 
 const props = defineProps<{
-  circle: Circle,
+  circle: Circle
   show: boolean
 }>()
 
-const emits = defineEmits(['closemodal'])
+// const emits = defineEmits(['closemodal'])
-
 </script>
 
 <template>
-  <ItFullScreenModal
+  <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
-    :show="show"
-    @closemodal="$emit('closemodal')"
-  >
     <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
 
     <p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
 
     <div class="mt-8 p-4 border border-gray-500">
-      <h3>Du wirst in der Lage sein, ... </h3>
+      <h3>Du wirst in der Lage sein, ...</h3>
 
       <ul class="mt-4">
         <li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
@@ -31,9 +27,7 @@ const emits = defineEmits(['closemodal'])
       </ul>
     </div>
 
-    <h3 class="mt-16">
+    <h3 class="mt-16">Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:</h3>
-      Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
-    </h3>
 
     <ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
       <li
@@ -41,11 +35,10 @@ const emits = defineEmits(['closemodal'])
         :key="jobSituation.id"
         class="job-situation border border-gray-500 p-4 text-xl flex items-center"
       >
-        {{jobSituation.value}}
+        {{ jobSituation.value }}
       </li>
     </ul>
   </ItFullScreenModal>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>

client/src/components/circle/LearningContent.vue

@@ -37,7 +37,7 @@ const block = computed(() => {
         <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl hidden lg:block">{{ learningContent.title }}</h1>
+      <h1 class="text-xl hidden lg:block">{{ learningContent?.title }}</h1>
 
       <button
         type="button"

client/src/services/circle.ts

@@ -6,6 +6,7 @@ import type {
   LearningContent,
   LearningSequence,
   LearningUnit,
+  LearningUnitQuestion,
   LearningWagtailPage,
 } from '@/types'
 import type { LearningPath } from '@/services/learningPath'
@@ -146,8 +147,8 @@ export class Circle implements LearningWagtailPage {
     )
   }
 
-  public get flatChildren(): CircleChild[] {
+  public get flatChildren(): (LearningContent | LearningUnitQuestion)[] {
-    const result: CircleChild[] = [];
+    const result: (LearningContent | LearningUnitQuestion)[] = [];
     this.learningSequences.forEach((learningSequence) => {
       learningSequence.learningUnits.forEach((learningUnit) => {
         learningUnit.children.forEach((learningUnitQuestion) => {

client/src/services/learningPath.ts

@@ -59,29 +59,33 @@ export class LearningPath implements LearningWagtailPage {
       this.topics.push(topic)
     }
 
-    this.calcNextLearningContent(completionData);
+    this.calcNextLearningContent(completionData)
   }
 
   public calcNextLearningContent(completionData: CircleCompletion[]): void {
-    this.nextLearningContent = undefined;
+    this.nextLearningContent = undefined
 
-    const lastCompletedLearningContent = getLastCompleted(this.translation_key, completionData);
+    const lastCompletedLearningContent = getLastCompleted(this.translation_key, completionData)
 
     if (lastCompletedLearningContent) {
-      const lastCircle = this.circles.find(circle => circle.translation_key === lastCompletedLearningContent.circle_key);
+      const lastCircle = this.circles.find(
+        (circle) => circle.translation_key === lastCompletedLearningContent.circle_key
+      )
       if (lastCircle) {
-        const lastLearningContent = lastCircle.flatLearningContents.find(learningContent => learningContent.translation_key === lastCompletedLearningContent.page_key);
+        const lastLearningContent = lastCircle.flatLearningContents.find(
+          (learningContent) => learningContent.translation_key === lastCompletedLearningContent.page_key
+        )
         if (lastLearningContent && lastLearningContent.nextLearningContent) {
-          this.nextLearningContent = lastLearningContent.nextLearningContent;
+          this.nextLearningContent = lastLearningContent.nextLearningContent
         } else {
           if (lastCircle.nextCircle) {
-            this.nextLearningContent = lastCircle.nextCircle.flatLearningContents[0];
+            this.nextLearningContent = lastCircle.nextCircle.flatLearningContents[0]
           }
         }
       }
     } else {
       if (this.circles[0]) {
-        this.nextLearningContent = this.circles[0].flatLearningContents[0];
+        this.nextLearningContent = this.circles[0].flatLearningContents[0]
       }
     }
   }

client/src/views/LoginView.vue

@@ -1,30 +1,27 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
+import * as log from 'loglevel'
-import {reactive} from 'vue';
+import { reactive } from 'vue'
-import {useUserStore} from '@/stores/user';
+import { useUserStore } from '@/stores/user'
-import {useRoute} from 'vue-router';
+import { useRoute } from 'vue-router'
 
 const route = useRoute()
 
-log.debug('LoginView.vue created');
+log.debug('LoginView.vue created')
-log.debug(route.query);
+log.debug(route.query)
 
 const state = reactive({
   username: '',
   password: '',
-});
+})
-
-const userStore = useUserStore();
 
+const userStore = useUserStore()
 </script>
 
 <template>
   <main class="px-8 py-8">
     <h1>Login</h1>
 
-    <form
+    <form @submit.prevent="userStore.handleLogin(state.username, state.password, route.query.next)">
-      @submit.prevent="userStore.handleLogin(state.username, state.password, route.query.next)"
-    >
       <div class="mt-8 mb-4">
         <label class="block mb-1" for="email">Username</label>
         <input
@@ -47,17 +44,11 @@ const userStore = useUserStore();
       </div>
 
       <div>
-        <input
+        <input data-cy="login-button" type="submit" value="Login" class="btn-primary" />
-          data-cy="login-button"
-          type="submit"
-          value="Login"
-          class="btn-primary"
-        />
       </div>
     </form>
     <p class="pt-8"><a href="/sso/login/">Login mit SSO</a></p>
   </main>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>

client/tsconfig.app.json

@@ -5,6 +5,7 @@
   "compilerOptions": {
     "composite": true,
     "strict": true,
+    "allowJs": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]