[ADD] Chapter 3: Customize a kanban view

Author: sawer-odoo

awesome_kanban/static/src/awesome_kanban_view.js

@@ -1,3 +1,12 @@
 /** @odoo-module */
 
-// TODO: Define here your AwesomeKanban view
+import { registry } from "@web/core/registry";
+import { kanbanView } from "@web/views/kanban/kanban_view";
+import { AwesomeKanbanController } from "./kanban_controller";
+
+export const awesomeKanbanView = {
+    ...kanbanView,
+    Controller: AwesomeKanbanController,
+};
+
+registry.category("views").add("awesome_kanban", awesomeKanbanView);

awesome_kanban/static/src/customer_list/customer_list.js

@@ -0,0 +1,66 @@
+/** @odoo-module */
+
+import { Component, onWillStart, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import { KeepLast } from "@web/core/utils/concurrency";
+import { fuzzyLookup } from "@web/core/utils/search";
+import { Pager } from "@web/core/pager/pager";
+
+export class CustomerList extends Component {
+    static template = "awesome_kanban.CustomerList";
+
+    static components = { Pager };
+
+    static props = {
+        selectCustomer: Function
+    }
+
+    setup() {
+        this.orm = useService("orm");
+        this.customers = useState({ data: [] });
+        this.keepLast = new KeepLast();
+        this.state = useState({ displayActiveCustomers: false, searchString: ''})
+        onWillStart(async () => {
+            this.customers.data = await this.loadCustomers([]);
+            this.pager.total = this.customers.data.length;
+        })
+        this.pager = useState({ offset: 0, limit: 20 });
+    }
+
+    loadCustomers() {
+        const domain = this.state.displayActiveCustomers ? [["opportunity_ids", "!=", false]] : [];
+        return this.orm.searchRead("res.partner", domain, ["display_name"]);
+    }
+
+    get displayedCustomers() {
+        const displayCustomers = this.filterCustomers(this.state.searchString);
+        this.pager.total = displayCustomers.length;
+        return displayCustomers.slice(this.pager.offset, this.pager.offset + this.pager.limit);
+    }
+
+    async checkboxChange(ev) {
+        this.pager.offset = 0;
+        this.state.displayActiveCustomers = ev.target.checked;
+        this.customers.data = await this.keepLast.add(this.loadCustomers());
+        this.pager.total = this.customers.data.length;
+    }
+
+    filterCustomers(name) {
+        if (name) {
+            const filteredCustomers = fuzzyLookup(
+                name,
+                this.customers.data,
+                (customer) => customer.display_name
+            );
+            while (this.pager.offset > filteredCustomers.length) this.pager.offset -= this.pager.limit;
+            return filteredCustomers;
+        } else {
+            return this.customers.data;
+        }
+    }
+
+    onUpdatePager(data) {
+        Object.assign(this.pager, data);
+    }
+    
+}

awesome_kanban/static/src/customer_list/customer_list.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_kanban.CustomerList">
+
+        <table class="table table-striped">
+            <thead>
+                <tr>
+                    <td>
+                        <span>Customers</span>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="this.state.displayActiveCustomers" id="flexCheckDefault" t-on-change="checkboxChange"/>
+                            <label class="form-check-label" for="flexCheckDefault">
+                                Active customers
+                            </label>
+                        </div>
+                        <input placeholder="Filter customers" t-model="state.searchString"/>
+                    </td>
+                    <Pager offset="this.pager.offset" limit="this.pager.limit" total="this.pager.total" onUpdate.bind="onUpdatePager"/>
+                </tr>
+            </thead>
+            <tbody>
+                <tr t-foreach="this.displayedCustomers" t-as="customer" t-key="customer.id">
+                    <td class="o_awesome_kanban_customer_hover" t-esc="customer.display_name" t-on-click="() => this.props.selectCustomer(customer.id, customer.display_name)"/>
+                </tr>
+            </tbody>
+        </table>
+
+    </t>
+
+</templates>

awesome_kanban/static/src/kanban_controller.js

@@ -0,0 +1,34 @@
+/** @odoo-module */
+
+import { KanbanController } from "@web/views/kanban/kanban_controller";
+import { CustomerList } from "./customer_list/customer_list"
+
+
+export class AwesomeKanbanController extends KanbanController {
+    static template = "awesome_kanban.AwesomeKanbanController";
+
+    static components = { ...KanbanController.components, CustomerList };
+
+    setup() {
+        super.setup();
+    }
+
+    emptyFunction(customerId, customerName) {
+        const customerFilters = this.env.searchModel.getSearchItems((searchItem) =>
+            searchItem.isFromAwesomeKanban
+        );
+
+        for (const customerFilter of customerFilters) {
+            if (customerFilter.isActive) {
+                this.env.searchModel.toggleSearchItem(customerFilter.id);
+            }
+        }
+
+        console.log(customerId);
+        this.env.searchModel.createNewFilters([{
+            description: customerName,
+            domain: [["partner_id", "=", customerId]],
+            isFromAwesomeKanban: true, // this is a custom key to retrieve our filters later
+        }])
+    };
+}

awesome_kanban/static/src/kanban_controller.scss

@@ -0,0 +1,10 @@
+.o_awesome_kanban_sidebar {
+    width: 300px;
+    float: left;
+}
+
+.o_awesome_kanban_customer_hover {
+    &:hover {
+        background-color: $gray-200;
+    }
+}

awesome_kanban/static/src/kanban_controller.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_kanban.AwesomeKanbanController" t-inherit="web.KanbanView">
+
+        <xpath expr="//t[@t-component='props.Renderer']" position="before">
+            <div class="o_awesome_kanban_sidebar">
+                <CustomerList selectCustomer.bind="emptyFunction"/>
+            </div>
+        </xpath>
+
+    </t>
+
+</templates>