cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [bootstrap:helper] Return associated ajaxApi and modalFactory object

pull/59/head
mokaddem 2021-06-23 11:17:39 +02:00
parent 467f549afc
commit 0eb383f627
2 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/View/Helper/BootstrapHelper.php
View File

@ -898,7 +898,7 @@ class BoostrapModal extends BootstrapGeneric {
'text' => h($this->options['confirmText']), 'text' => h($this->options['confirmText']),
'class' => 'modal-confirm-button', 'class' => 'modal-confirm-button',
'params' => [ 'params' => [
'data-dismiss' => $this->options['confirmFunction'] ? '' : 'modal', // 'data-dismiss' => $this->options['confirmFunction'] ? '' : 'modal',
'data-confirmFunction' => sprintf('%s', $this->options['confirmFunction']) 'data-confirmFunction' => sprintf('%s', $this->options['confirmFunction'])
] ]
]))->button(); ]))->button();

49
webroot/js/bootstrap-helper.js
View File

@ -31,7 +31,7 @@ class UIFactory {
* @param {ModalFactory~POSTFailCallback} POSTFailCallback - The callback that handles form submissions errors and validation errors. * @param {ModalFactory~POSTFailCallback} POSTFailCallback - The callback that handles form submissions errors and validation errors.
* @return {Promise<Object>} Promise object resolving to the ModalFactory object * @return {Promise<Object>} Promise object resolving to the ModalFactory object
*/ */
submissionModal(url, POSTSuccessCallback, POSTFailCallback) { async submissionModal(url, POSTSuccessCallback, POSTFailCallback) {
return AJAXApi.quickFetchURL(url).then((modalHTML) => { return AJAXApi.quickFetchURL(url).then((modalHTML) => {
const theModal = new ModalFactory({ const theModal = new ModalFactory({
rawHtml: modalHTML, rawHtml: modalHTML,
@ -41,7 +41,7 @@ class UIFactory {
theModal.makeModal() theModal.makeModal()
theModal.show() theModal.show()
theModal.$modal.data('modalObject', theModal) theModal.$modal.data('modalObject', theModal)
return theModal return [theModal, theModal.ajaxApi]
}).catch((error) => { }).catch((error) => {
UI.toast({ UI.toast({
variant: 'danger', variant: 'danger',
@ -89,6 +89,11 @@ class UIFactory {
return UI.submissionReloaderModal(url, reloadUrl, $reloadedElement, $statusNode); return UI.submissionReloaderModal(url, reloadUrl, $reloadedElement, $statusNode);
} }
getContainerForTable($table) {
const tableRandomID = $table.data('table-random-value')
return $table.closest(`#table-container-${tableRandomID}`)
}
/** /**
* Creates and displays a modal where the modal's content is fetched from the provided URL. Reloads the index table after a successful operation. * Creates and displays a modal where the modal's content is fetched from the provided URL. Reloads the index table after a successful operation.
* Supports `displayOnSuccess` option to show another modal after the submission * Supports `displayOnSuccess` option to show another modal after the submission
@ -119,7 +124,7 @@ class UIFactory {
$statusNode = $elligibleTable $statusNode = $elligibleTable
} else { } else {
if ($table instanceof jQuery) { if ($table instanceof jQuery) {
$reloadedElement = $table $reloadedElement = getContainerForTable($table)
$statusNode = $table.find('table.table') $statusNode = $table.find('table.table')
} else { } else {
$reloadedElement = $(`#table-container-${$table}`) $reloadedElement = $(`#table-container-${$table}`)
@ -147,7 +152,6 @@ class UIFactory {
*/ */
submissionModalAutoGuess(url, reloadUrl=false, $table=false) { submissionModalAutoGuess(url, reloadUrl=false, $table=false) {
let currentAction = location.pathname.split('/')[2] let currentAction = location.pathname.split('/')[2]
currentAction += 'cdsc'
if (currentAction !== undefined) { if (currentAction !== undefined) {
if (currentAction === 'index') { if (currentAction === 'index') {
return UI.submissionModalForIndex(url, reloadUrl, $table) return UI.submissionModalForIndex(url, reloadUrl, $table)
@ -392,6 +396,7 @@ class ModalFactory {
if (this.options.backdropStatic) { if (this.options.backdropStatic) {
this.bsModalOptions['backdrop'] = 'static' this.bsModalOptions['backdrop'] = 'static'
} }
this.ajaxApi = new AJAXApi()
} }
/** /**
@ -657,8 +662,8 @@ class ModalFactory {
const $buttonConfirm = $('<button type="button" class="btn"></button>') const $buttonConfirm = $('<button type="button" class="btn"></button>')
.addClass('btn-' + variant) .addClass('btn-' + variant)
.text(this.options.confirmText) .text(this.options.confirmText)
.click(this.getConfirmationHandlerFunction())
.attr('data-dismiss', (this.options.closeManually || this.options.closeOnSuccess) ? '' : 'modal') .attr('data-dismiss', (this.options.closeManually || this.options.closeOnSuccess) ? '' : 'modal')
$buttonConfirm.click(this.getConfirmationHandlerFunction($buttonConfirm))
return [$buttonCancel, $buttonConfirm] return [$buttonCancel, $buttonConfirm]
} }
@ -668,18 +673,28 @@ class ModalFactory {
} }
/** Generate the function that will be called when the user confirm the modal */ /** Generate the function that will be called when the user confirm the modal */
getConfirmationHandlerFunction(i) { getConfirmationHandlerFunction($buttonConfirm, buttonIndex) {
if (this.options.APIConfirms) {
if (Array.isArray(this.ajaxApi)) {
const tmpApi = new AJAXApi({
statusNode: $buttonConfirm[0]
})
this.ajaxApi.push(tmpApi)
} else {
this.ajaxApi.statusNode = $buttonConfirm[0]
this.ajaxApi = [this.ajaxApi];
}
} else {
this.ajaxApi.statusNode = $buttonConfirm[0]
}
return (evt) => { return (evt) => {
let confirmFunction = this.options.confirm let confirmFunction = this.options.confirm
const tmpApi = new AJAXApi({
statusNode: evt.target
})
if (this.options.APIConfirms) { if (this.options.APIConfirms) {
if (i !== undefined && this.options.APIConfirms[i] !== undefined) { if (buttonIndex !== undefined && this.options.APIConfirms[buttonIndex] !== undefined) {
confirmFunction = () => { return this.options.APIConfirms[i](tmpApi) } confirmFunction = () => { return this.options.APIConfirms[buttonIndex](this.ajaxApi[buttonIndex]) }
} }
} else if (this.options.APIConfirm) { } else if (this.options.APIConfirm) {
confirmFunction = () => { return this.options.APIConfirm(tmpApi) } confirmFunction = () => { return this.options.APIConfirm(this.ajaxApi) }
} }
let confirmResult = confirmFunction(() => { this.hide() }, this, evt) let confirmResult = confirmFunction(() => { this.hide() }, this, evt)
if (confirmResult === undefined) { if (confirmResult === undefined) {
@ -727,7 +742,7 @@ class ModalFactory {
} }
} }
} }
$submitButton.click(selfModal.getConfirmationHandlerFunction(i)) $submitButton.click(selfModal.getConfirmationHandlerFunction($submitButton, i))
}) })
} else { } else {
let $submitButton = this.$modal.find('.modal-footer #submitButton') let $submitButton = this.$modal.find('.modal-footer #submitButton')
@ -768,19 +783,21 @@ class ModalFactory {
return tmpApi.postForm($form[0]) return tmpApi.postForm($form[0])
.then((data) => { .then((data) => {
if (data.success) { if (data.success) {
this.options.POSTSuccessCallback(data) // this.options.POSTSuccessCallback(data)
this.options.POSTSuccessCallback([data, this])
} else { // Validation error } else { // Validation error
this.injectFormValidationFeedback(form, data.errors) this.injectFormValidationFeedback(form, data.errors)
return Promise.reject('Validation error'); return Promise.reject('Validation error');
} }
}) })
.catch((errorMessage) => { .catch((errorMessage) => {
this.options.POSTFailCallback(errorMessage) this.options.POSTFailCallback([errorMessage, this])
// this.options.POSTFailCallback(errorMessage)
return Promise.reject(errorMessage); return Promise.reject(errorMessage);
}) })
} }
} }
$submitButton.click(this.getConfirmationHandlerFunction()) $submitButton.click(this.getConfirmationHandlerFunction($submitButton))
} }
} }
} }