15 demo of global dialog with reactive state

frontend/src/App.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
+import CalendarPreview from "./components/CalendarPreview.vue";
 </script>
 
 <template>
   <MenuBar />
   <router-view></router-view>
+  <CalendarPreview />
 </template>
 
 <style scoped></style>

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) =>
+      selected: store.hasModule(propModule)
-        module.isEqual ? module.isEqual(propModule) : false,
-      ),
     };
   }),
 );
@@ -48,11 +47,12 @@ watch(currentModules, (newValue: Module[]) => {
   });
 });
 
-function nextStep() {
+// TODO: Refactor and directly use store hashmap
-  selectedModules.value.forEach((module: Module) => {
+watch(selectedModules, (newValue: Module[]) => {
-    moduleStore().addModule(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>

frontend/src/main.ts

@@ -15,6 +15,7 @@ import "primevue/resources/themes/viva-dark/theme.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 import router from "./router";
+import SpeedDial from "primevue/speeddial";
 import TabView from "primevue/tabview";
 import TabPanel from "primevue/tabpanel";
 import Tag from "primevue/tag";
@@ -47,6 +48,7 @@ app.component("InputSwitch", InputSwitch);
 app.component("Card", Card);
 app.component("DataView", DataView);
 app.component("ToggleButton", ToggleButton);
+app.component("SpeedDial", SpeedDial);
 app.component("TabView", TabView);
 app.component("TabPanel", TabPanel);
 app.component("MultiSelect", MultiSelect);

frontend/src/model/module.ts

@@ -12,7 +12,7 @@ export class Module {
     public events: Event[] = [],
   ) {}
 
-  isEqual(module: Module): Boolean {
+  isEqual(module: Module): boolean {
     return this.name === module.name && this.course === module.course;
   }
 }

frontend/src/store/moduleStore.ts

@@ -3,17 +3,30 @@ import { defineStore } from "pinia";
 
 const moduleStore = defineStore("moduleStore", {
   state: () => ({
-    modules: [] as Module[],
+    modules: new Map<string, Module>(),
   }),
   actions: {
     addModule(module: Module) {
-      this.modules.push(module);
+      this.modules.set(module.uuid, module);
     },
     removeModule(module: Module) {
-      this.modules.splice(this.modules.indexOf(module), 1);
+      this.modules.delete(module.uuid);
+    },
+    hasModule(module: Module): boolean {
+      return this.modules.has(module.uuid) &&
+        (this.modules.get(module.uuid)?.isEqual(module) ?? false);
     },
     removeAllModules() {
-      this.modules = [];
+      this.modules.clear();
+    },
+    overwriteModules(modules: Module[]) {
+      this.modules.clear();
+      modules.forEach((module) => {
+        this.modules.set(module.uuid, module);
+      });
+    },
+    getAllModules(): Module[] {
+      return Array.from(this.modules.values());
     },
   },
 });

frontend/src/style.css

@@ -1,3 +1,10 @@
 body {
   font-family: var(--font-family);
 }
+
+.small-button.p-button.p-button-icon-only,
+.small-button.p-button.p-button-icon-only.p-button-rounded {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}