15 demo of global dialog with reactive state

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>