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')
%table{class: "table table-striped table-hover", id: "plugins-table"}
%thead
%tr
%th{scope: "col", width: "24"}
%th{scope: "col"}= t('plugins.common.name')
%th{scope: "col"}= t('plugins.common.api_version')
%th{scope: "col"}= t('plugins.common.category')
%th{scope: "col"}= t('plugins.common.status')
%th{scope: "col"}
%tbody
- @plugins.each do |plugin|
%tr
%td
- unless plugin.installed? || plugin.processing?
= link_to t("terms.install"), install_plugins_path, class: "js-install btn btn-primary", data: { url: install_plugins_path, name: plugin.gem_name}
%td
%label{for: "plugin_#{plugin.gem_name}"}
= plugin.gem_name
%td
= plugin.api_version
%td
= plugin.category
%td
= plugin.status
%td
= link_to t('plugins.view_on_rubygems_org'), plugin.rubygems_org_page, target: "_blank"
#plugins-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" => "is_installed", "slot-scope" => "row"}
%template{"v-if" => "row.item.is_installed || row.item.is_processing"}
&nbsp;
%template(v-else)
%b-button{"variant" => "primary",
"data-url" => install_plugins_path,
"v-bind:data-name" => "row.item.name",
"v-on:click" => "installPlugin"}
= t("terms.install")
%template{"slot" => "rubygems_org_page", "slot-scope" => "row"}
%a{"target" => "_blank", "v-bind:href" => "row.item.rubygems_org_page"}
= t("plugins.view_on_rubygems_org")
: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: "RecommendedPlugins",
el: "#plugins-table",
data() {
return {
fields: {
is_installed: { label: "" },
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")}");
});;
});
});