Merge remote-tracking branch 'origin/main' into 21-customizable-events

frontend/src/components/ModuleTemplateDialog.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+
+const helpVisible: Ref<boolean> = ref(false);
+
+const placeholders = ref([
+  { placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
+  { placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
+]);
+</script>
+
+<template>
+  <Button 
+    icon="pi pi-info"
+    class="m-2 small-button"
+    severity="help"
+    rounded
+    outlined
+    size="large"
+    aria-label="Help"
+    @click="helpVisible = true" />
+  <Dialog
+    v-model:visible="helpVisible"
+    header="Module placeholders" 
+  >
+    <p>
+      Here you can rename your modules to your liking. This will be the name
+      of the event in your calendar.
+    </p>
+    <p>
+      You can use the following placeholders in your module names:
+    </p>
+    <DataTable
+      :value="placeholders"
+    > 
+      <Column field="placeholder" header="Placeholder"></Column>
+      <Column field="description" header="Description"></Column>
+      <Column field="examples" header="Examples"></Column>
+    </DataTable>
+  </Dialog>
+</template>
+
+<style scoped>
+  .small-button.p-button {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+  }
+</style>

frontend/src/components/RenameModules.vue

@@ -3,7 +3,8 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { Ref, ref } from "vue";
+import { ref } from "vue";
+import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 
 const tableData = ref(
   moduleStore().modules.map((module) => {
@@ -20,13 +21,6 @@ const columns = ref([
   { field: "Reminder", header: "Reminder"}
 ]);
 
-const helpVisible: Ref<boolean> = ref(false);
-
-const placeholders = ref([
-  { placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
-  { placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
-]);
-
 async function finalStep() {
   const token: string = await createIndividualFeed(moduleStore().modules);
   tokenStore().setToken(token);
@@ -38,26 +32,7 @@ async function finalStep() {
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h3>Configure your selected Modules to your liking.</h3>
-        <i class="shadow-3 hover:shadow-8 pi pi-info-circle m-2" style="font-size: 1.5rem; color: orange" @click="helpVisible = true"></i>
+      <ModuleTemplateDialog />
-      <Dialog
-        v-model:visible="helpVisible"
-        header="Module placeholders" 
-      >
-        <p>
-          Here you can rename your modules to your liking. This will be the name
-          of the event in your calendar.
-        </p>
-        <p>
-          You can use the following placeholders in your module names:
-        </p>
-        <DataTable
-          :value="placeholders"
-        > 
-          <Column field="placeholder" header="Placeholder"></Column>
-          <Column field="description" header="Description"></Column>
-          <Column field="examples" header="Examples"></Column>
-        </DataTable>
-      </Dialog>
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
       <DataTable

frontend/src/components/editCalendar/EditModules.vue

@@ -6,6 +6,7 @@ import { fetchAllModules } from "../../api/fetchCourse";
 import { saveIndividualFeed } from "../../api/createFeed";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
+import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
 
 const tableData = computed(() =>
   moduleStore().modules.map((module: Module) => {
@@ -48,8 +49,12 @@ async function finalStep() {
 
 <template>
   <div class="flex flex-column card-container mx-8 mt-2">
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <h3>Rename your selected Modules to your liking.</h3>
+      <ModuleTemplateDialog />
+    </div>
     <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="card flex align-items-center justify-content-center border-round m-2"
     >
       <DataTable
         :value="tableData"