[IMP] web, project: improve examples background on kanban quick create column

This commit makes the use of the kanban more intuitive by changing the view's
example background columns labels.

kanbanExamplesRegistry will have object as a value instead of array,
ghostColumns and examples will be the key where ghostColumns defines column
titles for example background on column quick create and examples will be array
of examples which will be displayed on click of See Examples link in quick
create column
If ghoseColumns are not defined then dynamically ghost columns will be generated
with titles like Column 1, Column2...

task- 1937198

closes odoo/odoo#30911

Signed-off-by: Jérome Maes (jem) <jem@openerp.com>


Co-authored-by: Mohammed Shekha <msh@odoo.com>

2 files changed, 19 insertions, 5 deletions

diff --git a/addons/web/static/src/js/views/kanban/kanban_renderer.js b/addons/web/static/src/js/views/kanban/kanban_renderer.js
index bd6c00a6802..5be98e4de52 100644
--- a/addons/web/static/src/js/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/js/views/kanban/kanban_renderer.js
@@ -13,6 +13,7 @@ var utils = require('web.utils');
 var viewUtils = require('web.viewUtils');
 
 var qweb = core.qweb;
+var _t = core._t;
 
 function findInNode(node, predicate) {
     if (predicate(node)) {
@@ -282,13 +283,27 @@ var KanbanRenderer = BasicRenderer.extend({
         }
     },
     /**
+     * Returns the default columns for the kanban view example background.
+     * You can override this method to easily customize the column names.
+     *
+     * @private
+     */
+    _getGhostColumns: function () {
+        if (this.examples && this.examples.ghostColumns) {
+            return this.examples.ghostColumns;
+        }
+        return _.map(_.range(1, 5), function (num) {
+            return _.str.sprintf(_t("Column %s"), num);
+        });
+    },
+    /**
      * Render the Example Ghost Kanban card on the background
      *
      * @private
      * @param {DocumentFragment} fragment
      */
     _renderExampleBackground: function (fragment) {
-        var $background = $(qweb.render('KanbanView.ExamplesBackground'));
+        var $background = $(qweb.render('KanbanView.ExamplesBackground', {ghostColumns: this._getGhostColumns()}));
         $background.appendTo(fragment);
     },
     /**
@@ -358,10 +373,9 @@ var KanbanRenderer = BasicRenderer.extend({
                 },
             });
 
-            // Enable column quickcreate
             if (this.createColumnEnabled) {
                 this.quickCreate = new ColumnQuickCreate(this, {
-                    examples: this.examples,
+                    examples: this.examples && this.examples.examples,
                 });
                 this.defs.push(this.quickCreate.appendTo(fragment).then(function () {
                     // Open it directly if there is no column yet
diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index 3a01370443f..424408f9340 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/addons/web/static/src/xml/kanban.xml
@@ -191,9 +191,9 @@
     <div class="o_kanban_example_background_container">
         <div class="o_kanban_example_background">
             <div class="o_kanban_examples">
-                <t t-foreach="_.range(1,5)" t-as="num">
+                <t t-foreach="ghostColumns" t-as="column">
                     <div class="o_kanban_examples_group">
-                        <h6><b>Column <t t-esc="num"/></b></h6>
+                        <h6><b><t t-esc="column"/></b></h6>
                         <t t-foreach="_.random(2,6)">
                             <t t-call="KanbanView.ExamplesBackground.RecordGhost"/>
                         </t>