[17.0][FWP] fs_base_multi_image: drag and drop fixes

fs_base_multi_image/models/fs_image_relation_mixin.py

@@ -82,12 +82,14 @@
 
     @api.model
     def _cleanup_vals(self, vals):
-        if (
-            "link_existing" in vals
-            and vals["link_existing"]
-            and "specific_image" in vals
-        ):
-            vals["specific_image"] = False
+        link_existing = vals.get("link_existing")
+        if link_existing:
+            if "specific_image" in vals:
+                vals.pop("specific_image")
+            if "image" in vals:
+                # image is set when using the kanban renderer so it
+                # prevents the name field to be computed well
+                vals.pop("image")
         return vals
 
     @api.model_create_multi

fs_base_multi_image/static/src/fields/fs_image_relation_dnd_upload/fs_image_relation_dnd_upload.esm.js

@@ -4,10 +4,20 @@ import {X2ManyField, x2ManyField} from "@web/views/fields/x2many/x2many_field";
 import {onWillRender, useRef, useState} from "@odoo/owl";
 import {registry} from "@web/core/registry";
 
+import {useX2ManyCrud} from "@web/views/fields/relational_utils";
+
 export class FsImageRelationDndUploadField extends X2ManyField {
+    /**
+     * When using this widget, displayed image relation views must contains
+     * following fields:
+     * - sequence
+     * - image_id
+     * - specific_image
+     * - link_existing
+     */
     setup() {
         super.setup();
-        this.relationField = this.field.relation_field;
+        this.options = this.activeField.options;
         this.defaultTarget = this.props.crudOptions.target || "specific";
         this.state = useState({
             dragging: false,
@@ -16,6 +26,8 @@ export class FsImageRelationDndUploadField extends X2ManyField {
         this.fileInput = useRef("fileInput");
         this.defaultSequence = 0;
 
+        this.operations = useX2ManyCrud(() => this.list, this.isMany2Many);
+
         onWillRender(() => {
             this.initDefaultSequence();
         });
@@ -25,6 +37,10 @@ export class FsImageRelationDndUploadField extends X2ManyField {
         return this.state.target;
     }
 
+    get relationRecordId() {
+        return this.props.record.data.id;
+    }
+
     get displayDndZone() {
         const activeActions = this.activeActions;
         return (
@@ -89,18 +105,15 @@ export class FsImageRelationDndUploadField extends X2ManyField {
 
     async uploadFsImage(imagesDesc) {
         const self = this;
-        const createValues = [];
         self.env.model.orm
             .call("fs.image", "create", [imagesDesc])
             .then((fsImageIds) => {
                 let values = {};
                 $.each(fsImageIds, (i, fsImageId) => {
                     values = self.getFsImageRelationValues(fsImageId);
-                    createValues.push(values);
+                    self.createFieldRelationRecords(values);
                 });
-            })
-            .then(() => {
-                self.createFieldRelationRecords(createValues);
+                self.env.services.ui.unblock();
             })
             .catch(() => {
                 self.displayUploadError();
@@ -120,49 +133,43 @@ export class FsImageRelationDndUploadField extends X2ManyField {
 
     getFsImageRelationValues(fsImageId) {
         let values = {
-            image_id: fsImageId,
-            link_existing: true,
+            default_image_id: fsImageId,
+            default_link_existing: true,
         };
         values = {...values, ...this.getRelationCommonValues()};
         return values;
     }
 
     async uploadSpecificImage(imagesDesc) {
         const self = this;
-        const createValues = [];
         $.each(imagesDesc, (i, imageDesc) => {
-            createValues.push(self.getSpecificImageRelationValues(imageDesc));
+            self.createFieldRelationRecords(
+                self.getSpecificImageRelationValues(imageDesc)
+            );
         });
-        self.createFieldRelationRecords(createValues);
+        self.env.services.ui.unblock();
     }
 
     getSpecificImageRelationValues(imageDesc) {
-        return {...imageDesc, ...this.getRelationCommonValues()};
+        return {
+            ...this.getRelationCommonValues(),
+            default_specific_image: imageDesc.image,
+        };
     }
 
     getRelationCommonValues() {
-        const values = {
-            sequence: this.getNewSequence(),
+        return {
+            default_sequence: this.getNewSequence(),
         };
-        values[this.relationField] = this.props.record.data.id;
-        return values;
     }
 
     async createFieldRelationRecords(createValues) {
-        const self = this;
-        const model = self.env.model;
-        model.orm
-            .call(self.field.relation, "create", [createValues])
-            .then(() => {
-                model.root.load();
-                model.root.save();
-            })
-            .then(() => {
-                self.env.services.ui.unblock();
-            })
-            .catch(() => {
-                self.displayUploadError();
-            });
+        await this.list.addNewRecord({
+            position: "bottom",
+            context: createValues,
+            mode: "readonly",
+            allowWarning: true,
+        });
     }
 
     async uploadImages(files) {

fs_base_multi_image/views/fs_image_relation_mixin.xml

@@ -42,8 +42,10 @@
         <field name="arch" type="xml">
             <kanban>
                 <field name="image" />
-                <field name="name" />
                 <field name="sequence" />
+                <field name="image_id" />
+                <field name="specific_image" />
+                <field name="link_existing" />
                 <templates>
                     <t t-name="kanban-box">
                         <div class="oe_kanban_card oe_kanban_global_click">

fs_product_multi_image/views/fs_product_image.xml

@@ -38,7 +38,7 @@
         />
         <field name="mode">primary</field>
         <field name="arch" type="xml">
-            <xpath expr="//kanban/field[@name='name']">
+            <xpath expr="//kanban/field[@name='image']">
                 <field name="tag_id" />
             </xpath>
             <xpath expr="//div[hasclass('o_kanban_image')]" position="inside">

fs_product_multi_image/views/product_template.xml

@@ -20,26 +20,20 @@
             </field>
             <page name="sales" position="after">
                 <page name="images" string="Images">
-                    <group>
-                        <group colspan="12">
-                            <field
-                                name="image_ids"
-                                widget="fs_image_relation_dnd_upload"
-                                nolabel="1"
-                                colspan="2"
-                            >
-                                <tree>
-                                    <field name="sequence" widget="handle" />
-                                    <field name="name" />
-                                </tree>
-                            </field>
-                        </group>
-                        <!-- field
-                            name="image_ids"
-                            mode="kanban"
-                            widget="storage_image_handle"
-                        / -->
-                    </group>
+                    <field
+                        name="image_ids"
+                        widget="fs_image_relation_dnd_upload"
+                        mode="kanban"
+                    >
+                        <tree>
+                            <field name="sequence" widget="handle" />
+                            <field name="name" />
+                            <field name="link_existing" invisible="1" />
+                            <field name="image_id" invisible="1" />
+                            <field name="image" invisible="1" />
+                            <field name="specific_image" invisible="1" />
+                        </tree>
+                    </field>
                 </page>
             </page>
         </field>