19.0 vanilla

odoo-bringout-oca-ocb-hr/hr/static/src/fields/radio_followed_by_element.js

@@ -0,0 +1,75 @@
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { RadioField, radioField } from "@web/views/fields/radio/radio_field";
+import {onMounted,onWillUnmount} from "@odoo/owl";
+
+export class RadioFollowedByElement extends RadioField {
+    static props = {
+        ...RadioField.props,
+        links: { type: Object },
+        observe: { type: String },
+    };
+    setup() {
+        super.setup(...arguments);
+
+        onMounted(() => {
+            this.moveElement();
+            this.observer = new MutationObserver((mutations) => {
+                if ([...mutations].map(mutation =>
+                    [...mutation.addedNodes].map(node => node.id))
+                    .flat()
+                    .filter(id => Object.values(this.props.links).includes(id))) this.moveElement();
+            });
+
+            this.observer.observe(document.getElementsByName(this.props.observe).item(0), {
+                childList: true,
+                subtree: true,
+                attributes: false,
+                characterData: false,
+            });
+        });
+
+        onWillUnmount(() => {
+            this.observer.disconnect();
+        });
+    }
+
+    moveElement() {
+        for (const [key, value] of Object.entries(this.props.links)) {
+            const option = document.querySelectorAll("[data-value="+key+"]")[0];
+            const elementToAppend = document.getElementById(value);
+            if (option === null || elementToAppend === null || elementToAppend.parentElement === option.parentElement)
+                continue;
+            option.parentElement.appendChild(elementToAppend);
+        }
+    }
+}
+
+export const radioFollowedByElement = {
+    ...radioField,
+    component: RadioFollowedByElement,
+    displayName: _t("Radio followed by element"),
+    supportedOptions: [
+        {
+            label: _t("Element association"),
+            name: "links",
+            type: "Object",
+            help: _t("An object to link select options and element id to move"),
+        },
+        {
+            label: _t("Element to observe"),
+            name: "observe",
+            type: "String",
+            help: _t("An element name parent of the radio to observe updates"),
+        }
+    ],
+    extractProps({ options }, dynamicInfo) {
+        return {
+            readonly: dynamicInfo.readonly,
+            links: options.links,
+            observe: options.observe,
+        };
+    },
+};
+
+registry.category("fields").add("radio_followed_by_element", radioFollowedByElement);