15 demo of global dialog with reactive state

frontend/src/components/AdditionalModules.vue

@@ -111,6 +111,7 @@ function selectChange() {
                 rounded
                 outlined
                 aria-label="Information"
+                class="small-button"
                 @click.stop="showInfo(slotProps.option)"
               ></Button>
               <DynamicDialog />

frontend/src/components/CalendarPreview.vue

@@ -0,0 +1,86 @@
+
+<script lang="ts" setup>
+import { Ref, computed, ref } from "vue";
+import moduleStore from "../store/moduleStore";
+
+const dialogVisible: Ref<boolean> = ref(false);
+const mobilePage = ref(true);
+
+const store = moduleStore();
+const tableData = computed(() =>
+  store.getAllModules().map((module) => {
+    return {
+      Course: module.course,
+      Module: module.userDefinedName
+    };
+  }),
+);
+
+const previewOn: Ref<boolean> = computed(() => {
+  return moduleStore().modules.size > 0;
+})
+
+const columns = ref([
+  { field: "Course", header: "Course" },
+  { field: "Module", header: "Module" },
+]);
+
+const updateMobile = () => {
+  mobilePage.value = window.innerWidth <= 992;
+};
+
+updateMobile();
+
+window.addEventListener("resize", updateMobile);
+</script>
+
+<template>
+  <Dialog
+    id="calendar-dialog"
+    ref="calendar"
+    :visible="dialogVisible && previewOn"
+    @update:visible="dialogVisible = $event"
+    :maximizable=!mobilePage
+    :draggable=false
+    header="Kalendervorschau"
+    class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
+    position="bottomright"
+    >
+    Hier könnte Ihre Werbung stehen!
+
+    <DataTable
+      :value="tableData"
+      edit-mode="cell"
+      table-class="editable-cells-table"
+      responsive-layout="scroll"
+    >
+      <Column
+        v-for="column in columns"
+        :key="column.field"
+        :field="column.field"
+        :header="column.header"
+        :row-editor="false"
+      >
+        <template #body="{ data, field }">
+          {{ data[field] }}
+        </template>
+      </Column>
+
+    </DataTable>
+  </Dialog>
+  <SpeedDial
+    :style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
+    v-if="previewOn && !dialogVisible"
+    >
+    <template #button>
+      <Button
+        icon="pi pi-calendar"
+        label="Preview"
+        class="p-button-rounded p-button-primary"
+        @click="dialogVisible = true"
+        />
+    </template>
+  </SpeedDial>
+</template>
+
+<style scoped></style>

frontend/src/components/ModuleSelection.vue

@@ -4,6 +4,7 @@ import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
 import router from "../router";
 
+const store = moduleStore();
 const props = defineProps({
   modules: {
     type: Array as PropType<Module[]>,
@@ -18,9 +19,7 @@ const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
   props.modules.map((propModule) => {
     return {
       module: propModule,
-      selected: moduleStore().modules.some((module: Module) =>
-        module.isEqual ? module.isEqual(propModule) : false,
-      ),
+      selected: store.hasModule(propModule)
     };
   }),
 );
@@ -48,11 +47,12 @@ watch(currentModules, (newValue: Module[]) => {
   });
 });
 
-function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
+// TODO: Refactor and directly use store hashmap
+watch(selectedModules, (newValue: Module[]) => {
+  store.overwriteModules(newValue);
+});
 
+function nextStep() {
   router.push("/additional-modules");
 }
 </script>

frontend/src/components/ModuleTemplateDialog.vue

@@ -47,9 +47,5 @@ const placeholders = ref([
 </template>
 
 <style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
+
 </style>

frontend/src/components/RenameModules.vue

@@ -6,8 +6,9 @@ import tokenStore from "../store/tokenStore.ts";
 import { ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 
+const store = moduleStore();
 const tableData = ref(
-  moduleStore().modules.map((module) => {
+  store.getAllModules().map((module) => {
     return {
       Course: module.course,
       Module: module,
@@ -22,7 +23,7 @@ const columns = ref([
 ]);
 
 async function finalStep() {
-  const token: string = await createIndividualFeed(moduleStore().modules);
+  const token: string = await createIndividualFeed(store.getAllModules());
   tokenStore().setToken(token);
   await router.push("/calendar-link");
 }
@@ -122,9 +123,4 @@ async function finalStep() {
 </template>
 
 <style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
 </style>

frontend/src/components/editCalendar/EditModules.vue

@@ -8,8 +8,9 @@ import tokenStore from "../../store/tokenStore";
 import router from "../../router";
 import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
 
+const store = moduleStore();
 const tableData = computed(() =>
-  moduleStore().modules.map((module: Module) => {
+  store.getAllModules().map((module: Module) => {
     return {
       Course: module.course,
       Module: module,
@@ -42,7 +43,7 @@ fetchedModules().then(
 );
 
 async function finalStep() {
-  await saveIndividualFeed(tokenStore().token, moduleStore().modules);
+  await saveIndividualFeed(tokenStore().token, store.getAllModules());
   await router.push("/calendar-link");
 }
 </script>
@@ -150,9 +151,4 @@ async function finalStep() {
 </template>
 
 <style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
 </style>