diff --git a/README.md b/README.md new file mode 100644 index 0000000..d678251 --- /dev/null +++ b/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" | diff --git a/package.json b/package.json new file mode 100644 index 0000000..ad200cc --- /dev/null +++ b/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": { + } +} diff --git a/src/datatables-modal-actions.js b/src/datatables-modal-actions.js new file mode 100644 index 0000000..d2fe5b5 --- /dev/null +++ b/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(); + }, +};