feat:#26 added semester to fetched groups

frontend/src/view/CourseSelection.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { computed, ComputedRef, Ref, ref, watch } from "vue";
-import {
-  fetchCourse,
-  fetchModulesByCourseAndSemester,
+import { fetchCourseBySemester,
+  fetchModulesByCourseAndSemester
 } from "../api/fetchCourse";
 import DynamicPage from "./DynamicPage.vue";
 import ModuleSelection from "../components/ModuleSelection.vue";
@@ -11,15 +10,28 @@ import { useI18n } from "vue-i18n";
 import moduleStore from "../store/moduleStore";
 import router from "../router";
 
+async function getModules() {
+  modules.value = await fetchModulesByCourseAndSemester(
+    selectedCourse.value.name,
+    selectedSemester.value.value,
+  );
+}
+
+async function getCourses() {
+  courses.value = await fetchCourseBySemester(selectedSemester.value.value).then((data) => {
+    return data.map((course) => {
+      return { name: course };
+    });
+  });
+}
+
 const store = moduleStore();
 const { t } = useI18n({ useScope: "global" });
 
-const courses = async () => {
-  return await fetchCourse();
-};
-
 const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
-const countries: Ref<{ name: string }[]> = ref([]);
+const courses: Ref<{ name: string; }[]> = ref([]);
+const modules: Ref<Module[]> = ref([]);
+
 const semesters: ComputedRef<{ name: string; value: string }[]> = computed(
   () => [
     { name: t("courseSelection.winterSemester"), value: "ws" },
@@ -39,21 +51,10 @@ watch(
       newValue[selectedSemester.value.value === "ws" ? 0 : 1]),
 );
 
-courses().then(
-  (data) =>
-    (countries.value = data.map((course) => {
-      return { name: course };
-    })),
-);
+// init the courses dropdown with the first semester that is default selected
+getCourses();
 
-const modules: Ref<Module[]> = ref([]);
 
-async function getModules() {
-  modules.value = await fetchModulesByCourseAndSemester(
-    selectedCourse.value.name,
-    selectedSemester.value.value,
-  );
-}
 </script>
 
 <template>
@@ -70,9 +71,17 @@ async function getModules() {
     }"
   >
     <template #selection="{ flexSpecs }">
+      <Dropdown
+        v-model="selectedSemester"
+        :options="semesters"
+        :class="flexSpecs"
+        option-label="name"
+        :placeholder="$t('courseSelection.semesterDropDown')"
+        @change="getCourses()"
+      ></Dropdown>
       <Dropdown
         v-model="selectedCourse"
-        :options="countries"
+        :options="courses"
         :class="flexSpecs"
         filter
         option-label="name"
@@ -81,14 +90,6 @@ async function getModules() {
         :auto-filter-focus="true"
         @change="getModules()"
       ></Dropdown>
-      <Dropdown
-        v-model="selectedSemester"
-        :options="semesters"
-        :class="flexSpecs"
-        option-label="name"
-        :placeholder="$t('courseSelection.semesterDropDown')"
-        @change="getModules()"
-      ></Dropdown>
     </template>
     <template #content>
       <ModuleSelection