Merge pull request #224 from freez10/master
UI Improvement: Modal confirmation dialog
This commit is contained in:
commit
6918addab4
|
@ -129,6 +129,12 @@ class BuildController extends \PHPCI\Controller
|
||||||
}
|
}
|
||||||
|
|
||||||
$build = $this->buildStore->getById($buildId);
|
$build = $this->buildStore->getById($buildId);
|
||||||
|
|
||||||
|
if (!$build) {
|
||||||
|
$this->response->setResponseCode(404);
|
||||||
|
return '404 - Not Found';
|
||||||
|
}
|
||||||
|
|
||||||
$this->buildStore->delete($build);
|
$this->buildStore->delete($build);
|
||||||
|
|
||||||
header('Location: '.PHPCI_URL.'project/view/' . $build->getProjectId());
|
header('Location: '.PHPCI_URL.'project/view/' . $build->getProjectId());
|
||||||
|
|
|
@ -73,7 +73,7 @@ switch($build->getStatus())
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:confirmDelete('<?= PHPCI_URL ?>build/delete/<?php print $build->getId(); ?>');">Delete Build</a></li>
|
<li><a href="javascript:confirmDelete('<?= PHPCI_URL ?>build/delete/<?php print $build->getId(); ?>', 'Build').onClose = function(){refreshBuildsTable();};">Delete Build</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -58,8 +58,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
setInterval(function()
|
refreshBuildsTable = function()
|
||||||
{
|
{
|
||||||
$('#latest-builds').load('<?= PHPCI_URL ?>home/latest');
|
$('#latest-builds').load('<?= PHPCI_URL ?>home/latest');
|
||||||
}, 10000);
|
};
|
||||||
|
|
||||||
|
setInterval(refreshBuildsTable, 10000);
|
||||||
</script>
|
</script>
|
|
@ -92,7 +92,9 @@
|
||||||
$(function() {
|
$(function() {
|
||||||
$('#delete-project').on('click', function (e) {
|
$('#delete-project').on('click', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
confirmDelete("<?= PHPCI_URL ?>project/delete/<?php print $project->getId(); ?>");
|
confirmDelete(
|
||||||
|
"<?= PHPCI_URL ?>project/delete/<?php print $project->getId(); ?>", "Project"
|
||||||
|
).onCloseConfirmed = function () {window.location = '/'};
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:confirmDelete('<?= PHPCI_URL ?>user/delete/<?php print $user->getId(); ?>');">Delete User</a></li>
|
<li><a href="javascript:confirmDelete('<?= PHPCI_URL ?>user/delete/<?php print $user->getId(); ?>', 'User', true);">Delete User</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
|
@ -1,18 +1,235 @@
|
||||||
|
/**
|
||||||
|
* See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
|
||||||
|
* for the details of code below
|
||||||
|
*/
|
||||||
|
if (!Function.prototype.bind) {
|
||||||
|
Function.prototype.bind = function (oThis) {
|
||||||
|
if (typeof this !== "function") {
|
||||||
|
// closest thing possible to the ECMAScript 5 internal IsCallable function
|
||||||
|
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
||||||
|
}
|
||||||
|
|
||||||
|
var aArgs = Array.prototype.slice.call(arguments, 1),
|
||||||
|
fToBind = this,
|
||||||
|
fNOP = function () {
|
||||||
|
},
|
||||||
|
fBound = function () {
|
||||||
|
return fToBind.apply(this instanceof fNOP && oThis
|
||||||
|
? this
|
||||||
|
: oThis,
|
||||||
|
aArgs.concat(Array.prototype.slice.call(arguments)));
|
||||||
|
};
|
||||||
|
|
||||||
|
fNOP.prototype = this.prototype;
|
||||||
|
fBound.prototype = new fNOP();
|
||||||
|
|
||||||
|
return fBound;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Used for delete buttons in the system, just to prevent accidental clicks.
|
* Used for delete buttons in the system, just to prevent accidental clicks.
|
||||||
*/
|
*/
|
||||||
function confirmDelete(url)
|
function confirmDelete(url, subject, reloadAfter) {
|
||||||
{
|
|
||||||
if(confirm('Are you sure you want to delete this?'))
|
var dialog = new PHPCIConfirmDialog({
|
||||||
{
|
message: subject + ' will be permanently deleted. Are you sure?',
|
||||||
window.location.href = url;
|
confirmBtnCaption: 'Delete',
|
||||||
}
|
/*
|
||||||
else
|
confirm-btn click handler
|
||||||
{
|
*/
|
||||||
return false;
|
confirmed: function (e) {
|
||||||
}
|
var dialog = this;
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
/*
|
||||||
|
Call delete URL
|
||||||
|
*/
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
'success': function (data) {
|
||||||
|
if (reloadAfter) {
|
||||||
|
dialog.onClose = function () {
|
||||||
|
window.location.reload();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog.showStatusMessage('Successfully deleted!', 1000);
|
||||||
|
},
|
||||||
|
'error': function (data) {
|
||||||
|
dialog.showStatusMessage('Deletion failed! Server says "' + data.statusText + '"');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.show();
|
||||||
|
return dialog;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PHPCIConfirmDialog constructor options object
|
||||||
|
* @type {{message: string, title: string, confirmBtnCaption: string, cancelBtnCaption: string, confirmed: Function}}
|
||||||
|
*/
|
||||||
|
var PHPCIConfirmDialogOptions = {
|
||||||
|
message: 'The action will be performed and cannot be undone. Are you sure?',
|
||||||
|
title: 'Confirmation Dialog',
|
||||||
|
confirmBtnCaption: 'Ok',
|
||||||
|
cancelBtnCaption: 'Cancel',
|
||||||
|
confirmed: function (e) {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var PHPCIConfirmDialog = Class.extend({
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @var {bool} Determines whether the dialog has been confirmed
|
||||||
|
*/
|
||||||
|
confirmed: false,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {PHPCIConfirmDialogOptions} options
|
||||||
|
*/
|
||||||
|
init: function (options) {
|
||||||
|
|
||||||
|
options = options ? $.extend(PHPCIConfirmDialogOptions, options) : PHPCIConfirmDialogOptions;
|
||||||
|
|
||||||
|
if (!$('#confirm-dialog').length) {
|
||||||
|
/*
|
||||||
|
Add the dialog html to a page on first use. No need to have it there before first use.
|
||||||
|
*/
|
||||||
|
$('body').append(
|
||||||
|
'<div class="modal fade" id="confirm-dialog">'
|
||||||
|
+ '<div class="modal-dialog">'
|
||||||
|
+ '<div class="modal-content">'
|
||||||
|
+ '<div class="modal-header">'
|
||||||
|
+ '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
|
||||||
|
+ '<h4 class="modal-title"></h4>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="modal-body">'
|
||||||
|
+ '<p></p>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="modal-footer">'
|
||||||
|
+ '<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>'
|
||||||
|
+ '<button type="button" class="btn btn-primary"></button>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Define dialog controls
|
||||||
|
*/
|
||||||
|
this.$dialog = $('#confirm-dialog');
|
||||||
|
this.$cancelBtn = this.$dialog.find('div.modal-footer button.btn-default');
|
||||||
|
this.$confirmBtn = this.$dialog.find('div.modal-footer button.btn-primary');
|
||||||
|
this.$title = this.$dialog.find('h4.modal-title');
|
||||||
|
this.$body = this.$dialog.find('div.modal-body');
|
||||||
|
|
||||||
|
/*
|
||||||
|
Initialize its values
|
||||||
|
*/
|
||||||
|
this.$title.html(options.title ? options.title : PHPCIConfirmDialogOptions.title);
|
||||||
|
this.$body.html(options.message ? options.message : PHPCIConfirmDialogOptions.message);
|
||||||
|
this.$confirmBtn.html(
|
||||||
|
options.confirmBtnCaption ? options.confirmBtnCaption : PHPCIConfirmDialogOptions.confirmBtnCaption
|
||||||
|
);
|
||||||
|
|
||||||
|
this.$cancelBtn.html(
|
||||||
|
options.cancelBtnCaption ? options.cancelBtnCaption : PHPCIConfirmDialogOptions.cancelBtnCaption
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
Events
|
||||||
|
*/
|
||||||
|
this.confirmBtnClick = options.confirmed;
|
||||||
|
|
||||||
|
/*
|
||||||
|
Re-bind handlers
|
||||||
|
*/
|
||||||
|
this.$confirmBtn.unbind('click');
|
||||||
|
this.$confirmBtn.click(this.onConfirm.bind(this));
|
||||||
|
|
||||||
|
this.$confirmBtn.unbind('hidden.bs.modal');
|
||||||
|
|
||||||
|
/*
|
||||||
|
Bind the close event of the dialog to the set of onClose* methods
|
||||||
|
*/
|
||||||
|
this.$dialog.on('hidden.bs.modal', function () {this.onClose()}.bind(this));
|
||||||
|
this.$dialog.on('hidden.bs.modal', function () {
|
||||||
|
if (this.confirmed) {
|
||||||
|
this.onCloseConfirmed();
|
||||||
|
} else {
|
||||||
|
this.onCloseCanceled();
|
||||||
|
}
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
/*
|
||||||
|
Restore state if was changed previously
|
||||||
|
*/
|
||||||
|
this.$cancelBtn.show();
|
||||||
|
this.$confirmBtn.show();
|
||||||
|
this.confirmed = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show dialog
|
||||||
|
*/
|
||||||
|
show: function () {
|
||||||
|
this.$dialog.modal('show');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide dialog
|
||||||
|
*/
|
||||||
|
close: function () {
|
||||||
|
this.$dialog.modal('hide');
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm: function (e) {
|
||||||
|
this.confirmed = true;
|
||||||
|
$(this).attr('disabled', 'disabled');
|
||||||
|
this.confirmBtnClick(e);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called only when confirmed dialog was closed
|
||||||
|
*/
|
||||||
|
onCloseConfirmed: function () {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called only when canceled dialog was closed
|
||||||
|
*/
|
||||||
|
onCloseCanceled: function () {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called always when the dialog was closed
|
||||||
|
*/
|
||||||
|
onClose: function () {},
|
||||||
|
|
||||||
|
showStatusMessage: function (message, closeTimeout) {
|
||||||
|
this.$confirmBtn.hide();
|
||||||
|
this.$cancelBtn.html('Close');
|
||||||
|
|
||||||
|
/*
|
||||||
|
Status message
|
||||||
|
*/
|
||||||
|
this.$body.html(message);
|
||||||
|
|
||||||
|
if (closeTimeout) {
|
||||||
|
window.setTimeout(function () {
|
||||||
|
/*
|
||||||
|
Hide the dialog
|
||||||
|
*/
|
||||||
|
this.close();
|
||||||
|
}.bind(this), closeTimeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Used to initialise the project form:
|
* Used to initialise the project form:
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in a new issue