From d1ea4da590277a59fd61a4ff2270216fdfa2cefe Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Sun, 3 Dec 2023 22:32:09 +0100
Subject: [PATCH] feat:#94 finished delete and added translation

---
 frontend/src/App.vue                          |  1 +
 frontend/src/api/createFeed.ts                | 15 ++++++
 frontend/src/components/CalendarLink.vue      |  2 +-
 frontend/src/components/MenuBar.vue           |  3 +-
 .../editCalendar/EditAdditionalModules.vue    | 24 +--------
 .../components/editCalendar/EditModules.vue   | 53 +++++++++++++++++--
 frontend/src/i18n/translations/de.json        | 16 +++++-
 frontend/src/i18n/translations/en.json        | 16 +++++-
 frontend/src/main.ts                          |  2 +-
 frontend/src/view/EditCalendarView.vue        |  1 -
 10 files changed, 99 insertions(+), 34 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6d84655..6c8130d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -19,6 +19,7 @@ const isDisabled = (routeName: RouteRecordName | null | undefined) => {
   <RouterView />
   <!-- show CalendarPreview but only on specific router views -->
   <CalendarPreview v-if="isDisabled($route.name)"/>
+  <Toast />
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/api/createFeed.ts b/frontend/src/api/createFeed.ts
index da95ab0..bafb019 100644
--- a/frontend/src/api/createFeed.ts
+++ b/frontend/src/api/createFeed.ts
@@ -38,3 +38,18 @@ export async function saveIndividualFeed(
     });
   return token;
 }
+
+export async function deleteIndividualFeed(token: string): Promise<void> {
+  await fetch("/api/feed?token=" + token, {
+    method: "DELETE",
+  }).then ((response) => {
+    if (response.ok) {
+        return Promise.resolve(response);
+    } else {
+      return Promise.reject(response);
+    }
+  }).catch((error) => {
+    return Promise.reject(error);
+  });
+
+}
diff --git a/frontend/src/components/CalendarLink.vue b/frontend/src/components/CalendarLink.vue
index 2507ca8..7b7e771 100644
--- a/frontend/src/components/CalendarLink.vue
+++ b/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>
diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index d701634..99910e5 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/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 }">
diff --git a/frontend/src/components/editCalendar/EditAdditionalModules.vue b/frontend/src/components/editCalendar/EditAdditionalModules.vue
index 4c99aa1..ff155ba 100644
--- a/frontend/src/components/editCalendar/EditAdditionalModules.vue
+++ b/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>
diff --git a/frontend/src/components/editCalendar/EditModules.vue b/frontend/src/components/editCalendar/EditModules.vue
index 4c6c1ed..a7f8adb 100644
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/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>
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index a96dcdc..7d3694c 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -52,7 +52,21 @@
     "headline": "Bearbeite deinen HTWKalender",
     "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten",
     "loadCalendar": "Kalender laden",
-    "noCalendarFound": "Keinen Kalender gefunden"
+    "noCalendarFound": "Keinen Kalender gefunden",
+    "save": "Speichern",
+    "delete": "Löschen",
+    "addModules": "Module hinzufügen",
+    "dialog": {
+      "headline": "Kalender löschen",
+      "subTitle": "Sind Sie sicher, dass Sie Ihren Kalender löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.\nBitte entfernen Sie den Kalender anschließend aus Ihrer Kalender-App.",
+      "delete": "Löschen"
+    },
+    "toast": {
+      "success": "Erfolg",
+      "error": "Fehler",
+      "successDetail": "Kalender erfolgreich gelöscht",
+      "errorDetail": "Fehler beim Löschen des Kalenders"
+    }
   },
   "additionalModules": {
     "subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.",
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index e68bc81..64a3d09 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -52,7 +52,21 @@
     "headline": "edit your HTWKalender",
     "subTitle": "please enter your link or calendar token",
     "loadCalendar": "load calendar",
-    "noCalendarFound": "no calendar found"
+    "noCalendarFound": "no calendar found",
+    "save": "save",
+    "delete": "delete",
+    "addModules": "add modules",
+    "dialog": {
+      "headline": "delete calendar",
+      "subTitle": "Are you sure you want to delete your calendar? This action cannot be undone.\nPlease remove the calendar afterwords from your calendar app.",
+      "delete": "delete"
+    },
+    "toast": {
+      "success": "Success",
+      "error": "Error",
+      "successDetail": "Calendar successfully deleted",
+      "errorDetail": "Calendar could not be deleted"
+    }
   },
   "additionalModules": {
     "subTitle": "Select additional modules that are not listed in the regular semester for your course",
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c2b5e96..93be59b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -12,7 +12,7 @@ import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
 import ToggleButton from "primevue/togglebutton";
-import "primevue/resources/themes/viva-dark/theme.css";
+import "primevue/resources/themes/tailwind-light/theme.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 import router from "./router";
diff --git a/frontend/src/view/EditCalendarView.vue b/frontend/src/view/EditCalendarView.vue
index 97d7439..9ee6a2c 100644
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@@ -66,7 +66,6 @@ function loadCalendar(): void {
 </script>
 
 <template>
-  <Toast />
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem mt-2">
       <h3 class="text-4xl">