[FIX] web: FormViewDialog: add "Remove" button

In the conversion of the FormViewDialog from legacy to wowl, we
forgot the feature allowing to display a "Remove" button in the
footer, and to execute a custom callback when this button is
clicked. This is used for instance by the Gantt view.

This commit restores the feature.

closes odoo/odoo#102149

X-original-commit: 3eb126d0297a7e3db0cb98cd1ad9555eefaa0cfa
Related: odoo/enterprise#32281
Signed-off-by: Géry Debongnie <ged@odoo.com>
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

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

@@ -473,6 +473,7 @@ FormController.props = {
         validate: (m) => ["edit", "readonly"].includes(m),
     },
     saveRecord: { type: Function, optional: true },
+    removeRecord: { type: Function, optional: true },
     Model: Function,
     Renderer: Function,
     Compiler: Function,

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

@@ -52,6 +52,9 @@
                 <button type="button" class="btn btn-secondary o_form_button_cancel" data-hotkey="j" t-on-click.stop="discard">
                     Discard
                 </button>
+                <button t-if="props.removeRecord" class="btn btn-secondary o_form_button_remove" t-on-click="props.removeRecord" data-hotkey="x">
+                    Remove
+                </button>
             </div>
             <div t-elif="canCreate" class="o_form_buttons_view">
                 <button type="button" class="btn btn-secondary o_form_button_create" data-hotkey="c" t-on-click.stop="create">

addons/web/static/src/views/view_dialogs/form_view_dialog.js

@@ -51,6 +51,12 @@ export class FormViewDialog extends Component {
                 }
             },
         };
+        if (this.props.removeRecord) {
+            this.viewProps.removeRecord = async () => {
+                await this.props.removeRecord();
+                this.props.close();
+            };
+        }
 
         onMounted(() => {
             if (
@@ -112,6 +118,7 @@ FormViewDialog.props = {
         validate: (m) => ["edit", "readonly"].includes(m),
     },
     onRecordSaved: { type: Function, optional: true },
+    removeRecord: { type: Function, optional: true },
     resId: { type: [Number, Boolean], optional: true },
     title: { type: String, optional: true },
     viewId: { type: [Number, Boolean], optional: true },

addons/web/static/tests/views/view_dialogs/form_view_dialog_tests.js

@@ -325,4 +325,24 @@ QUnit.module("ViewDialogs", (hooks) => {
             assert.containsNone(target, ".modal", "modal should be closed");
         }
     );
+
+    QUnit.test("FormViewDialog with remove button", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `<form><field name="foo"/></form>`,
+        };
+
+        const webClient = await createWebClient({ serverData });
+        webClient.env.services.dialog.add(FormViewDialog, {
+            resModel: "partner",
+            resId: 1,
+            removeRecord: () => assert.step("remove"),
+        });
+        await nextTick();
+
+        assert.containsOnce(target, ".o_dialog .o_form_view");
+        assert.containsOnce(target, ".o_dialog .modal-footer .o_form_button_remove");
+        await click(target.querySelector(".o_dialog .modal-footer .o_form_button_remove"));
+        assert.verifySteps(["remove"]);
+        assert.containsNone(target, ".o_dialog .o_form_view");
+    });
 });