mirrors/fluentd-ui
1
0
Fork 0
mirror of https://github.com/fluent/fluentd-ui.git synced 2025-08-14 18:27:06 +02:00
Code Issues Projects Releases Wiki Activity

Use bootstrap-vue on /plugins/recommended

Browse Source 
Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
This commit is contained in:
Kenji Okimoto 2018-10-04 14:08:44 +09:00
parent eb7c2cade3
commit cbd8c57f31
No known key found for this signature in database
GPG Key ID: F9E3E329A5C5E4A1
1 changed files with 53 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
app/views/plugins/recommended.html.haml
View File

@ -1,61 +1,61 @@
- page_title t('.page_title') - page_title t('.page_title')
%table{class: "table table-striped table-hover", id: "plugins-table"} #plugins-table
%thead %b-form-group.float-right(horizontal){"label" => t("terms.search")}
%tr %b-input-group
%th{scope: "col", width: "24"} %b-form-input{"v-model" => "filter"}
%th{scope: "col"}= t('plugins.common.name') %b-input-group-append
%th{scope: "col"}= t('plugins.common.api_version') %b-btn{ "v-bind:disabled" => "!filter", "v-on:click" => "filter = ''" }
%th{scope: "col"}= t('plugins.common.category') = t("terms.clear")
%th{scope: "col"}= t('plugins.common.status') %b-table(stripped hover small){"v-bind:items" => "items",
%th{scope: "col"} "v-bind:fields" => "fields",
%tbody "v-bind:filter" => "filter"}
- @plugins.each do |plugin| %template{"slot" => "is_installed", "slot-scope" => "row"}
%tr %template{"v-if" => "row.item.is_installed || row.item.is_processing"}
%td &nbsp;
- unless plugin.installed? || plugin.processing? %template(v-else)
= link_to t("terms.install"), install_plugins_path, class: "js-install btn btn-primary", data: { url: install_plugins_path, name: plugin.gem_name} %b-button{"variant" => "primary",
%td "data-url" => install_plugins_path,
%label{for: "plugin_#{plugin.gem_name}"} "v-bind:data-name" => "row.item.name",
= plugin.gem_name "v-on:click" => "installPlugin"}
%td = t("terms.install")
= plugin.api_version %template{"slot" => "rubygems_org_page", "slot-scope" => "row"}
%td %a{"target" => "_blank", "v-bind:href" => "row.item.rubygems_org_page"}
= plugin.category = t("plugins.view_on_rubygems_org")
%td
= plugin.status
%td
= link_to t('plugins.view_on_rubygems_org'), plugin.rubygems_org_page, target: "_blank"
:javascript :javascript
window.addEventListener("load", () => { window.addEventListener("load", () => {
$('#plugins-table').dataTable({ new Vue({
"autoWidth": false, name: "RecommendedPlugins",
"ordering": true, el: "#plugins-table",
"paging": false, data() {
"info": false, return {
"searching": true, fields: {
"language": { is_installed: { label: "" },
"search": "#{t("terms.search")} " name: { label: "#{t("plugins.common.name")}", sortable: true },
api_version: { label: "#{t("plugins.common.api_version")}", sortable: true },
category: { label: "#{t("plugins.common.category")}", sortable: true },
status: { label: "#{t("plugins.common.status")}", sortable: true },
rubygems_org_page: { label: "" }
},
items: #{plugins_json.html_safe},
filter: null
};
},
methods: {
installPlugin(event) {
$.ajax({
url: `${event.target.dataset.url}.json`,
data: {"plugins[]": event.target.dataset.name, "_method": "PATCH"},
method: "POST"
}).then((data) => {
console.log("installed", data);
let item = this.items.find(item => item.name === event.target.dataset.name);
item.is_processing = true;
item.status = "#{t("terms.processing")}";
this.update();
});
}
} }
}); });
$('#plugins-table').on('click', '.js-install', function(ev){
ev.preventDefault();
var $anchor = $(ev.target);
var url = $anchor.attr('href');
$anchor.removeClass('js-install');
$anchor.attr("href", "#");
$anchor.css({color: "green"});
var name = $anchor.attr('data-name');
$.ajax({
url: url,
data: {"plugins[]": name, "_method": "PATCH"},
method: "POST"
}).done(function(){
$anchor.fadeOut();
var status = $anchor.parent().closest('tr').children()[3];
$(status).text("#{t("terms.processing")}");
});;
});
}); });