How to add click event and handler to Kanban card

Question

I am trying to learn how to use Javascript framework in Odoo 14. I am trying to add click event with class selector and event handler for Kanban card.

My problem: I am using .include() on KanbanRecord to add desired event and handler (which might not be the correct way). If I add an event without selector (.o_kanban_file_hover) then event handler is called when clicking, but handler method is never called if I add the class selector.

This is my first time trying the Odoo JS framework and any help would be helpful.

My final goal is to add a very simple file drag and drop feature on specific kanban cards in Account module (When hovering with the file change Kanban card background color and upon release do something with the file). This is additional information for providing a general direction.

Files:
account.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <record id="journal_dashboard_view_inherited" model="ir.ui.view">
        <field name="name">account.journal.dashboard.kanban.inherit</field>
        <field name="model">account.journal</field>
        <field name="inherit_id" ref="account.account_journal_dashboard_kanban_view"/>
        <field name="arch" type="xml">
            <xpath expr="//t[@t-name='kanban-box']/div[1]" position="attributes">
                <attribute name="t-attf-class" add="o_kanban_file_hover" separator=" "/>
            </xpath>
        </field>
    </record>
</odoo>

templates.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="assets_end" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script src="/kanban_file_drag_and_drop/static/src/js/component.js" type="text/javascript" />
            <link href="/kanban_file_drag_and_drop/static/src/scss/kanban.scss" rel="stylesheet" type="text/scss" />
        </xpath>
    </template>
</odoo>

component.js (I was originally using OWL, but I was too lazy to rewrite the component name)

odoo.define('kanban_file_drag_and_drop.component', function (require) {
    "use strict";

    var core = require('web.core');
    var KanbanRecord = require('web.KanbanRecord');
    var _t = core._t;


    KanbanRecord.include({
        events: _.extend({}, KanbanRecord.prototype.events, {
            'click .o_kanban_file_hover': '_onKanbanClick',
        }),
        
        _onKanbanClick: function (ev) {
            console.log("clicked")
            console.log(ev)
        },
    });
});

kanban.scss

.o_kanban_file_hover{
  &:hover {
    background-color: rgba(0, 0, 0, 0.49);
  }
}

manifest.py

    'depends': ['base', 'web', 'account'],

    'data': [
        'views/account.xml',
        'views/templates.xml',
    ],

    "qweb": [
        'static/src/xml/qweb_template.xml',
    ],

How to add click event and handler to Kanban card

0 Answers0