demarches-normaliennes/app/javascript/new_design/administrateur/champs-editor.js

91 lines
2 KiB
JavaScript
Raw Normal View History

2018-11-14 16:26:00 +01:00
import Vue from 'vue';
import Draggable from 'vuedraggable';
2019-02-08 17:37:39 +01:00
import VueScrollTo from 'vue-scrollto';
2018-11-14 16:26:00 +01:00
import DraggableItem from './DraggableItem';
import DraggableList from './DraggableList';
Vue.component('Draggable', Draggable);
Vue.component('DraggableItem', DraggableItem);
2019-02-08 17:37:39 +01:00
Vue.use(VueScrollTo, { duration: 1500, easing: 'ease' });
2018-11-14 16:26:00 +01:00
addEventListener('DOMContentLoaded', () => {
const el = document.querySelector('#champs-editor');
if (el) {
initEditor(el);
}
});
function initEditor(el) {
const { directUploadUrl, dragIconUrl, saveUrl } = el.dataset;
2018-11-14 16:26:00 +01:00
const state = {
typesDeChamp: JSON.parse(el.dataset.typesDeChamp),
typesDeChampOptions: JSON.parse(el.dataset.typesDeChampOptions),
directUploadUrl,
2018-11-14 16:26:00 +01:00
dragIconUrl,
saveUrl,
2018-11-14 16:26:00 +01:00
isAnnotation: el.dataset.type === 'annotation',
prefix: 'procedure',
inFlight: 0,
flash: new Flash()
2018-11-14 16:26:00 +01:00
};
// We add an initial type de champ here if form is empty
if (state.typesDeChamp.length === 0) {
state.typesDeChamp.push({
type_champ: 'text',
types_de_champ: []
});
}
2018-11-14 16:26:00 +01:00
new Vue({
el,
data: {
state
2018-11-14 16:26:00 +01:00
},
render(h) {
return h(DraggableList, {
props: {
state: this.state
2018-11-14 16:26:00 +01:00
}
});
}
});
}
2018-11-14 16:26:00 +01:00
class Flash {
constructor(isAnnotation) {
this.element = document.querySelector('#flash_messages');
this.isAnnotation = isAnnotation;
}
success() {
if (this.isAnnotation) {
this.add('Annotations privées enregistrées.');
2018-11-14 16:26:00 +01:00
} else {
this.add('Formulaire enregistré.');
2018-11-14 16:26:00 +01:00
}
}
error(message) {
this.add(message, true);
}
clear() {
this.element.innerHTML = '';
}
add(message, isError) {
const html = `<div id="flash_message" class="center">
<div class="alert alert-fixed ${
isError ? 'alert-danger' : 'alert-success'
}">
${message}
</div>
</div>`;
2018-11-14 16:26:00 +01:00
this.element.innerHTML = html;
2018-11-14 16:26:00 +01:00
setTimeout(() => {
this.clear();
}, 6000);
2018-11-14 16:26:00 +01:00
}
}