refactor questionnaire editor to sfc, fixes #4303

Closes #4303

Merge request studip/studip!3155

5 files changed, 33 insertions, 210 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}) => {
diff --git a/resources/assets/javascripts/lib/dialog.js b/resources/assets/javascripts/lib/dialog.js
index c602a29..46f9d98 100644
--- a/resources/assets/javascripts/lib/dialog.js
+++ b/resources/assets/javascripts/lib/dialog.js
@@ -420,7 +420,10 @@ Dialog.show = function(content, options = {}) {
     });
 
     // Create buttons
-    if (options.buttons === undefined || (options.buttons && !$.isPlainObject(options.buttons))) {
+    if (
+        options.buttons === undefined
+        || (options.buttons && !$.isPlainObject(options.buttons))
+    ) {
         dialog_options.buttons = extractButtons.call(this, instance.element);
         // Create 'close' button
         if (dialog_options.buttons.cancel === undefined) {
diff --git a/resources/assets/javascripts/lib/questionnaire.js b/resources/assets/javascripts/lib/questionnaire.js
index 9a89348..5251617 100644
--- a/resources/assets/javascripts/lib/questionnaire.js
+++ b/resources/assets/javascripts/lib/questionnaire.js
@@ -1,209 +1,7 @@
-import { $gettext } from '../lib/gettext';
-import md5 from 'md5';
-//import html2canvas from "html2canvas";
-//import {jsPDF} from "jspdf";
+import { $gettext } from './gettext';
 
 const Questionnaire = {
     delayedQueue: [],
-    Editor: null,
-    initEditor () {
-        $('.questionnaire_edit:not(.vueified)').addClass('vueified').each(function () {
-            STUDIP.Vue.load().then(({createApp}) => {
-                let form = this;
-                let components = {};
-                let questiontypes = $(form).data('questiontypes');
-                for (let i in questiontypes) {
-                    if (questiontypes[i].component[0] && questiontypes[i].component[1]) {
-                        //for plugins to be able to import their vue components:
-                        components[questiontypes[i].component[0]] = () => import(/* webpackIgnore: true */ questiontypes[i].component[1]);
-                    }
-                }
-                components.draggable = () => import('vuedraggable');
-                components['vote-edit'] = () => import('../../../vue/components/questionnaires/VoteEdit.vue');
-                components['freetext-edit'] = () => import('../../../vue/components/questionnaires/FreetextEdit.vue');
-                components['likert-edit'] = () => import('../../../vue/components/questionnaires/LikertEdit.vue');
-                components['rangescale-edit'] = () => import('../../../vue/components/questionnaires/RangescaleEdit.vue');
-                components['questionnaire-info-edit'] = () => import('../../../vue/components/questionnaires/QuestionnaireInfoEdit.vue');
-                STUDIP.Questionnaire.Editor = createApp({
-                    el: form,
-                    components,
-                    data() {
-                        return {
-                            questiontypes,
-
-                            questions: $(form).data('questions_data'),
-                            activeTab: 'admin',
-                            hoverTab: null,
-                            data: $(form).data('questionnaire_data'),
-                            form_secured: true,
-                            oldData: {
-                                questions: [],
-                                data: {}
-                            },
-                            range_type: $(form).data('range_type'),
-                            range_id: $(form).data('range_id'),
-                            editInternalName: null,
-                            tempInternalName: '',
-                            validationNotice: false,
-                        };
-                    },
-                    methods: {
-                        addQuestion(questiontype) {
-                            let id = md5(STUDIP.USER_ID + '_QUESTIONTYPE_' + Math.random());
-
-                            this.questions.push({
-                                id: id,
-                                questiontype: questiontype,
-                                internal_name: '',
-                                questiondata: {},
-                            });
-
-                            this.activeTab = id;
-                        },
-                        submit() {
-                            if (!this.data.title) {
-                                this.switchTab('admin');
-                                this.validationNotice = true;
-                                return;
-                            }
-                            let data = {
-                                title: this.data.title,
-                                copyable: this.data.copyable,
-                                anonymous: this.data.anonymous,
-                                editanswers: this.data.editanswers,
-                                startdate: this.data.startdate,
-                                stopdate: this.data.stopdate,
-                                resultvisibility: this.data.resultvisibility
-                            };
-                            let questions = [];
-                            for (let i in this.questions) {
-                                questions.push({
-                                    id: this.questions[i].id,
-                                    questiontype: this.questions[i].questiontype,
-                                    internal_name: this.questions[i].internal_name,
-                                    questiondata: Object.assign({}, this.questions[i].questiondata),
-                                });
-                            }
-                            $.post(STUDIP.URLHelper.getURL('dispatch.php/questionnaire/store/' + (this.data.id || '')), {
-                                questionnaire: data,
-                                questions_data: JSON.stringify(questions),
-                                range_type: this.range_type,
-                                range_id: this.range_id
-                            }).done(() => {
-                                this.form_secured = false;
-                                this.$nextTick(() => {
-                                    location.reload();
-                                });
-                            }).fail(() => {
-                                STUDIP.Report.error('Could not save questionnaire.');
-                            });
-                        },
-                        getIndexForQuestion: function (question_id) {
-                            for (let i in this.questions) {
-                                if (this.questions[i].id === question_id || this.questions[i].id === question_id.substring(5)) {
-                                    return typeof i === "string" ? parseInt(i, 10) : i;
-                                }
-                            }
-                        },
-                        duplicateQuestion: function (question_id) {
-                            let i = this.getIndexForQuestion(question_id);
-                            let id = md5(STUDIP.USER_ID + '_QUESTIONTYPE_' + Math.random());
-                            this.questions.push({
-                                id: id,
-                                questiontype: this.questions[i].questiontype,
-                                internal_name: this.questions[i].internal_name,
-                                questiondata: JSON.parse(JSON.stringify(this.questions[i].questiondata)),
-                            });
-                            this.activeTab = id;
-                        },
-                        deleteQuestion(question_id) {
-                            STUDIP.Dialog.confirm(this.$gettext('Wirklich löschen?')).done(() => {
-                                this.$delete(this.questions, this.getIndexForQuestion(question_id));
-                                this.switchTab('add_question');
-                            })
-                        },
-                        switchTab(tab_id) {
-                            this.activeTab = tab_id;
-                            this.$nextTick(function () {
-                                if (this.$refs.autofocus !== undefined) {
-                                    if (Array.isArray(this.$refs.autofocus)) {
-                                        if (typeof this.$refs.autofocus[0] !== "undefined") {
-                                            this.$refs.autofocus[0].focus();
-                                        }
-                                    } else {
-                                        this.$refs.autofocus.focus();
-                                    }
-                                }
-                            });
-                        },
-                        objectsEqual(obj1, obj2) {
-                            return _.isEqual(obj1, obj2);
-                        },
-                        renameInternalName(question_id) {
-                            this.editInternalName = question_id;
-                            let index = this.getIndexForQuestion(question_id);
-                            this.tempInternalName = this.questions[index].internal_name;
-                            this.$nextTick(() => {
-                                this.$refs.editInternalName[0].focus();
-                            });
-                        },
-                        saveInternalName(question_id) {
-                            let index = this.getIndexForQuestion(question_id);
-                            this.questions[index].internal_name = this.tempInternalName;
-                            this.editInternalName = null;
-                        },
-                        moveQuestionDown(question_id) {
-                            let index = this.getIndexForQuestion(question_id);
-                            if (index < this.questions.length - 1) {
-                                let question = this.questions[index];
-                                this.questions[index] = this.questions[index + 1];
-                                this.questions[index + 1] = question;
-                                this.$forceUpdate();
-                            }
-                        },
-                        moveQuestionUp(question_id) {
-                            let index = this.getIndexForQuestion(question_id);
-                            if (index > 0) {
-                                let question = this.questions[index];
-                                this.questions[index] = this.questions[index - 1];
-                                this.questions[index - 1] = question;
-                                this.$forceUpdate();
-                            }
-                        }
-                    },
-                    computed: {
-                        activateFormSecure() {
-                            let newData = {
-                                questions: this.questions,
-                                data: this.data
-                            };
-                            return this.form_secured && !this.objectsEqual(this.oldData, newData);
-                        },
-                        indexForQuestion() {
-                            for (let i in this.questions) {
-                                if (
-                                    this.questions[i].id === this.activeTab ||
-                                    this.questions[i].id === this.activeTab.substring(5)
-                                ) {
-                                    return typeof i === "string" ? parseInt(i, 10) : i;
-                                }
-                            }
-
-                            return null;
-                        },
-                    },
-                    mounted() {
-                        this.$refs.autofocus.focus();
-                        this.oldData = {
-                            questions: [...this.questions],
-                            data: Object.assign({}, this.data)
-                        };
-                    },
-                });
-
-            });
-        });
-    },
     delayedInterval: null,
     lastUpdate: null,
     filtered: {},