Skip to content

Commit

Permalink
update and refactor zone dir list modal (#1282, #1730)
Browse files Browse the repository at this point in the history 
Co-authored-by: Mikko Nieminen <mikko.nieminen@bih-charite.de>
  • Loading branch information
@gromdimon @mikkonie
gromdimon and mikkonie authored Jul 19, 2023
1 parent 84728af commit 55b1e1a
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 80 deletions.
116 changes: 53 additions & 63 deletions irodsbackend/static/irodsbackend/js/irodsbackend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ var updateCollectionStats = function() {
method: 'POST',
dataType: 'json',
data: d,
contentType: "application/x-www-form-urlencoded; charset=UTF-8", //should be default
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
traditional: true
}).done(function (data) {
$('span.sodar-irods-stats').each(function () {
Expand Down Expand Up @@ -52,7 +52,6 @@ var updateCollectionStats = function() {
}
};


/***************************************
Toggling buttons in one row function
***************************************/
Expand Down Expand Up @@ -158,35 +157,38 @@ var updateButtons = function() {
}
};

/************************
Copy path display method
*************************/
function displayCopyStatus(elem) {
elem.addClass('text-warning');
var realTitle = elem.tooltip().attr('data-original-title');
elem.attr('title', 'Copied!')
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', realTitle)
.tooltip('_fixTitle');
elem.delay(250).queue(function() {
elem.removeClass('text-warning').dequeue();
});
}

/**********************
Modal copy path method
**********************/
function copyModalPath(path, id) {
navigator.clipboard.writeText(path);
displayCopyStatus($('#' + id));
}

$(document).ready(function() {
/***************
Init Clipboards
***************/
// Init Clipboards
new ClipboardJS('.sodar-irods-copy-btn');

/******************
Copy link handling
******************/
// Add copy link handler
$('.sodar-irods-copy-btn').click(function () {
$(this).addClass('text-warning');
if ($(this).attr('data-table') !== '1') {
var realTitle = $(this).tooltip().attr('data-original-title');
$(this).attr('title', 'Copied!')
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', realTitle)
.tooltip('_fixTitle');
}
$(this).delay(250).queue(function() {
$(this).removeClass('text-warning').dequeue();
});
displayCopyStatus($(this));
});

/***********************
Update collection stats
***********************/
// Update collection stats
updateCollectionStats();
if ($('table.sodar-lz-table').length === 0) {
updateButtons();
Expand All @@ -197,7 +199,6 @@ $(document).ready(function() {
statsSec = window.irodsbackendStatusInterval;
}
var statsInterval = statsSec * 1000;

// Poll and update active collections
setInterval(function () {
if ($('table.sodar-lz-table').length === 0) {
Expand All @@ -206,35 +207,21 @@ $(document).ready(function() {
updateCollectionStats();
}, statsInterval);

/***************
Link list Popup
***************/
// Collection dir list modal
$('.sodar-irods-popup-list-btn').click(function() {
var listUrl = $(this).attr('data-list-url');
var irodsPath = $(this).attr('data-irods-path');
var irodsPathLength = irodsPath.split('/').length;
var webDavUrl = $(this).attr('data-webdav-url');
var body = '';
var showChecksumCol = false;
if (typeof(window.irodsShowChecksumCol) !== 'undefined') {
showChecksumCol = window.irodsShowChecksumCol;
}

$('.modal-title').text('Files in iRODS: ' + irodsPath.split('/').pop());

$.ajax({
url: listUrl,
method: 'GET',
dataType: 'json'
}).done(function (data) {
// console.log(data); // DEBUG

$.ajax({url: listUrl, method: 'GET', dataType: 'json'}).done(function (data) {
// console.log(data); // DEBUG
if (data['irods_data'].length > 0) {
body += '<table class="table sodar-card-table sodar-irods-obj-table">';
body += '<thead><th>File/Collection</th><th>Size</th><th>Modified</th>';
if (showChecksumCol === true) {
body += '<th>MD5</th>';
}
body += '<th>MD5</th><th>iRODS</th>';
body += '</thead><tbody>';

$.each(data['irods_data'], function (i, obj) {
Expand All @@ -248,31 +235,35 @@ $(document).ready(function() {
objLink += obj['name'] + '</a>';

var colSpan = '1';
var icon = 'mdi:file-document-outline';
var toolTip = 'File';
if (obj['type'] === 'coll') {
colSpan = '4';
icon = 'mdi:folder-open';
toolTip = 'Collection';
}
var iconHtml = '<i class="iconify mr-1" data-icon="'+ icon +'"' +
'title="'+ toolTip +'"></i>';

var icon = obj['type'] === 'coll' ? 'mdi:folder-open' : 'mdi:file-document-outline';
var toolTip = obj['type'] === 'coll' ? 'Collection' : 'File';
var elemId = 'sodar-irods-copy-btn-' + i.toString();
var copyButton = '<button class="btn btn-secondary sodar-list-btn pull-right" ' +
'id="' + elemId + '"' +
'title="Copy iRODS path into clipboard" data-tooltip="tooltip" ' +
'data-placement="top" onclick="copyModalPath(\'' + obj['path'] +
'\', \'' + elemId + '\')">' +
'<i class="iconify" data-icon="mdi:clipboard-text-multiple"></i>' +
'</button>';
var iconHtml = '<i class="iconify mr-1" data-icon="' + icon + '"' +
' title="' + toolTip + '"></i>';
body += '<tr><td colspan="' + colSpan + '">' + iconHtml + objLink + '</td>';

if (obj['type'] === 'obj') {
body += '<td>' + humanFileSize(obj['size'], true) + '</td>';
body += '<td>' + obj['modify_time'] + '</td><td>';
if (showChecksumCol === true) {
if (obj['md5_file'] === true) {
body += '<span class="text-muted">' +
'<i class="iconify" data-icon="mdi:check-bold"></i></span>';
} else {
body += '<span class="text-danger">' +
'<i class="iconify" data-icon="mdi:close-thick"></i></span>';
}
if (obj['md5_file'] === true) {
body += '<span class="text-muted">' +
'<i class="iconify" data-icon="mdi:check-bold"></i></span>';
} else {
body += '<span class="text-danger">' +
'<i class="iconify" data-icon="mdi:close-thick"></i></span>';
}
body += '</td>';
} else {
body += '<td colspan="3"></td>';
}
body += '<td>' + copyButton + '</td>';
body += '</tr>';
});
} else {
Expand All @@ -296,7 +287,6 @@ $(document).ready(function() {
$('#sodar-modal-wait').modal('hide');
$('#sodar-modal').modal('show');
});

// Set waiting content and toggle modal
$('#sodar-modal-wait').modal('show');
});
Expand Down
22 changes: 5 additions & 17 deletions irodsbackend/templates/irodsbackend/_irods_buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
{# irods_colls: Whether iRODS collections exist (boolean) #}
{# irods_path: full iRODS path to link to #}
{# list_url: SODAR URL for querying file list #}
{# data_table: Whether the file is included within a data table (boolean) #}
{# show_file_list: Whether to show the file list popup (boolean) #}
{# disable_all: Show but disable buttons if True (boolean) #}

Expand All @@ -23,9 +22,7 @@
data-webdav-url="{{ irods_webdav_url }}"
role="submit"
{# NOTE: Modal not triggered here as data is async, see JQuery #}
{% if not data_table %}
data-tooltip="tooltip" data-placement="top"
{% endif %}
data-tooltip="tooltip" data-placement="top"
title="List files"
{% if not irods_colls or disable_all %} disabled{% endif %}>
<i class="iconify" data-icon="mdi:folder-open-outline"></i>
Expand All @@ -34,32 +31,23 @@
<button class="btn btn-secondary sodar-list-btn sodar-irods-btn sodar-irods-copy-btn sodar-irods-path-btn
{% if not irods_webdav_enabled or not irods_colls or disable_all %} no-colls {% endif %}"
data-clipboard-text="{{ irods_path }}" role="submit"
data-table="{% if data_table %}1{% else %}0{% endif %}"
{% if not data_table %}
data-tooltip="tooltip" data-placement="top"
{% endif %}
data-tooltip="tooltip" data-placement="top"
title="Copy iRODS path into clipboard"
{% if not irods_colls or disable_all %} disabled{% endif %}>
<i class="iconify" data-icon="mdi:console-line"></i>
</button>
<button class="btn btn-secondary sodar-list-btn sodar-irods-btn sodar-irods-copy-btn
{% if not irods_webdav_enabled or not irods_colls or disable_all %} no-colls {% endif %}"
data-clipboard-text="{{ irods_webdav_url }}{{ irods_path }}" role="submit"
data-table="{% if data_table %}1{% else %}0{% endif %}"
{% if not data_table %}
data-tooltip="tooltip" data-placement="top"
{% endif %}
data-tooltip="tooltip" data-placement="top"
title="Copy WebDAV URL into clipboard"
{% if not irods_colls or disable_all %} disabled{% endif %}>
<i class="iconify" data-icon="mdi:clipboard-text-multiple"></i>
</button>
<a class="btn btn-secondary sodar-list-btn sodar-irods-btn sodar-irods-dav-btn {% if data_table %}mr-1{% endif %}
<a class="btn btn-secondary sodar-list-btn sodar-irods-btn sodar-irods-dav-btn
{% if not irods_webdav_enabled or not irods_colls or disable_all %} no-colls disabled {% endif %}"
href="{{ irods_webdav_url }}{{ irods_path }}" role="button"
data-table="{% if data_table %}1{% else %}0{% endif %}"
{% if not data_table %}
data-tooltip="tooltip" data-placement="top"
{% endif %}
data-tooltip="tooltip" data-placement="top"
title="Browse files in WebDAV">
<i class="iconify" data-icon="mdi:open-in-new"></i>
</a>
Expand Down

0 comments on commit 55b1e1a

Please sign in to comment.