You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
workspace-widget-portlet/src/main/webapp/html/workspacewidget/view.jsp

117 lines
4.3 KiB
Plaintext

<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp"%>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="<%=renderRequest.getContextPath()%>/js/datatables.min.js"></script>
<portlet:resourceURL var="usersCustomDataSourceURL">
<portlet:param name="cmd" value="itemId=" />
</portlet:resourceURL>
<portlet:resourceURL var="downloadFileURL">
<portlet:param name="fileToDownloadId" value="itemId=" />
</portlet:resourceURL>
<div class="ws-breadcrumb-container"></div>
<table id="userTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Owner</th>
<th>Last modified</th>
</tr>
</thead>
</table>
<script>
function loadItemsListIntoTable(itemId, itemName) {
var table = $('#userTable').DataTable();
table.ajax.url('<%=usersCustomDataSourceURL%>'+itemId+'_selectedName='+itemName).load();
}
function downloadItem(itemId) {
var uri = '<%=downloadFileURL%>'+itemId;
window.open(uri, "_blank");
}
function mainTable() {
var table = $('#userTable').DataTable( {
retrieve: true, // tell DataTables that you are aware that the initialisation options can't be changed after initialisation, and that should that occur, that you just want the DataTable instance to be returned.
"lengthMenu": [ [6, 12, 25, 50, -1], [6, 12, 25, 50, "All"] ],
"dom": "<'row'<'small-6 columns'><'small-6 columns'>r>t<'row'<'mydt-pagination'p><'#mydtwrap'<'mydt-block'l><i>>'>",
select: {
style: 'single'
},
processing: true,
serverSide: true,
searching: false,
ordering: false,
"language": {
"emptyTable": "This folder is empty",
"info": "_START_ to _END_ of _TOTAL_ items"
},
"stripeClasses": [ 'strip1', 'strip2'],
"ajax": {
"url":"<%=usersCustomDataSourceURL%>",
"dataSrc": function ( json ) { //here is the json return by the ajax call
$( "div.ws-breadcrumb-container" ).html(json.breadcrumb);
return json.mytabledata;
}
},
"columns": [
{ "data": "Name",
"render": function ( data, type, row, meta ) {
var obj = JSON.parse(data);
var truncatedName = truncateText(obj.Name);
var anchorURL = '<a title="'+obj.Name+'" target="_blank" href="<%=downloadFileURL%>'+obj.Id+'">'+truncatedName+'<a/>';
if(obj.isFolder) {
anchorURL = '<a title="'+obj.Name+'" href="javascript:loadItemsListIntoTable(\''+obj.Id+'\',\''+obj.Name+'\');">'+truncatedName+'<a/>';
}
return '<div class="noselect" style="display: table;">'+
'<span style="padding: 5px; background-color: white; border-radius: 20px; color: '+ obj.IconColor+ '; font-size: 1.5em; vertical-align: middle; display: table-cell;">'+
'<i class="material-icons " title="'+obj.Name+'">'+obj.Icon+'</i></span>'+
'<span style="padding-left: 10px; vertical-align: middle; display: table-cell;">'+
anchorURL+
'</span></div>';
}
},
{ "data": "Owner",
"render": function ( data, type, row, meta ) {
if (data != "me") {
return getInitials(data);
}
return data;
}
},
{ "data": "LastModified" ,
"render": function ( data, type, row, meta ) {
return '<span style="font-size: 12px;">'+data+'</span>';
}
}
]
}
);
table
// .on( 'select', function ( e, dt, type, indexes ) {
// var selectedId = table.rows( indexes ).data().pluck( 'Id' )[0];
// } )
.on( 'dblclick', 'tr', function (e, dt, type, indexes ) {
var selectedRowIndex = table.row( this ).index();
//console.log("->"+selectedRowIndex);
var selectedId = table.rows( indexes ).data().pluck( 'Id' )[selectedRowIndex];
var selectedNameData = table.rows( indexes ).data().pluck( 'Name' )[selectedRowIndex];
var obj = JSON.parse(selectedNameData);
var selectedName = obj.Name;
if(obj.isFolder)
loadItemsListIntoTable(selectedId, selectedName);
else
downloadItem(selectedId);
} )
.on( 'error.dt', function ( e, settings, techNote, message ) {
console.log( 'An error has happened in the server: ', message );
} );
}
$(document).ready(mainTable);
</script>