Show a confirmation message, if you delete parts via part table select.

assets/controllers/elements/datatables/parts_controller.js

@@ -1,5 +1,7 @@
 import DatatablesController from "./datatables_controller.js";
 
+import * as bootbox from "bootbox";
+
 /**
  * This is the datatables controller for parts lists
  */
@@ -7,6 +9,8 @@ export default class extends DatatablesController {
 
     static targets = ['dt', 'selectPanel', 'selectIDs', 'selectCount', 'selectTargetPicker'];
 
+    _confirmed = false;
+
     isSelectable() {
         //Parts controller is always selectable
         return true;
@@ -79,5 +83,46 @@ export default class extends DatatablesController {
             $(select_target).selectpicker('hide');
         }
     }
+
+    confirmDeletionAtSubmit(event) {
+        //Only show the dialog when selected action is delete
+        if (event.target.elements["action"].value !== "delete") {
+            return;
+        }
+
+        //If a user has not already confirmed the deletion, just let turbo do its work
+        if(this._confirmed) {
+            this._confirmed = false;
+            return;
+        }
+
+        //Prevent turbo from doing its work
+        event.preventDefault();
+
+        const message = this.element.dataset.deleteMessage;
+        const title = this.element.dataset.deleteTitle;
+
+        const form = this.element;
+        const that = this;
+
+        //Create a clone of the event with the same submitter, so we can redispatch it if needed
+        //We need to do this that way, as we need the submitter info, just calling form.submit() would not work
+        this._our_event = new SubmitEvent('submit', {
+            submitter: event.submitter,
+            bubbles: true, //This line is important, otherwise Turbo will not receive the event
+        });
+
+        const confirm = bootbox.confirm({
+            message: message, title: title, callback: function (result) {
+                //If the dialog was confirmed, then submit the form.
+                if (result) {
+                    that._confirmed = true;
+                    form.dispatchEvent(that._our_event);
+                } else {
+                    that._confirmed = false;
+                }
+            }
+        });
+    }
 }
 

templates/components/datatables.macro.html.twig

@@ -19,7 +19,9 @@
 
 {% macro partsDatatableWithForm(datatable) %}
     <form method="post" action="{{ path("table_action") }}"
-            {{ stimulus_controller('elements/datatables/parts') }} data-dt-settings='{{ datatable_settings(datatable)|escape('html_attr') }}' data-dt-url="{{ app.request.pathInfo }}">
+            {{ stimulus_controller('elements/datatables/parts') }} data-dt-settings='{{ datatable_settings(datatable)|escape('html_attr') }}' data-dt-url="{{ app.request.pathInfo }}"
+            {{ stimulus_action('elements/datatables/parts', 'confirmDeletionAtSubmit') }}  data-delete-title="{% trans %}part_list.action.delete-title{% endtrans %}"
+          data-delete-message="{% trans %}part_list.action.delete-message{% endtrans %}">
         <input type="hidden" name="_token" value="{{ csrf_token('table_action') }}">
 
         <input type="hidden" name="redirect_back" value="{{ app.request.uri }}">

translations/messages.en.xlf

@@ -9333,5 +9333,23 @@ Element 3</target>
         <target>No elements existing!</target>
       </segment>
     </unit>
+    <unit id="4IH1qgL" name="part_list.action.delete-title">
+      <segment>
+        <source>part_list.action.delete-title</source>
+        <target>Do you really want to delete this parts?</target>
+      </segment>
+    </unit>
+    <unit id="te3YmqA" name="part_list.action.delete-message">
+      <segment>
+        <source>part_list.action.delete-message</source>
+        <target>These parts and any associated information (like attachments, price information, etc.) will be deleted. This can not be undone!</target>
+      </segment>
+    </unit>
+    <unit id="xd6OiPE" name="part.table.actions.success">
+      <segment>
+        <source>part.table.actions.success</source>
+        <target>Actions finished successfully.</target>
+      </segment>
+    </unit>
   </file>
 </xliff>