Continue bootstrap-tables integration (#293)

Refactor manage_tables code and use proper js namespacing
Add glyphicons for most buttons in customers sections
Tidy up HTML in customers table page
Remove jquery-color plugin (not needed anymore)
Fix some minor css issues (feedback bar bottom margin)
This commit is contained in:
jekkos
2016-04-14 21:31:01 +02:00
parent af7b64a398
commit 2b03d3bfd7
14 changed files with 449 additions and 1338 deletions

View File

@@ -1,6 +1,5 @@
<?php
require_once ("Person_controller.php");
class Customers extends Person_controller
{
function __construct()

View File

@@ -1,36 +1,12 @@
<?php
require_once ("interfaces/Iperson_controller.php");
require_once ("Secure_area.php");
abstract class Person_controller extends Secure_area implements iPerson_controller
abstract class Person_controller extends Secure_area
{
function __construct($module_id=null)
{
parent::__construct($module_id);
}
/*
This returns a mailto link for persons with a certain id. This is called with AJAX.
*/
function mailto()
{
$people_to_email=$this->input->post('ids');
if($people_to_email!=false)
{
$mailto_url='mailto:';
foreach($this->Person->get_multiple_info($people_to_email)->result() as $person)
{
$mailto_url.=$person->email.',';
}
//remove last comma
$mailto_url=substr($mailto_url,0,strlen($mailto_url)-1);
echo $mailto_url;
exit;
}
echo '#';
}
/*
Gives search suggestions based on what is being searched for
*/

View File

@@ -1,6 +1,5 @@
<?php
require_once ("Person_controller.php");
class Suppliers extends Person_controller
{
function __construct()

View File

@@ -1,11 +0,0 @@
<?php
/*
This interface is implemented by any controller that keeps track of people, such
as customers and employees.
*/
require_once("Idata_controller.php");
interface iPerson_controller extends iData_controller
{
public function mailto();
}
?>

View File

@@ -171,7 +171,7 @@ function get_person_data_row($person, $controller) {
'id' => $person->person_id,
'last_name' => character_limiter($person->last_name,13),
'first_name' => character_limiter($person->first_name,13),
'email' => mailto($person->email,character_limiter($person->email,22)),
'email' => empty($person->email) ? '' : mailto($person->email,character_limiter($person->email,22)),
'phone_number' => character_limiter($person->phone_number,13),
'messages' => anchor("Messages/view/$person->person_id", '<span class="glyphicon glyphicon-phone"></span>',
array('class'=>"modal-dlg modal-btn-submit", 'title'=>$CI->lang->line('messages_sms_send'))),

View File

@@ -3,12 +3,12 @@
</div>
<div id="footer">
<div class="jumbotron">
<?php echo $this->lang->line('common_you_are_using_ospos'); ?>
<?php echo $this->config->item('application_version'); ?>.
<?php echo $this->lang->line('common_please_visit_my'); ?>
<a href="https://github.com/jekkos/opensourcepos" target="_blank"><?php echo $this->lang->line('common_website'); ?></a>
<?php echo $this->lang->line('common_learn_about_project'); ?>
<div class="jumbotron push-spaces">
<?php echo $this->lang->line('common_you_are_using_ospos'); ?>
<?php echo $this->config->item('application_version'); ?>.
<?php echo $this->lang->line('common_please_visit_my'); ?>
<a href="https://github.com/jekkos/opensourcepos" target="_blank"><?php echo $this->lang->line('common_website'); ?></a>
<?php echo $this->lang->line('common_learn_about_project'); ?>
</div>
</div>
</body>

View File

@@ -61,7 +61,7 @@
<!-- start mincss template tags -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap.min.css?rel=9ed20b1ee8"/>
<link rel="stylesheet" type="text/css" href="dist/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=6ad34bf178"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=eb3fd6cbfa"/>
<!-- end mincss template tags -->
<!-- start minjs template tags -->
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=3d8bf015a8" language="javascript"></script>

View File

@@ -1,43 +1,49 @@
<?php $this->load->view("partial/header"); ?>
<script type="text/javascript">
$(document).ready(function()
$(document).ready(function()
{
table_support.init('<?php echo site_url($controller_name);?>', <?php echo $table_headers; ?>);
table_support.init_delete('<?php echo $this->lang->line($controller_name."_confirm_delete")?>');
});
</script>
<div id="title_bar">
<div id="title_bar" class="btn-toolbar">
<?php
if ($controller_name == 'customers')
{
?>
<?php echo anchor("$controller_name/excel_import",
"<div class='btn btn-info btn-sm pull-right'><span>" . $this->lang->line('common_import_excel') . "</span></div>",
array('class'=>'modal-dlg modal-btn-submit', 'title'=>$this->lang->line('customers_import_items_excel'))); ?>
<?php echo anchor("$controller_name/view/-1",
"<div class='btn btn-info btn-sm pull-right' style='margin-right: 10px;'><span>" . $this->lang->line('customers_new') . "</span></div>",
array('class'=>'modal-dlg modal-btn-submit', 'title'=>$this->lang->line('customers_new'))); ?>
<button class='btn btn-info btn-sm pull-right modal-dlg modal-btn-submit' data-href='<?php echo site_url($controller_name."/excel_import"); ?>'
title='<?php echo $this->lang->line('customers_import_items_excel'); ?>'>
<span class="glyphicon glyphicon-import"></span><?php echo $this->lang->line('common_import_excel'); ?>
</button>
<button class='btn btn-info btn-sm pull-right modal-dlg modal-btn-submit' data-href='<?php echo site_url($controller_name."/view"); ?>'
title='<?php echo $this->lang->line('customers_new'); ?>'>
<span class="glyphicon glyphicon-user"></span><?php echo $this->lang->line('customers_new'); ?>
</button>
<?php
}
else
{
?>
<?php echo anchor("$controller_name/view/-1",
"<div class='btn btn-info btn-sm pull-right'><span>" . $this->lang->line($controller_name . '_new') . "</span></div>",
array('class'=>'modal-dlg modal-btn-submit', 'title'=>$this->lang->line($controller_name . '_new'))); ?>
<button class='btn btn-info btn-sm pull-right modal-dlg modal-btn-submit' data-href='<?php echo site_url($controller_name."/view"); ?>'
title='<?php echo $this->lang->line($controller_name . '_new'); ?>'
<span class="glyphicon glyphicon-user"></span><?php echo $this->lang->line($controller_name . '_new'); ?>
</button>
<?php
}
?>
</div>
<div id="toolbar">
<div class="pull-left arrow-left">
<?php echo anchor("$controller_name/delete", '<div class="btn btn-default btn-sm"><span>' . $this->lang->line("common_delete") . '</span></div>', array('id'=>'delete')); ?>
<span><a href="#" id="email"><div class="btn btn-default btn-sm"><?php echo $this->lang->line("common_email");?></div></a></span></div>
<div class="pull-left btn-toolbar">
<button id="delete" class="btn btn-default btn-sm" data-href='<?php echo site_url($controller_name."/delete"); ?>'><span class="glyphicon glyphicon-trash"></span>
<?php echo $this->lang->line("common_delete");?></button>
<button id="email" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-envelope"></span>
<?php echo $this->lang->line("common_email");?></button>
</div>
</div>

View File

@@ -24,7 +24,6 @@
"tests"
],
"dependencies": {
"jquery-color": "~2.1.2",
"jquery-form": "~3.46.0",
"jquery-validate": "~1.13.1",
"jquery": "~1.12.3",

View File

@@ -29,6 +29,16 @@ a.none
background-color: #FFFFFF;
}
.alert
{
margin-bottom: 0;
}
.jumbotron.push-spaces
{
margin:0; /*add this*/
}
.navbar .menu-icon
{
text-align: center;

1329
dist/opensourcepos.js vendored
View File

File diff suppressed because it is too large Load Diff

View File

File diff suppressed because one or more lines are too long

View File

@@ -1,58 +1,4 @@
function do_delete(url)
{
//If delete is not enabled, don't do anything
if(!enable_delete.enabled)
return;
var row_ids = get_selected_values();
var selected_rows = get_selected_rows();
$.post(url, { 'ids[]': row_ids },function(response)
{
//delete was successful, remove checkbox rows
if(response.success)
{
$(selected_rows).each(function(index, dom)
{
$(this).find("td").animate({backgroundColor:"green"},1200,"linear")
.end().animate({opacity:0},1200,"linear",function()
{
$(this).remove();
//Re-init sortable table as we removed a row
$("#sortable_table tbody tr").length > 0 && update_sortable_table();
});
});
set_feedback(response.message, 'alert alert-dismissible alert-success', false);
}
else
{
set_feedback(response.message, 'alert alert-dismissible alert-danger', true);
}
},"json");
}
function enable_bulk_edit(none_selected_message)
{
//Keep track of enable_bulk_edit has been called
if(!enable_bulk_edit.enabled)
enable_bulk_edit.enabled=true;
$('#bulk_edit').click(function(event)
{
if($("#sortable_table tbody :checkbox:checked").length == 0)
{
alert(none_selected_message);
return false;
}
event.preventDefault();
});
}
enable_bulk_edit.enabled=false;
dialog_support = (function() {
(function(dialog_support, $) {
var btn_id, dialog_ref;
@@ -78,90 +24,89 @@ dialog_support = (function() {
};
var init = function(selector) {
var buttons = function(event) {
var buttons = [];
var dialog_class = 'modal-dlg';
$.each($(this).attr('class').split(/\s+/), function(classIndex, className) {
var width_class = className.split("modal-dlg-");
if (width_class && width_class.length > 1) {
dialog_class = className;
}
var btn_class = className.split("modal-btn-");
if (btn_class && btn_class.length > 1) {
var btn_name = btn_class[1];
var is_submit = btn_name == 'submit';
buttons.push({
id: btn_name,
label: btn_name.charAt(0).toUpperCase() + btn_name.slice(1),
cssClass: is_submit ? 'btn-primary' : (btn_name == 'delete' ? 'btn-danger' : ''),
hotkey: is_submit ? 13 : undefined, // Enter.
action: submit(btn_name)
});
}
});
!buttons.length && buttons.push({
id: 'close',
label: 'Close',
cssClass: 'btn-primary',
action: function(dialog_ref) {
dialog_ref.close();
}
});
return { buttons: buttons, cssClass: dialog_class};
};
$(selector).each(function(index, $element) {
return $(selector).off('click').on('click', function(event) {
var buttons = [];
var dialog_class = 'modal-dlg';
$.each($(this).attr('class').split(/\s+/), function(classIndex, className) {
var width_class = className.split("modal-dlg-");
if (width_class && width_class.length > 1) {
dialog_class = className;
}
var btn_class = className.split("modal-btn-");
if (btn_class && btn_class.length > 1) {
var btn_name = btn_class[1];
var is_submit = btn_name == 'submit';
buttons.push({
id: btn_name,
label: btn_name.charAt(0).toUpperCase() + btn_name.slice(1),
cssClass: is_submit ? 'btn-primary' : (btn_name == 'delete' ? 'btn-danger' : ''),
hotkey: is_submit ? 13 : undefined, // Enter.
action: submit(btn_name)
});
}
});
!buttons.length && buttons.push({
id: 'close',
label: 'Close',
cssClass: 'btn-primary',
action: function(dialog_ref) {
dialog_ref.close();
}
});
var $link = $(event.target);
$link = $link.is("a") ? $link : $link.parents("a");
BootstrapDialog.show({
cssClass: dialog_class,
$link = !$link.is("a, button") ? $link.parents("a") : $link ;
BootstrapDialog.show($.extend({
title: $link.attr('title'),
buttons: buttons,
message: (function() {
var node = $('<div></div>');
$.get($link.attr('href'), function(data) {
$.get($link.attr('href') || $link.data('href'), function(data) {
node.html(data);
});
return node;
})
});
}, buttons.call(this, event)));
event.preventDefault();
});
});
};
$(document).ajaxComplete(function() {
init("a.modal-dlg");
});
return {
hide: hide,
clicked_id: clicked_id,
init: init,
submit: submit,
error: {
errorClass: "has-error",
errorLabelContainer: "#error_message_box",
wrapper: "li",
highlight: function (e) {
$(e).closest('.form-group').addClass('has-error');
},
unhighlight: function (e) {
$(e).closest('.form-group').removeClass('has-error');
}
dialog_support.error = {
errorClass: "has-error",
errorLabelContainer: "#error_message_box",
wrapper: "li",
highlight: function (e) {
$(e).closest('.form-group').addClass('has-error');
},
unhighlight: function (e) {
$(e).closest('.form-group').removeClass('has-error');
}
};
})();
$.extend(dialog_support, {
init: init,
submit: submit,
hide: hide,
clicked_id: clicked_id
});
table_support = (function() {
})(window.dialog_support = window.dialog_support || {}, jQuery);
var init_autocomplete = function() {
(function(table_support, $) {
var init_autocomplete = function () {
var widget = $("#search").autocomplete({
source: function (request, response) {
var extra_params = {limit: 100};
$.each(options.extra_params, function(key, param) {
$.each(options.extra_params, function (key, param) {
extra_params[key] = typeof param == "function" ? param() : param;
});
@@ -170,15 +115,16 @@ table_support = (function() {
url: options.suggest_url,
dataType: "json",
data: $.extend(request, extra_params),
success: function(data) {
response($.map(data, function(item) {
success: function (data) {
response($.map(data, function (item) {
return {
value: item.label,
};
}))}
}))
}
});
},
delay:10,
delay: 10,
autoFocus: false,
select: function (a, ui) {
$(this).val(ui.item.value);
@@ -187,59 +133,145 @@ table_support = (function() {
});
};
var highlight_rows = function(id, color) {
var table = function() {
return $("#table").data('bootstrap.table');
}
var selected_ids = function () {
return $.map(table().getSelections(), function (element) {
return element.id;
});
};
var selected_rows = function () {
return $("#table input:checkbox:checked").parents("tr");
};
var do_delete = function (url) {
$.post(url, {'ids[]': selected_ids()}, function (response) {
//delete was successful, remove checkbox rows
if (response.success) {
table().remove({
field: 'id',
values: selected_ids()
});
// animated delete below
/*$(selected_rows()).each(function (index, dom) {
/*$(this).find("td").animate({backgroundColor: "green"}, 1200, "linear")
.end().animate({opacity: 0}, 1200, "linear", function () {
$(this).remove();
});
});*/
set_feedback(response.message, 'alert alert-dismissible alert-success', false);
} else {
set_feedback(response.message, 'alert alert-dismissible alert-danger', true);
}
enable_actions();
}, "json");
};
var do_email = function() {
var recipients = $.map($("tr.selected a[href^='mailto:']"), function(element) {
return $(element).attr('href').replace(/^mailto:/, '');
});
location.href = "mailto:" + recipients.join(",");
};
var highlight_rows = function (id, color) {
var original = $("tr.selected").css('backgroundColor');
var selector = ((id && "tr[data-uniqueid='" + id + "']")) || "tr.selected";
$(selector).removeClass("selected").animate({backgroundColor:color||'#e1ffdd'},"slow","linear")
.animate({backgroundColor:color||'#e1ffdd'},5000)
.animate({backgroundColor:original},"slow","linear");
$(selector).removeClass("selected").animate({backgroundColor: color || '#e1ffdd'}, "slow", "linear")
.animate({backgroundColor: color || '#e1ffdd'}, 5000)
.animate({backgroundColor: original}, "slow", "linear");
$("tr input:checkbox:checked").prop("checked", false);
};
return {
var init_email = function() {
$("#email").click(function(evvent) {
do_email();
});
};
init: function(resource, headers) {
$('#table').bootstrapTable({
columns: headers,
url: resource + '/search',
sidePagination: 'server',
striped: true,
pagination: true,
search: true,
showColumns: true,
clickToSelect: true,
toolbar: '#toolbar',
uniqueId: 'id'
});
},
var enable_actions = function() {
var delete_disabled = selected_rows().length == 0;
$("#delete").attr('disabled', delete_disabled);
var email_disabled = $("tr.selected a[href^='mailto:']").length == 0;
$("#email").attr('disabled', email_disabled);
};
handle_submit : function (resource, response) {
var $table = $("#table").data('bootstrap.table');
var id = response.id;
var load_callback;
if(!response.success) {
set_feedback(response.message, 'alert alert-dismissible alert-danger', true);
var load_success = function() {
typeof load_callback == 'function' && load_callback();
load_callback = undefined;
dialog_support.init("a.modal-dlg, button.modal-dlg");
};
var init = function (resource, headers) {
$('#table').bootstrapTable({
columns: headers,
url: resource + '/search',
sidePagination: 'server',
striped: true,
pagination: true,
search: true,
showColumns: true,
clickToSelect: true,
toolbar: '#toolbar',
uniqueId: 'id',
onCheck: enable_actions,
onUncheck: enable_actions,
onLoadSuccess: load_success
});
init_email();
enable_actions();
};
var init_delete = function (confirm_message) {
$("#delete").click(function (event) {
if (confirm(confirm_message)) {
do_delete($(this).attr('href') || $(this).data('href'));
} else {
//This is an update, just update one row
var message = response.message;
var selected_ids = $.map($table.getSelections(), function(element) {
return element.id;
});
return false;
}
});
};
if(jQuery.inArray(id, selected_ids) != -1) {
$.get(resource + '/get_row/' + id, function(response)
{
$table.updateByUniqueId({id: id, row: response});
var handle_submit = function (resource, response) {
var $table = $("#table").data('bootstrap.table');
var id = response.id;
if (!response.success) {
set_feedback(response.message, 'alert alert-dismissible alert-danger', true);
} else {
//This is an update, just update one row
var message = response.message;
if (jQuery.inArray(id, selected_ids()) != -1) {
$.get({
url: resource + '/get_row/' + id,
success: function (response) {
$table.updateByUniqueId({id: response.id, row: response});
highlight_rows();
set_feedback(message, 'alert alert-dismissible alert-success', false);
});
} else {
$table.refresh();
hightlight_rows(response.id);
set_feedback(message, 'alert alert-dismissible alert-success', false);
}
},
dataType: 'json'
});
} else {
// call hightlight function once after refresh
load_callback = function() { highlight_rows(id); };
$table.refresh();
set_feedback(message, 'alert alert-dismissible alert-success', false);
}
}
}
};
})();
$.extend(table_support, {
handle_submit: handle_submit,
init_delete: init_delete,
init: init,
init_email: init_email
});
})(window.table_support = window.table_support || {}, jQuery);

View File

@@ -61,7 +61,7 @@
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/bootstrap.min.css?rel=9ed20b1ee8"/>
<!-- start mincss template tags -->
<link rel="stylesheet" type="text/css" href="dist/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=6ad34bf178"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=eb3fd6cbfa"/>
<!-- end mincss template tags -->
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/style.css"/>
<!-- start minjs template tags -->