diff --git a/apps/dashboard/app/javascript/config.js b/apps/dashboard/app/javascript/config.js index 710246c49..4331fe1ad 100644 --- a/apps/dashboard/app/javascript/config.js +++ b/apps/dashboard/app/javascript/config.js @@ -54,6 +54,11 @@ export function isBCDynamicJSEnabled() { return cfgData['bcDynamicJs'] == 'true' } +export function downloadEnabled() { + const cfgData = configData(); + return cfgData['downloadEnabled'] == 'true'; +} + /* Will return null if xdmod integration is not enabled. */ diff --git a/apps/dashboard/app/javascript/files/data_table.js b/apps/dashboard/app/javascript/files/data_table.js index cb7c0a4d4..44e97d1f6 100644 --- a/apps/dashboard/app/javascript/files/data_table.js +++ b/apps/dashboard/app/javascript/files/data_table.js @@ -1,6 +1,7 @@ import Handlebars from 'handlebars'; import {EVENTNAME as SWAL_EVENTNAME} from './sweet_alert.js'; import { getGlobusLink, updateGlobusLink } from './globus.js'; +import { downloadEnabled } from '../config.js'; export { CONTENTID, EVENTNAME }; const EVENTNAME = { @@ -377,10 +378,106 @@ class DataTable { } actionsBtnTemplate(options) { - let template_str = $('#actions-btn-template').html(); - let compiled = Handlebars.compile(template_str); - let results = compiled(options); - return results; + // options: { row_index: meta.row, + // file: row.type != 'd', + // data: row } + const rowIndex = options.row_index; + const file = options.file; + const data = options.data; + + // Create the button group container + const btnGroup = document.createElement('div'); + btnGroup.classList.add('btn-group', 'actions-btn-group'); + + // Create the button + const button = document.createElement('button'); + button.type = 'button'; + button.classList.add('actions-btn', 'btn', 'btn-outline-dark', 'btn-sm', 'dropdown-toggle'); + button.setAttribute('data-bs-toggle', 'dropdown'); + button.setAttribute('aria-haspopup', 'true'); + button.setAttribute('aria-expanded', 'false'); + + // Create the icon inside the button + const icon = document.createElement('span'); + icon.classList.add('fa', 'fa-ellipsis-v'); + button.appendChild(icon); + + // Append the button to the button group + btnGroup.appendChild(button); + + // Create the dropdown menu + const dropdownMenu = document.createElement('ul'); + dropdownMenu.classList.add('dropdown-menu'); + + // Check if this is a file and create View and Edit options + if (file) { + if (data.url) { + const viewItem = document.createElement('li'); + const viewLink = document.createElement('a'); + viewLink.href = data.url; + viewLink.classList.add('view-file', 'dropdown-item'); + viewLink.target = '_blank'; + viewLink.setAttribute('data-row-index', rowIndex); + viewLink.innerHTML = ' View'; + viewItem.appendChild(viewLink); + dropdownMenu.appendChild(viewItem); + } + + if (data.edit_url) { + const editItem = document.createElement('li'); + const editLink = document.createElement('a'); + editLink.href = data.edit_url; + editLink.classList.add('edit-file', 'dropdown-item'); + editLink.target = '_blank'; + editLink.setAttribute('data-row-index', rowIndex); + editLink.innerHTML = ' Edit'; + editItem.appendChild(editLink); + dropdownMenu.appendChild(editItem); + } + } + + // Create Rename option + const renameItem = document.createElement('li'); + const renameLink = document.createElement('a'); + renameLink.href = '#'; + renameLink.classList.add('rename-file', 'dropdown-item'); + renameLink.setAttribute('data-row-index', rowIndex); + renameLink.innerHTML = ' Rename'; + renameItem.appendChild(renameLink); + dropdownMenu.appendChild(renameItem); + + // Create Download option if it's enabled and the URL exists + if (downloadEnabled() && data.download_url) { + const downloadItem = document.createElement('li'); + const downloadLink = document.createElement('a'); + downloadLink.href = data.download_url; + downloadLink.classList.add('download-file', 'dropdown-item'); + downloadLink.setAttribute('data-row-index', rowIndex); + downloadLink.innerHTML = ' Download'; + downloadItem.appendChild(downloadLink); + dropdownMenu.appendChild(downloadItem); + } + + // Add a divider between options + const dividerItem = document.createElement('li'); + dividerItem.classList.add('dropdown-divider', 'mt-4'); + dropdownMenu.appendChild(dividerItem); + + // Create the Delete option + const deleteItem = document.createElement('li'); + const deleteLink = document.createElement('a'); + deleteLink.href = '#'; + deleteLink.classList.add('delete-file', 'dropdown-item', 'text-danger'); + deleteLink.setAttribute('data-row-index', rowIndex); + deleteLink.innerHTML = ' Delete'; + deleteItem.appendChild(deleteLink); + dropdownMenu.appendChild(deleteItem); + + // Append the dropdown menu to the button group + btnGroup.appendChild(dropdownMenu); + + // Return the button group element html as a string + return btnGroup.outerHTML; } updateDatatablesStatus() { diff --git a/apps/dashboard/app/javascript/files/file_ops.js b/apps/dashboard/app/javascript/files/file_ops.js index f17656f1e..804151f53 100644 --- a/apps/dashboard/app/javascript/files/file_ops.js +++ b/apps/dashboard/app/javascript/files/file_ops.js @@ -129,7 +129,7 @@ jQuery(function() { const eventData = { file: fileName, }; - + $(CONTENTID).trigger(EVENTNAME.renameFilePrompt, eventData); }); diff --git a/apps/dashboard/app/views/files/_file_action_menu.html.erb b/apps/dashboard/app/views/files/_file_action_menu.html.erb deleted file mode 100755 index 8453d3467..000000000 --- a/apps/dashboard/app/views/files/_file_action_menu.html.erb +++ /dev/null @@ -1,25 +0,0 @@ - diff --git a/apps/dashboard/app/views/files/index.html.erb b/apps/dashboard/app/views/files/index.html.erb index c1fe4c5d9..ef0bb8d84 100644 --- a/apps/dashboard/app/views/files/index.html.erb +++ b/apps/dashboard/app/views/files/index.html.erb @@ -24,7 +24,6 @@