[init/add] generic backend theme

muk_web_theme-19/muk_web_refresh/static/src/search/control_panel.js

@@ -0,0 +1,99 @@
+import { useState, onWillStart, useEffect } from '@odoo/owl';
+
+import { browser } from '@web/core/browser/browser';
+import { patch } from '@web/core/utils/patch';
+import { session } from '@web/session';
+
+import {ControlPanel} from '@web/search/control_panel/control_panel';
+
+patch(ControlPanel.prototype, {
+	setup() {
+		super.setup(...arguments);
+        this.autoLoadState = useState({
+			active: false,
+			counter: 0,
+        });
+		onWillStart(() => {
+			if (
+				this.checkAutoLoadAvailability() && 
+				this.getAutoLoadStorageValue()
+			) {
+				this.autoLoadState.active = true;
+			}
+		});
+		useEffect(
+			() => {
+				if (!this.autoLoadState.active) {
+					return;
+				}
+				this.autoLoadState.counter = (
+					this.getAutoLoadRefreshInterval()
+				);
+				const interval = browser.setInterval(
+					() => {
+						this.autoLoadState.counter = (
+							this.autoLoadState.counter ? 
+							this.autoLoadState.counter - 1 : 
+							this.getAutoLoadRefreshInterval()
+						);
+						if (this.autoLoadState.counter <= 0) {
+							this.autoLoadState.counter = (
+								this.getAutoLoadRefreshInterval()
+							);
+							if (this.pagerProps?.onUpdate) {
+								this.pagerProps.onUpdate({
+									offset: this.pagerProps.offset, 
+									limit: this.pagerProps.limit
+								});
+							} else if (typeof this.env.searchModel?.search) {
+								this.env.searchModel.search();
+							}
+						}
+					}, 
+					1000
+				);
+				return () => browser.clearInterval(interval);
+			},
+			() => [this.autoLoadState.active]
+		);
+	},
+	checkAutoLoadAvailability() {
+		return ['kanban', 'list'].includes(this.env.config.viewType);
+	},
+    getAutoLoadRefreshInterval() {
+    	return (session.pager_autoload_interval ?? 30000) / 1000;
+	},
+    getAutoLoadStorageKey() {
+		const keys = [
+			this.env?.config?.actionId ?? '',
+			this.env?.config?.viewType ?? '',
+			this.env?.config?.viewId ?? '',
+		];
+		return `pager_autoload:${keys.join(',')}`;
+    },
+    getAutoLoadStorageValue() {
+    	return browser.localStorage.getItem(
+        	this.getAutoLoadStorageKey()
+        );
+	},
+    setAutoLoadStorageValue() {
+    	browser.localStorage.setItem(
+			this.getAutoLoadStorageKey(), true
+		);
+	},
+    removeAutoLoadStorageValue() {
+    	browser.localStorage.removeItem(
+            this.getAutoLoadStorageKey()
+        );
+	},
+	toggleAutoLoad() {
+		this.autoLoadState.active = (
+			!this.autoLoadState.active
+		);
+		if (this.autoLoadState.active) {
+			this.setAutoLoadStorageValue();
+		} else {
+			this.removeAutoLoadStorageValue();
+		}
+	},
+});

muk_web_theme-19/muk_web_refresh/static/src/search/control_panel.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-inherit="web.ControlPanel" t-inherit-mode="extension">
+        <xpath expr="//Pager/.." position="before">
+            <div 
+                t-if="this.checkAutoLoadAvailability()"
+                class="d-inline-flex align-items-center gap-1 align-self-center"
+            >
+                <span
+                    t-if="this.autoLoadState.active and this.autoLoadState.counter &gt; 0"
+                    class="small text-muted"
+                >
+                    <t t-out="this.autoLoadState.counter"/>s
+                </span>
+                <button
+                    t-if="!env.isSmall"
+                    class="btn btn-link p-0 d-inline-flex align-items-center justify-content-center"
+                    type="button"
+                    t-on-click.stop="this.toggleAutoLoad"
+                >
+                    <i 
+                        class="fa fa-refresh fa-fw"
+                        t-att-class="this.autoLoadState.active ? 'text-info fa-spin' : 'text-muted'"
+                    />
+                </button>
+            </div>
+        </xpath>
+    </t>
+
+</templates>