CRUD for each setting section

app/assets/javascripts/vue/settings.js

@@ -19,7 +19,68 @@
       },
       components: {
         section: {
-          template: "#vue-setting-section"
+          template: "#vue-setting-section",
+          data: {
+            mode: "default",
+            processing: false,
+            editContent: null
+          },
+          created: function(){
+            this.initialState();
+          },
+          computed: {
+            endpoint: function(){
+              return "/api/settings/" + this.id;
+            }
+          },
+          methods: {
+            onCancel: function(ev) {
+              this.initialState();
+            },
+            onEdit: function(ev) {
+              this.mode = "edit";
+            },
+            onDelete: function(ev) {
+              if(!confirm("really?")) return;
+              this.destroy();
+            },
+            onSubmit: function(ev) {
+              this.processing = true;
+              var self = this;
+              $.ajax({
+                url: this.endpoint,
+                method: "POST",
+                data: {
+                  _method: "PATCH",
+                  id: this.id,
+                  content: this.editContent
+                }
+              }).then(function(data){
+                // NOTE: child VM update doesn't effect to parent VM (at least Vue v0.10)
+                self.$data = data;
+                self.initialState();
+              }).always(function(){
+                self.processing = false;
+              });
+            },
+            initialState: function(){
+              this.mode = "default";
+              this.editContent = this.content;
+            },
+            destroy: function(){
+              var self = this;
+              $.ajax({
+                url: this.endpoint,
+                method: "POST",
+                data: {
+                  _method: "DELETE",
+                  id: this.id
+                }
+              }).then(function(){
+                self.$destroy();
+              });
+            }
+          }
         }
       },
       methods: {

app/assets/stylesheets/common.css.scss

@@ -150,3 +150,9 @@ label {
 .nav > li > a.section {
   color: #777;
 }
+
+
+#vue-setting textarea {
+  min-height: 12em;
+  resize: both;
+}

app/controllers/api/settings_controller.rb

@@ -10,12 +10,12 @@ class Api::SettingsController < ApplicationController
   end
 
   def update
-    coming = Fluent::Config::V1Parser.parse(params[:body], @fluentd.config_file)
+    coming = Fluent::Config::V1Parser.parse(params[:content], @fluentd.config_file)
     current = @section
     index = @config.elements.index current
     @config.elements[index] = coming.elements.first
     @config.write_to_file
-    head :no_content # 204
+    redirect_to api_setting_path(id: element_id(coming.elements.first))
   end
 
   def destroy

app/views/shared/vue/_setting.html.erb

@@ -7,7 +7,16 @@
     <i class="fa fa-caret-down"></i>
   </div>
   <div class='panel-body collapse' id='{{ id }}'>
-    <pre>{{ content }}</pre>
+    <pre v-if="mode != 'edit'">{{ content }}</pre>
+    <p v-if="mode == 'edit'">
+      <textarea class="form-control" v-model="editContent" v-attr="disabled: processing"></textarea>
+    </p>
+    <p class="pull-right">
+      <button v-if="mode == 'default'" class="btn btn-default" v-on="click: onEdit"><%= t('terms.edit') %></button>
+      <button v-if="mode == 'default'" class="btn btn-danger" v-on="click: onDelete"><%= t('terms.destroy') %></button>
+      <button v-if="mode != 'default'" class="btn btn-default" v-on="click: onCancel"><%= t('terms.cancel') %></button>
+      <button v-if="mode == 'edit'" class="btn btn-primary" v-on="click: onSubmit"><%= t('terms.update') %></button>
+    </p>
   </div>
 </div>
 

config/locales/translation_en.yml

@@ -31,6 +31,7 @@ en:
     no_alert: Nothing
     update_password: Update Password
     detail: Detail
+    cancel: Cancel
     create: Create
     update: Update & Restart
     edit: Edit

config/locales/translation_ja.yml

@@ -31,6 +31,7 @@ ja:
     no_alert: 通知なし
     update_password: パスワード更新
     detail: 詳細
+    cancel: キャンセル
     create: 作成
     update: 更新
     edit: 編集