feat:#11 dialog showing placeholders for renaming

frontend/src/components/RenameModules.vue

@@ -3,7 +3,7 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { ref } from "vue";
+import { Ref, ref } from "vue";
 
 const tableData = ref(
   moduleStore().modules.map((module) => {
@@ -19,6 +19,13 @@ const columns = ref([
   { field: "Module", header: "Module" },
 ]);
 
+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);
@@ -29,7 +36,28 @@ async function finalStep() {
 <template>
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>Rename your selected Modules to your liking.</h3>
+      <h3>Rename your selected Modules to your liking.
+        <i class="pi pi-info-circle" @click="helpVisible = true"></i>
+      </h3>
+      <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/main.ts

@@ -8,6 +8,7 @@ import Menubar from "primevue/menubar";
 import InputText from "primevue/inputtext";
 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 "primeicons/primeicons.css";
@@ -15,6 +16,7 @@ import "primeflex/primeflex.css";
 import router from "./router";
 import TabView from "primevue/tabview";
 import TabPanel from "primevue/tabpanel";
+import Tag from "primevue/tag";
 import { createPinia } from "pinia";
 import MultiSelect from "primevue/multiselect";
 import ToastService from "primevue/toastservice";
@@ -37,6 +39,7 @@ app.use(pinia);
 app.use(DialogService);
 app.component("Button", Button);
 app.component("Menubar", Menubar);
+app.component("Dialog", Dialog);
 app.component("Dropdown", Dropdown);
 app.component("InputText", InputText);
 app.component("Card", Card);
@@ -45,6 +48,7 @@ app.component("ToggleButton", ToggleButton);
 app.component("TabView", TabView);
 app.component("TabPanel", TabPanel);
 app.component("MultiSelect", MultiSelect);
+app.component("Tag", Tag);
 app.component("Toast", Toast);
 app.component("Accordion", Accordion);
 app.component("AccordionTab", AccordionTab);