Leaderboard cleanup (#10638)
* [leaderboard] wip
* [leaderboard] filter for selecting leaderboard criteria, single col
* [leaderboard] doctypes in sidebar
* hide graph if no results
diff --git a/erpnext/utilities/page/leaderboard/leaderboard.js b/erpnext/utilities/page/leaderboard/leaderboard.js
index eed9bd1..0d16ab0 100644
--- a/erpnext/utilities/page/leaderboard/leaderboard.js
+++ b/erpnext/utilities/page/leaderboard/leaderboard.js
@@ -1,114 +1,166 @@
+frappe.pages["leaderboard"].on_page_load = function (wrapper) {
+ frappe.leaderboard = new frappe.Leaderboard(wrapper);
+}
frappe.Leaderboard = Class.extend({
init: function (parent) {
- this.page = frappe.ui.make_app_page({
+ frappe.ui.make_app_page({
parent: parent,
title: "Leaderboard",
- single_column: true
+ single_column: false
});
+ this.parent = parent;
+ this.page = this.parent.page;
+ this.page.sidebar.html(`<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked"></ul>`);
+ this.$sidebar_list = this.page.sidebar.find('ul');
+
// const list of doctypes
this.doctypes = ["Customer", "Item", "Supplier", "Sales Partner"];
- this.timelines = ["Week", "Month", "Quarter", "Year"];
+ this.timespans = ["Week", "Month", "Quarter", "Year"];
this.desc_fields = ["total_amount", "total_request", "annual_billing", "commission_rate"];
this.filters = {
- "Customer": this.map_array(["title", "total_amount", "total_item_purchased", "modified"]),
- "Item": this.map_array(["title", "total_request", "total_purchase", "avg_price", "modified"]),
- "Supplier": this.map_array(["title", "annual_billing", "total_unpaid", "modified"]),
- "Sales Partner": this.map_array(["title", "commission_rate", "target_qty", "target_amount", "modified"]),
+ "Customer": ["total_amount", "total_item_purchased"],
+ "Item": ["total_request", "total_purchase", "avg_price"],
+ "Supplier": ["annual_billing", "total_unpaid"],
+ "Sales Partner": ["commission_rate", "target_qty", "target_amount"],
};
// for saving current selected filters
- const _selected_filter = this.filters[this.doctypes[0]];
+ // TODO: revert to 0 index for doctype and timespan, and remove preset down
+ const _initial_doctype = this.doctypes[0];
+ const _initial_timespan = this.timespans[0];
+ const _initial_filter = this.filters[_initial_doctype];
+
this.options = {
- selected_doctype: this.doctypes[0],
- selected_filter: _selected_filter,
- selected_filter_item: _selected_filter[1],
- selected_timeline: this.timelines[0],
+ selected_doctype: _initial_doctype,
+ selected_filter: _initial_filter,
+ selected_filter_item: _initial_filter[0],
+ selected_timespan: _initial_timespan,
};
this.message = null;
this.make();
},
-
-
make: function () {
var me = this;
- var $leaderboard = $(frappe.render_template("leaderboard", this)).appendTo(this.page.main);
+ var $container = $(`<div class="leaderboard page-main-content">
+ <div class="leaderboard-graph"></div>
+ <div class="leaderboard-list"></div>
+ </div>`).appendTo(this.page.main);
- // events
- $leaderboard.find(".select-doctype")
- .on("change", function () {
- me.options.selected_doctype = this.value;
- me.options.selected_filter = me.filters[this.value];
- me.options.selected_filter_item = me.filters[this.value][1];
- me.make_request($leaderboard);
- });
+ this.$graph_area = $container.find('.leaderboard-graph');
- $leaderboard.find(".select-time")
- .on("change", function () {
- me.options.selected_timeline = this.value;
- me.make_request($leaderboard);
- });
+ this.doctypes.map(doctype => {
+ this.get_sidebar_item(doctype).appendTo(this.$sidebar_list);
+ });
+
+ this.timespan_select = this.page.add_select(__("Timespan"),
+ this.timespans.map(d => {
+ return {"label": __(d), value: d }
+ })
+ );
+
+ // this.timespan_select.val(this.timespans[1]);
+
+ this.type_select = this.page.add_select(__("Type"),
+ me.options.selected_filter.map(d => {
+ return {"label": __(frappe.model.unscrub(d)), value: d }
+ })
+ );
+
+ this.$sidebar_list.on('click', 'li', function(e) {
+ let $li = $(this);
+ let doctype = $li.find('span').html();
+
+ me.options.selected_doctype = doctype;
+ me.options.selected_filter = me.filters[doctype];
+ me.options.selected_filter_item = me.filters[doctype][0];
+
+ me.type_select.empty().add_options(
+ me.options.selected_filter.map(d => {
+ return {"label": __(frappe.model.unscrub(d)), value: d }
+ })
+ );
+
+ me.$sidebar_list.find('li').removeClass('active');
+ $li.addClass('active');
+
+ me.make_request($container);
+ });
+
+ this.timespan_select.on("change", function() {
+ me.options.selected_timespan = this.value;
+ me.make_request($container);
+ });
+
+ this.type_select.on("change", function() {
+ me.options.selected_filter_item = this.value
+ me.make_request($container);
+ });
// now get leaderboard
- me.make_request($leaderboard);
+ this.$sidebar_list.find('li:first').trigger('click');
},
- make_request: function ($leaderboard) {
+ make_request: function ($container) {
var me = this;
frappe.model.with_doctype(me.options.selected_doctype, function () {
- me.get_leaderboard(me.get_leaderboard_data, $leaderboard);
+ me.get_leaderboard(me.get_leaderboard_data, $container);
});
},
- get_leaderboard: function (notify, $leaderboard) {
+ get_leaderboard: function (notify, $container, start=0) {
var me = this;
frappe.call({
method: "erpnext.utilities.page.leaderboard.leaderboard.get_leaderboard",
args: {
- obj: JSON.stringify(me.options)
+ doctype: me.options.selected_doctype,
+ timespan: me.options.selected_timespan,
+ field: me.options.selected_filter_item,
+ start: start
},
- callback: function (res) {
- console.log(res)
- notify(me, res, $leaderboard);
+ callback: function (r) {
+ let results = r.message || [];
+
+ let graph_items = results.slice(0, 10);
+
+ me.$graph_area.show().empty();
+ let args = {
+ parent: me.$graph_area,
+ y: [
+ {
+ color: 'light-green',
+ values: graph_items.map(d=>d.value),
+ formatted: graph_items.map(d=>d[me.options.selected_filter_item])
+ }
+ ],
+ x: {
+ values: graph_items.map(d=>d.name)
+ },
+ mode: 'bar',
+ height: 140
+ };
+ new frappe.ui.Graph(args);
+
+ notify(me, r, $container);
}
});
},
- get_leaderboard_data: function (me, res, $leaderboard) {
+ get_leaderboard_data: function (me, res, $container) {
if (res && res.message) {
me.message = null;
- $leaderboard.find(".leaderboard").html(me.render_list_view(res.message));
-
- // event to change arrow
- $leaderboard.find(".leaderboard-item")
- .click(function () {
- const field = this.innerText.trim().toLowerCase().replace(new RegExp(" ", "g"), "_");
- if (field && field !== "title") {
- const _selected_filter_item = me.options.selected_filter
- .filter(i => i.field === field);
- if (_selected_filter_item.length > 0) {
- me.options.selected_filter_item = _selected_filter_item[0];
- me.options.selected_filter_item.value = _selected_filter_item[0].value === "ASC" ? "DESC" : "ASC";
-
- const new_class_name = `icon-${me.options.selected_filter_item.field} fa fa-chevron-${me.options.selected_filter_item.value === "ASC" ? "up" : "down"}`;
- $leaderboard.find(`.icon-${me.options.selected_filter_item.field}`)
- .attr("class", new_class_name);
-
- // now make request to web
- me.make_request($leaderboard);
- }
- }
- });
+ $container.find(".leaderboard-list").html(me.render_list_view(res.message));
} else {
+ me.$graph_area.hide();
me.message = "No items found.";
- $leaderboard.find(".leaderboard").html(me.render_list_view());
+ $container.find(".leaderboard-list").html(me.render_list_view());
}
},
@@ -129,7 +181,7 @@
var html =
`${me.render_list_header()}
- ${me.render_list_result(items)}`;
+ ${me.render_list_result(items)}`;
return html;
},
@@ -137,23 +189,21 @@
render_list_header: function () {
var me = this;
const _selected_filter = me.options.selected_filter
- .map(i => me.map_field(i.field)).slice(1);
+ .map(i => frappe.model.unscrub(i));
+ const fields = ['name', me.options.selected_filter_item];
const html =
`<div class="list-headers">
<div class="list-item list-item--head" data-list-renderer="${"List"}">
${
- me.options.selected_filter
- .map(filter => {
- const col = me.map_field(filter.field);
+ fields.map(filter => {
+ const col = frappe.model.unscrub(filter);
return (
`<div class="leaderboard-item list-item_content ellipsis text-muted list-item__content--flex-2
- header-btn-base ${(col !== "Title" && col !== "Modified") ? "hidden-xs" : ""}
+ header-btn-base
${(col && _selected_filter.indexOf(col) !== -1) ? "text-right" : ""}">
<span class="list-col-title ellipsis">
${col}
- <i class="${"icon-" + filter.field} fa ${filter.value === "ASC" ? "fa-chevron-up" : "fa-chevron-down"}"
- style="${col === "Title" ? "display:none;" : ""}"></i>
</span>
</div>`);
}).join("")
@@ -166,9 +216,18 @@
render_list_result: function (items) {
var me = this;
- let _html = items.map((item) => {
+ let _html = items.map((item, index) => {
const $value = $(me.get_item_html(item));
- const $item_container = $(`<div class="list-item-container">`).append($value);
+
+ let item_class = "";
+ if(index == 0) {
+ item_class = "first";
+ } else if (index == 1) {
+ item_class = "second";
+ } else if(index == 2) {
+ item_class = "third";
+ }
+ const $item_container = $(`<div class="list-item-container ${item_class}">`).append($value);
return $item_container[0].outerHTML;
}).join("");
@@ -186,10 +245,10 @@
var me = this;
let html =
- `<div class="no-result text-center" style="${me.message ? "" : "display:none;"}">
+ `<div class="no-result text-center" style="${me.message ? "" : "display:none;"}">
<div class="msg-box no-border">
<p>No Item found</p>
- </div>
+ </div>
</div>`;
return html;
@@ -198,25 +257,25 @@
get_item_html: function (item) {
var me = this;
const _selected_filter = me.options.selected_filter
- .map(i => me.map_field(i.field)).slice(1);
+ .map(i => frappe.model.unscrub(i));
+ const fields = ['name', me.options.selected_filter_item];
const html =
`<div class="list-item">
${
- me.options.selected_filter
- .map(filter => {
- const col = me.map_field(filter.field);
- let val = item[filter.field];
+ fields.map(filter => {
+ const col = frappe.model.unscrub(filter);
+ let val = item[filter];
if (col === "Modified") {
val = comment_when(val);
}
return (
`<div class="list-item_content ellipsis list-item__content--flex-2
- ${(col !== "Title" && col !== "Modified") ? "hidden-xs" : ""}
+ ${(col !== "Name" && col !== "Modified") ? "hidden-xs" : ""}
${(col && _selected_filter.indexOf(col) !== -1) ? "text-right" : ""}">
${
- col === "Title"
- ? `<a class="grey list-id ellipsis" href="${item["href"]}"> ${val} </a>`
+ col === "Name"
+ ? `<a class="grey list-id ellipsis" href="${item["href"]}"> ${val} </a>`
: `<span class="text-muted ellipsis"> ${val}</span>`
}
</div>`);
@@ -227,22 +286,10 @@
return html;
},
- map_field: function (field) {
- return field.replace(new RegExp("_", "g"), " ").replace(/(^|\s)[a-z]/g, f => f.toUpperCase())
- },
-
- map_array: function (_array) {
- var me = this;
- return _array.map((str) => {
- let value = me.desc_fields.indexOf(str) > -1 ? "DESC" : "ASC";
- return {
- field: str,
- value: value
- };
- });
+ get_sidebar_item: function(item) {
+ return $(`<li class="strong module-sidebar-item">
+ <a class="module-link">
+ <span>${ item }</span></a>
+ </li>`);
}
});
-
-frappe.pages["leaderboard"].on_page_load = function (wrapper) {
- frappe.leaderboard = new frappe.Leaderboard(wrapper);
-}