Committing group listing back end pagination UI

4.x.x
Kasun Delgolla 9 years ago
parent e4b400a5e7
commit d1def26602

@ -37,7 +37,7 @@
<div>
<span id="permission" data-permission="{{permissions.list}}"></span>
{{#if groupCount}}
<div class="container-fluid">
<div class="container-fluid" id="group-listing" data-current-user="{{currentUser.username}}">
<table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view"
id="group-grid">
<thead>
@ -270,9 +270,6 @@
{{/zone}}
{{#zone "bottomJs"}}
<script id="group-listing" data-current-user="{{currentUser.username}}"
src="{{@page.publicUri}}/templates/listing.hbs"
type="text/x-handlebars-template"></script>
{{#if groupCount}}
{{js "js/listing.js"}}
{{/if}}

@ -97,30 +97,7 @@ function toTitleCase(str) {
function loadGroups() {
var groupListing = $("#group-listing");
var groupListingSrc = groupListing.attr("src");
var currentUser = groupListing.data("currentUser");
$.template("group-listing", groupListingSrc, function (template) {
var successCallback = function (data) {
data = JSON.parse(data);
var viewModel = {};
viewModel.groups = data.data;
$('#group-grid').removeClass('hidden');
var content = template(viewModel);
$("#ast-container").html(content);
/*
* On group checkbox select add parent selected style class
*/
$(groupCheckbox).click(function () {
addGroupSelectedClass(this);
});
attachEvents();
$('#group-grid').datatables_extended();
$(".icon .text").res_text(0.2);
};
var serviceURL;
if ($.hasPermission("LIST_ALL_GROUPS")) {
serviceURL = "/devicemgt_admin/groups?start=0&rowCount=1000";
@ -135,10 +112,82 @@ function loadGroups() {
return;
}
invokerUtil.get(serviceURL, successCallback, function (message) {
displayErrors(message.content);
$('#group-grid').datatables_extended ({
serverSide: true,
processing: false,
searching: true,
ordering: false,
filter: false,
pageLength : 16,
ajax: { url : '/devicemgt/api/groups', data : {url : serviceURL},
dataSrc: function ( json ) {
$('#group-grid').removeClass('hidden');
var $list = $("#group-listing :input[type='search']");
$list.each(function(){
$(this).addClass("hidden");
});
return json.data;
}
},
columnDefs: [
{ targets: 0, data: 'id', className: 'remove-padding icon-only content-fill' , render: function ( data, type, row, meta ) {
return '<div class="thumbnail icon"><img class="square-element text fw " src="public/cdmf.page.groups/images/group-icon.png"/></div>';
}},
{ targets: 1, data: 'name', className: 'fade-edge' , render: function ( name, type, row, meta ) {
return '<h4 data-groupid="' + row.id + '">' + name + '</h4>';
}},
{ targets: 2, data: 'owner', className: 'fade-edge remove-padding-top'},
{ targets: 3, data: 'id', className: 'text-right content-fill text-left-on-grid-view no-wrap' ,
render: function ( id, type, row, meta ) {
var html;
html = '<a href="devices?groupName=' + row.name + '&groupOwner=' + row.owner + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' +
'<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-view fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">View Devices</span></a>';
html += '<a href="analytics?groupName=' + row.name + '&groupOwner=' + row.owner + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' +
'<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-statistics fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">Analytics</span></a>';
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view share-group-link" data-group-name="' + row.name + '" ' +
'data-group-owner="' + row.owner + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-share fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">Share</span></a>';
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-group-link" data-group-name="' + row.name + '" ' +
'data-group-owner="' + row.owner + '" data-group-description="' + row.description + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
'<i class="fw fw-edit fw-stack-1x"></i></span><span class="hidden-xs hidden-on-grid-view">Edit</span></a>';
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-group-link" data-group-name="' + row.name + '" ' +
'data-group-owner="' + row.owner + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-delete fw-stack-1x"></i>' +
'</span><span class="hidden-xs hidden-on-grid-view">Delete</span></a>';
return html;
}}
],
"createdRow": function( row, data, dataIndex ) {
$(row).attr('data-type', 'selectable');
$(row).attr('data-groupid', data.id);
$.each($('td', row), function (colIndex) {
switch(colIndex) {
case 1:
$(this).attr('data-grid-label', "Name");
$(this).attr('data-search', data.name);
$(this).attr('data-display', data.name);
break;
case 2:
$(this).attr('data-grid-label', "Owner");
$(this).attr('data-search', data.owner);
$(this).attr('data-display', data.owner);
break;
}
});
},
"fnDrawCallback": function( oSettings ) {
$(".icon .text").res_text(0.2);
attachEvents();
}
});
$(groupCheckbox).click(function () {
addGroupSelectedClass(this);
});
}

Loading…
Cancel
Save