Commit 7183e533 authored by GuiΩ's avatar GuiΩ
Browse files

Draggable & Resizable question editor

parent 167d2255
......@@ -15,6 +15,7 @@
"core-js": "^3.6.5",
"serve": "^11.3.2",
"vue": "^2.6.11",
"vue-js-modal": "^2.0.1",
"vue-loader": "^15.9.6",
"vue-resource": "^1.5.1",
"vue-router": "^3.5.1"
......@@ -22,7 +23,7 @@
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"axios": "^0.21.1",
"axios": "^0.21.4",
"css-loader": "^3.6.0",
"cypress": "^6.5.0",
"style-loader": "^2.0.0",
......
<!--
Composant Vuejs qui affiche une fenêtre modale contenant un message
Composant Vuejs qui affiche une fenêtre modale pour éditer une question
Props:
message (String) - message à afficher
show (Boolean) - si vrai, la fenêtre est affichée
Events:
Events:
-->
<template>
<div v-if="show" data-testid="question-editor">
<div id="question-editor">
<div class="modal-wrapper">
<div class="modal-container">
<modal name="question-editor"
classes="question-editor"
adaptative="true"
height="550"
width="750"
:min-width="650"
:min-height=550
:draggable="true"
:resizable="true"
:scrollable="true"
:clickToClose="false"
@opened="opened">
<div class="editor-content">
<h2>{{ question.id ? 'Question ' + question.id : 'Nouvelle question' }}</h2>
<div class="content">
<div id="code-panel">
......@@ -62,7 +66,7 @@ Composant Vuejs qui affiche une fenêtre modale contenant un message
<!-- <button type="button">-->
<!-- Supprimer-->
<!-- </button>-->
<button data-testid="cancel" type="button" @click="show = false">
<button data-testid="cancel" type="button" @click="$modal.hide('question-editor')">
Annuler
</button>
</td>
......@@ -81,14 +85,16 @@ Composant Vuejs qui affiche une fenêtre modale contenant un message
@selection-changed="question.themes = $event"/>
</div>
</div>
</div>
</div>
</div>
</div>
</modal>
</template>
<script>
import ThemeTree from "@/components/ThemeTree";
import VModal from 'vue-js-modal';
import Vue from 'vue';
//
Vue.use(VModal, { name: 'modal'});
export default {
name: 'QuestionEditor',
......@@ -123,30 +129,31 @@ export default {
this.$store.commit('questions/QUESTION_SAVE_INIT')
this.oldQuestion = null;
this.question = {themes: []};
this.show = true;
this.$modal.show('question-editor');
this.question = JSON.parse(JSON.stringify(this.$store.getters["questions/question"](question_id)))
this.question.id = null
this.question.avalider = false
this.question.validee = false
this.$nextTick(() => this.$refs.themeTree.initOpenThemes())
},
edit(question_id = null) {
this.$store.commit("questions/QUESTION_SAVE_INIT")
this.oldQuestion = null
this.question = {themes: [], positions: {}};
this.show = true;
this.$modal.show('question-editor');
if (question_id) {
this.oldQuestion = this.$store.getters['questions/question'](question_id)
this.question = JSON.parse(JSON.stringify(this.oldQuestion))
}
this.$nextTick(() => this.$refs.themeTree.initOpenThemes())
},
opened(event) {
this.$refs.themeTree.initOpenThemes();
},
save() {
this.$el.style['cursor'] = 'wait';
this.$store.dispatch('questions/saveQuestion', {oldQuestion: this.oldQuestion, newQuestion: this.question})
.then(() => {
if (this.$store.getters["questions/questionSaveStatus"])
this.show = false
this.$modal.hide('question-editor');
this.$el.style['cursor'] = 'default';
})
},
......@@ -154,36 +161,20 @@ export default {
}
</script>
<style scoped>
#question-editor {
position: fixed;
z-index: 9900;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
<style>
.vm--overlay[data-modal='question-editor'] {
background-color: rgba(0, 0, 0, .6);
}
.modal-container {
width: 800px;
margin: 0 auto;
padding: 20px 30px;
background-color: #eff0f1;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
font-family: Helvetica, Arial, sans-serif;
.question-editor {
border-style: double;
border-radius: 10px;
padding: 0px 10px;
margin-top: 0px;
}
.question-editor h2 {
margin: 0px;
text-align: center;
}
......@@ -196,7 +187,7 @@ export default {
}
#themes-panel {
height: 600px;
height: 500px;
overflow-y: auto;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment