refactor questionnaire editor to sfc, fixes #4303

Closes #4303

Merge request studip/studip!3155

1 files changed, 1 insertions, 203 deletions

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: {},