Use bootstrap-vue on /plugins/installed

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

app/views/plugins/installed.html.haml

@@ -1,67 +1,56 @@
 - page_title t('.page_title')
 
-%table{class: "table table-striped table-hover", id: "plugins-table"}
-  %thead
-    %tr
-      %th{scope: "col"}
-      %th{scope: "col"}= t('plugins.common.name')
-      %th{scope: "col"}= t('plugins.common.authors')
-      %th{scope: "col"}= t('plugins.common.summary')
-      %th{scope: "col"}= t('plugins.common.installed_version')
-      %th{scope: "col"}= t('plugins.common.latest_version')
-      %th{scope: "col"}
-  %tbody
-    - @plugins.each do |plugin|
-      %tr
-        %td
-          %button{class: "btn btn-danger", data: {toggle: "modal", target:" #plugin-modal-#{plugin.gem_name}"}}
-            = t "terms.uninstall"
-          .modal.fade{id: "plugin-modal-#{plugin.gem_name}"}
-            .modal-dialog
-              .modal-content
-                .modal-header
-                  %button.close{"data-dismiss" => "modal"}
-                    = raw "×"
-                  %h4.modal-title
-                    = plugin.gem_name
-                .modal-body
-                  = t('terms.confirm_body', action: t('terms.uninstall'))
-                .modal-footer
-                  = form_tag(uninstall_plugins_path, method: :patch) do
-                    %button.btn.btn-secondary{"data-dismiss" => "modal"}
-                      Close
-                    = hidden_field_tag("plugins[]", plugin.gem_name)
-                    = submit_tag t('terms.uninstall'), class: "btn btn-danger"
-        %td
-          %label{for: "plugin_#{plugin.gem_name}"}
-            = plugin.gem_name
-        %td
-          = plugin.authors
-        %td
-          = plugin.summary
-        %td
-          = plugin.installed_version
-        %td
-          = plugin.latest_version
-        %td
-          - if plugin.latest_version?
-            = t('plugins.common.latest_version')
-          - else
-            = form_tag(upgrade_plugins_path, method: :patch) do
-              = hidden_field_tag("plugins[name]", plugin.gem_name)
-              = hidden_field_tag("plugins[version]", plugin.latest_version)
-              = submit_tag t('plugins.common.install_latest_version'), class: "btn btn-primary"
+#plugin-table
+  %b-form-group.float-right(horizontal){"label" => t("terms.search")}
+    %b-input-group
+      %b-form-input{"v-model" => "filter"}
+      %b-input-group-append
+        %b-btn{ "v-bind:disabled" => "!filter", "v-on:click" => "filter = ''" }
+          = t("terms.clear")
+  %b-table(stripped hover small){"v-bind:items" => "items",
+                                 "v-bind:fields" => "fields",
+                                 "v-bind:filter" => "filter"}
+    %template{"slot" => "uninstall_button", "slot-scope" => "row"}
+      %b-button{"variant" => "danger", "v-b-modal" => "row.item.uninstall_button"}
+        = t("terms.uninstall")
+      %b-modal{"v-bind:id" => "row.item.uninstall_button",
+               "v-bind:title" => "row.item.name"}
+        = t("terms.confirm_body", action: t("terms.uninstall"))
+        %template{"slot" => "modal-footer"}
+          = form_tag(uninstall_plugins_path, method: :patch) do
+            %b-button{"v-on:click" => "show=false"}
+              Close
+            %input{"type" => "hidden", "name" => "plugins[]", "v-bind:value" => "row.item.name"}
+            %b-button{"type" => "submit", "variant" => "danger"}
+              = t("terms.uninstall")
+    %template{"slot" => "is_latest_version", "slot-scope" => "row"}
+      %template{"v-if" => "row.value"}
+        = t("plugins.common.latest_version")
+      %template(v-else)
+        = form_tag(upgrade_plugins_path, method: :patch) do
+          %input{"type" => "hidden", "name" => "plugins[name]", "v-bind:value" => "row.item.name"}
+          %input{"type" => "hidden", "name" => "plugins[version]", "v-bind:value" => "row.item.latest_version"}
+          = submit_tag(t('plugins.common.install_latest_version'), class: "btn btn-primary")
 
 :javascript
   window.addEventListener("load", () => {
-    $('#plugins-table').dataTable({
-      "autoWidth": false,
-      "ordering": true,
-      "paging": false,
-      "info": false,
-      "searching": true,
-      "language": {
-        "search": "#{t("terms.search")} "
+    new Vue({
+      name: "InstalledPlugins",
+      el: "#plugin-table",
+      data() {
+        return {
+          fields: {
+            uninstall_button: { label: "" },
+            name: { label: "#{t("plugins.common.name")}", sortable: true },
+            authors: { label: "#{t("plugins.common.authors")}", sortable: true },
+            summary: { label: "#{t("plugins.common.summary")}", sortable: true  },
+            installed_version: { label: "#{t("plugins.common.installed_version")}", sortable: true },
+            latest_version: { label: "#{t("plugins.common.latest_version")}", sortable: true },
+            is_latest_version: { label: "" }
+          },
+          items: #{plugins_json.html_safe},
+          filter: null
+        }
       }
     });
   });