Add full view for my-module repository

2024-09-20 23:16:15 +08:00 · 2020-04-07 21:02:16 +02:00 · 2020-04-07 21:02:16 +02:00 · 087f71a82f
parent 9dfc652580
commit 087f71a82f
13 changed files with 329 additions and 65 deletions
--- a/app/assets/javascripts/my_modules/repositories.js
+++ b/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() {
-        var columns = $(tableContainer).data('default-table-columns');
-        for (let i = 0; i < columns.length; i += 1) {
-          columns[i].data = String(i);
-          columns[i].defaultContent = '';
+      columns: tableColumnPreparation(tableContainer),
+      columnDefs: [{
+        targets: 3,
+        render: function(data, type, row) {
+          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();
    }
  };
 }());
--- a/app/assets/javascripts/repositories/repository_datatable.js
+++ b/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) {
--- a/app/assets/javascripts/sitewide/datatable_helpers.js
+++ b/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();
+    }
+  };
+}());
--- a/app/assets/javascripts/sitewide/dropdown_selector.js
+++ b/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) {
--- a/app/assets/stylesheets/my_modules/repositories.scss
+++ b/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;
+        }
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/shared/datatable.scss
+++ b/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;
+        }
+      }
+    }
+  }
+}
--- a/app/controllers/my_module_repositories_controller.rb
+++ b/app/controllers/my_module_repositories_controller.rb
@ -1,8 +1,8 @@
 # frozen_string_literal: true

 class MyModuleRepositoriesController < ApplicationController
-  before_action :load_vars
-  before_action :check_view_permissions
+  before_action :load_vars, only: %i(show full_view_table)
+  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
--- a/app/helpers/repository_datatable_helper.rb
+++ b/app/helpers/repository_datatable_helper.rb
@ -23,18 +23,18 @@ module RepositoryDatatableHelper
      }

      unless options[:view_mode]
-        row.merge(
+        row.merge!(
          'recordEditUrl': Rails.application.routes.url_helpers
                                .edit_repository_repository_row_path(
                                  repository,
                                  record.id
                                ),
-'recordUpdateUrl': Rails.application.routes.url_helpers
-                        .repository_repository_row_path(
-                          repository,
-                          record.id
-                        ),
-'recordEditable': record.editable?
+          'recordUpdateUrl': Rails.application.routes.url_helpers
+                                  .repository_repository_row_path(
+                                    repository,
+                                    record.id
+                                  ),
+          'recordEditable': record.editable?
        )
      end

@ -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?
+    if record.assigned_my_modules_count.positive?
      tooltip = t('repositories.table.assigned_tooltip',
                  tasks: record.assigned_my_modules_count,
      experiments: record.assigned_experiments_count,
--- a/app/services/repository_datatable_service.rb
+++ b/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"')
-    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
+                      .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"')
    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 = RepositoryCell.joins(sorting_data_type::SORTABLE_VALUE_INCLUDE)
+      cells = if sorting_column.repository_checklist_value?
+                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(
@ -144,12 +142,12 @@ class RepositoryDatatableService
                                                ORDER BY #{sorting_data_type::SORTABLE_COLUMN_NAME}) AS value")
                              .group('repository_cells.repository_row_id')

-      else
-        cells = RepositoryCell.joins(sorting_data_type::SORTABLE_VALUE_INCLUDE)
+              else
+                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")
-      end
+              end

      records.joins("LEFT OUTER JOIN (#{cells.to_sql}) AS values ON values.repository_row_id = repository_rows.id")
             .group('values.value')
--- a/app/views/my_modules/repositories/_full_view_modal.html.erb
+++ b/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>
--- a/app/views/my_modules/repositories/_full_view_table.html.erb
+++ b/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>
--- a/app/views/my_modules/repositories/_repositories_list.html.erb
+++ b/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") %>
--- a/config/routes.rb
+++ b/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]