diff --git a/app/views/plugins/installed.html.haml b/app/views/plugins/installed.html.haml
index e2a57f1..001304c 100644
--- a/app/views/plugins/installed.html.haml
+++ b/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
+ }
}
});
});