I am migrating some Odoo modules 13 to 16 and in the process I have not been able to make this include of the KanbanProgressBar widget work.
This is the include code
console.log("Starting script...");
odoo.define('ipx_dual_sum_kanban_progressbar.KanbanColumnProgressBar', function (require) {
'use strict';
var KanbanColumnProgressBar = require('web.KanbanColumnProgressBar');
const core = require('web.core');
var session = require('web.session');
var utils = require('web.utils');
var Widget = require('web.Widget');
const _t = core._t;
// taking the instance of KanbanColumnProgressBar
// extending the KanbanColumnProgressBar
console.log("test")
KanbanColumnProgressBar.include({
init: function ( parent, options, columnState){
this\._super\.apply\(this,\ arguments\);
\ \ \ \ \ \ //\ Nueva\ lógica\ para\ sumFieldB
\ \ \ \ \ \ console\.log\("init"\)
\ \ \ \ \ \ this\.sumFieldB\ =\ columnState\.progressBarValues\.sum_fieldB;
\ \ \ \ \ \ this\.isSumFieldB\ =\ !!this\.sumFieldB;
\ \ \ \ \ \ var\ state\ =\ options\.progressBarStates\[this\.columnID\];
\ \ \ \ \ \ if\ \(state\)\ \{
\ \ \ \ \ \ \ \ //\ Maneja\ totalCounterValueB
\ \ \ \ \ \ \ \ this\.totalCounterValueB\ =\ state\.totalCounterValueB;
\ \ \ \ \ \ \}
\ \ \ \ \ \ //\ Maneja\ currencyFieldB
\ \ \ \ \ \ var\ sumFieldInfoB\ =\ this\.sumFieldB\ \&\&\ columnState\.fieldsInfo\.kanban\[this\.sumFieldB\];
\ \ \ \ \ \ var\ currencyFieldB\ =\ sumFieldInfoB\ \&\&\ sumFieldInfoB\.options\ \&\&\ sumFieldInfoB\.options\.currency_field;
\ \ \ \ \ \ if\ \(currencyFieldB\ \&\&\ columnState\.data\.length\)\ \{
\ \ \ \ \ \ \ \ this\.currencyB\ =\ session\.currencies\[columnState\.data\[0\]\.data\[currencyFieldB\]\.res_id\];
\ \ \ \ \ \ \}
\ \
\ \ \ \ \},
\ \ \ \
\ \ \ \ start:\ function\(\)\ \{
\ \ \ \ \ \ console\.log\("Inside\ start\ function\.\.\."\);
\ \ \ \ \ \ var\ self\ =\ this;
\ \
\ \ \ \ \ \ this\.\$counterB\ =\ this\.\$\('\.o_kanban_counter_side_b'\);
\ \ \ \ \ \ this\.\$numberB\ =\ this\.\$counterB\.find\('b'\);
\ \
\ \ \ \ \ \ if\ \(this\.currencyB\)\ \{
\ \ \ \ \ \ \ \ var\ \$currencyB\ =\ \$\('',\ \{
\ \ \ \ \ \ \ \ \ \ text:\ this\.currencyB\.symbol,
\ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ if\ \(this\.currencyB\.position\ ===\ 'before'\)\ \{
\ \ \ \ \ \ \ \ \ \ \$currencyB\.prependTo\(this\.\$counterB\);
\ \ \ \ \ \ \ \ \}\ else\ \{
\ \ \ \ \ \ \ \ \ \ \$currencyB\.appendTo\(this\.\$counterB\);
\ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \}
\ \
\ \ \ \ \ \ self\.prevTotalCounterValueB\ =\ self\.totalCounterValueB;
\ \ \ \ \ \ self\.totalCounterValueB\ =\ self\.sumFieldB\ \?\ \(self\.columnState\.aggregateValues\[self\.sumFieldB\]\ \|\|\ 0\)\ :\ 0;
\ \ \ \ \ \
\ \ \ \ \ \ //\ add\ console\ logs
\ \ \ \ \ \
\ \
\ \ \ \ \ \ return\ this\._super\.apply\(this,\ arguments\)\.then\(function\ \(\)\ \{
\ \ \ \ \ \ \ \ //\ This\ should\ be\ executed\ when\ the\ progressbar\ is\ fully\ rendered
\ \ \ \ \ \ \ \ //\ and\ is\ in\ the\ DOM,\ this\ happens\ to\ be\ always\ the\ case\ with
\ \ \ \ \ \ \ \ //\ current\ use\ of\ progressbars
\ \
\ \ \ \ \ \ \ \ var\ subgroupCounts\ =\ \{\};
\ \ \ \ \ \ \ \ let\ allSubgroupCount\ =\ 0;
\ \ \ \ \ \ \ \ _\.each\(self\.colors,\ function\ \(val,\ key\)\ \{
\ \ \ \ \ \ \ \ \ \ var\ subgroupCount\ =\ self\.columnState\.progressBarValues\.counts\[key\]\ \|\|\ 0;
\ \ \ \ \ \ \ \ \ \ if\ \(self\.activeFilter\ ===\ key\ \&\&\ subgroupCount\ ===\ 0\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ self\.activeFilter\ =\ false;
\ \ \ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ \ \ subgroupCounts\[key\]\ =\ subgroupCount;
\ \ \ \ \ \ \ \ \ \ allSubgroupCount\ \+=\ subgroupCount;
\ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ subgroupCounts\.__false\ =\ self\.columnState\.count\ \-\ allSubgroupCount;
\ \
\ \ \ \ \ \ \ \ self\.groupCount\ =\ self\.columnState\.count;
\ \ \ \ \ \ \ \ self\.subgroupCounts\ =\ subgroupCounts;
\ \ \ \ \ \ \ \ self\.prevTotalCounterValue\ =\ self\.totalCounterValue;
\ \ \ \ \ \ \ \ self\.totalCounterValue\ =\ self\.sumField\ \?\ \(self\.columnState\.aggregateValues\[self\.sumField\]\ \|\|\ 0\)\ :\ self\.columnState\.count;
\ \
\ \ \ \ \ \ \ \ //MY\ EDIT\ START
\ \ \ \ \ \ \ \ self\.prevTotalCounterValueB\ =\ self\.totalCounterValueB;
\ \ \ \ \ \ \ \ self\.totalCounterValueB\ =\ self\.sumFieldB\ \?\ \(self\.columnState\.aggregateValues\[self\.sumFieldB\]\ \|\|\ 0\)\ :\ 0;
\ \
\ \ \ \ \ \ \ \ //MY\ EDIT\ END
\ \ \ \ \ \ \
\ \ \ \ \ \ \ \ self\._notifyState\(\);
\ \ \ \ \ \ \ \ self\._render\(\);
\ \ \ \ \ \ \}\);
\ \
\ \ \ \ \},
\ \ \ \ _render:\ function\ \(\)\ \{
\ \ \ \ \ \ console\.log\("Inside\ _render\ function\.\.\."\);
\ \ \ \ \ \ \ \ var\ self\ =\ this;
\ \ \ \
\ \ \ \ \ \ \ \ //\ Update\ column\ display\ according\ to\ active\ filter
\ \ \ \ \ \ \ \ this\.trigger_up\('tweak_column',\ \{
\ \ \ \ \ \ \ \ \ \ callback:\ function\ \(\$el\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \$el\.removeClass\('o_kanban_group_show'\);
\ \ \ \ \ \ \ \ \ \ \ \ _\.each\(self\.colors,\ function\ \(val,\ key\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \$el\.removeClass\('o_kanban_group_show_'\ \+\ val\);
\ \ \ \ \ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ \ \ \ \ if\ \(self\.activeFilter\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \$el\.addClass\('o_kanban_group_show\ o_kanban_group_show_'\ \+\ self\.colors\[self\.activeFilter\]\);
\ \ \ \ \ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ \ \ \},
\ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ this\.trigger_up\('tweak_column_records',\ \{
\ \ \ \ \ \ \ \ \ \ callback:\ function\ \(\$el,\ recordData\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ var\ categoryValue\ =\ recordData\[self\.fieldName\]\ \?\ recordData\[self\.fieldName\]\ :\ '__false';
\ \ \ \ \ \ \ \ \ \ \ \ _\.each\(self\.colors,\ function\ \(val,\ key\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \$el\.removeClass\('oe_kanban_card_'\ \+\ val\);
\ \ \ \ \ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ \ \ \ \ if\ \(self\.colors\[categoryValue\]\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \$el\.addClass\('oe_kanban_card_'\ \+\ self\.colors\[categoryValue\]\);
\ \ \ \ \ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ \ \ \},
\ \ \ \ \ \ \ \ \}\);
\ \ \ \
\ \ \ \ \ \ \ \ //\ Display\ and\ animate\ the\ progress\ bars
\ \ \ \ \ \ \ \ var\ barNumber\ =\ 0;
\ \ \ \ \ \ \ \ var\ barMinWidth\ =\ 6;\ //\ In\ %
\ \ \ \ \ \ \ \ const\ selection\ =\ self\.columnState\.fields\[self\.fieldName\]\.selection;
\ \ \ \ \ \ \ \ _\.each\(self\.colors,\ function\ \(val,\ key\)\ \{
\ \ \ \ \ \ \ \ \ \ var\ \$bar\ =\ self\.\$bars\[key\];
\ \ \ \ \ \ \ \ \ \ var\ count\ =\ self\.subgroupCounts\ \&\&\ self\.subgroupCounts\[key\]\ \|\|\ 0;
\ \ \ \
\ \ \ \ \ \ \ \ \ \ if\ \(!\$bar\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ return;
\ \ \ \ \ \ \ \ \ \ \}
\ \ \ \
\ \ \ \ \ \ \ \ \ \ //\ Adapt\ tooltip
\ \ \ \ \ \ \ \ \ \ let\ value;
\ \ \ \ \ \ \ \ \ \ if\ \(selection\)\ \{\ //\ progressbar\ on\ a\ field\ of\ type\ selection
\ \ \ \ \ \ \ \ \ \ \ \ const\ option\ =\ selection\.find\(option\ =>\ option\[0\]\ ===\ key\);
\ \ \ \ \ \ \ \ \ \ \ \ value\ =\ option\ \&\&\ option\[1\]\ \|\|\ _t\('Other'\);
\ \ \ \ \ \ \ \ \ \ \}\ else\ \{
\ \ \ \ \ \ \ \ \ \ \ \ value\ =\ key;
\ \ \ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ \ \ \$bar\.attr\('data\-original\-title',\ count\ \+\ '\ '\ \+\ value\);
\ \ \ \ \ \ \ \ \ \ \$bar\.tooltip\(\{
\ \ \ \ \ \ \ \ \ \ \ \ delay:\ 0,
\ \ \ \ \ \ \ \ \ \ \ \ trigger:\ 'hover',
\ \ \ \ \ \ \ \ \ \ \}\);
\ \ \ \
\ \ \ \ \ \ \ \ \ \ //\ Adapt\ active\ state
\ \ \ \ \ \ \ \ \ \ \$bar\.toggleClass\('progress\-bar\-animated\ progress\-bar\-striped',\ key\ ===\ self\.activeFilter\);
\ \ \ \
\ \ \ \ \ \ \ \ \ \ //\ Adapt\ width
\ \ \ \ \ \ \ \ \ \ \$bar\.removeClass\('o_bar_has_records\ transition\-off'\);
\ \ \ \ \ \ \ \ \ \ window\.getComputedStyle\(\$bar\[0\]\)\.getPropertyValue\('width'\);\ //\ Force\ reflow\ so\ that\ animations\ work
\ \ \ \ \ \ \ \ \ \ if\ \(count\ >\ 0\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \$bar\.addClass\('o_bar_has_records'\);
\ \ \ \ \ \ \ \ \ \ \ \ //\ Make\ sure\ every\ bar\ that\ has\ records\ has\ some\ space
\ \ \ \ \ \ \ \ \ \ \ \ //\ and\ that\ everything\ adds\ up\ to\ 100%
\ \ \ \ \ \ \ \ \ \ \ \ var\ maxWidth\ =\ 100\ \-\ barMinWidth\ \*\ barNumber;
\ \ \ \ \ \ \ \ \ \ \ \ self\.\$\('\.progress\-bar\.o_bar_has_records'\)\.css\('max\-width',\ maxWidth\ \+\ '%'\);
\ \ \ \ \ \ \ \ \ \ \ \ \$bar\.css\('width',\ \(count\ \*\ 100\ /\ self\.groupCount\)\ \+\ '%'\);
\ \ \ \ \ \ \ \ \ \ \ \ barNumber\+\+;
\ \ \ \ \ \ \ \ \ \ \ \ \$bar\.attr\('aria\-valuemin',\ 0\);
\ \ \ \ \ \ \ \ \ \ \ \ \$bar\.attr\('aria\-valuemax',\ self\.groupCount\);
\ \ \ \ \ \ \ \ \ \ \ \ \$bar\.attr\('aria\-valuenow',\ count\);
\ \ \ \ \ \ \ \ \ \ \}\ else\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \$bar\.css\('width',\ ''\);
\ \ \ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ this\.\$\('\.progress\-bar\.o_bar_has_records'\)\.css\('min\-width',\ barMinWidth\ \+\ '%'\);
\ \ \ \
\ \ \ \ \ \ \ \ //\ Display\ and\ animate\ the\ counter\ number
\ \ \ \ \ \ \ \ var\ start\ =\ this\.prevTotalCounterValue;
\ \ \ \ \ \ \ \ var\ end\ =\ this\.totalCounterValue;
\ \ \ \
\ \ \ \ \ \ \ \ if\ \(this\.activeFilter\)\ \{
\ \ \ \ \ \ \ \ \ \ if\ \(this\.sumField\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ end\ =\ 0;
\ \ \ \ \ \ \ \ \ \ \ \ _\.each\(self\.columnState\.data,\ function\ \(record\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ var\ recordData\ =\ record\.data;
\ \ \ \ \ \ \ \ \ \ \ \ \ \ if\ \(self\.activeFilter\ ===\ recordData\[self\.fieldName\]\ \|\|
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \(self\.activeFilter\ ===\ '__false'\ \&\&\ !recordData\[self\.fieldName\]\)\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ end\ \+=\ parseFloat\(recordData\[self\.sumField\]\);
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ \ \ \}\ else\ \{
\ \ \ \ \ \ \ \ \ \ \ \ end\ =\ this\.subgroupCounts\[this\.activeFilter\];
\ \ \ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \ this\.prevTotalCounterValue\ =\ end;
\ \ \ \ \ \ \ \ var\ animationClass\ =\ start\ >\ 999\ \?\ 'o_kanban_grow'\ :\ 'o_kanban_grow_huge';
\ \ \ \
\ \ \ \ \ \ \ \ if\ \(start\ !==\ undefined\ \&\&\ \(end\ >\ start\ \|\|\ this\.activeFilter\)\ \&\&\ this\.ANIMATE\)\ \{
\ \ \ \ \ \ \ \ \ \ \$\(\{currentValue:\ start\}\)\.animate\(\{currentValue:\ end\},\ \{
\ \ \ \ \ \ \ \ \ \ \ \ duration:\ 1000,
\ \ \ \ \ \ \ \ \ \ \ \ start:\ function\ \(\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ self\.\$counter\.addClass\(animationClass\);
\ \ \ \ \ \ \ \ \ \ \ \ \},
\ \ \ \ \ \ \ \ \ \ \ \ step:\ function\ \(\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ self\.\$number\.html\(_getCounterHTML\(this\.currentValue\)\);
\ \ \ \ \ \ \ \ \ \ \ \ \},
\ \ \ \ \ \ \ \ \ \ \ \ complete:\ function\ \(\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ \ \ self\.\$number\.html\(_getCounterHTML\(this\.currentValue\)\);
\ \ \ \ \ \ \ \ \ \ \ \ \ \ self\.\$counter\.removeClass\(animationClass\);
\ \ \ \ \ \ \ \ \ \ \ \ \},
\ \ \ \ \ \ \ \ \ \ \}\);
\ \ \ \ \ \ \ \ \}\ else\ \{
\ \ \ \ \ \ \ \ \ \ this\.\$number\.html\(_getCounterHTML\(end\)\);
\ \ \ \ \ \ \ \ \}
\ \ \ \ \ \ \ \
\ \ \ \ \ \ \ \
\ \ \ \ \ \ \ \ //=========================MY\ EDIT\ START
\ \ \ \ \ \ \ \
\ \ \ \ \ \ \ \ //\ Display\ and\ animate\ the\ counter\ number
\ \ \ \ \ \ \ \ var\ startB\ =\ this\.prevTotalCounterValueB;
\ \ \ \ \ \ \ \ var\ endB\ =\ this\.totalCounterValueB;
\ \ \ \ \ \ \ \
\ \ \ \ \ \ \ \ if\ \(this\.activeFilter\)\ \{
\ \ \ \ \ \ \ \ \ \ if\ \(this\.sumFieldB\)\ \{
\ \ \ \ \ \ \ \ \ \ \ \ endB\ =\ 0;
\ \ \ \ \ \ \ \ \ \ \ \ _\.each\(self.columnState.data, function (record) {
var recordDataB = record.data;
if (self.activeFilter === recordDataB[self.fieldName] ||
(self.activeFilter === '__false' && !recordDataB[self.fieldName])) {
endB += parseFloat(recordDataB[self.sumFieldB]);
}
});
} else {
endB = this.subgroupCounts[this.activeFilter];
}
}
this.prevTotalCounterValueB = endB;
var animationClassB = startB > 999 ? 'o_kanban_grow' : 'o_kanban_grow_huge';
if (startB !== undefined && (endB > startB || this.activeFilter) && this.ANIMATE) {
$({currentValueB: startB}).animate({currentValueB: endB}, {
duration: 1000,
start: function () {
self.$counterB.addClass(animationClassB);
},
step: function () {
self.$numberB.html(_getCounterHTML(this.currentValueB));
},
complete: function () {
self.$numberB.html(_getCounterHTML(this.currentValueB));
self.$counterB.removeClass(animationClassB);
},
});
} else {
this.$numberB.html(_getCounterHTML(endB));
}
this.$numberB.html(_getCounterHTML(endB));
//========================MY EDIT END
function _getCounterHTML(value) {
return utils.human_number(value, 0, 3);
}
},
_notifyState: function () {
this.trigger_up('set_progress_bar_state', {
columnID: this.columnID,
values: {
groupCount: this.groupCount,
subgroupCounts: this.subgroupCounts,
totalCounterValue: this.totalCounterValue,
totalCounterValueB: this.totalCounterValueB,
isSumFieldB: this.isSumFieldB,
activeFilter: this.activeFilter,
},
});
}
});
console.log("Fin script")
});This is how it looked in odoo 13 and that is what I want to achieve
