From 473fbaf48a83aaaf1dbda44bbf0932312bab6af5 Mon Sep 17 00:00:00 2001 From: Kenji Okimoto Date: Tue, 19 Jun 2018 17:28:30 +0900 Subject: [PATCH] Extract vue component config-field Signed-off-by: Kenji Okimoto --- app/javascript/packs/config_field.js | 61 +++++++++++++++++++ app/javascript/packs/in_tail_parse.js | 4 +- app/javascript/packs/owned_plugin_form.js | 9 +++ app/views/shared/vue/_config_field.html.haml | 49 +++++++++++++++ .../shared/vue/_owned_plugin_form.html.haml | 55 +++-------------- 5 files changed, 128 insertions(+), 50 deletions(-) create mode 100644 app/javascript/packs/config_field.js create mode 100644 app/views/shared/vue/_config_field.html.haml diff --git a/app/javascript/packs/config_field.js b/app/javascript/packs/config_field.js new file mode 100644 index 0000000..2bf022f --- /dev/null +++ b/app/javascript/packs/config_field.js @@ -0,0 +1,61 @@ +'use strict' + +const ConfigField = { + template: "#vue-config-field", + props: [ + "pluginType", + "option", + "initialExpression", + "initialTimeFormat", + ], + + data: function() { + return { + expression: null, + timeFormat: null + } + }, + + mounted: function() { + this.expression = this.initialExpression + this.timeFormat = this.initialTimeFormat + this.$on("hook:updated", () => { + console.log("hook:updated") + $("[data-toggle=tooltip]").tooltip("dispose") + $("[data-toggle=tooltip]").tooltip("enable") + }) + }, + + watch: { + "expression": function(newValue, oldValue) { + this.$emit("change-parse-config", { + "expression": this.expression, + "timeFormat": this.timeFormat + }) + }, + "timeFormat": function(newValue, oldValue) { + this.$emit("change-parse-config", { + "expression": this.expression, + "timeFormat": this.timeFormat + }) + } + }, + + methods: { + inputId: function(pluginType, option) { + return `setting_${pluginType}_0__${option.name}` + }, + inputName: function(pluginType, option) { + return `setting[${pluginType}[0]][${option.name}]` + }, + checked: function(checked) { + if (checked === true || checked === "true") { + return "checked" + } else { + return "" + } + } + } +} + +export { ConfigField as default } diff --git a/app/javascript/packs/in_tail_parse.js b/app/javascript/packs/in_tail_parse.js index 9cf205a..5e2194e 100644 --- a/app/javascript/packs/in_tail_parse.js +++ b/app/javascript/packs/in_tail_parse.js @@ -49,12 +49,12 @@ $(document).ready(() => { }, methods: { onChangePluginName: function(name) { - console.log("onChangePluginName") + console.log("#in-tail-parse onChangePluginName", name) this.parseType = name this.parse = {} // clear parser plugin configuration }, onChangeParseConfig: function(data) { - console.log("onChangeParseConfig", data) + console.log("#in-tail-parse onChangeParseConfig", data) _.merge(this.parse, data) this.preview() }, diff --git a/app/javascript/packs/owned_plugin_form.js b/app/javascript/packs/owned_plugin_form.js index 35b7f98..482a1b5 100644 --- a/app/javascript/packs/owned_plugin_form.js +++ b/app/javascript/packs/owned_plugin_form.js @@ -1,11 +1,13 @@ 'use strict' import ParserMultilineForm from './parser_multiline_form' +import ConfigField from './config_field' const OwnedPluginForm = { template: "#vue-owned-plugin-form", components: { "parser-multiline-form": ParserMultilineForm, + "config-field": ConfigField }, props: [ "id", @@ -60,6 +62,12 @@ const OwnedPluginForm = { this.$emit("change-formats", data) }, + onChangeParseConfig: function(data) { + console.log("ownedPluginForm:onChangeParseConfig", data) + this.expression = data.expression + this.timeFormat = data.timeFormat + }, + updateSection: function() { $.ajax({ method: "GET", @@ -90,6 +98,7 @@ const OwnedPluginForm = { if (option.name === "time_format") { foundTimeFormat = true this.timeFormat = option.default + console.log(this.timeFormat) this.unwatchTimeFormat = this.$watch("timeFormat", (newValue, oldValue) => { console.log({"watch time_format": newValue}) this.$emit("change-parse-config", { diff --git a/app/views/shared/vue/_config_field.html.haml b/app/views/shared/vue/_config_field.html.haml new file mode 100644 index 0000000..52e2e59 --- /dev/null +++ b/app/views/shared/vue/_config_field.html.haml @@ -0,0 +1,49 @@ +%script{type: "text/x-template", id: "vue-config-field"} + .form-group + %template{"v-if" => 'option.type==="enum"'} + %label{"v-bind:for" => "inputId(pluginType, option)", + "data-toggle" => "tooltip", + "data-placement" => "right", + "v-bind:title" => "option.desc"} + {{ option.name }} + %select{"v-bind:id" => "inputId(pluginType, option)", + "v-bind:name" => "inputName(pluginType, option)", + "class" => "form-control"} + %option{"v-for" => "item in option.list", + "v-bind:value" => "item", + "v-bind:selected" => "option.default === item"} + {{ item }} + %template{"v-else-if" => 'option.type==="bool"'} + %input{"v-bind:id" => "inputId(pluginType, option)", + "v-bind:name" => "inputName(pluginType, option)", + "v-bind:checked" => "checked(option.default)", + "type" => "checkbox"} + %label{"v-bind:for" => "inputId(pluginType, option)", + "data-toggle" => "tooltip", + "data-placement" => "right", + "v-bind:title" => "option.desc"} + {{ option.name }} + %template(v-else) + %label{"v-bind:for" => "inputId(pluginType, option)", + "data-toggle" => "tooltip", + "data-placement" => "right", + "v-bind:title" => "option.desc"} + {{ option.name }} + %template{"v-if" => 'option.name === "expression"'} + %input{"v-bind:id" => "inputId(pluginType, option)", + "v-bind:name" => "inputName(pluginType, option)", + "v-model.lazy" => "expression", + "type" => "text", + "class" => "form-control"} + %template{"v-else-if" => 'option.name === "time_format"'} + %input{"v-bind:id" => "inputId(pluginType, option)", + "v-bind:name" => "inputName(pluginType, option)", + "v-model.lazy" => "timeFormat", + "type" => "text", + "class" => "form-control"} + %template(v-else) + %input{"v-bind:id" => "inputId(pluginType, option)", + "v-bind:name" => "inputName(pluginType, option)", + "v-bind:value" => "option.default", + "type" => "text", + "class" => "form-control"} diff --git a/app/views/shared/vue/_owned_plugin_form.html.haml b/app/views/shared/vue/_owned_plugin_form.html.haml index 537f61b..fab138d 100644 --- a/app/views/shared/vue/_owned_plugin_form.html.haml +++ b/app/views/shared/vue/_owned_plugin_form.html.haml @@ -1,4 +1,5 @@ = render "shared/vue/parser_multiline_form" += render "shared/vue/config_field" %script{type: "text/x-template", id: "vue-owned-plugin-form"} .form-group.card.bg-light.mb-3{"v-bind:id" => "id"} @@ -18,51 +19,9 @@ "v-bind:plugin-type" => "pluginType", "v-bind:common-options" => "commonOptions", "v-on:change-formats" => "onChangeFormats"} - .form-group(v-else){"v-for" => "option in commonOptions"} - %template{"v-if" => 'option.type==="enum"'} - %label{"v-bind:for" => "inputId(pluginType, option)", - "data-toggle" => "tooltip", - "data-placement" => "right", - "v-bind:title" => "option.desc"} - {{ option.name }} - %select{"v-bind:id" => "inputId(pluginType, option)", - "v-bind:name" => "inputName(pluginType, option)", - "class" => "form-control"} - %option{"v-for" => "item in option.list", - "v-bind:value" => "item", - "v-bind:selected" => "option.default === item"} - {{ item }} - %template{"v-else-if" => 'option.type==="bool"'} - %input{"v-bind:id" => "inputId(pluginType, option)", - "v-bind:name" => "inputName(pluginType, option)", - "v-bind:checked" => "checked(option.default)", - "type" => "checkbox"} - %label{"v-bind:for" => "inputId(pluginType, option)", - "data-toggle" => "tooltip", - "data-placement" => "right", - "v-bind:title" => "option.desc"} - {{ option.name }} - %template(v-else) - %label{"v-bind:for" => "inputId(pluginType, option)", - "data-toggle" => "tooltip", - "data-placement" => "right", - "v-bind:title" => "option.desc"} - {{ option.name }} - %template{"v-if" => 'option.name === "expression"'} - %input{"v-bind:id" => "inputId(pluginType, option)", - "v-bind:name" => "inputName(pluginType, option)", - "v-model.lazy" => "expression", - "type" => "text", - "class" => "form-control"} - %template{"v-else-if" => 'option.name === "time_format"'} - %input{"v-bind:id" => "inputId(pluginType, option)", - "v-bind:name" => "inputName(pluginType, option)", - "v-model.lazy" => "timeFormat", - "type" => "text", - "class" => "form-control"} - %template(v-else) - %input{"v-bind:id" => "inputId(pluginType, option)", - "v-bind:name" => "inputName(pluginType, option)", - "v-bind:value" => "option.default", - "type" => "text", - "class" => "form-control"} + %template(v-else){"v-for" => "option in commonOptions"} + %config-field{"v-bind:plugin-type" => "pluginType", + "v-bind:option" => "option", + "v-bind:initial-expression" => "expression", + "v-bind:initial-time-format" => "timeFormat", + "v-on:change-parse-config": "onChangeParseConfig"}