fix:#24 linted and formatted

frontend/src/components/AdditionalModuleTable.vue

@@ -46,14 +46,16 @@ const loadedModules: Ref<Module[]> = ref(new Array(10));
 const loadingData = ref(true);
 
 onMounted(() => {
-  fetchAllModules().then(
-    (data) =>
-      (loadedModules.value = data.map((module: Module) => {
-        return module;
-      })),
-  ).finally(() => {
-    loadingData.value = false;
-  });
+  fetchAllModules()
+    .then(
+      (data) =>
+        (loadedModules.value = data.map((module: Module) => {
+          return module;
+        })),
+    )
+    .finally(() => {
+      loadingData.value = false;
+    });
 });
 
 const ModuleInformation = defineAsyncComponent(
@@ -121,7 +123,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       @row-unselect="unselectModule"
     >
       <Column selection-mode="multiple">
-        <template #body v-if="loadingData">
+        <template v-if="loadingData" #body>
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -140,7 +142,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
-        <template #body v-if="loadingData">
+        <template v-if="loadingData" #body>
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -158,7 +160,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
-        <template #body v-if="loadingData">
+        <template v-if="loadingData" #body>
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -176,7 +178,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
-        <template #body v-if="loadingData">
+        <template v-if="loadingData" #body>
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -186,24 +188,26 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :show-clear-button="false"
         :show-filter-menu="false"
       >
-      <template #body v-if="loadingData">
+        <template v-if="loadingData" #body>
           <Skeleton></Skeleton>
         </template>
       </Column>
       <Column :header="$t('additionalModules.info')">
         <template #body="slotProps">
-          <Button
-            icon="pi pi-info"
-            severity="secondary"
-            rounded
-            outlined
-            :aria-label="$t('additionalModules.info-long')"
-            class="small-button"
-            @click.stop="showInfo(slotProps.data)"
-          ></Button>
-        </template>
-        <template #body v-if="loadingData">
-          <Skeleton></Skeleton>
+          <div v-if="loadingData">
+            <Skeleton></Skeleton>
+          </div>
+          <div v-else>
+            <Button
+              icon="pi pi-info"
+              severity="secondary"
+              rounded
+              outlined
+              :aria-label="$t('additionalModules.info-long')"
+              class="small-button"
+              @click.stop="showInfo(slotProps.data)"
+            ></Button>
+          </div>
         </template>
       </Column>
       <template #footer>

frontend/src/components/CalendarLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import tokenStore from "../store/tokenStore.ts";
 import { useToast } from "primevue/usetoast";
-import {computed, onMounted} from "vue";
+import { computed, onMounted } from "vue";
 import router from "../router";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
@@ -79,7 +79,6 @@ const actions = computed(() => [
 </script>
 
 <template>
-
   <div class="flex flex-column mt-8">
     <div class="flex align-items-center justify-content-center m-2">
       <h2 class="text-base md:text-2xl">

frontend/src/components/CalendarPreview.vue

@@ -25,7 +25,6 @@ const columns = computed(() => [
   { field: "Course", header: t("calendarPreview.course") },
   { field: "Module", header: t("calendarPreview.module") },
 ]);
-
 </script>
 
 <template>

frontend/src/components/DarkModeSwitcher.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { usePrimeVue } from 'primevue/config';
+import { usePrimeVue } from "primevue/config";
 
 const PrimeVue = usePrimeVue();
 
 const isDark = ref(true);
-const darkTheme = ref('lara-dark-blue'),
-  lightTheme = ref('lara-light-blue');
+const darkTheme = ref("lara-dark-blue"),
+  lightTheme = ref("lara-light-blue");
 
 function toggleTheme() {
   isDark.value = !isDark.value;
@@ -17,29 +17,32 @@ function setTheme(shouldBeDark: boolean) {
   isDark.value = shouldBeDark;
   const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
     oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
-  PrimeVue.changeTheme(oldTheme, newTheme, 'theme-link', () => {});
+  PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
 }
 
 // set theme matching browser preference
-setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+setTheme(
+  window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches,
+);
 
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-   setTheme(e.matches); 
-});
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (e) => {
+    setTheme(e.matches);
+  });
 </script>
 
 <template>
-
-<Button
-  id="dark-mode-switcher"
-  size="small"
-  class="p-button-rounded w-full md:w-auto"
-  style="margin-right: 1rem"
-  :severity="isDark ? 'warning' : 'info'"
-  @click="toggleTheme"
+  <Button
+    id="dark-mode-switcher"
+    size="small"
+    class="p-button-rounded w-full md:w-auto"
+    style="margin-right: 1rem"
+    :severity="isDark ? 'warning' : 'info'"
+    @click="toggleTheme"
   >
-  <i v-if="isDark" class="pi pi-sun"></i>
-  <i v-else class="pi pi-moon"></i>
-</Button>
-
+    <i v-if="isDark" class="pi pi-sun"></i>
+    <i v-else class="pi pi-moon"></i>
+  </Button>
 </template>

frontend/src/components/FaqPage.vue

@@ -224,5 +224,4 @@
 .grid > .col:first-child {
   font-weight: bold;
 }
-
 </style>

frontend/src/components/ModuleInformation.vue

@@ -91,14 +91,22 @@ function formatWeekday(weekday: string) {
               :value="sortModuleEventsByStart(module.events)"
               :data-key="module.name"
               layout="grid"
-              >
+            >
               <template #grid="slotProps">
-                <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 p-1">
-                  <Card class="border-2 surface-border border-round surface-card">
+                <div
+                  v-for="(item, index) in slotProps.items"
+                  :key="index"
+                  class="col-12 sm:col-6 p-1"
+                >
+                  <Card
+                    class="border-2 surface-border border-round surface-card"
+                  >
                     <template #title>
-                      <Badge 
+                      <Badge
                         :value="item.eventType"
-                        :severity="item.eventType === 'V' ? 'success' : 'warning'"
+                        :severity="
+                          item.eventType === 'V' ? 'success' : 'warning'
+                        "
                         class="flex-shrink-0 flex-grow-0"
                       />
                     </template>
@@ -106,7 +114,13 @@ function formatWeekday(weekday: string) {
                       <div class="flex flex-row gap-4 flex-wrap">
                         <div class="flex flex-column">
                           <div class="mr-2">{{ formatWeekday(item.day) }}</div>
-                          <div class="mr-2">{{ $t("moduleInformation.nthWeek", {count: item.week}) }}</div>
+                          <div class="mr-2">
+                            {{
+                              $t("moduleInformation.nthWeek", {
+                                count: item.week,
+                              })
+                            }}
+                          </div>
                         </div>
                         <div class="flex flex-column">
                           <table>

frontend/src/components/ModuleSelection.vue

@@ -15,15 +15,18 @@ const props = defineProps({
   },
 });
 
-const modules : ComputedRef<Module[]> = computed(() => props.modules);
-const selectedCourse : ComputedRef<string> = computed(() => props.selectedCourse);
+const modules: ComputedRef<Module[]> = computed(() => props.modules);
+const selectedCourse: ComputedRef<string> = computed(
+  () => props.selectedCourse,
+);
 
 store.modules.clear();
 
-const allSelected : ComputedRef<boolean> = 
-  computed(() => props.modules.every((module) => store.hasModule(module)));
+const allSelected: ComputedRef<boolean> = computed(() =>
+  props.modules.every((module) => store.hasModule(module)),
+);
 
-function toggleAllModules(){
+function toggleAllModules() {
   if (allSelected.value) {
     store.removeAllModules();
   } else {
@@ -42,24 +45,39 @@ function toggleModule(module: Module) {
 
 <template>
   <div class="flex flex-column w-full">
-    <DataView 
+    <DataView
       :value="modules"
       data-key="uuid"
-      :class="
-        [selectedCourse === ''? 
-          ['opacity-0', 'pointer-events-none'] : 
-          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
-        ,
-        'w-full']"
-      >
+      :class="[
+        selectedCourse === ''
+          ? ['opacity-0', 'pointer-events-none']
+          : [
+              'opacity-100',
+              'transition-all',
+              'transition-duration-500',
+              'transition-ease-in-out',
+            ],
+        'w-full',
+      ]"
+    >
       <template #header>
-        <div class="flex justify-content-between align-items-center flex-wrap md:mx-4">
-            <h3>
-              {{ $t("moduleSelection.modules") }} -
-              {{ store.countModules() }}
-            </h3>
-          <div class="flex align-items-center justify-content-end white-space-nowrap">
-            <p>{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}</p>
+        <div
+          class="flex justify-content-between align-items-center flex-wrap md:mx-4"
+        >
+          <h3>
+            {{ $t("moduleSelection.modules") }} -
+            {{ store.countModules() }}
+          </h3>
+          <div
+            class="flex align-items-center justify-content-end white-space-nowrap"
+          >
+            <p>
+              {{
+                allSelected
+                  ? $t("moduleSelection.deselectAll")
+                  : $t("moduleSelection.selectAll")
+              }}
+            </p>
             <InputSwitch
               class="mx-2"
               :disabled="modules.length === 0"
@@ -76,20 +94,26 @@ function toggleModule(module: Module) {
       </template>
       <template #list="slotProps">
         <div class="grid grid-nogutter">
-        <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-          <div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4">
-            <p class="text-lg flex-1 align-self-stretch">{{ item.name }}</p>
-            <ToggleButton
-              class="w-9rem align-self-end my-2"
-              off-icon="pi pi-times"
-              :off-label="$t('moduleSelection.unselected')"
-              on-icon="pi pi-check"
-              :on-label="$t('moduleSelection.selected')"
-              :model-value="store.hasModule(item)"
-              @update:model-value="toggleModule(item)"
-            />
-        </div>
-        </div>
+          <div
+            v-for="(item, index) in slotProps.items"
+            :key="index"
+            class="col-12"
+          >
+            <div
+              class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4"
+            >
+              <p class="text-lg flex-1 align-self-stretch">{{ item.name }}</p>
+              <ToggleButton
+                class="w-9rem align-self-end my-2"
+                off-icon="pi pi-times"
+                :off-label="$t('moduleSelection.unselected')"
+                on-icon="pi pi-check"
+                :on-label="$t('moduleSelection.selected')"
+                :model-value="store.hasModule(item)"
+                @update:model-value="toggleModule(item)"
+              />
+            </div>
+          </div>
         </div>
       </template>
     </DataView>

frontend/src/components/RenameModules.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import  moduleStore from "../store/moduleStore.ts";
+import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
@@ -37,7 +37,7 @@ async function finalStep() {
   <div class="flex flex-column align-items-center mb-7">
     <div class="flex align-items-center justify-content-center m-2 gap-2">
       <h3>{{ $t("renameModules.subTitle") }}</h3>
-      <ModuleTemplateDialog/>
+      <ModuleTemplateDialog />
     </div>
     <div class="w-full lg:w-8 flex flex-column">
       <div class="card flex align-items-center justify-content-center my-2">
@@ -50,7 +50,9 @@ async function finalStep() {
           class="w-full"
         >
           <template #header>
-            <div class="flex align-items-center justify-content-end flex-wrap gap-2 px-2">
+            <div
+              class="flex align-items-center justify-content-end flex-wrap gap-2 px-2"
+            >
               {{ $t("renameModules.enableAllNotifications") }}
               <InputSwitch
                 :model-value="
@@ -60,7 +62,9 @@ async function finalStep() {
                   )
                 "
                 @update:model-value="
-                  tableData.forEach((module) => (module.Module.reminder = $event))
+                  tableData.forEach(
+                    (module) => (module.Module.reminder = $event),
+                  )
                 "
               />
             </div>
@@ -129,7 +133,7 @@ async function finalStep() {
         :label="$t('renameModules.nextStep')"
         @click="finalStep()"
       />
-    </div>  
+    </div>
   </div>
 </template>