15 demo of global dialog with reactive state

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>