[REF] web: formGroups: improve extensibility

X-original-commit: 9f64da010ef74848a3e4dd6b2c6d99365a0312c2
Part-of: odoo/odoo#102153

addons/web/static/src/views/fields/field.js

@@ -56,7 +56,7 @@ function getFieldClassFromRegistry(fieldType, widget, viewType, jsClass) {
 export function fieldVisualFeedback(FieldComponent, record, fieldName, fieldInfo) {
     const modifiers = fieldInfo.modifiers || {};
     const readonly = evalDomain(modifiers.readonly, record.evalContext);
-    const inEdit = record.mode !== "readonly";
+    const inEdit = record.isInEdition;
 
     let empty = !record.isVirtual;
     if ("isEmpty" in FieldComponent) {

addons/web/static/src/views/form/form_group/form_group.js

@@ -2,11 +2,15 @@
 import { sortBy } from "@web/core/utils/arrays";
 
 class Group extends owl.Component {
-    getItems() {
-        const items = Object.entries(this.props.slots).filter(([k, v]) => v.type === "item");
+    _getItems() {
+        const items = Object.entries(this.props.slots || {}).filter(([k, v]) => v.type === "item");
         return sortBy(items, (i) => i[1].sequence);
     }
 
+    getItems() {
+        return this._getItems();
+    }
+
     get allClasses() {
         return this.props.class;
     }
@@ -26,7 +30,12 @@ export class OuterGroup extends Group {
         return items.map((item) => {
             const [slotName, slot] = item;
             const itemSpan = slot.itemSpan || 1;
-            return { name: slotName, size: itemSpan * colSize, newline: slot.newline, colspan: itemSpan };
+            return {
+                name: slotName,
+                size: itemSpan * colSize,
+                newline: slot.newline,
+                colspan: itemSpan,
+            };
         });
     }
 }
@@ -38,6 +47,9 @@ OuterGroup.defaultProps = {
 };
 
 export class InnerGroup extends Group {
+    getTemplate(subType) {
+        return this.constructor.templates[subType] || this.constructor.templates.default;
+    }
     getRows() {
         const maxCols = this.props.maxCols;
 
@@ -49,7 +61,7 @@ export class InnerGroup extends Group {
         const items = this.getItems();
         while (items.length) {
             const [slotName, slot] = items.shift();
-            const { newline, itemSpan, subType, Component, props } = slot;
+            const { newline, itemSpan } = slot;
             if (newline) {
                 rows.push(currentRow);
                 currentRow = [];
@@ -65,7 +77,7 @@ export class InnerGroup extends Group {
             }
 
             const isVisible = !("isVisible" in slot) || slot.isVisible;
-            currentRow.push({ name: slotName, subType, itemSpan, props, isVisible, Component });
+            currentRow.push({ ...slot, name: slotName, itemSpan, isVisible });
             reservedSpace += itemSpan || 1;
 
             // Allows to remove the line if the content is not visible instead of leaving an empty line.

addons/web/static/src/views/form/form_group/form_group.xml

@@ -3,7 +3,7 @@
 
 <t t-name="web.Form.OuterGroup" owl="1">
     <div class="o_group row g-2 gx-lg-5 align-items-start" t-attf-class="{{ allClasses }} {{ props.hasOuterTemplate and props.class ? '' : 'my-3' }}" t-att-style="props.style">
-        <t t-slot="title" t-if="props.slots.title" />
+        <t t-slot="title" t-if="props.slots and props.slots.title" />
         <t t-foreach="getItems()" t-as="item" t-key="item_index">
             <span class="o_newline" t-if="item.newline" />
             <t t-slot="{{ item.name }}" className="item.colspan !== props.maxCols ? 'col-lg-' + item.size : ''"/>
@@ -12,23 +12,15 @@
 </t>
 
 <t t-name="web.Form.InnerGroup" owl="1">
-    <div t-attf-class="{{ allClasses }}" class="o_inner_group grid" t-if="props.slots" t-att-style="props.style">
-        <div t-if="props.slots.title" t-attf-class="g-col-sm-{{ props.maxCols }}">
+    <div t-attf-class="{{ allClasses }}" class="o_inner_group grid" t-att-style="props.style">
+        <div t-if="props.slots and props.slots.title" t-attf-class="g-col-sm-{{ props.maxCols }}">
             <t t-slot="title" />
         </div>
         <div t-foreach="getRows()" t-as="row" t-key="row_index" class="o_wrap_field d-flex d-sm-contents flex-column mb-3 mb-sm-0" t-if="row.isVisible">
             <t t-foreach="row" t-as="cell" t-key="cell_index">
 
                 <t t-if="cell.subType === 'item_component'">
-                    <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
-                        <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props"/>
-                    </div>
-                    <div
-                        class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0" 
-                        t-attf-style="{{ cell.itemSpan -1 > 1 ? 'grid-column: span ' + (cell.itemSpan -1) + ';' : '' }}{{ cell.width ? 'width: ' + cell.width + '%' + ';' : '' }}"
-                    >
-                        <t t-slot="{{ cell.name }}" />
-                    </div>
+                    <t t-call="web.Form.InnerGroup.ItemComponent"><t t-set="cell" t-value="cell" /></t>
                 </t>
 
                 <t t-else="">
@@ -46,4 +38,16 @@
     </div>
 </t>
 
+<t t-name="web.Form.InnerGroup.ItemComponent" owl="1">
+    <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
+        <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props"/>
+    </div>
+    <div
+        class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0"
+        t-attf-style="{{ cell.itemSpan -1 > 1 ? 'grid-column: span ' + (cell.itemSpan -1) + ';' : '' }}{{ cell.width ? 'width: ' + cell.width + '%' + ';' : '' }}"
+    >
+        <t t-slot="{{ cell.name }}" />
+    </div>
+</t>
+
 </templates>