You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
11 KiB
290 lines
11 KiB
/** @odoo-module **/
|
|
import { registry } from "@web/core/registry";
|
|
import { jsonrpc } from "@web/core/network/rpc_service";
|
|
import { _t } from "@web/core/l10n/translation";
|
|
import { Component } from "@odoo/owl";
|
|
import { onMounted, useRef } from "@odoo/owl";
|
|
import { useService } from "@web/core/utils/hooks";
|
|
/** Initializes the HelpDeskDashBoard component**/
|
|
class HelpDeskDashBoard extends Component{
|
|
/**Set up function**/
|
|
setup() {
|
|
super.setup();
|
|
var self = this;
|
|
this.ref = useRef("helpDeskDashboard")
|
|
this.rpc = useService("rpc");
|
|
this.actionService = useService("action");
|
|
onMounted(this.onMounted);
|
|
}
|
|
/**Function for onMounted**/
|
|
onMounted(){
|
|
this.render_dashboards();
|
|
this.render_graphs();
|
|
}
|
|
/**To render the charts**/
|
|
render_graphs() {
|
|
var self = this;
|
|
self.render_tickets_month_graph();
|
|
self.render_team_ticket_count_graph();
|
|
}
|
|
/**Doughnut chart: TICKET STATUS**/
|
|
render_tickets_month_graph() {
|
|
var self = this;
|
|
var ctx = this.ref.el.querySelector('#ticket_month')
|
|
jsonrpc('/web/dataset/call_kw/ticket.helpdesk/get_tickets_count', {
|
|
model: "ticket.helpdesk",
|
|
method: "get_tickets_view",
|
|
args: [],
|
|
kwargs: {},
|
|
}).then(function (values) {
|
|
var data = {
|
|
labels: ['New', 'In Progress', 'Solved'],
|
|
datasets: [{
|
|
data: [values.inbox_count, values.progress_count, values.done_count],
|
|
backgroundColor: [
|
|
"#665191",
|
|
"#ff7c43",
|
|
"#ffa600"
|
|
],
|
|
borderColor: [
|
|
"#003f5c",
|
|
"#2f4b7c",
|
|
"#f95d6a"
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
/** Options **/
|
|
var options = {
|
|
responsive: true,
|
|
title: false,
|
|
legend: {
|
|
display: true,
|
|
position: "right",
|
|
labels: {
|
|
fontColor: "#333",
|
|
fontSize: 16
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
gridLines: {
|
|
color: "rgba(0, 0, 0, 0)",
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
min: 0,
|
|
display: false,
|
|
}
|
|
}]
|
|
}
|
|
};
|
|
/** Create Chart class object **/
|
|
var chart = new Chart(ctx, {
|
|
type: "doughnut",
|
|
data: data,
|
|
options: options
|
|
});
|
|
});
|
|
}
|
|
/** Bar chart: Team - Tickets Count Ratio **/
|
|
render_team_ticket_count_graph() {
|
|
var self = this
|
|
var ctx = this.ref.el.querySelector('.team_ticket_count');
|
|
jsonrpc('/web/dataset/call_kw/ticket.helpdesk/get_tickets_count', {
|
|
model: "ticket.helpdesk",
|
|
method: "get_team_ticket_count_pie",
|
|
args: [],
|
|
kwargs: {},
|
|
}).then(function (arrays) {
|
|
var data = {
|
|
labels: arrays[1],
|
|
datasets: [{
|
|
label: "",
|
|
data: arrays[0],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)',
|
|
'rgba(255, 205, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(153, rpc102, 255, 0.2)',
|
|
'rgba(201, 203, 207, 0.2)'
|
|
],
|
|
borderColor: ['rgb(255, 99, 132)',
|
|
'rgb(255, 159, 64)',
|
|
'rgb(255, 205, 86)',
|
|
'rgb(75, 192, 192)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(153, 102, 255)',
|
|
'rgb(201, 203, 207)'
|
|
],
|
|
borderWidth: 1
|
|
},]
|
|
};
|
|
/** Options **/
|
|
var options = {
|
|
responsive: true,
|
|
title: false,
|
|
maintainAspectRatio: true,
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: true,
|
|
ticks: {
|
|
beginAtZero: true,
|
|
steps: 10,
|
|
stepValue: 5,
|
|
// max: 100
|
|
}
|
|
}]
|
|
}
|
|
};
|
|
/** Create Chart class object **/
|
|
var chart = new Chart(ctx, {
|
|
type: "bar",
|
|
data: data,
|
|
options: options
|
|
});
|
|
});
|
|
}
|
|
/** List view of tickets in dashboard **/
|
|
render_dashboards() {
|
|
var self = this;
|
|
jsonrpc('/web/dataset/call_kw/ticket.helpdesk/get_tickets_count', {
|
|
model: 'ticket.helpdesk',
|
|
method: 'get_tickets_count',
|
|
args: [],
|
|
kwargs: {},
|
|
}).then(function(result) {
|
|
var inbox_count_span = document.createElement("span");
|
|
inbox_count_span.textContent = result.inbox_count
|
|
self.ref.el.querySelector('#inbox_count').appendChild(inbox_count_span);
|
|
var progress_count_span = document.createElement("span");
|
|
progress_count_span.textContent = result.progress_count
|
|
self.ref.el.querySelector('#inprogress_count').appendChild(progress_count_span);
|
|
var done_count_span = document.createElement("span");
|
|
done_count_span.textContent = result.done_count
|
|
self.ref.el.querySelector('#done_count').appendChild(done_count_span);
|
|
var team_count_span = document.createElement("span");
|
|
team_count_span.textContent = result.team_count
|
|
self.ref.el.querySelector('#team_count').appendChild(team_count_span);
|
|
var priorityCounts = {
|
|
very_low: result.very_low_count1,
|
|
low: result.low_count1,
|
|
normal: result.normal_count1,
|
|
high: result.high_count1,
|
|
very_high : result.very_high_count1
|
|
};
|
|
/**Loop through the priorities and create progress bars**/
|
|
for (var priority in priorityCounts) {
|
|
var progressBarWidth = priorityCounts[priority] + "%";
|
|
var progressBar = $("<div class='progress-bar'></div>").css("width", progressBarWidth);
|
|
var progressBarContainer = $("<div class='progress'></div>").append(progressBar);
|
|
var progressValue = $("<div class='progress-value'></div>").text(priorityCounts[priority] + "%");
|
|
// Append the progress bar container to elements with class corresponding to the priority
|
|
$("." + priority + "_count").append(progressBarContainer);
|
|
$("." + priority + "_count .progress-value").append(progressValue);
|
|
}
|
|
var tbody = $(".ticket-details");
|
|
var ticket_details = result.ticket_details;
|
|
for (var i = 0; i < ticket_details.length; i++) {
|
|
/** Get the current ticket object **/
|
|
var ticket = ticket_details[i];
|
|
var row = $("<tr></tr>");
|
|
/** Assuming you have the Base64-encoded image data in a
|
|
variable called ticket.assigned_image **/
|
|
var base64Image = ticket.assigned_image;
|
|
var assignedUserCell = $("<td class='td'></td>");
|
|
var imgElement = $("<img>");
|
|
/** Set the image source **/
|
|
imgElement.attr("src", "data:image/png;base64," + base64Image);
|
|
/** Set an alt attribute for accessibility **/
|
|
imgElement.attr("alt", "User Image");
|
|
/** Add the 'oe-avatar' class to the <img> element **/
|
|
imgElement.addClass("user-image");
|
|
/** Append the img element to the assignedUserCell **/
|
|
assignedUserCell.append(imgElement);
|
|
/** Append the assignedUserCell to the row **/
|
|
row.append(assignedUserCell);
|
|
row.append("<td class='td'>" + ticket.customer_name + "</td>");
|
|
row.append("<td class='td'>" + ticket.ticket_name + "</td>");
|
|
row.append(assignedUserCell);
|
|
row.append("<td>" + ticket.assigned_to + "</td>");
|
|
row.append("<td>" + ticket.subject + "</td>");
|
|
row.append("<td>" + ticket.priority + "</td>");
|
|
tbody.append(row);
|
|
}
|
|
$(".response").append(result.response);
|
|
self.rpc('/help/tickets', {}).then((values) => {
|
|
$('.pending_tickets').append(values);
|
|
});
|
|
});
|
|
}
|
|
/** To show new tickets **/
|
|
tickets_inbox(ev) {
|
|
var self = this;
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
self.actionService.doAction({
|
|
name: _t("Inbox"),
|
|
type: 'ir.actions.act_window',
|
|
res_model: 'ticket.helpdesk',
|
|
view_mode: 'tree,form',
|
|
views: [[false, 'list'], [false, 'form']],
|
|
domain: [['stage_id.name', 'in', ['Inbox', 'Draft']]],
|
|
context: {default_stage_id_name: 'Draft'},
|
|
target: 'current'
|
|
});
|
|
}
|
|
/** To show in progress tickets **/
|
|
tickets_inprogress(ev) {
|
|
var self = this;
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
self.actionService.doAction({
|
|
name: _t("In Progress"),
|
|
type: 'ir.actions.act_window',
|
|
res_model: 'ticket.helpdesk',
|
|
view_mode: 'tree,form',
|
|
views: [[false, 'list'], [false, 'form']],
|
|
domain: [['stage_id.name', '=', 'In Progress']],
|
|
context: {create: false},
|
|
target: 'current'
|
|
});
|
|
}
|
|
/** To show done tickets **/
|
|
tickets_done(ev) {
|
|
var self = this;
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
self.actionService.doAction({
|
|
name: _t("Done"),
|
|
type: 'ir.actions.act_window',
|
|
res_model: 'ticket.helpdesk',
|
|
view_mode: 'tree,form',
|
|
views: [[false, 'list'], [false, 'form']],
|
|
domain: [['stage_id.name', '=', 'Done']],
|
|
context: {create: false},
|
|
target: 'current'
|
|
});
|
|
}
|
|
/** To show the helpdesk teams**/
|
|
helpdesk_teams(ev) {
|
|
var self = this;
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
self.actionService.doAction({
|
|
name: _t("Teams"),
|
|
type: 'ir.actions.act_window',
|
|
res_model: 'team.helpdesk',
|
|
view_mode: 'tree,form',
|
|
views: [[false, 'list'], [false, 'form']],
|
|
target: 'current'
|
|
});
|
|
}
|
|
}
|
|
HelpDeskDashBoard.template = 'DashBoardHelpDesk'
|
|
registry.category("actions").add("helpdesk_dashboard", HelpDeskDashBoard)
|
|
|