fix:#24 linted and formatted

frontend/src/api/createFeed.ts

@@ -42,14 +42,15 @@ export async function saveIndividualFeed(
 export async function deleteIndividualFeed(token: string): Promise<void> {
   await fetch("/api/feed?token=" + token, {
     method: "DELETE",
-  }).then ((response) => {
-    if (response.ok) {
+  })
+    .then((response) => {
+      if (response.ok) {
         return Promise.resolve(response);
-    } else {
-      return Promise.reject(response);
-    }
-  }).catch((error) => {
-    return Promise.reject(error);
-  });
-
+      } else {
+        return Promise.reject(response);
+      }
+    })
+    .catch((error) => {
+      return Promise.reject(error);
+    });
 }

frontend/src/api/fetchModule.ts

@@ -14,7 +14,7 @@ export async function fetchModule(module: Module): Promise<Module> {
           module.uuid,
           module.name,
           module.course,
-            module.eventType,
+          module.eventType,
           module.name,
           module.prof,
           module.semester,

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>
 

frontend/src/i18n/translations/de.json

@@ -91,7 +91,7 @@
     "info-long": "Information",
     "paginator": {
       "from": "",
-      "to": " bis ", 
+      "to": " bis ",
       "of": " von insgesamt "
     },
     "eventType": "Ereignistyp"

frontend/src/i18n/translations/en.json

@@ -91,7 +91,7 @@
     "info-long": "information",
     "paginator": {
       "from": "",
-      "to": " to ", 
+      "to": " to ",
       "of": " of "
     },
     "eventType": "event type"

frontend/src/model/event.ts

@@ -22,6 +22,6 @@ export class AnonymizedEventDTO {
     public start: string,
     public end: string,
     public rooms: string,
-    public free: boolean
+    public free: boolean,
   ) {}
 }

frontend/src/router/index.ts

@@ -8,7 +8,8 @@ const PrivacyPolicy = () => import("../view/PrivacyPolicy.vue");
 const RenameModules = () => import("../components/RenameModules.vue");
 const RoomFinder = () => import("../view/RoomFinder.vue");
 const EditCalendarView = () => import("../view/EditCalendarView.vue");
-const EditAdditionalModules = () => import("../view/editCalendar/EditAdditionalModules.vue");
+const EditAdditionalModules = () =>
+  import("../view/editCalendar/EditAdditionalModules.vue");
 const EditModules = () => import("../view/editCalendar/EditModules.vue");
 const CourseSelection = () => import("../view/CourseSelection.vue");
 

frontend/src/store/moduleStore.ts

@@ -37,8 +37,8 @@ const moduleStore = defineStore("moduleStore", {
       return Array.from(this.modules.values());
     },
     containsModule(module: Module): boolean {
-        return this.modules.has(module.uuid);
-    }
+      return this.modules.has(module.uuid);
+    },
   },
 });
 

frontend/src/view/AdditionalModules.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import moduleStore from '../store/moduleStore';
-import router from '../router';
+import { defineAsyncComponent } from "vue";
+import moduleStore from "../store/moduleStore";
+import router from "../router";
 
 const store = moduleStore();
 const AdditionalModuleTable = defineAsyncComponent(
@@ -21,8 +21,10 @@ async function nextStep() {
       </h3>
     </div>
     <AdditionalModuleTable />
-    <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
-      <Button 
+    <div
+      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+    >
+      <Button
         :disabled="store.isEmpty()"
         class="col-12 md:col-4 mb-3 align-self-end"
         icon="pi pi-arrow-right"

frontend/src/view/CourseSelection.vue

@@ -66,7 +66,7 @@ async function getModules() {
       label: $t('courseSelection.nextStep'),
       icon: 'pi pi-arrow-right',
       disabled: store.isEmpty(),
-      onClick: () => router.push('/additional-modules')
+      onClick: () => router.push('/additional-modules'),
     }"
   >
     <template #selection="{ flexSpecs }">

frontend/src/view/DynamicPage.vue

@@ -1,56 +1,44 @@
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue';
+import { computed, useSlots } from "vue";
 
 defineProps<{
-  hideContent: boolean,
-  headline: string,
-  subTitle?: string,
-  icon?: string,
+  hideContent: boolean;
+  headline: string;
+  subTitle?: string;
+  icon?: string;
   button?: {
-    label: string,
-    icon: string,
-    disabled: boolean,
-    onClick: () => void
-  }
-}>()
+    label: string;
+    icon: string;
+    disabled: boolean;
+    onClick: () => void;
+  };
+}>();
 
-const slots = useSlots()
-const hasSlot = (name:string) => {
-    return !!slots[name];
-  }
+const slots = useSlots();
+const hasSlot = (name: string) => {
+  return !!slots[name];
+};
 const hasContent = computed(() => {
-    return hasSlot('content')
-  })
+  return hasSlot("content");
+});
 </script>
 
 <template>
-  <div 
+  <div
     class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-    :class="{'md:mt-8': hideContent}"
+    :class="{ 'md:mt-8': hideContent }"
   >
     <div class="flex align-items-center justify-content-center gap-2 mx-2">
       <h3 class="text-4xl">
         {{ headline }}
       </h3>
-      <i
-        v-if="icon"
-        :class="icon"
-        style="font-size: 2rem"
-      ></i>
+      <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
     </div>
-    <div
-      v-if="subTitle"
-      class="flex justify-content-center"
-    >
+    <div v-if="subTitle" class="flex justify-content-center">
       <h5 class="text-2xl m-2">{{ subTitle }}</h5>
     </div>
-    <div
-      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
-    >
-      <slot 
-        name="selection"
-        flex-specs="flex-1 m-0"
-      ></slot>
+    <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
+      <slot name="selection" flex-specs="flex-1 m-0"></slot>
     </div>
     <div
       v-if="button"
@@ -64,18 +52,22 @@ const hasContent = computed(() => {
         @click="button.onClick()"
       />
     </div>
-    <div 
+    <div
       v-if="hasContent"
-      :class="
-        [hideContent? 
-          ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] : 
-          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
-        ,
-        'w-full', 'lg:w-8']"
-      >
-      <slot
-        name="content"
-      ></slot>
+      :class="[
+        hideContent
+          ? ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden']
+          : [
+              'opacity-100',
+              'transition-all',
+              'transition-duration-500',
+              'transition-ease-in-out',
+            ],
+        'w-full',
+        'lg:w-8',
+      ]"
+    >
+      <slot name="content"></slot>
     </div>
   </div>
 </template>

frontend/src/view/EditCalendarView.vue

@@ -80,7 +80,7 @@ function loadCalendar(): void {
       label: $t('editCalendarView.loadCalendar'),
       icon: 'pi pi-arrow-down',
       disabled: !isToken(token),
-      onClick: loadCalendar
+      onClick: loadCalendar,
     }"
   >
     <template #selection="{ flexSpecs }">

frontend/src/view/RoomFinder.vue

@@ -39,9 +39,7 @@ rooms().then(
       />
     </template>
     <template #content>
-      <RoomOccupation
-        :room="selectedRoom.name"
-      />
+      <RoomOccupation :room="selectedRoom.name" />
     </template>
   </DynamicPage>
 </template>

frontend/src/view/editCalendar/EditAdditionalModules.vue

@@ -21,7 +21,9 @@ async function nextStep() {
       </h3>
     </div>
     <AdditionalModuleTable />
-    <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
+    <div
+      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+    >
       <Button
         :disabled="store.isEmpty()"
         class="col-12 md:col-4 mb-3 align-self-end"

frontend/src/view/editCalendar/EditModules.vue

@@ -3,7 +3,10 @@ import { computed, inject, Ref, ref } from "vue";
 import { Module } from "../../model/module.ts";
 import moduleStore from "../../store/moduleStore";
 import { fetchAllModules } from "../../api/fetchCourse.ts";
-import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
+import {
+  deleteIndividualFeed,
+  saveIndividualFeed,
+} from "../../api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
 import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue";
@@ -61,25 +64,23 @@ async function deleteFeed() {
     () => {
       toast.add({
         severity: "success",
-        summary: t('editCalendarView.toast.success'),
-        detail: t('editCalendarView.toast.successDetail'),
+        summary: t("editCalendarView.toast.success"),
+        detail: t("editCalendarView.toast.successDetail"),
         life: 3000,
       });
       visible.value = false;
       router.push("/");
-
     },
     () => {
       toast.add({
         severity: "error",
-        summary: t('editCalendarView.toast.error'),
-        detail: t('editCalendarView.toast.errorDetail'),
+        summary: t("editCalendarView.toast.error"),
+        detail: t("editCalendarView.toast.errorDetail"),
         life: 3000,
       });
     },
   );
 }
-
 </script>
 
 <template>
@@ -89,9 +90,7 @@ async function deleteFeed() {
       <ModuleTemplateDialog />
     </div>
     <div class="w-full lg:w-8 flex flex-column">
-      <div
-        class="card flex align-items-center justify-content-center my-2"
-      >
+      <div class="card flex align-items-center justify-content-center my-2">
         <DataTable
           :value="tableData"
           edit-mode="cell"
@@ -112,7 +111,9 @@ async function deleteFeed() {
                   )
                 "
                 @update:model-value="
-                  tableData.forEach((module) => (module.Module.reminder = $event))
+                  tableData.forEach(
+                    (module) => (module.Module.reminder = $event),
+                  )
                 "
               />
             </div>
@@ -188,9 +189,30 @@ async function deleteFeed() {
             <div
               class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
             >
-              <Button type="button" severity="danger" outlined icon="pi pi-trash" :label="$t('editCalendarView.delete')" @click="visible = true"/>
-              <Button type="button" severity="info" outlined icon="pi pi-plus" :label="$t('editCalendarView.addModules')" @click="router.push('edit-additional-modules')"/>
-              <Button type="button" severity="success" outlined icon="pi pi-save" :label="$t('editCalendarView.save')" @click="finalStep()"/>
+              <Button
+                type="button"
+                severity="danger"
+                outlined
+                icon="pi pi-trash"
+                :label="$t('editCalendarView.delete')"
+                @click="visible = true"
+              />
+              <Button
+                type="button"
+                severity="info"
+                outlined
+                icon="pi pi-plus"
+                :label="$t('editCalendarView.addModules')"
+                @click="router.push('edit-additional-modules')"
+              />
+              <Button
+                type="button"
+                severity="success"
+                outlined
+                icon="pi pi-save"
+                :label="$t('editCalendarView.save')"
+                @click="finalStep()"
+              />
             </div>
           </template>
         </DataTable>
@@ -198,15 +220,31 @@ async function deleteFeed() {
     </div>
   </div>
   <div class="card flex justify-content-center">
-    <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+    <Dialog
+      v-model:visible="visible"
+      modal
+      header="Header"
+      :style="{ width: '50rem' }"
+      :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+    >
       <template #header>
-        <div class="inline-flex align-items-center justify-content-center gap-2">
-          <span class="font-bold white-space-nowrap">{{ $t('editCalendarView.dialog.headline') }}</span>
+        <div
+          class="inline-flex align-items-center justify-content-center gap-2"
+        >
+          <span class="font-bold white-space-nowrap">{{
+            $t("editCalendarView.dialog.headline")
+          }}</span>
         </div>
       </template>
-      <p class="m-0">{{ $t('editCalendarView.dialog.subTitle') }}</p>
+      <p class="m-0">{{ $t("editCalendarView.dialog.subTitle") }}</p>
       <template #footer>
-        <Button :label="$t('editCalendarView.dialog.delete')" severity="danger" icon="pi pi-trash" autofocus @click="deleteFeed()" />
+        <Button
+          :label="$t('editCalendarView.dialog.delete')"
+          severity="danger"
+          icon="pi pi-trash"
+          autofocus
+          @click="deleteFeed()"
+        />
       </template>
     </Dialog>
   </div>