Add full view for my-module repository

app/assets/javascripts/my_modules/repositories.js

@@ -1,9 +1,32 @@
 /* eslint-disable no-param-reassign */
+/* global DataTableHelpers PerfectScrollbar */
 
 var MyModuleRepositories = (function() {
   var SIMPLE_TABLE;
+  var FULL_VIEW_TABLE;
+  var FULL_VIEW_TABLE_SCROLLBAR;
+
+  function tableColumnPreparation(tableContainer, skipCheckbox = false) {
+    var columns = $(tableContainer).data('default-table-columns');
+    var customColumns = $(tableContainer).find('thead th[data-type]');
+    for (let i = 0; i < columns.length; i += 1) {
+      columns[i].data = String(i);
+      columns[i].defaultContent = '';
+      if (skipCheckbox && i === 0) columns[i].visible = false;
+    }
+    customColumns.each((i, column) => {
+      columns.push({
+        visible: true,
+        searchable: true,
+        data: String(columns.length),
+        defaultContent: $.fn.dataTable.render['default' + column.dataset.type](column.id)
+      });
+    });
+    return columns;
+  }
 
   function renderSimpleTable(tableContainer) {
+    if (SIMPLE_TABLE) SIMPLE_TABLE.destroy();
     SIMPLE_TABLE = $(tableContainer).DataTable({
       dom: "Rt<'pagination-row'<'pagination-actions'p>>",
       processing: true,
@@ -11,6 +34,7 @@ var MyModuleRepositories = (function() {
       responsive: true,
       pageLength: 5,
       order: [[3, 'asc']],
+      sScrollY: '100%',
       sScrollX: '100%',
       sScrollXInner: '100%',
       destroy: true,
@@ -24,14 +48,14 @@ var MyModuleRepositories = (function() {
         global: false,
         type: 'GET'
       },
-      columns: (function() {
+      columns: tableColumnPreparation(tableContainer),
-        var columns = $(tableContainer).data('default-table-columns');
+      columnDefs: [{
-        for (let i = 0; i < columns.length; i += 1) {
+        targets: 3,
-          columns[i].data = String(i);
+        render: function(data, type, row) {
-          columns[i].defaultContent = '';
+          return "<a href='" + row.recordInfoUrl + "'"
+                 + "class='record-info-link'>" + data + '</a>';
         }
-        return columns;
+      }],
-      }()),
       drawCallback: function() {
         var repositoryContainer = $(this).closest('.assigned-repository-container');
         repositoryContainer.find('.table.dataTable').removeClass('hidden');
@@ -40,6 +64,76 @@ var MyModuleRepositories = (function() {
     });
   }
 
+  function renderFullViewTable(tableContainer) {
+    if (FULL_VIEW_TABLE) FULL_VIEW_TABLE.destroy();
+    FULL_VIEW_TABLE_SCROLLBAR = false;
+    FULL_VIEW_TABLE = $(tableContainer).DataTable({
+      dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
+      processing: true,
+      serverSide: true,
+      order: $(tableContainer).data('default-order'),
+      pageLength: 25,
+      sScrollX: '100%',
+      sScrollXInner: '100%',
+      destroy: true,
+      ajax: {
+        url: $(tableContainer).data('source'),
+        data: function(d) {
+          d.assigned = 'assigned';
+          d.view_mode = true;
+        },
+        global: false,
+        type: 'GET'
+      },
+      columns: tableColumnPreparation(tableContainer, true),
+      columnDefs: [{
+        targets: 0,
+        visible: false
+      }, {
+        targets: 1,
+        searchable: false,
+        className: 'assigned-column',
+        sWidth: '1%'
+      }, {
+        targets: 3,
+        render: function(data, type, row) {
+          return "<a href='" + row.recordInfoUrl + "'"
+                 + "class='record-info-link'>" + data + '</a>';
+        }
+      }, {
+        targets: '_all',
+        render: function(data) {
+          if (typeof data === 'object' && $.fn.dataTable.render[data.value_type]) {
+            return $.fn.dataTable.render[data.value_type](data);
+          }
+          return data;
+        }
+      }],
+
+      fnInitComplete: function() {
+        var dataTableWrapper = $(tableContainer).closest('.dataTables_wrapper');
+        DataTableHelpers.initLengthApearance(dataTableWrapper);
+        DataTableHelpers.initSearchField(dataTableWrapper);
+        dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
+      },
+
+      drawCallback: function() {
+        FULL_VIEW_TABLE.columns.adjust();
+        if (FULL_VIEW_TABLE_SCROLLBAR) {
+          FULL_VIEW_TABLE_SCROLLBAR.update();
+        } else {
+          FULL_VIEW_TABLE_SCROLLBAR = new PerfectScrollbar(
+            $(tableContainer).closest('.dataTables_scrollBody')[0],
+            {
+              wheelSpeed: 0.5,
+              minScrollbarLength: 20
+            }
+          );
+        }
+      }
+    });
+  }
+
   function initSimpleTable() {
     $('#assigned-items-container').on('show.bs.collapse', '.assigned-repository-container', function() {
       var repositoryContainer = $(this);
@@ -50,9 +144,22 @@ var MyModuleRepositories = (function() {
     });
   }
 
+  function initRepositoryFullView() {
+    $('#assigned-items-container').on('click', '.action-buttons .full-screen', function(e) {
+      var fullViewModal = $('#my-module-repository-full-view-modal');
+      fullViewModal.modal('show');
+      $.get($(this).data('table-url'), (data) => {
+        fullViewModal.find('.modal-body').html(data.html);
+        renderFullViewTable(fullViewModal.find('.table'));
+      });
+      e.stopPropagation();
+    });
+  }
+
   return {
     init: () => {
       initSimpleTable();
+      initRepositoryFullView();
     }
   };
 }());

app/assets/javascripts/repositories/repository_datatable.js

@@ -1,5 +1,5 @@
 /*
-  globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise dropdownSelector
+  globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise DataTableHelpers
   HelperModule animateLoading hideAssignUnasignModal RepositoryDatatableRowEditor
 */
 
@@ -546,8 +546,6 @@ var RepositoryDatatable = (function(global) {
         });
       },
       fnInitComplete: function() {
-        var tableLengthSelect = $('.dataTables_length select');
-        var tableFilterInput = $('.dataTables_filter input');
 
         disableCheckboxToggleOnAssetDownload();
         FilePreviewModal.init();
@@ -572,33 +570,13 @@ var RepositoryDatatable = (function(global) {
           initCancelButton();
         }
 
+        DataTableHelpers.initLengthApearance($(TABLE_ID).closest('.dataTables_wrapper'));
+        DataTableHelpers.initSearchField($(TABLE_ID).closest('.dataTables_wrapper'));
+
         if ($('.repository-show').length) {
           $('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
         }
 
-        if (tableLengthSelect.val() == null) {
-          tableLengthSelect.val(10).change();
-        }
-        $.each(tableLengthSelect.find('option'), (i, option) => {
-          option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
-        });
-        $('.dataTables_length').append(tableLengthSelect).find('label').remove();
-        dropdownSelector.init(tableLengthSelect, {
-          noEmptyOption: true,
-          singleSelect: true,
-          closeOnSelect: true,
-          selectAppearance: 'simple'
-        });
-
-        tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory'))
-          .addClass('sci-input-field')
-          .css('margin', 0);
-        $('.dataTables_filter').append(`
-            <div class="sci-input-container left-icon">
-              <i class="fas fa-search"></i>
-            </div>`).find('.sci-input-container').prepend(tableFilterInput);
-        $('.dataTables_filter').find('label').remove();
-
         $('.main-actions, .pagination-row').removeClass('hidden');
 
         $(TABLE_ID).find('tr[data-editable=false]').each(function(_, e) {

app/assets/javascripts/sitewide/datatable_helpers.js

@@ -0,0 +1,36 @@
+/* global dropdownSelector I18n */
+
+var DataTableHelpers = (function() {
+  return {
+    initLengthApearance: function(dataTableWraper) {
+      var tableLengthSelect = $(dataTableWraper).find('.dataTables_length select');
+      if (tableLengthSelect.val() == null) {
+        tableLengthSelect.val(10).change();
+      }
+      $.each(tableLengthSelect.find('option'), (i, option) => {
+        option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
+      });
+      $(dataTableWraper).find('.dataTables_length')
+        .append(tableLengthSelect).find('label')
+        .remove();
+      dropdownSelector.init(tableLengthSelect, {
+        noEmptyOption: true,
+        singleSelect: true,
+        closeOnSelect: true,
+        selectAppearance: 'simple'
+      });
+    },
+
+    initSearchField: function(dataTableWraper) {
+      var tableFilterInput = $(dataTableWraper).find('.dataTables_filter input');
+      tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory'))
+        .addClass('sci-input-field')
+        .css('margin', 0);
+      $('.dataTables_filter').append(`
+          <div class="sci-input-container left-icon">
+            <i class="fas fa-search"></i>
+          </div>`).find('.sci-input-container').prepend(tableFilterInput);
+      $('.dataTables_filter').find('label').remove();
+    }
+  };
+}());

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -66,10 +66,9 @@ var dropdownSelector = (function() {
     if (modalContainer.length) {
       windowHeight = modalContainer.height() + modalContainer[0].getBoundingClientRect().top;
       containerPositionLeft -= modalContainer[0].getBoundingClientRect().left;
-      modalContainerBottom = modalContainer[0].getBoundingClientRect().bottom;
+      modalContainerBottom = windowHeight - modalContainer[0].getBoundingClientRect().bottom;
       maxHeight += modalContainerBottom;
     }
-
     bottomSpace = windowHeight - containerPosition - containerHeight;
 
     if ((modalContainerBottom + bottomSpace) < 280) {

app/assets/stylesheets/my_modules/repositories.scss

@@ -162,3 +162,64 @@
     }
   }
 }
+
+#my-module-repository-full-view-modal {
+  .modal-dialog {
+    height: 100vh;
+    margin: 0;
+    width: 100vw;
+
+    .modal-content {
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      display: flex;
+      flex-direction: column;
+      height: inherit;
+
+      .modal-body {
+        flex-grow: 1;
+      }
+
+      .dataTables_wrapper {
+        height: calc(100% - 30px);
+        position: absolute;
+        width: calc(100% - 30px);
+
+        .dataTables_scroll {
+          height: calc(100% - 104px);
+
+          .dataTables_scrollBody {
+            height: calc(100% - 44px);
+          }
+        }
+      }
+    }
+  }
+
+  .dataTables_scrollBody {
+    .assigned-column {
+      position: relative;
+
+      .assign-counter-container {
+        border-radius: $border-radius-tag;
+        cursor: pointer;
+        line-height: 35px;
+        position: absolute;
+        text-align: center;
+        top: 1px;
+        width: calc(100% - 16px);
+
+        .assign-counter {
+          &.has-assigned {
+            color: $brand-primary;
+          }
+        }
+
+        &:hover {
+          background-color: $color-alto;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/shared/datatable.scss

@@ -0,0 +1,39 @@
+// scss-lint:disable SelectorDepth SelectorFormat
+// scss-lint:disable NestingDepth QualifyingElement
+
+.dataTables_wrapper {
+  .pagination-row {
+    align-items: center;
+    background-color: $color-white;
+    display: flex;
+    height: 68px;
+    width: 100%;
+
+    .pagination-info,
+    .pagination-actions {
+      flex-grow: 1;
+    }
+
+    .pagination-info {
+      align-items: center;
+      display: flex;
+
+      .dataTables_info {
+        padding-top: 0;
+      }
+
+      .dataTables_length {
+        margin-right: 24px;
+        width: 170px;
+
+        .dropdown-selector-container {
+          width: inherit;
+        }
+
+        label {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

app/controllers/my_module_repositories_controller.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 class MyModuleRepositoriesController < ApplicationController
-  before_action :load_vars
+  before_action :load_vars, only: %i(show full_view_table)
-  before_action :check_view_permissions
+  before_action :check_view_permissions, only: %i(show full_view_table)
 
   def show
     @draw = params[:draw].to_i
@@ -15,6 +15,7 @@ class MyModuleRepositoriesController < ApplicationController
       skip_custom_columns: params[:skip_custom_columns]
     }
     @all_rows_count = datatable_service.all_count
+    @columns_mappings = datatable_service.mappings
     @repository_rows = datatable_service.repository_rows
                                         .preload(:repository_columns,
                                                  :created_by,
@@ -25,6 +26,10 @@ class MyModuleRepositoriesController < ApplicationController
     render 'repository_rows/index.json'
   end
 
+  def full_view_table
+    render json: { html: render_to_string(partial: 'my_modules/repositories/full_view_table') }
+  end
+
   private
 
   def load_vars

app/helpers/repository_datatable_helper.rb

@@ -23,7 +23,7 @@ module RepositoryDatatableHelper
       }
 
       unless options[:view_mode]
-        row.merge(
+        row.merge!(
           'recordEditUrl': Rails.application.routes.url_helpers
                                 .edit_repository_repository_row_path(
                                   repository,
@@ -51,13 +51,7 @@ module RepositoryDatatableHelper
   end
 
   def assigned_row(record)
-    if @my_module
     if record.assigned_my_modules_count.positive?
-        "<span class='circle-icon'>&nbsp;</span>"
-      else
-        "<span class='circle-icon disabled'>&nbsp;</span>"
-      end
-    elsif record.assigned_my_modules_count.positive?
       tooltip = t('repositories.table.assigned_tooltip',
                   tasks: record.assigned_my_modules_count,
       experiments: record.assigned_experiments_count,

app/services/repository_datatable_service.rb

@@ -44,14 +44,12 @@ class RepositoryDatatableService
           'AND "my_module_repository_rows"."my_module_id" = ' + @my_module.id.to_s
         )
       end
-      repository_rows = repository_rows.select('COUNT(my_module_repository_rows.id) AS "assigned_my_modules_count"')
+    end
-    else
     repository_rows = repository_rows
                       .left_outer_joins(my_module_repository_rows: { my_module: :experiment })
                       .select('COUNT(my_module_repository_rows.id) AS "assigned_my_modules_count"')
                       .select('COUNT(DISTINCT my_modules.experiment_id) AS "assigned_experiments_count"')
                       .select('COUNT(DISTINCT experiments.project_id) AS "assigned_projects_count"')
-    end
     repository_rows = repository_rows.preload(Extends::REPOSITORY_ROWS_PRELOAD_RELATIONS)
 
     @repository_rows = sort_rows(order_obj, repository_rows)
@@ -135,8 +133,8 @@ class RepositoryDatatableService
 
       sorting_data_type = sorting_column.data_type.constantize
 
-      if sorting_column.repository_checklist_value?
+      cells = if sorting_column.repository_checklist_value?
-        cells = RepositoryCell.joins(sorting_data_type::SORTABLE_VALUE_INCLUDE)
+                RepositoryCell.joins(sorting_data_type::SORTABLE_VALUE_INCLUDE)
                               .where('repository_cells.repository_column_id': sorting_column.id)
                               .select("repository_cells.repository_row_id,
                                               STRING_AGG(
@@ -145,7 +143,7 @@ class RepositoryDatatableService
                               .group('repository_cells.repository_row_id')
 
               else
-        cells = RepositoryCell.joins(sorting_data_type::SORTABLE_VALUE_INCLUDE)
+                RepositoryCell.joins(sorting_data_type::SORTABLE_VALUE_INCLUDE)
                               .where('repository_cells.repository_column_id': sorting_column.id)
                               .select("repository_cells.repository_row_id,
                                       #{sorting_data_type::SORTABLE_COLUMN_NAME} AS value")

app/views/my_modules/repositories/_full_view_modal.html.erb

@@ -0,0 +1,11 @@
+<div class="modal" id="my-module-repository-full-view-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
+      </div>
+      <div class="modal-body">
+      </div>
+    </div>
+  </div>
+</div>

app/views/my_modules/repositories/_full_view_table.html.erb

@@ -0,0 +1,29 @@
+<table id="my-module-repository-table-full-view-<%= @repository.id %>" class="table"
+  data-source="<%= my_module_my_module_repository_path(@my_module, @repository) %>"
+  data-default-order="<%= default_table_order_as_js_array %>"
+  data-default-table-columns="<%= default_table_columns %>"
+>
+  <thead>
+    <tr>
+      <th class="never"></th>
+      <th id="assigned"><%= t("repositories.table.assigned") %></th>
+      <th id="row-id"><%= t("repositories.table.id") %></th>
+      <th id="row-name"><%= t("repositories.table.row_name") %></th>
+      <th id="added-on"><%= t("repositories.table.added_on") %></th>
+      <th id="added-by"><%= t("repositories.table.added_by") %></th>
+      <% @repository.repository_columns.order(:id).each do |column| %>
+        <th
+          class="repository-column"
+          id="<%= column.id %>"
+          data-type="<%= column.data_type %>"
+          <% column.metadata.each do |k, v| %>
+            <%= "data-metadata-#{k}=#{v}" %>
+          <% end %>
+        >
+          <%= display_tooltip(column.name) %>
+        </th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody></tbody>
+</table>

app/views/my_modules/repositories/_repositories_list.html.erb

@@ -11,7 +11,8 @@
         <%= repository.name %>
       </span>
       <div class="action-buttons">
-        <i class="fas fa-expand full-screen"></i>
+        <i class="fas fa-expand full-screen"
+           data-table-url="<%= full_view_table_my_module_my_module_repository_path(@my_module, repository) %>"></i>
         <i class="fas fa-trash unassign-repository"></i>
       </div>
     </a>
@@ -41,4 +42,6 @@
   </table>
 </template>
 
+<%= render partial: "my_modules/repositories/full_view_modal" %>
+
 <%= javascript_include_tag("my_modules/repositories") %>

config/routes.rb

@@ -381,7 +381,11 @@ Rails.application.routes.draw do
                 path: '/comments',
                 only: [:index, :create, :edit, :update, :destroy]
 
-      resources :my_module_repositories, path: '/repositories', only: :show
+      resources :my_module_repositories, path: '/repositories', only: :show do
+        member do
+          get :full_view_table
+        end
+      end
 
       # resources :sample_my_modules, path: '/samples_index', only: [:index]
       resources :result_texts, only: [:new, :create]