From 209a97c61b30de243f3a424b6400951476d99d9d Mon Sep 17 00:00:00 2001
From: "Dardenne Florent (dafl)" <dafl@odoo.com>
Date: Thu, 25 Aug 2022 11:38:17 +0000
Subject: [PATCH] [IMP] web: kanban: highlight destination column on drag&drop

Before, the destination column while drag&drop was not highlighted.
Therefore it was not obvious for the user in which column the card
would be dropped. e.g. when the column header is not visible because
the user scrolled

Now, the destination column is highlighted when drag&dropping a card.

task-2459381

Part-of: odoo/odoo#98897
---
 .../src/views/kanban/kanban_controller.scss   |  4 +++
 .../src/views/kanban/kanban_renderer.js       |  6 +++-
 .../static/tests/views/kanban_view_tests.js   | 29 +++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 941a0e5d046..089da233c8c 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -484,6 +484,10 @@
                 }
             }
         }
+        &.o_kanban_hover {
+            background-color: #00a09d0d;
+            box-shadow: -1px 0px 0px 0px #00a09d inset, 1px 0px 0px 0px #00a09d inset;
+        }
     }
 
     .o_group_draggable .o_column_title {
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index f24774eec32..e6c13fb9147 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -65,9 +65,13 @@ export class KanbanRenderer extends Component {
                 },
                 onGroupEnter: (group) => group.classList.add("o_kanban_hover"),
                 onGroupLeave: (group) => group.classList.remove("o_kanban_hover"),
-                onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"),
+                onStop: (group, element) => {
+                    group && group.classList && group.classList.remove("o_kanban_hover");
+                    element.classList.remove("o_dragged", "shadow");
+                },
                 onDrop: async ({ element, previous, parent }) => {
                     element.classList.remove("o_record_draggable");
+                    parent && parent.classList && parent.classList.remove("o_kanban_hover");
                     const refId = previous ? previous.dataset.id : null;
                     const targetGroupId = parent && parent.dataset.id;
                     await this.props.list.moveRecord(
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index ad389ed013d..0ffcb597e52 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -3,6 +3,7 @@
 import { makeFakeDialogService } from "@web/../tests/helpers/mock_services";
 import {
     click,
+    drag,
     dragAndDrop,
     editInput,
     getFixture,
@@ -4041,6 +4042,34 @@ QUnit.module("Views", (hooks) => {
         assert.verifySteps(["resequence"]);
     });
 
+    QUnit.test("drag and drop highlight on hover", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create">
+                <field name="product_id"/>
+                <templates><t t-name="kanban-box">
+                <div class="oe_kanban_global_click"><field name="foo"/>
+                </div>
+                </t></templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+        });
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
+
+        // first record of first column moved to the bottom of second column
+        const drop = drag(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+        assert.hasClass(target.querySelector(".o_kanban_group:nth-child(2)"), "o_kanban_hover");
+        await drop();
+        assert.containsNone(target, ".o_kanban_group:nth-child(2).o_kanban_hover");
+    });
+
     QUnit.test("drag and drop a record, grouped by selection", async (assert) => {
         assert.expect(7);