refactor questionnaire editor to sfc, fixes #4303

Closes #4303

Merge request studip/studip!3155

3 files changed, 28 insertions, 6 deletions

diff --git a/resources/assets/javascripts/bootstrap/dialog.js b/resources/assets/javascripts/bootstrap/dialog.js
index f186307..58d01fd 100644
--- a/resources/assets/javascripts/bootstrap/dialog.js
+++ b/resources/assets/javascripts/bootstrap/dialog.js
@@ -1,3 +1,8 @@
 STUDIP.domReady(function () {
     STUDIP.Dialog.initialize();
 });
+
+$(document).on('click', '[data-vue-app] [data-dialog-button] .cancel.button', () => {
+    STUDIP.Dialog.close();
+    return false;
+});
diff --git a/resources/assets/javascripts/bootstrap/questionnaire.js b/resources/assets/javascripts/bootstrap/questionnaire.js
index 4970b64..3b31764 100644
--- a/resources/assets/javascripts/bootstrap/questionnaire.js
+++ b/resources/assets/javascripts/bootstrap/questionnaire.js
@@ -1,8 +1,3 @@
-import {dialogReady, ready} from "../lib/ready";
-STUDIP.ready(() => {
-    STUDIP.Questionnaire.initEditor();
-});
-
 jQuery(document).on('change', '.show_validation_hints .questionnaire_answer [data-question_type=Vote] input', function() {
     STUDIP.Questionnaire.Vote.validator.call($(this).closest("article")[0]);
 });
diff --git a/resources/assets/javascripts/bootstrap/vue.js b/resources/assets/javascripts/bootstrap/vue.js
index 64d2492..637241a 100644
--- a/resources/assets/javascripts/bootstrap/vue.js
+++ b/resources/assets/javascripts/bootstrap/vue.js
@@ -11,7 +11,29 @@ STUDIP.ready(() => {
         let components = {};
         config.components.forEach(component => {
             const name = component.split('/').reverse()[0];
-            components[name] = () => import(`../../../vue/components/${component}.vue`);
+            components[name] = () => {
+                // TODO: I wonder if this works with Vue3
+
+                const temp = import(`../../../vue/components/${component}.vue`);
+                temp.then(({default: c}) => {
+                    const mounted = c.mounted ?? null;
+                    c.mounted = function (...args) {
+                        if (
+                            this.$el instanceof Element
+                            && this.$el.querySelector('[data-dialog-button]')
+                        ) {
+                            this.$el.closest('.studip-dialog')
+                                .querySelector('.ui-dialog-buttonpane')
+                                .remove();
+                        }
+                        if (mounted) {
+                            mounted.call(this, args);
+                        }
+                    };
+                    return c;
+                })
+                return temp;
+            };
         });
 
         STUDIP.Vue.load().then(async ({createApp, store}) => {