brotherton-erpnext/erpnext/utilities/page/leaderboard/leaderboard.js
Ayush Shukla a111f78566 Leaderboard of customers, items, suppliers and sales partner ()
* First commit leaderboard working

* Styling and added href

* Changed timeline string

* Changes in item

* Cleanup

* Fix

* made changes to currency column

* Code cleanup for codacy

* Sorting bug fixed and formatting done

* Changed type to isinstance
2017-06-20 13:04:45 +05:30

249 lines
6.8 KiB
JavaScript

frappe.Leaderboard = Class.extend({
init: function (parent) {
this.page = frappe.ui.make_app_page({
parent: parent,
title: "Leaderboard",
single_column: true
});
// const list of doctypes
this.doctypes = ["Customer", "Item", "Supplier", "Sales Partner"];
this.timelines = ["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"]),
};
// for saving current selected filters
const _selected_filter = this.filters[this.doctypes[0]];
this.options = {
selected_doctype: this.doctypes[0],
selected_filter: _selected_filter,
selected_filter_item: _selected_filter[1],
selected_timeline: this.timelines[0],
};
this.message = null;
this.make();
},
make: function () {
var me = this;
var $leaderboard = $(frappe.render_template("leaderboard", this)).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);
});
$leaderboard.find(".select-time")
.on("change", function () {
me.options.selected_timeline = this.value;
me.make_request($leaderboard);
});
// now get leaderboard
me.make_request($leaderboard);
},
make_request: function ($leaderboard) {
var me = this;
frappe.model.with_doctype(me.options.selected_doctype, function () {
me.get_leaderboard(me.get_leaderboard_data, $leaderboard);
});
},
get_leaderboard: function (notify, $leaderboard) {
var me = this;
frappe.call({
method: "erpnext.utilities.page.leaderboard.leaderboard.get_leaderboard",
args: {
obj: JSON.stringify(me.options)
},
callback: function (res) {
console.log(res)
notify(me, res, $leaderboard);
}
});
},
get_leaderboard_data: function (me, res, $leaderboard) {
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);
}
}
});
} else {
me.message = "No items found.";
$leaderboard.find(".leaderboard").html(me.render_list_view());
}
},
render_list_view: function (items = []) {
var me = this;
var html =
`${me.render_message()}
<div class="result" style="${me.message ? "display:none;" : ""}">
${me.render_result(items)}
</div>`;
return $(html);
},
render_result: function (items) {
var me = this;
var html =
`${me.render_list_header()}
${me.render_list_result(items)}`;
return html;
},
render_list_header: function () {
var me = this;
const _selected_filter = me.options.selected_filter
.map(i => me.map_field(i.field)).slice(1);
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);
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" : ""}
${(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("")
}
</div>
</div>`;
return html;
},
render_list_result: function (items) {
var me = this;
let _html = items.map((item) => {
const $value = $(me.get_item_html(item));
const $item_container = $(`<div class="list-item-container">`).append($value);
return $item_container[0].outerHTML;
}).join("");
let html =
`<div class="result-list">
<div class="list-items">
${_html}
</div>
</div>`;
return html;
},
render_message: function () {
var me = this;
let html =
`<div class="no-result text-center" style="${me.message ? "" : "display:none;"}">
<div class="msg-box no-border">
<p>No Item found</p>
</div>
</div>`;
return html;
},
get_item_html: function (item) {
var me = this;
const _selected_filter = me.options.selected_filter
.map(i => me.map_field(i.field)).slice(1);
const html =
`<div class="list-item">
${
me.options.selected_filter
.map(filter => {
const col = me.map_field(filter.field);
let val = item[filter.field];
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 && _selected_filter.indexOf(col) !== -1) ? "text-right" : ""}">
${
col === "Title"
? `<a class="grey list-id ellipsis" href="${item["href"]}"> ${val} </a>`
: `<span class="text-muted ellipsis"> ${val}</span>`
}
</div>`);
}).join("")
}
</div>`;
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
};
});
}
});
frappe.pages["leaderboard"].on_page_load = function (wrapper) {
frappe.leaderboard = new frappe.Leaderboard(wrapper);
}