chg: [js:bootstrap-helper] Made submission modal more explicit
parent
004bca47e6
commit
3bd2b7583e
|
@ -3,7 +3,7 @@
|
||||||
echo sprintf(
|
echo sprintf(
|
||||||
'%s',
|
'%s',
|
||||||
sprintf(
|
sprintf(
|
||||||
'<button id="submitButton" class="btn btn-primary" data-form-id="%s" autofocus>%s</button>',
|
'<button id="submitButton" class="btn btn-primary" data-form-id="%s" type="button" autofocus>%s</button>',
|
||||||
'#form-' . h($formRandomValue),
|
'#form-' . h($formRandomValue),
|
||||||
__('Submit')
|
__('Submit')
|
||||||
)
|
)
|
||||||
|
|
|
@ -87,7 +87,7 @@
|
||||||
$action['open_modal']
|
$action['open_modal']
|
||||||
);
|
);
|
||||||
$reload_url = !empty($action['reload_url']) ? $action['reload_url'] : $this->Url->build(['action' => 'index']);
|
$reload_url = !empty($action['reload_url']) ? $action['reload_url'] : $this->Url->build(['action' => 'index']);
|
||||||
$action['onclick'] = sprintf('UI.openModalFromURL(\'%s\', \'%s\', \'%s\')', $modal_url, $reload_url, $tableRandomValue);
|
$action['onclick'] = sprintf('UI.submissionModalForIndex(\'%s\', \'%s\', \'%s\')', $modal_url, $reload_url, $tableRandomValue);
|
||||||
}
|
}
|
||||||
echo sprintf(
|
echo sprintf(
|
||||||
'<a href="%s%s" title="%s" aria-label="%s" %s %s class="link-unstyled"><i class="%s"></i></a> ',
|
'<a href="%s%s" title="%s" aria-label="%s" %s %s class="link-unstyled"><i class="%s"></i></a> ',
|
||||||
|
|
|
@ -14,7 +14,7 @@ if ($field['scope'] === 'individuals') {
|
||||||
h($alignment['organisation']['name'])
|
h($alignment['organisation']['name'])
|
||||||
),
|
),
|
||||||
!$canRemove ? '' : sprintf(
|
!$canRemove ? '' : sprintf(
|
||||||
"UI.openModalFromURL(%s);",
|
"UI.submissionModalForIndex(%s);",
|
||||||
sprintf(
|
sprintf(
|
||||||
"'/alignments/delete/%s'",
|
"'/alignments/delete/%s'",
|
||||||
h($alignment['id'])
|
h($alignment['id'])
|
||||||
|
@ -34,7 +34,7 @@ if ($field['scope'] === 'individuals') {
|
||||||
h($alignment['individual']['email'])
|
h($alignment['individual']['email'])
|
||||||
),
|
),
|
||||||
!$canRemove ? '' : sprintf(
|
!$canRemove ? '' : sprintf(
|
||||||
"UI.openModalFromURL(%s);",
|
"UI.submissionModalForIndex(%s);",
|
||||||
sprintf(
|
sprintf(
|
||||||
"'/alignments/delete/%s'",
|
"'/alignments/delete/%s'",
|
||||||
h($alignment['id'])
|
h($alignment['id'])
|
||||||
|
|
|
@ -71,12 +71,8 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function openModalForButton(clicked, url, reloadUrl='') {
|
function openModalForButton(clicked, url, reloadUrl='') {
|
||||||
const loadingOverlay = new OverlayFactory(clicked);
|
|
||||||
const fallbackReloadUrl = '<?= $this->Url->build(['action' => 'index']); ?>'
|
const fallbackReloadUrl = '<?= $this->Url->build(['action' => 'index']); ?>'
|
||||||
reloadUrl = reloadUrl != '' ? reloadUrl : fallbackReloadUrl
|
reloadUrl = reloadUrl != '' ? reloadUrl : fallbackReloadUrl
|
||||||
loadingOverlay.show()
|
UI.overlayUntilResolve(clicked, UI.submissionModalForIndex(url, reloadUrl, '<?= $tableRandomValue ?>'))
|
||||||
UI.openModalFromURL(url, reloadUrl, '<?= $tableRandomValue ?>').finally(() => {
|
|
||||||
loadingOverlay.hide()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -144,11 +144,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function openFilteringModal(clicked, url, reloadUrl, tableId) {
|
function openFilteringModal(clicked, url, reloadUrl, tableId) {
|
||||||
const loadingOverlay = new OverlayFactory(clicked);
|
UI.overlayUntilResolve(clicked, UI.submissionModalForIndex(url, reloadUrl, tableId))
|
||||||
loadingOverlay.show()
|
|
||||||
UI.openModalFromURL(url, reloadUrl, tableId).finally(() => {
|
|
||||||
loadingOverlay.hide()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -20,7 +20,7 @@ if ($field['scope'] === 'individuals') {
|
||||||
h($alignment['organisation']['name'])
|
h($alignment['organisation']['name'])
|
||||||
),
|
),
|
||||||
sprintf(
|
sprintf(
|
||||||
"UI.openModalFromURL(%s);",
|
"UI.submissionModalForSinglePage(%s);",
|
||||||
sprintf(
|
sprintf(
|
||||||
"'/alignments/delete/%s'",
|
"'/alignments/delete/%s'",
|
||||||
$alignment['id']
|
$alignment['id']
|
||||||
|
@ -40,7 +40,7 @@ if ($field['scope'] === 'individuals') {
|
||||||
h($alignment['individual']['email'])
|
h($alignment['individual']['email'])
|
||||||
),
|
),
|
||||||
sprintf(
|
sprintf(
|
||||||
"UI.openModalFromURL(%s);",
|
"UI.submissionModalForSinglePage(%s);",
|
||||||
sprintf(
|
sprintf(
|
||||||
"'/alignments/delete/%s'",
|
"'/alignments/delete/%s'",
|
||||||
$alignment['id']
|
$alignment['id']
|
||||||
|
@ -53,7 +53,7 @@ echo sprintf(
|
||||||
'<div class="alignments-list">%s</div><div class="alignments-add-container"><button class="alignments-add-button btn btn-primary btn-sm" onclick="%s">%s</button></div>',
|
'<div class="alignments-list">%s</div><div class="alignments-add-container"><button class="alignments-add-button btn btn-primary btn-sm" onclick="%s">%s</button></div>',
|
||||||
$alignments,
|
$alignments,
|
||||||
sprintf(
|
sprintf(
|
||||||
"UI.openModalFromURL('/alignments/add/%s/%s');",
|
"UI.submissionModalForSinglePage('/alignments/add/%s/%s');",
|
||||||
h($field['scope']),
|
h($field['scope']),
|
||||||
h($extracted['id'])
|
h($extracted['id'])
|
||||||
),
|
),
|
||||||
|
|
|
@ -35,7 +35,7 @@ if (isset($menu[$metaGroup])) {
|
||||||
}
|
}
|
||||||
$active = ($scope === $this->request->getParam('controller') && $action === $this->request->getParam('action'));
|
$active = ($scope === $this->request->getParam('controller') && $action === $this->request->getParam('action'));
|
||||||
if (!empty($data['popup'])) {
|
if (!empty($data['popup'])) {
|
||||||
$link_template = '<a href="#" onClick="UI.openModalFromURL(\'%s\')" class="list-group-item list-group-item-action %s %s pl-3 border-0 %s">%s</a>';
|
$link_template = '<a href="#" onClick="UI.submissionModalForSinglePage(\'%s\')" class="list-group-item list-group-item-action %s %s pl-3 border-0 %s">%s</a>';
|
||||||
} else {
|
} else {
|
||||||
$link_template = '<a href="%s" class="list-group-item list-group-item-action %s %s pl-3 border-0 %s">%s</a>';
|
$link_template = '<a href="%s" class="list-group-item list-group-item-action %s %s pl-3 border-0 %s">%s</a>';
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,13 +25,13 @@ class UIFactory {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create and display a modal where the modal's content is fetched from the provided URL.
|
* Create and display a modal where the modal's content is fetched from the provided URL. Link an AJAXApi to the submission button
|
||||||
* @param {string} url - The URL from which the modal's content should be fetched
|
* @param {string} url - The URL from which the modal's content should be fetched
|
||||||
* @param {ModalFactory~POSTSuccessCallback} POSTSuccessCallback - The callback that handles successful form submission
|
* @param {ModalFactory~POSTSuccessCallback} POSTSuccessCallback - The callback that handles successful form submission
|
||||||
* @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
|
||||||
*/
|
*/
|
||||||
modalFromURL(url, POSTSuccessCallback, POSTFailCallback) {
|
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,
|
||||||
|
@ -46,45 +46,110 @@ class UIFactory {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates and displays a modal where the modal's content is fetched from the provided URL. Reloads the table after a successful operation and handles displayOnSuccess option
|
* Creates and displays a modal where the modal's content is fetched from the provided URL. Reloads the single page view after a successful operation.
|
||||||
|
* Supports `displayOnSuccess` option to show another modal after the submission
|
||||||
* @param {string} url - The URL from which the modal's content should be fetched
|
* @param {string} url - The URL from which the modal's content should be fetched
|
||||||
* @param {string} reloadUrl - The URL from which the data should be fetched after confirming
|
* @param {(boolean|string)} [reloadUrl=false] - The URL from which the data should be fetched after confirming
|
||||||
* @param {string} tableId - The table ID which should be reloaded on success
|
* @param {(jQuery|string)} [$table=false] - The table ID which should be reloaded on success
|
||||||
* @return {Promise<Object>} Promise object resolving to the ModalFactory object
|
* @return {Promise<Object>} Promise object resolving to the ModalFactory object
|
||||||
*/
|
*/
|
||||||
openModalFromURL(url, reloadUrl=false, tableId=false) {
|
submissionModalForSinglePage(url, reloadUrl=false, $table=false) {
|
||||||
return UI.modalFromURL(url, (data) => {
|
let $statusNode, $reloadedElement
|
||||||
let reloaded = false
|
if (reloadUrl === false) {
|
||||||
if (reloadUrl === false || tableId === false) { // Try to get information from the DOM
|
reloadUrl = location.pathname
|
||||||
let $elligibleTable = $('table.table')
|
}
|
||||||
let currentModel = location.pathname.split('/')[1]
|
if ($table === false) { // Try to get information from the DOM
|
||||||
if ($elligibleTable.length == 1 && currentModel.length > 0) {
|
const $elligibleTable = $('table[id^="single-view-table-"]')
|
||||||
let $container = $elligibleTable.closest('div[id^="table-container-"]')
|
const $container = $elligibleTable.closest('div[id^="single-view-table-container-"]')
|
||||||
if ($container.length == 1) {
|
$reloadedElement = $container
|
||||||
UI.reload(`/${currentModel}/index`, $container, $elligibleTable)
|
$statusNode = $elligibleTable
|
||||||
reloaded = true
|
} else {
|
||||||
} else {
|
if ($table instanceof jQuery) {
|
||||||
$container = $elligibleTable.closest('div[id^="single-view-table-container-"]')
|
$reloadedElement = $table
|
||||||
if ($container.length == 1) {
|
$statusNode = $table.find('table[id^="single-view-table-"]')
|
||||||
UI.reload(location.pathname, $container, $elligibleTable)
|
|
||||||
reloaded = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
UI.reload(reloadUrl, $(`#table-container-${tableId}`), $(`#table-container-${tableId} table.table`))
|
$reloadedElement = $(`single-view-table-container-${$table}`)
|
||||||
reloaded = true
|
$statusNode = $(`single-view-table-${$table}`)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if ($reloadedElement.length == 0) {
|
||||||
|
UI.Toaster({
|
||||||
|
variant: 'danger',
|
||||||
|
title: 'Could not find element to be reloaded',
|
||||||
|
body: 'The content of this page may have changed and has not been reflected. Reloading the page is advised.'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return UI.submissionReloaderModal(url, reloadUrl, $reloadedElement, $statusNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
* @param {string} url - The URL from which the modal's content should be fetched
|
||||||
|
* @param {(boolean|string)} [reloadUrl=false] - The URL from which the data should be fetched after confirming
|
||||||
|
* @param {(jQuery|string)} [$table=false] - The table ID which should be reloaded on success
|
||||||
|
* @return {Promise<Object>} Promise object resolving to the ModalFactory object
|
||||||
|
*/
|
||||||
|
submissionModalForIndex(url, reloadUrl=false, $table=false) {
|
||||||
|
let $statusNode, $reloadedElement
|
||||||
|
if (reloadUrl === false) {
|
||||||
|
const currentModel = location.pathname.split('/')[1]
|
||||||
|
if (currentModel.length > 0) {
|
||||||
|
reloadUrl = `/${currentModel}/index`
|
||||||
|
} else {
|
||||||
|
UI.Toaster({
|
||||||
|
variant: 'danger',
|
||||||
|
title: 'Could not find URL for the reload',
|
||||||
|
body: 'The content of this page may have changed and has not been reflected. Reloading the page is advised.'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($table === false) { // Try to get information from the DOM
|
||||||
|
const $elligibleTable = $('table.table')
|
||||||
|
const $container = $elligibleTable.closest('div[id^="table-container-"]')
|
||||||
|
$reloadedElement = $container
|
||||||
|
$statusNode = $elligibleTable
|
||||||
|
} else {
|
||||||
|
if ($table instanceof jQuery) {
|
||||||
|
$reloadedElement = $table
|
||||||
|
$statusNode = $table.find('table.table')
|
||||||
|
} else {
|
||||||
|
$reloadedElement = $(`#table-container-${$table}`)
|
||||||
|
$statusNode = $(`#table-container-${$table} table.table`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($reloadedElement.length == 0) {
|
||||||
|
UI.Toaster({
|
||||||
|
variant: 'danger',
|
||||||
|
title: 'Could not find element to be reloaded',
|
||||||
|
body: 'The content of this page may have changed and has not been reflected. Reloading the page is advised.'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return UI.submissionReloaderModal(url, reloadUrl, $reloadedElement, $statusNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates and displays a modal where the modal's content is fetched from the provided URL. Reloads the provided element after a successful operation.
|
||||||
|
* Supports `displayOnSuccess` option to show another modal after the submission
|
||||||
|
* @param {string} url - The URL from which the modal's content should be fetched
|
||||||
|
* @param {string} reloadUrl - The URL from which the data should be fetched after confirming
|
||||||
|
* @param {(jQuery|string)} $reloadedElement - The element which should be reloaded on success
|
||||||
|
* @param {(jQuery|string)} [$statusNode=null] - A reference to a HTML node on which the loading animation should be displayed. If not provided, $container will be used
|
||||||
|
* @return {Promise<Object>} Promise object resolving to the ModalFactory object
|
||||||
|
*/
|
||||||
|
submissionReloaderModal(url, reloadUrl, $reloadedElement, $statusNode=null) {
|
||||||
|
const successCallback = function (data) {
|
||||||
|
UI.reload(reloadUrl, $reloadedElement, $statusNode)
|
||||||
if (data.additionalData !== undefined && data.additionalData.displayOnSuccess !== undefined) {
|
if (data.additionalData !== undefined && data.additionalData.displayOnSuccess !== undefined) {
|
||||||
UI.modal({
|
UI.modal({
|
||||||
rawHtml: data.additionalData.displayOnSuccess
|
rawHtml: data.additionalData.displayOnSuccess
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
if (!reloaded) {
|
|
||||||
location.reload()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
return UI.submissionModal(url, successCallback)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue