feat:#94 finished delete and added translation

frontend/src/components/CalendarLink.vue

@@ -79,7 +79,7 @@ const actions = [
 </script>
 
 <template>
-  <Toast />
+
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h2>

frontend/src/components/MenuBar.vue

@@ -46,8 +46,7 @@ const items = computed(() => [
         height="40"
         src="../../public/htwk.svg"
         alt="Logo"
-        class="h-10 w-10 mr-6"
-        style="margin-left: 1rem"
+        class="h-10 w-10 mr-3"
       />
     </template>
     <template #item="{ item }">

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -73,22 +73,6 @@ const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
 function selectChange() {
   selectAll.value = selectedModules.value.length === modules.value.length;
 }
-
-function itemsLabel(selectedModules: Module[]): string {
-  return (selectedModules ? selectedModules.length : 0) != 1
-    ? t("additionalModules.modules")
-    : t("additionalModules.module");
-}
-
-function itemsLabelWithNumber(selectedModules: Module[]): string {
-  return (
-    selectedModules.length.toString() +
-    " " +
-    itemsLabel(selectedModules) +
-    " " +
-    t("additionalModules.dropDownFooterSelected")
-  );
-}
 </script>
 
 <template>
@@ -111,7 +95,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         :placeholder="$t('additionalModules.dropDown')"
         :auto-filter-focus="true"
         :show-toggle-all="false"
-        :selected-items-label="itemsLabelWithNumber(selectedModules)"
+        :selected-items-label="$t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 })"
         @change="selectChange()"
         @selectall-change="onSelectAllChange($event)"
       >
@@ -138,11 +122,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         </template>
         <template #footer>
           <div class="py-2 px-3">
-            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
-            item{{
-              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
-            }}
-            selected.
+            {{ t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 }) }}
           </div>
         </template>
       </MultiSelect>

frontend/src/components/editCalendar/EditModules.vue

@@ -3,15 +3,20 @@ import { computed, Ref, ref } from "vue";
 import { Module } from "../../model/module.ts";
 import moduleStore from "../../store/moduleStore";
 import { fetchAllModules } from "../../api/fetchCourse.ts";
-import { saveIndividualFeed } from "../../api/createFeed.ts";
+import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
 import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
+import { useToast } from "primevue/usetoast";
 const { t } = useI18n({ useScope: "global" });
 
+const toast = useToast();
+const visible = ref(false);
+
 const store = moduleStore();
+
 const tableData = computed(() =>
   store.getAllModules().map((module: Module) => {
     return {
@@ -21,7 +26,7 @@ const tableData = computed(() =>
   }),
 );
 
-const columns = ref([
+const columns = computed(() => [
   { field: "Course", header: t("moduleInformation.course") },
   { field: "Module", header: t("moduleInformation.module") },
   { field: "Reminder", header: t("renameModules.reminder") },
@@ -49,6 +54,31 @@ async function finalStep() {
   await saveIndividualFeed(tokenStore().token, store.getAllModules());
   await router.push("/calendar-link");
 }
+
+async function deleteFeed() {
+  deleteIndividualFeed(tokenStore().token).then(
+    () => {
+      toast.add({
+        severity: "success",
+        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'),
+        life: 3000,
+      });
+    },
+  );
+}
+
 </script>
 
 <template>
@@ -152,14 +182,27 @@ async function finalStep() {
         </Column>
         <template #footer>
           <div class="card flex align-items-center justify-content-between border-round m-2">
-            <Button @click="finalStep()" >Delete</Button>
-            <Button @click="finalStep()">Add more Modules</Button>
-            <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
+            <Button type="button" severity="danger" outlined @click="visible = true" icon="pi pi-trash" :label="$t('editCalendarView.delete')"/>
+            <Button type="button" severity="info" outlined @click="router.push('edit-additional-modules')" icon="pi pi-plus" :label="$t('editCalendarView.addModules')"/>
+            <Button type="button" severity="success" outlined @click="finalStep()" icon="pi pi-save" :label="$t('editCalendarView.save')"/>
           </div>
         </template>
       </DataTable>
     </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' }">
+      <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>
+      </template>
+      <p class="m-0">{{ $t('editCalendarView.dialog.subTitle') }}</p>
+      <template #footer>
+        <Button :label="$t('editCalendarView.dialog.delete')" severity="danger" icon="pi pi-trash" @click="deleteFeed()" autofocus />
+      </template>
+    </Dialog>
+  </div>
 </template>
 
 <style scoped></style>