[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>

3 files changed, 101 insertions, 13 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>
diff --git a/addons/web/static/tests/views/kanban_tests.js b/addons/web/static/tests/views/kanban_tests.js
index 5e2c4e0a8f6..7284caeae21 100644
--- a/addons/web/static/tests/views/kanban_tests.js
+++ b/addons/web/static/tests/views/kanban_tests.js
@@ -3355,14 +3355,16 @@ QUnit.module('Views', {
     QUnit.test('quick create column and examples', async function (assert) {
         assert.expect(12);
 
-        kanbanExamplesRegistry.add('test', [{
-            name: "A first example",
-            columns: ["Column 1", "Column 2", "Column 3"],
-            description: "Some description",
-        }, {
-            name: "A second example",
-            columns: ["Col 1", "Col 2"],
-        }]);
+        kanbanExamplesRegistry.add('test', {
+            examples:[{
+                name: "A first example",
+                columns: ["Column 1", "Column 2", "Column 3"],
+                description: "Some description",
+            }, {
+                name: "A second example",
+                columns: ["Col 1", "Col 2"],
+            }],
+        });
 
         var kanban = await createView({
             View: KanbanView,
@@ -3417,6 +3419,78 @@ QUnit.module('Views', {
         kanban.destroy();
     });
 
+    QUnit.test('quick create column and examples background with ghostColumns titles', async function (assert) {
+        assert.expect(4);
+
+        this.data.partner.records = [];
+
+        kanbanExamplesRegistry.add('test', {
+            ghostColumns: ["Ghost 1", "Ghost 2", "Ghost 3", "Ghost 4"],
+            examples:[{
+                name: "A first example",
+                columns: ["Column 1", "Column 2", "Column 3"],
+                description: "Some description",
+            }, {
+                name: "A second example",
+                columns: ["Col 1", "Col 2"],
+            }],
+        });
+
+        var kanban = await createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban examples="test">' +
+                        '<field name="product_id"/>' +
+                        '<templates><t t-name="kanban-box">' +
+                            '<div><field name="foo"/></div>' +
+                        '</t></templates>' +
+                    '</kanban>',
+            groupBy: ['product_id'],
+        });
+
+        assert.containsOnce(kanban, '.o_kanban_example_background',
+            "should have ExamplesBackground when no data");
+        assert.strictEqual(kanban.$('.o_kanban_examples_group h6').text(), 'Ghost 1Ghost 2Ghost 3Ghost 4',
+            "ghost title should be correct");
+        assert.containsOnce(kanban, '.o_column_quick_create',
+            "should have a ColumnQuickCreate widget");
+        assert.containsOnce(kanban, '.o_column_quick_create .o_kanban_examples:visible',
+            "should not have a link to see examples as there is no examples registered");
+
+        kanban.destroy();
+    });
+
+    QUnit.test('quick create column and examples background without ghostColumns titles', async function (assert) {
+        assert.expect(4);
+
+        this.data.partner.records = [];
+
+        var kanban = await createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban>' +
+                        '<field name="product_id"/>' +
+                        '<templates><t t-name="kanban-box">' +
+                            '<div><field name="foo"/></div>' +
+                        '</t></templates>' +
+                    '</kanban>',
+            groupBy: ['product_id'],
+        });
+
+        assert.containsOnce(kanban, '.o_kanban_example_background',
+            "should have ExamplesBackground when no data");
+        assert.strictEqual(kanban.$('.o_kanban_examples_group h6').text(), 'Column 1Column 2Column 3Column 4',
+            "ghost title should be correct");
+        assert.containsOnce(kanban, '.o_column_quick_create',
+            "should have a ColumnQuickCreate widget");
+        assert.containsNone(kanban, '.o_column_quick_create .o_kanban_examples:visible',
+            "should not have a link to see examples as there is no examples registered");
+
+        kanban.destroy();
+    });
+
     QUnit.test('if view was not grouped at start, it can be grouped and ungrouped', async function (assert) {
         assert.expect(3);