added information button

frontend/src/components/AdditionalModules.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
-import { ref, Ref } from "vue";
+import { defineAsyncComponent, ref, Ref } from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
 import { MultiSelectAllChangeEvent } from "primevue/multiselect";
 
+import { useDialog } from "primevue/usedialog";
+const dialog = useDialog();
+
 import router from "../router";
 
 const fetchedModules = async () => {
@@ -30,6 +33,27 @@ async function nextStep() {
   await router.push("/rename-modules");
 }
 
+const ModuleInformation = defineAsyncComponent(
+  () => import("./ModuleInformation.vue"),
+);
+
+//TODO add missing module prop informations for ModuleInformation.vue
+const showInfo = () => {
+  dialog.open(ModuleInformation, {
+    props: {
+      header: "Product List",
+      style: {
+        width: "50vw",
+      },
+      breakpoints: {
+        "960px": "75vw",
+        "640px": "90vw",
+      },
+      modal: true,
+    },
+  });
+};
+
 const display = (module: Module) => module.name + " (" + module.course + ")";
 
 const selectAll = ref(false);
@@ -69,10 +93,23 @@ function selectChange() {
         @selectall-change="onSelectAllChange($event)"
       >
         <template #option="slotProps">
-          <div class="flex align-items-center">
-            <p class="text-1xl white-space-normal">
-              {{ display(slotProps.option) }}
-            </p>
+          <div class="flex justify-content-between w-full">
+            <div class="flex align-items-center justify-content-center">
+              <p class="text-1xl white-space-normal p-mb-0">
+                {{ display(slotProps.option) }}
+              </p>
+            </div>
+            <div class="flex align-items-center justify-content-center ml-2">
+              <Button
+                icon="pi pi-info"
+                severity="secondary"
+                rounded
+                outlined
+                aria-label="Information"
+                @click.stop="showInfo()"
+              ></Button>
+              <DynamicDialog />
+            </div>
           </div>
         </template>
         <template #footer>

frontend/src/components/ModuleInformation.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { PropType } from "vue";
+import { Module } from "../model/module.ts";
+
+const props = defineProps({
+  module: {
+    type: Object as PropType<Module>,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div>
+    <h2>{{ props.module.name }}</h2>
+    <table>
+      <tr>
+        <td>Course:</td>
+        <td>{{ props.module.course }}</td>
+      </tr>
+      <tr>
+        <td>ID:</td>
+        <td>{{ props.module.id }}</td>
+      </tr>
+    </table>
+  </div>
+</template>

frontend/src/main.ts

@@ -23,6 +23,8 @@ import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
+import DynamicDialog from 'primevue/dynamicdialog';
+import DialogService from 'primevue/dialogservice';
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -31,6 +33,7 @@ app.use(PrimeVue);
 app.use(router);
 app.use(ToastService);
 app.use(pinia);
+app.use(DialogService);
 app.component("Button", Button);
 app.component("Menubar", Menubar);
 app.component("Dropdown", Dropdown);
@@ -46,4 +49,5 @@ app.component("Accordion", Accordion);
 app.component("AccordionTab", AccordionTab);
 app.component("DataTable", DataTable);
 app.component("Column", Column);
+app.component("DynamicDialog", DynamicDialog);
 app.mount("#app");