+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.Sh
+
+
+
+
+
+
+
+ 
+
+ + Kanban Sticky State
++ Kanban Sticky State Helps you to Stick Kanban Heading at + Top .
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ You can maintain the kanban heading in place at the top by using Kanban
+ Sticky State.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Keep the Kanban Header at the Top.
+
+
+
+ Keep the Kanban Header at the Top.
+
+
+
+
+
+ Available in Odoo 16 Community , Enterprise and Odoo.Sh.
+
+
+
+ Available in Odoo 16 Community , Enterprise and Odoo.Sh.
+
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Configuration +
++ Go to General Settings -> + Kanban Sticky State + -> + Enable Kanban Sticky State.
+
+
+ 
+ 
+
+
+ + When scrolling the kanban view we can see the Kanban State is + Sticky.
+
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
diff --git a/kanban_sticky_state/static/src/css/kanban_sticky_state.css b/kanban_sticky_state/static/src/css/kanban_sticky_state.css
new file mode 100644
index 000000000..02b5f0176
--- /dev/null
+++ b/kanban_sticky_state/static/src/css/kanban_sticky_state.css
@@ -0,0 +1,10 @@
+.is_kanban_sticky_state{
+ position: sticky;
+ top: 0 !important;
+ height: 75px;
+ z-index: 99;
+ background: #f8f9fa;
+}
+.kanban-label {
+ margin-right: 8px;
+}
diff --git a/kanban_sticky_state/static/src/js/kanban_sticky_state.js b/kanban_sticky_state/static/src/js/kanban_sticky_state.js
new file mode 100644
index 000000000..ab9cf83ff
--- /dev/null
+++ b/kanban_sticky_state/static/src/js/kanban_sticky_state.js
@@ -0,0 +1,193 @@
+/** @odoo-module **/
+/**
+ * KanbanRenderer with Kanban Sticky State
+ *
+ * This patch modifies the setup method of the component prototype to add functionality
+ * related to the Kanban view. It also adds two additional methods, add_class and
+ * remove_class, which are called based on the value of session.kanban_sticky_state
+ * to add or remove a CSS class from certain elements.
+ */
+import { KanbanRenderer } from "@web/views/kanban/kanban_renderer";
+import session from 'web.session';
+import { patch } from "@web/core/utils/patch";
+import { registry } from "@web/core/registry";
+import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
+import { useSortable } from "@web/core/utils/sortable";
+import { useBus, useService } from "@web/core/utils/hooks";
+import { useBounceButton } from "@web/views/view_hook";
+import { useState, useRef, onPatched, onWillPatch, onWillDestroy, onMounted } from "@odoo/owl";
+function validateColumnQuickCreateExamples(data) {
+ const { allowedGroupBys = [], examples = [] } = data;
+ if (!allowedGroupBys.length) {
+ throw new Error("The example data must contain an array of allowed groupbys");
+ }
+ if (!examples.length) {
+ throw new Error("The example data must contain an array of examples");
+ }
+}
+patch(KanbanRenderer.prototype, 'kanban_sticky_state.KanbanRenderer',{
+ /**
+ * Setup method for the KanbanRenderer.
+ */
+ updateStickyHeaderClass() {
+ var elements = document.querySelectorAll('.o_kanban_header, .o_column_quick_create, .o_quick_create_folded');
+ for (var element of elements) {
+ if (session.is_kanban_sticky_state) {
+ element.classList.add("is_kanban_sticky_state");
+ } else {
+ element.classList.remove("is_kanban_sticky_state");
+ }
+ }
+},
+ setup() {
+ this.dialogClose = [];
+ this.state = useState({
+ columnQuickCreateIsFolded:
+ !this.props.list.isGrouped || this.props.list.groups.length > 0,
+ });
+ this.dialog = useService("dialog");
+ this.exampleData = registry
+ .category("kanban_examples")
+ .get(this.props.archInfo.examples, null);
+ if (this.exampleData) {
+ validateColumnQuickCreateExamples(this.exampleData);
+ }
+ this.ghostColumns = this.generateGhostColumns();
+ onMounted(() => this.updateStickyHeaderClass());
+ onPatched(() => this.updateStickyHeaderClass());
+ // Sortable
+ let dataRecordId;
+ let dataGroupId;
+ const rootRef = useRef("root");
+ if (this.canUseSortable) {
+ useSortable({
+ enable: () => this.canResequenceRecords,
+ // Params
+ ref: rootRef,
+ elements: ".o_record_draggable",
+ ignore: ".dropdown",
+ groups: () => this.props.list.isGrouped && ".o_kanban_group",
+ connectGroups: () => this.canMoveRecords,
+ cursor: "move",
+ // Hooks
+ onDragStart: (params) => {
+ const { element, group } = params;
+ dataRecordId = element.dataset.id;
+ dataGroupId = group && group.dataset.id;
+ return this.sortStart(params);
+ },
+ onDragEnd: (params) => this.sortStop(params),
+ onGroupEnter: (params) => this.sortRecordGroupEnter(params),
+ onGroupLeave: (params) => this.sortRecordGroupLeave(params),
+ onDrop: (params) => this.sortRecordDrop(dataRecordId, dataGroupId, params),
+ });
+ useSortable({
+ enable: () => this.canResequenceGroups,
+ // Params
+ ref: rootRef,
+ elements: ".o_group_draggable",
+ handle: ".o_column_title",
+ cursor: "move",
+ // Hooks
+ onDragStart: (params) => {
+ const { element } = params;
+ dataGroupId = element.dataset.id;
+ return this.sortStart(params);
+ },
+ onDragEnd: (params) => this.sortStop(params),
+ onDrop: (params) => this.sortGroupDrop(dataGroupId, params),
+ });
+ }
+ useBounceButton(rootRef, (clickedEl) => {
+ if (!this.props.list.count || this.props.list.model.useSampleModel) {
+ return clickedEl.matches(
+ [
+ ".o_kanban_renderer",
+ ".o_kanban_group",
+ ".o_kanban_header",
+ ".o_column_quick_create",
+ ".o_view_nocontent_smiling_face",
+ ].join(", ")
+ );
+ }
+ return false;
+ });
+ onWillDestroy(() => {
+ this.dialogClose.forEach((close) => close());
+ });
+ if (this.env.searchModel) {
+ useBus(this.env.searchModel, "focus-view", () => {
+ const { model } = this.props.list;
+ if (model.useSampleModel || !model.hasData()) {
+ return;
+ }
+ const firstCard = rootRef.el.querySelector(".o_kanban_record");
+ if (firstCard) {
+ // Focus first kanban card
+ firstCard.focus();
+ }
+ });
+ }
+ useHotkey(
+ "Enter",
+ ({ target }) => {
+ if (!target.classList.contains("o_kanban_record")) {
+ return;
+ }
+ // Open first link
+ const firstLink = target.querySelector(".oe_kanban_global_click, a, button");
+ if (firstLink && firstLink instanceof HTMLElement) {
+ firstLink.click();
+ }
+ return;
+ },
+ { area: () => rootRef.el }
+ );
+ const arrowsOptions = { area: () => rootRef.el, allowRepeat: true };
+ if (this.env.searchModel) {
+ useHotkey(
+ "ArrowUp",
+ ({ area }) => {
+ if (!this.focusNextCard(area, "up")) {
+ this.env.searchModel.trigger("focus-search");
+ }
+ },
+ arrowsOptions
+ );
+ }
+ useHotkey("ArrowDown", ({ area }) => this.focusNextCard(area, "down"), arrowsOptions);
+ useHotkey("ArrowLeft", ({ area }) => this.focusNextCard(area, "left"), arrowsOptions);
+ useHotkey("ArrowRight", ({ area }) => this.focusNextCard(area, "right"), arrowsOptions);
+ let previousScrollTop = 0;
+ onWillPatch(() => {
+ previousScrollTop = rootRef.el.scrollTop;
+ });
+ onPatched(() => {
+ rootRef.el.scrollTop = previousScrollTop;
+ });
+ // Add or remove CSS class based on the value of kanban_sticky_state
+ if (session.is_kanban_sticky_state) {
+ onMounted(this.add_class)
+ } else {
+ onMounted(this.remove_class)
+ }
+ },
+ /**
+ * Add CSS class on condition of kanban_sticky_state value.
+ */
+ add_class(){
+ var elements = document.getElementsByClassName('o_kanban_header')
+ for(var element=0;element
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+ Kanban Sticky State
+
+
+
+
+
+
+
+