_s3_resources.html.erb

<section class="files-section">
  <div class="lux">
    <div class="card">
      <div class="files card-body">
        <h3>
          <div id="total-file-count-spinner" class="spinner-border spinner-border-sm" role="status"></div>
          <span id="total-file-count-in-table"></span> Files or Directories in <%= @work.approved? ? "post-curation" : "pre-curation" %> storage
        </h3>
        <table id="files-table" class="table">
          <thead>
            <tr>
              <th scope="col" nowrap="nowrap"><span>Filename</span></th>
              <th scope="col"><span>Last Modified</span></th>
              <th scope="col"><span>Size</span></th>
              <th scope="col"><span></span></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot></tfoot>
        </table>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  $(function() {
    // work.id is nil when the form is rendered during work creation and the work has not been saved
    var work = '<%= @work %>';
    let fileListUrl;
    if (work) {
      fileListUrl = '<%= @work_decorator.file_list_path %>';
    } else {
      fileListUrl = '<%= root_path %>';
    }
    var isEditMode = <%= edit_mode %>;
    // Notice that Ruby's `defined?` does not return a boolean, hence the `!= nil` comparison.
    var isWizardMode = <%= defined?(wizard_mode) != nil && wizard_mode == true %>;

    // Wire DataTable for the file list.
    // Related documentation
    //   AJAX loading: https://datatables.net/manual/ajax
    //   Column display configuration: https://datatables.net/examples/advanced_init/column_render.html
    //   Row Id: https://datatables.net/reference/option/rowId
    let $fileTable = $('#files-table');
    let fileTable;

    const $filesTableWrapper = $('#files-table_wrapper');
    const filesTableLength = $('#files-table_length');
    if (filesTableLength.length > 0) {
      if (DataTable.isDataTable($fileTable)) {
        fileTable = $fileTable.dataTable();

        const fileTableApi = fileTable.api();
        fileTableApi.destroy();
      } else {
        $fileTable = $fileTable.detach();

        const $cardBody = $('.files.card-body');
        $cardBody.append($fileTable);
      }

      $filesTableWrapper.remove();
    }

    filesTable = $fileTable.DataTable({
      select: true,
      ajax: {
        url: fileListUrl,
        dataSrc: function(json) {
          // The JSON payload includes a few extra properties (fetched via AJAX because
          // they be slow for large datasets). Here we pick up those properties and update
          // the display with them.
          $("#total-file-size").text(json.total_size_display);
          $("#total-file-size-spinner").hide();
          $("#total-file-count-in-table").text(json.total_file_count.toLocaleString("en-US"));
          $("#total-file-count-spinner").hide();
          // The JSON payload include the file list in the `data` property
          // and that's what we return to DataTables as the "source" data.
          return json.data;
        }
      },
      rowId: 'safe_id',
      columns: [
        { data: 'filename' },
        { data: 'last_modified_display' },
        { data: 'display_size' },
        { data: 'filename' }
      ],
      columnDefs: [
        {
          render: function (data, type, row) {
            // filename
            if (type == "display") {
              var html;
              if (row.filename_display.startsWith("*")) {
                // On edit mode, file is marked to be deleted display strikethrough
                html = `<span><s>${row.filename_display.substring(1)}</s></span>`;
              } else {
                if (row.size == 0) {
                  // Display the filename as text (i.e. not a hyperlink)
                  html = `<span>
                    <i class="bi bi-dash-square"></i>
                    ${row.filename_display}
                  </span>`;
                } else {
                  // Display as a hyperlink with the download icon
                  // (Note: Interpolation in the client is interpreted after the server-side Ruby builds the download path)
                  let downloadUrl;
                  if (work) {
                    downloadUrl = `<%= @work_decorator.download_path %>?filename=${data}`;
                  } else {
                    downloadUrl = '<%= root_path %>';
                  }
                  var encodedUrl = window.encodeURI(downloadUrl);

                  html = `<span>
                    <i class="bi bi-file-arrow-down"></i>
                    <a href="${encodedUrl}" target="_blank">${row.filename_display}</a>
                  </span>`;
                }
              }
              return html;
            }

            // Force any readme file to sort to the top
            var sortValue;
            if (data.toLowerCase().includes("readme")) {
              sortValue = "A" + data;
            } else {
              sortValue = "Z" + data;
            }
            return sortValue;
          },
          targets: 0,
        },
        {
          render: function (data, type, row) {
            // last_modified_display
            if (type == "display") {
              return data;
            }
            return row.last_modified; // sortable, e.g. yyyy-mm-dd hh:mm
          },
          targets: 1,
        },
        {
          render: function (data, type, row) {
            // size
            if (type == "display") {
              if (row.is_folder === true) {
                // display no size for folders
                return "";
              } else {
                // human readable (e.g. 34 KB)
                return row.display_size;
              }
            }
            // raw bytes
            return row.size;
          },
          targets: 2,
          className: 'dt-right'
        },
        {
          render: function (data, type, row) {
            // Don't render the delete icon for the readme while in the Wizard
            if (isWizardMode && row.filename.includes("README")) {
              return "";
            }

            // delete icon
            var html = null;
            if (type == "display") {
              if (row.filename_display.startsWith("*")) {
                html = `<span>
                  <a class="undo-delete-file" data-safe_id=${row.safe_id} data-filename=${row.filename} data-filename_display=${row.filename_display} href="#">
                    Undo delete
                  </a>
                </span>`;
              } else {
                html = `<span>
                  <a class="delete-file" data-safe_id=${row.safe_id} data-filename=${row.filename} data-filename_display=${row.filename_display} href="#" id="delete-file-${row.safe_id}">
                    Delete file
                  </a>
                </span>`;
              }
            }
            return html;
          },
          targets: 3,
          className: 'dt-right',
          sortable: false,
          visible: isEditMode
        }
      ]
    });
  });
</script>