Add confirmation modal to activate/deactivate a part

- New question modal available
This commit is contained in:
Oliver Walters 2019-05-04 16:31:23 +10:00
parent cac281599a
commit b1cdb7833d
3 changed files with 113 additions and 27 deletions

View File

@ -15,11 +15,11 @@
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
<span class="caret"></span></button>
<ul class="dropdown-menu">
{% if part.active %}
<li><a href='#' id='duplicate-part' title='Duplicate Part'>Duplicate</a></li>
<li><a href="#" id='edit-part' title='Edit part'>Edit</a></li>
<li><a href='#' id='stocktake-part' title='Stocktake'>Stocktake</a></li>
<hr>
{% if part.active %}
<li><a href="#" id='deactivate-part' title='Deactivate part'>Deactivate</a></li>
{% else %}
<li><a href="#" id='activate-part' title='Activate part'>Activate</a></li>
@ -150,27 +150,46 @@
});
$('#activate-part').click(function() {
inventreeUpdate(
"{% url 'api-part-detail' part.id %}",
showQuestionDialog(
'Activate Part?',
'Are you sure you wish to reactivate {{ part.name }}?',
{
active: true,
accept_text: 'Activate',
accept: function() {
inventreeUpdate(
"{% url 'api-part-detail' part.id %}",
{
active: true,
},
{
method: 'PATCH',
reloadOnSuccess: true,
}
);
}
},
{
method: 'PATCH',
reloadOnSuccess: true,
}
);
});
$('#deactivate-part').click(function() {
inventreeUpdate(
"{% url 'api-part-detail' part.id %}",
showQuestionDialog(
'Deactivate Part?',
`Are you sure you wish to deactivate {{ part.name }}?<br>
`,
{
active: false,
},
{
method: 'PATCH',
reloadOnSuccess: true,
accept_text: 'Deactivate',
accept: function() {
inventreeUpdate(
"{% url 'api-part-detail' part.id %}",
{
active: false,
},
{
method: 'PATCH',
reloadOnSuccess: true,
}
);
}
}
);
});

View File

@ -155,16 +155,16 @@ function renderErrorMessage(xhr) {
}
function showDialog(title, content, options={}) {
function showAlertDialog(title, content, options={}) {
/* Display a modal dialog message box.
*
* title - Title text
* content - HTML content of the dialog window
* options:
* modal - modal form to use (default = '#modal-dialog')
* modal - modal form to use (default = '#modal-alert-dialog')
*/
var modal = options.modal || '#modal-dialog';
var modal = options.modal || '#modal-alert-dialog';
$(modal).on('shown.bs.modal', function() {
$(modal + ' .modal-form-content').scrollTop(0);
@ -181,6 +181,54 @@ function showDialog(title, content, options={}) {
$(modal).modal('show');
}
function showQuestionDialog(title, content, options={}) {
/* Display a modal dialog for user input (Yes/No confirmation dialog)
*
* title - Title text
* content - HTML content of the dialog window
* options:
* modal - Modal target (default = 'modal-question-dialog')
* accept_text - Text for the accept button (default = 'Accept')
* cancel_text - Text for the cancel button (default = 'Cancel')
* accept - Function to run if the user presses 'Accept'
* cancel - Functino to run if the user presses 'Cancel'
*/
var modal = options.modal || '#modal-question-dialog';
$(modal).on('shown.bs.modal', function() {
$(modal + ' .modal-form-content').scrollTop(0);
});
modalSetTitle(modal, title);
modalSetContent(modal, content);
var accept_text = options.accept_text || 'Accept';
var cancel_text = options.cancel_text || 'Cancel';
$(modal).find('#modal-form-cancel').html(cancel_text);
$(modal).find('#modal-form-accept').html(accept_text);
$(modal).on('click', '#modal-form-accept', function() {
$(modal).modal('hide');
if (options.accept) {
options.accept();
}
});
$(modal).on('click', 'modal-form-cancel', function() {
$(modal).modal('hide');
if (options.cancel) {
options.cancel();
}
});
$(modal).modal('show');
}
function openModal(options) {
/* Open a modal form, and perform some action based on the provided options object:
*
@ -275,12 +323,12 @@ function launchDeleteForm(url, options = {}) {
else {
$(modal).modal('hide');
showDialog('Invalid form response', 'JSON response missing HTML data');
showAlertDialog('Invalid form response', 'JSON response missing HTML data');
}
},
error: function (xhr, ajaxOptions, thrownError) {
$(modal).modal('hide');
showDialog('Error requesting form data', renderErrorMessage(xhr));
showAlertDialog('Error requesting form data', renderErrorMessage(xhr));
}
});
@ -299,7 +347,7 @@ function launchDeleteForm(url, options = {}) {
},
error: function (xhr, ajaxOptions, thrownError) {
$(modal).modal('hide');
showDialog('Error deleting item', renderErrorMessage(xhr));
showAlertDialog('Error deleting item', renderErrorMessage(xhr));
}
});
});
@ -365,7 +413,7 @@ function handleModalForm(url, options) {
}
else {
$(modal).modal('hide');
showDialog('Invalid response from server', 'Form data missing from server response');
showAlertDialog('Invalid response from server', 'Form data missing from server response');
}
}
}
@ -378,7 +426,7 @@ function handleModalForm(url, options) {
// There was an error submitting form data via POST
$(modal).modal('hide');
showDialog('Error posting form data', renderErrorMessage(xhr));
showAlertDialog('Error posting form data', renderErrorMessage(xhr));
},
complete: function(xhr) {
//TODO
@ -431,12 +479,12 @@ function launchModalForm(url, options = {}) {
} else {
$(modal).modal('hide');
showDialog('Invalid server response', 'JSON response missing form data');
showAlertDialog('Invalid server response', 'JSON response missing form data');
}
},
error: function (xhr, ajaxOptions, thrownError) {
$(modal).modal('hide');
showDialog('Error requesting form data', renderErrorMessage(xhr));
showAlertDialog('Error requesting form data', renderErrorMessage(xhr));
}
};

View File

@ -39,14 +39,33 @@
</div>
</div>
<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-dialog'>
<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-question-dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h3 id='modal-title'>Question Here</h3>
</div>
<div class='modal-form-content'>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' id='modal-form-cancel'>Cancel</button>
<button type='button' class='btn btn-primary' id='modal-form-accept'>Accept</button>
</div>
</div>
</div>
</div>
<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-alert-dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h3 id='modal-title'>Confirm Item Deletion</h3>
<h3 id='modal-title'>Alert Information</h3>
</div>
<div class='modal-form-content'>
</div>