First version

README.md

@@ -0,0 +1,11 @@
+# DataTable Modal Action Buttons
+
+This small package adds buttons using `modal-stack` to open modals from DataTables buttons.
+
+They expect to retrieve the needed information through the "config" parameter of the button.
+
+| Name                   | Description                                                         | Default      |
+|------------------------|---------------------------------------------------------------------|--------------|
+| uri                    | the uri which contains the HTML of the modal to open                | ""           |
+| rowIdentityProperty    | the property of the row to read the identity value from             | "__identity" |
+| uriIdentityPlaceholder | a string in the uri, which will be replaced with the identity value | "SUBJECT"    |

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@digicomp/datatables-modal-actions",
+  "version": "0.0.1",
+  "description": "defines modal actions for datatable buttons",
+  "main": "src/datatables-modal-actions.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@digital-competence.de:npm/datatables-modal-actions.git"
+  },
+  "keywords": [
+    "bootstrap",
+    "modal",
+    "ajax"
+  ],
+  "author": "Ferdinand Kuhl",
+  "license": "MIT",
+  "dependencies": {
+    "@digicomp/modal-stack": "^0.0.1",
+    "bootstrap": "^4.6 || ^5.3",
+    "datatables.net": "^1.13.6 || ^2.0.7"
+  },
+  "engines": {
+  }
+}

src/datatables-modal-actions.js

@@ -0,0 +1,29 @@
+import DataTable from 'datatables.net';
+import {createModalFromUri} from '@digicomp/modal-stack';
+
+DataTable.ext.buttons.actionModal = {
+    action: async function ( e, dt, node, config ) {
+        const modal = await createModalFromUri(config.uri);
+        modal.element.addEventListener('modal-stack-form-submit-success', () => {
+            dt.draw();
+        });
+        modal.open();
+    },
+};
+
+DataTable.ext.buttons.actionModalSelected = {
+    extend: 'selected',
+    action: async function ( e, dt, node, config ) {
+        const {
+            rowIdentityProperty = '__identity',
+            uriIdentityPlaceholder = 'SUBJECT'
+        } = config;
+        const identity = dt.rows({selected: true}).data()[0][rowIdentityProperty];
+
+        const modal = await createModalFromUri(config.uri.replace(uriIdentityPlaceholder, identity));
+        modal.element.addEventListener('modal-stack-form-submit-success', () => {
+            dt.draw();
+        });
+        modal.open();
+    },
+};