[MIG] web_widget_product_label_section_and_note: Migration to version 17.0

Author: carlos-lopez-tecnativa

web_widget_product_label_section_and_note/__manifest__.py

@@ -1,6 +1,6 @@
 {
     "name": "Web widget product label section and note",
-    "version": "16.0.1.0.1",
+    "version": "17.0.1.0.0",
     "summary": "unify the product and name into a single column",
     "author": "Tecnativa, Odoo Community Association (OCA), Odoo S.A.",
     "website": "https://github.com/OCA/web",

web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.esm.js

@@ -7,17 +7,20 @@ import {
     onMounted,
     onPatched,
     onWillUnmount,
-    onWillUpdateProps,
     useEffect,
     useRef,
     useState,
 } from "@odoo/owl";
 import {AutoComplete} from "@web/core/autocomplete/autocomplete";
 import {Many2OneField} from "@web/views/fields/many2one/many2one_field";
 import {Many2XAutocomplete} from "@web/views/fields/relational_utils";
-import {SectionAndNoteListRenderer} from "@account/components/section_and_note_fields_backend/section_and_note_fields_backend";
-import {X2ManyField} from "@web/views/fields/x2many/x2many_field";
+import {
+    SectionAndNoteListRenderer,
+    sectionAndNoteFieldOne2Many,
+} from "@account/components/section_and_note_fields_backend/section_and_note_fields_backend";
+import {X2ManyField, x2ManyField} from "@web/views/fields/x2many/x2many_field";
 import {_t} from "@web/core/l10n/translation";
+import {useRecordObserver} from "@web/model/relational_model/utils";
 import {getActiveHotkey} from "@web/core/hotkeys/hotkey_service";
 import {registry} from "@web/core/registry";
 import {useProductAndLabelAutoresize} from "../../core/utils/product_and_label_autoresize.esm";
@@ -70,19 +73,23 @@ export class ProductLabelSectionAndNoteListRender extends SectionAndNoteListRend
     }
 }
 
-export class ProductLabelSectionAndNoteOne2Many extends X2ManyField {}
-ProductLabelSectionAndNoteOne2Many.components = {
-    ...X2ManyField.components,
-    ListRenderer: ProductLabelSectionAndNoteListRender,
-};
-ProductLabelSectionAndNoteOne2Many.additionalClasses =
-    SectionAndNoteListRenderer.additionalClasses;
+export class ProductLabelSectionAndNoteOne2Many extends X2ManyField {
+    static components = {
+        ...X2ManyField.components,
+        ListRenderer: ProductLabelSectionAndNoteListRender,
+    };
+}
 
+export const productLabelSectionAndNoteOne2Many = {
+    ...x2ManyField,
+    component: ProductLabelSectionAndNoteOne2Many,
+    additionalClasses: sectionAndNoteFieldOne2Many.additionalClasses,
+};
 registry
     .category("fields")
     .add(
         "product_label_section_and_note_field_o2m",
-        ProductLabelSectionAndNoteOne2Many
+        productLabelSectionAndNoteOne2Many
     );
 
 export class ProductLabelSectionAndNoteAutocomplete extends AutoComplete {
@@ -107,6 +114,19 @@ export class ProductLabelSectionAndNoteAutocomplete extends AutoComplete {
 }
 
 export class ProductLabelSectionAndNoteFieldAutocomplete extends Many2XAutocomplete {
+    static components = {
+        ...Many2XAutocomplete.components,
+        AutoComplete: ProductLabelSectionAndNoteAutocomplete,
+    };
+    static props = {
+        ...Many2XAutocomplete.props,
+        isNote: {type: Boolean},
+        isSection: {type: Boolean},
+        onFocusout: {type: Function, optional: true},
+        updateLabel: {type: Function, optional: true},
+    };
+    static template =
+        "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteFieldAutocomplete";
     setup() {
         super.setup();
         this.input = useRef("section_and_note_input");
@@ -121,14 +141,13 @@ export class ProductLabelSectionAndNoteFieldAutocomplete extends Many2XAutocompl
     }
 }
 
-ProductLabelSectionAndNoteFieldAutocomplete.components = {
-    ...Many2XAutocomplete.components,
-    AutoComplete: ProductLabelSectionAndNoteAutocomplete,
-};
-ProductLabelSectionAndNoteFieldAutocomplete.template =
-    "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteFieldAutocomplete";
-
 export class ProductLabelSectionAndNoteField extends Many2OneField {
+    static components = {
+        ...Many2OneField.components,
+        Many2XAutocomplete: ProductLabelSectionAndNoteFieldAutocomplete,
+    };
+    static template =
+        "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteField";
     setup() {
         super.setup();
         this.isPrintMode = useState({value: false});
@@ -183,8 +202,8 @@ export class ProductLabelSectionAndNoteField extends Many2OneField {
             window.removeEventListener("beforeprint", this.onBeforePrint);
             window.removeEventListener("afterprint", this.onAfterPrint);
         });
-        onWillUpdateProps((newProps) => {
-            const label = newProps.record.data.name || "";
+        useRecordObserver(async (record) => {
+            const label = record.data.name || "";
             this.isProductVisible.value = label.includes(this.productName);
         });
     }
@@ -266,13 +285,10 @@ export class ProductLabelSectionAndNoteField extends Many2OneField {
     }
 }
 
-ProductLabelSectionAndNoteField.components = {
-    ...Many2OneField.components,
-    Many2XAutocomplete: ProductLabelSectionAndNoteFieldAutocomplete,
+export const productLabelSectionAndNoteField = {
+    ...Many2OneField,
+    component: ProductLabelSectionAndNoteField,
 };
-ProductLabelSectionAndNoteField.template =
-    "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteField";
-
 registry
     .category("fields")
-    .add("product_label_section_and_note_field", ProductLabelSectionAndNoteField);
+    .add("product_label_section_and_note_field", productLabelSectionAndNoteField);

web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml

@@ -3,7 +3,6 @@
 
     <t
         t-name="web_widget_product_label_section_and_note.ProductLabelSectionAndNoteField"
-        owl="1"
     >
         <div class="o_field_product_label_section_and_note_cell">
             <t t-if="props.readonly">
@@ -96,12 +95,12 @@
                         <button
                             t-if="hasExternalButton"
                             aria-label="Internal link"
-                            class="btn btn-secondary fa o_external_button"
+                            class="btn btn-link text-action oi o_external_button"
                             data-tooltip="Internal link"
                             draggable="false"
                             tabindex="-1"
                             type="button"
-                            t-att-class="(props.openTarget === 'current' and !env.inDialog )? 'fa-arrow-right' : 'fa-external-link'"
+                            t-att-class="env.inDialog ? 'oi-launch' : 'oi-arrow-right'"
                             t-on-click="onExternalBtnClick"
                         />
                         <button
@@ -181,18 +180,18 @@
         t-name="web_widget_product_label_section_and_note.ProductLabelSectionAndNoteFieldAutocomplete"
         t-inherit="web.Many2XAutocomplete"
         t-inherit-mode="primary"
-        owl="1"
     >
         <xpath expr="//AutoComplete[@t-else='']" position="replace">
             <t t-else="">
                 <t t-if="!isSectionOrNote">
                     <AutoComplete
+                        autofocus="props.autofocus"
                         autoSelect="props.autoSelect"
+                        dropdown="props.dropdown"
                         id="props.id"
                         onChange.bind="onChange"
                         onInput.bind="onInput"
                         onSelect.bind="onSelect"
-                        onCancel.bind="onCancel"
                         placeholder="props.placeholder"
                         resetOnSelect="props.value === ''"
                         sources="sources"
@@ -211,7 +210,7 @@
                 </t>
             </t>
         </xpath>
-        <xpath expr="//a[@class='o_dropdown_button']" position="attributes">
+        <xpath expr="//span[hasclass('o_dropdown_button')]" position="attributes">
             <attribute name="t-if">!isSectionOrNote</attribute>
         </xpath>
     </t>

web_widget_product_label_section_and_note/static/src/core/utils/autoresize.esm.js

@@ -5,6 +5,7 @@
 
 import {useEffect} from "@odoo/owl";
 import {browser} from "@web/core/browser/browser";
+import {resizeTextArea} from "@web/core/utils/autoresize";
 
 function resizeInput(input) {
     // This mesures the maximum width of the input which can get from the flex layout.
@@ -25,37 +26,6 @@ function resizeInput(input) {
     input.style.width = input.scrollWidth + 5 + (isSafari16 ? 8 : 0) + "px";
 }
 
-export function resizeTextArea(textarea, options = {}) {
-    const minimumHeight = options.minimumHeight || 0;
-    let heightOffset = 0;
-    const style = window.getComputedStyle(textarea);
-    if (style.boxSizing === "border-box") {
-        const paddingHeight =
-            parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
-        const borderHeight =
-            parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-        heightOffset = borderHeight + paddingHeight;
-    }
-    const previousStyle = {
-        borderTopWidth: style.borderTopWidth,
-        borderBottomWidth: style.borderBottomWidth,
-        padding: style.padding,
-    };
-    Object.assign(textarea.style, {
-        height: "auto",
-        borderTopWidth: 0,
-        borderBottomWidth: 0,
-        paddingTop: 0,
-        paddingRight: style.paddingRight,
-        paddingBottom: 0,
-        paddingLeft: style.paddingLeft,
-    });
-    textarea.style.height = "auto";
-    const height = Math.max(minimumHeight, textarea.scrollHeight + heightOffset);
-    Object.assign(textarea.style, previousStyle, {height: `${height}px`});
-    textarea.parentElement.style.height = `${height}px`;
-}
-
 /**
  * This is used on text inputs or textareas to automatically resize it based on its
  * content each time it is updated. It takes the reference of the element as