mirrors/fluentd-ui
1
0
Fork 0
mirror of https://github.com/fluent/fluentd-ui.git synced 2025-08-19 05:21:01 +02:00
Code Issues Projects Releases Wiki Activity

Update config-editor directive

Browse Source 
Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
This commit is contained in:
Kenji Okimoto 2018-05-21 14:39:35 +09:00
parent 8c2b31ebd1
commit 3fe0bb73af
3 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/packs/codemirror.js
View File

@ -1,4 +1,5 @@
import CodeMirror from 'codemirror/lib/codemirror' import CodeMirror from 'codemirror/lib/codemirror'
import 'lodash/lodash'
// See: http://codemirror.net/doc/manual.html#modeapi // See: http://codemirror.net/doc/manual.html#modeapi
// and sample mode files: https://github.com/codemirror/CodeMirror/tree/master/mode // and sample mode files: https://github.com/codemirror/CodeMirror/tree/master/mode
@ -75,16 +76,15 @@ $(function(){
}); });
Vue.directive('config-editor', { Vue.directive('config-editor', {
bind: function(){ bind: function(el, binding, vnode, oldVnode){
var $parent = this.vm;
// NOTE: needed delay for waiting CodeMirror setup // NOTE: needed delay for waiting CodeMirror setup
_.delay(function(textarea){ _.delay(function(textarea){
var cm = codemirrorify(textarea); let cm = codemirrorify(textarea);
// textarea.codemirror = cm; // for test, but doesn't work for now (working on Chrome, but Poltergeist not) // textarea.codemirror = cm; // for test, but doesn't work for now (working on Chrome, but Poltergeist not)
cm.on('change', function(code_mirror){ cm.on('change', function(code_mirror){
// bridge Vue - CodeMirror world // bridge Vue - CodeMirror world
$parent.editContent = code_mirror.getValue(); el.dataset.content = code_mirror.getValue();
}); });
}, 0, this.el); }, 0, el);
} }
}); });

7
app/javascript/packs/settings.js
View File

@ -5,8 +5,7 @@ $(document).ready(() => {
data: function() { data: function() {
return { return {
mode: 'default', mode: 'default',
processing: false, processing: false
editContent: null
}; };
}, },
created: function() { created: function() {
@ -33,13 +32,14 @@ $(document).ready(() => {
onSubmit: function(ev) { onSubmit: function(ev) {
const token = document.getElementsByName("csrf-token")[0].getAttribute('content'); const token = document.getElementsByName("csrf-token")[0].getAttribute('content');
this.processing = true; this.processing = true;
this.content = $(`#${this.id} textarea.form-control`)[0].dataset.content;
$.ajax({ $.ajax({
url: this.endpoint, url: this.endpoint,
method: "POST", method: "POST",
data: { data: {
_method: "PATCH", _method: "PATCH",
id: this.id, id: this.id,
content: this.editContent content: this.content
}, },
headers: { headers: {
'X-CSRF-Token': token 'X-CSRF-Token': token
@ -56,7 +56,6 @@ $(document).ready(() => {
initialState: function(){ initialState: function(){
this.processing = false; this.processing = false;
this.mode = 'default'; this.mode = 'default';
this.editContent = this.content;
}, },
destroy: function(){ destroy: function(){
const token = document.getElementsByName("csrf-token")[0].getAttribute('content'); const token = document.getElementsByName("csrf-token")[0].getAttribute('content');

2
app/views/shared/vue/_setting.html.erb
View File

@ -11,7 +11,7 @@
<div class="card-body collapse" v-bind:id="id"> <div class="card-body collapse" v-bind:id="id">
<pre v-if="mode != 'edit'">{{ content }}</pre> <pre v-if="mode != 'edit'">{{ content }}</pre>
<p v-if="mode == 'edit'"> <p v-if="mode == 'edit'">
<textarea v-config-editor class="form-control" v-model="editContent" v-bind:disabled="processing"></textarea> <textarea v-config-editor class="form-control" v-model="content" v-bind:disabled="processing"></textarea>
</p> </p>
<p class="float-right"> <p class="float-right">
<button v-if="mode != 'edit'" class="btn btn-secondary" v-on:click="onEdit"><%= t('terms.edit') %></button> <button v-if="mode != 'edit'" class="btn btn-secondary" v-on:click="onEdit"><%= t('terms.edit') %></button>