mount and unmount handling

3 files changed, 15 insertions, 15 deletions

diff --git a/resources/assets/javascripts/lib/forms.js b/resources/assets/javascripts/lib/forms.js
index 19c85c6..e4d54a2 100644
--- a/resources/assets/javascripts/lib/forms.js
+++ b/resources/assets/javascripts/lib/forms.js
@@ -249,7 +249,7 @@ const Forms = {
                         }
                     });
                     const instance = app.mount(f);
-                    STUDIP.Vue.emit('form.mounted', instance);
+                    STUDIP.Vue.emit('form.mounted', {app: app, instance: instance});
                 }
             });
         });
diff --git a/resources/assets/javascripts/lib/studip-vue.js b/resources/assets/javascripts/lib/studip-vue.js
index cf9d5ff..c8aa096 100644
--- a/resources/assets/javascripts/lib/studip-vue.js
+++ b/resources/assets/javascripts/lib/studip-vue.js
@@ -65,7 +65,7 @@ class Vue
 
         const instance = app.mount(node);
 
-        STUDIP.Vue.emit('vueApp.mounted', instance);
+        STUDIP.Vue.emit('vueApp.mounted', { config: config, app: app, instance: instance});
 
         this.handleDialogClose(node, app);
     }
diff --git a/resources/vue/apps/StudipWizard.vue b/resources/vue/apps/StudipWizard.vue
index 9b9b952..caab138 100644
--- a/resources/vue/apps/StudipWizard.vue
+++ b/resources/vue/apps/StudipWizard.vue
@@ -70,7 +70,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, provide} from 'vue';
 import {$gettext} from '@/assets/javascripts/lib/gettext';
 import {useWizardStore} from '@/vue/store/pinia/wizardStore';
 import SidebarWidget from '@/vue/components/SidebarWidget';
@@ -86,13 +86,15 @@ const props = defineProps({
     }
 });
 
+provide('storedValues', { value1: 'Foo', value2: 'Bar'});
+
 // Reference to the DOM node where the included components will be mounted
 const node = ref(null);
 // Number of the current step
 const currentStep = ref(0);
 // HTML content of current step
 let stepContent = ref('');
-let mountedInstance = null;
+let mountedApp = null;
 
 const visibleSteps = ref(props.showAllSteps ? props.steps : [props.steps[0]]);
 
@@ -102,9 +104,8 @@ const jumpToStep = (number) => {
     if (!visibleSteps.value.includes(props.steps[number])) {
         visibleSteps.value[number] = props.steps[number];
     }
-    if (mountedInstance !== null) {
-        //mountedInstance.unmount();
-        //mountedInstance.submit(new Event('submit'));
+    if (mountedApp !== null) {
+        mountedApp.unmount();
     }
     currentStep.value = number;
     initializeContent(number);
@@ -115,26 +116,25 @@ const finishWizard = () => {
 };
 
 const initializeContent = async (stepNumber) => {
+    stepContent.value = JSON.parse(props.steps[stepNumber].content);
     if (props.steps[stepNumber].type === 'Studip\\Forms\\Form') {
         STUDIP.Forms.create(node.value.childNodes);
     } else if (props.steps[stepNumber].type === 'Studip\\VueApp') {
         STUDIP.Vue.mountApp(node.value, props.steps[stepNumber].content);
     }
-    stepContent.value = props.steps[stepNumber].content;
 };
 
 onMounted(() => {
     initializeContent(0);
     store.initialize();
 
-    STUDIP.Vue.on('form.mounted', (instance) => {
-        mountedInstance = instance;
+    STUDIP.Vue.on('form.mounted', (mounted) => {
+        mountedApp = mounted.app;
     });
-    STUDIP.Vue.on('vueApp.mounted', (instance) => {
-        const internal = instance.$;
-        const component = internal.type;
-        console.log('Mounted instance', component);
-        mountedInstance = instance;
+    STUDIP.Vue.on('vueApp.mounted', (mounted) => {
+        if (mounted.config.appPath === stepContent.value.appPath) {
+            mountedApp = mounted.app;
+        }
     });
     STUDIP.Vue.on('form.emitValues', (values) => {
         store.setValues(currentStep.value, values);