Extract vue component config-field

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>

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 }

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()
       },

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", {

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"}

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-else){"v-for" => "option in commonOptions"}
-        %template{"v-if" => 'option.type==="enum"'}
+        %config-field{"v-bind:plugin-type" => "pluginType",
-          %label{"v-bind:for" => "inputId(pluginType, option)",
+                      "v-bind:option" => "option",
-                 "data-toggle" => "tooltip",
+                      "v-bind:initial-expression" => "expression",
-                 "data-placement" => "right",
+                      "v-bind:initial-time-format" => "timeFormat",
-                 "v-bind:title" => "option.desc"}
+                      "v-on:change-parse-config": "onChangeParseConfig"}
-            {{ 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"}