[REF] web_editor: convert MultiUserValueWidget to Owl

Had to introduce a `multiSequence` because Owl's `setup` is called in an unpredictable order. task-3850413
odoo-dev · Jun 21, 2024 · fb98eb8 · fb98eb8
1 parent 63f08e7
commit fb98eb8
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 26 deletions.
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -834,13 +834,17 @@ class UserValueComponent extends Component {
         const state = useState({});
         const propsCopy = { ...this.props };
         delete propsCopy.slots;
+        delete propsCopy.multiSequence;
         this.state = new this.constructor.StateModel(
             id,
             state,
             this.env,
             this.env.snippetOption,
             propsCopy
         );
+        if (this.props.multiSequence) {
+            this.state.multiSequence = this.props.multiSequence;
+        }
 
         this.env.registerUserValue(this.state);
 
@@ -1796,18 +1800,17 @@ export class WeInput extends UserValueComponent {
 }
 registry.category("snippet_widgets").add("WeInput", WeInput);
 
-const MultiUserValueWidget = UserValueWidget.extend({
-    tagName: 'we-multi',
+class MultiUserValue extends UserValue {
 
-    /**
-     * @override
-     */
-    start: function () {
-        if (this.options && this.options.childNodes) {
-            this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
+    get sortedValues() {
+        if (!this._sortedValues) {
+            this._sortedValues = Object.values(this._subValues);
+            this._sortedValues.sort((a, b) => {
+                return a.multiSequence - b.multiSequence;
+            });
         }
-        return this._super(...arguments);
-    },
+        return this._sortedValues;
+    }
 
     //--------------------------------------------------------------------------
     // Public
@@ -1816,33 +1819,37 @@ const MultiUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    getValue: function (methodName) {
-        const value = this._userValueWidgets.map(widget => {
-            return widget.getValue(methodName);
+    getValue(methodName) {
+        const value = this.sortedValues.map(subValue => {
+            return subValue.getValue(methodName);
         }).join(' ').trim();
 
-        return value || this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    isContainer: function () {
-        return true;
-    },
+        return value || super.getValue(...arguments);
+    }
     /**
      * @override
      */
     async setValue(value, methodName) {
+        // TODO: @owl-options avoid null
+        value ||= "";
         let values = value.split(/\s*\|\s*/g);
         if (values.length === 1) {
             values = value.split(/\s+/g);
         }
-        for (let i = 0; i < this._userValueWidgets.length - 1; i++) {
-            await this._userValueWidgets[i].setValue(values.shift() || '', methodName);
+        for (let i = 0; i < this.sortedValues.length - 1; i++) {
+            await this.sortedValues[i].setValue(values.shift() || '', methodName);
         }
-        await this._userValueWidgets[this._userValueWidgets.length - 1].setValue(values.join(' '), methodName);
-    },
-});
+        await this.sortedValues[this.sortedValues.length - 1].setValue(values.join(' '), methodName);
+    }
+}
+
+const MultiUserValueWidget = UserValueWidget.extend({});
+class WeMulti extends UserValueComponent {
+    static template = "web_editor.WeMulti";
+    static isContainer = true;
+    static StateModel = MultiUserValue;
+}
+registry.category("snippet_widgets").add("WeMulti", WeMulti);
 
 export class ColorpickerUserValue extends SelectUserValue {
     /** 

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.xml b/addons/web_editor/static/src/js/editor/snippets.options.xml
@@ -50,6 +50,29 @@
                 max="'-100'"
                 step="'10'"/>
     </WeRow>
+    <WeMulti cssProperty="'box-shadow'" variable="'menu-box-shadow'">
+        <WeRow class="o_we_sublevel_1">
+            <t t-set-slot="title">Color</t>
+            <WeColorpicker multiSequence="10" selectStyle="''" cssCompatible="''"/>
+        </WeRow>
+        <WeRow class="o_we_sublevel_1">
+            <t t-set-slot="title">Offset (X, Y)</t>
+            <WeInput multiSequence="20" unit="'px'" selectStyle="''"/>
+            <WeInput multiSequence="30" unit="'px'" selectStyle="''"/>
+        </WeRow>
+        <WeRow class="o_we_sublevel_1">
+            <t t-set-slot="title">Blur</t>
+            <WeInput multiSequence="40" unit="'px'" selectStyle="''"/>
+        </WeRow>
+        <WeRow class="o_we_sublevel_1">
+            <t t-set-slot="title">Spread</t>
+            <WeInput multiSequence="50" unit="'px'" selectStyle="''"/>
+        </WeRow>
+        <!-- Inset parameter always hidden (as controlled above) but needed -->
+        <!-- for the we-multi widget to work properly. -->
+        <!-- name="fake_inset_shadow_opt" -->
+        <WeCheckbox multiSequence="60" selectStyle="'inset'"/>
+    </WeMulti>
 </t>
 
 <t t-name="web_editor.container_width">
@@ -229,4 +252,12 @@
         </div>
     </we-select>
 </t>
+<t t-name="web_editor.WeMulti">
+    <we-multi class="o_we_user_value_widget" t-att-class="getAllClasses()">
+        <we-title t-if="props.slots?.title"><t t-slot="title"/></we-title>
+        <div>
+            <t t-slot="default"/>
+        </div>
+    </we-multi>
+</t>
 </templates>