Commit fe1bd0ef authored by David Foucher's avatar David Foucher

WIP Add vue editor

parent a6b76ac0
Pipeline #2095 failed with stage
in 1 minute and 1 second
......@@ -3685,7 +3685,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
"dev": true,
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
......@@ -3835,7 +3834,6 @@
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
"dev": true,
"requires": {
"object-keys": "^1.0.12"
}
......@@ -4631,8 +4629,7 @@
"extend": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
"dev": true
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
},
"extend-shallow": {
"version": "3.0.2",
......@@ -4743,6 +4740,11 @@
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
"dev": true
},
"fast-diff": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
},
"fast-glob": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
......@@ -5623,8 +5625,7 @@
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"functional-red-black-tree": {
"version": "1.0.1",
......@@ -5803,7 +5804,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"requires": {
"function-bind": "^1.1.1"
}
......@@ -6406,8 +6406,7 @@
"is-arguments": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
"dev": true
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
},
"is-arrayish": {
"version": "0.2.1",
......@@ -6482,8 +6481,7 @@
"is-date-object": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
"dev": true
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
},
"is-descriptor": {
"version": "0.1.6",
......@@ -6616,7 +6614,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
"dev": true,
"requires": {
"has": "^1.0.1"
}
......@@ -7743,14 +7740,12 @@
"object-is": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
"dev": true
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY="
},
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
"dev": true
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
},
"object-visit": {
"version": "1.0.1",
......@@ -8025,6 +8020,11 @@
"no-case": "^2.2.0"
}
},
"parchment": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
},
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
......@@ -8947,6 +8947,41 @@
"integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
"dev": true
},
"quill": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
"requires": {
"clone": "^2.1.1",
"deep-equal": "^1.0.1",
"eventemitter3": "^2.0.3",
"extend": "^3.0.2",
"parchment": "^1.1.4",
"quill-delta": "^3.6.2"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
},
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
}
}
},
"quill-delta": {
"version": "3.6.3",
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
"requires": {
"deep-equal": "^1.0.1",
"extend": "^3.0.2",
"fast-diff": "1.1.2"
}
},
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
......@@ -9079,7 +9114,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz",
"integrity": "sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==",
"dev": true,
"requires": {
"define-properties": "^1.1.2"
}
......@@ -11041,6 +11075,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vue2-editor": {
"version": "2.10.2",
"resolved": "https://registry.npmjs.org/vue2-editor/-/vue2-editor-2.10.2.tgz",
"integrity": "sha512-sjHTPdRoiB9VK9HLSOjFgubxBWHxRydvykqBCNaX7Sv+2KpdWu6AoyguvP5tyEp4ECX7z6PnbBluyD5M57QOng==",
"requires": {
"quill": "^1.3.6"
}
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
......@@ -11,7 +11,8 @@
"core-js": "^3.3.2",
"vue": "^2.6.10",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3"
"vue-router": "^3.1.3",
"vue2-editor": "^2.10.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
......
......@@ -22,18 +22,23 @@
<br>
<h4> {{ this.ruleToShow.name }}</h4>
<br>
<!-- pre>{{ this.ruleToShow.data }}</pre -->
<!-- the demo root element -->
<ul id="demo">
<tree-item
class="item"
:item="ruleTree"
@make-folder="makeFolder"
@add-item="addItem"
></tree-item>
</ul>
<div v-show="this.isEditMode">
<rule-editor ref="editor" :rawRule="ruleToEdit"></rule-editor>
<button @click="save">Enregistrer</button>
<!-- pre>{{ this.ruleToShow.data }}</pre -->
</div>
<div v-show="!this.isEditMode">
<button @click="edit">Edit</button>
<!-- the demo root element -->
<ul id="demo">
<tree-item
class="item"
:item="ruleTree"
@make-folder="makeFolder"
@add-item="addItem"
></tree-item>
</ul>
</div>
</div>
<div v-else>
<h2>Sélectionnez une règle.</h2>
......@@ -53,6 +58,7 @@
<script>
import RulesMenu from './RulesMenu.vue'
import TreeItem from './TreeItem.vue';
import RuleEditor from './RuleEditor.vue';
function Node(name) {
this.name = name;
......@@ -123,7 +129,8 @@ function toTree(lines) { // eslint-disable-line no-unused-vars
name: 'Referentiel',
components: {
RulesMenu,
TreeItem
TreeItem,
RuleEditor
},
methods: {
load: function () {
......@@ -133,15 +140,26 @@ function toTree(lines) { // eslint-disable-line no-unused-vars
}).created;
},
toTree: toTree,
makeFolder: function (item) {
this.$set(item, 'children', [])
this.addItem(item)
edit: function () {
return this.isEditMode=!this.isEditMode
},
save: function() {
this.currentRuleContent = this.$refs.editor.content
this.rules[this.getActiveRuleName()]['data'] = this.currentRuleContent
return this.isEditMode=!this.isEditMode
},
addItem: function (item) {
item.children.push({
name: 'new rule'
});
getActiveRuleName: function() {
return this.windowLocationHash.split('#')[1]
}
//makeFolder: function (item) {
// this.$set(item, 'children', [])
// this.addItem(item)
//},
//addItem: function (item) {
// item.children.push({
// name: 'new rule'
// });
//}
},
computed: {
show: function () {
......@@ -149,19 +167,27 @@ function toTree(lines) { // eslint-disable-line no-unused-vars
},
ruleToShow: function() {
if(this.show) {
return this.rules[this.windowLocationHash.split('#')[1]];
return this.rules[this.getActiveRuleName()];
} return null;
},
ruleTree: function() {
if(this.show) {
return this.toTree(this.rules[this.windowLocationHash.split('#')[1]]['data'].split('\n'));
return this.toTree(this.currentRuleContent.split('\n'));
} return null;
},
ruleToEdit: function() {
if(this.show) {
return this.currentRuleContent;
} return null;
}
},
data: function(){
return {
rules:[],
rules: [],
currentRuleContent: '',
updatedRule: '',
isLoading: true,
isEditMode: false,
windowLocationHash: decodeURI(window.location.hash)
}
},
......@@ -169,6 +195,9 @@ function toTree(lines) { // eslint-disable-line no-unused-vars
this.load();
window.addEventListener('popstate', () => {
this.windowLocationHash = decodeURI(window.location.hash);
if(this.windowLocationHash !== '')
this.currentRuleContent = this.rules[this.getActiveRuleName()]['data']
this.isEditMode = false
})
},
}
......
<template>
<div id="Rule">
<div id="Rule">