Implement the assigned items datatable for shareable links [SCI-8751] (#5721)

Co-authored-by: Sboursen <dev.sboursen@gmail.com>

app/assets/javascripts/shareable_links/repositories.js

@@ -0,0 +1,166 @@
+/* eslint-disable no-param-reassign, no-use-before-define  */
+/* global initReminderDropdown */
+
+(function() {
+  var SIMPLE_TABLE;
+
+  function stockManagementColumns(withConsumption = true) {
+    let columns = [
+      {
+        visible: true,
+        searchable: false,
+        data: 'stock'
+      }
+    ];
+    if (withConsumption) {
+      columns = columns.concat([{
+        visible: true,
+        searchable: false,
+        data: 'consumedStock'
+      }]);
+    }
+    return columns;
+  }
+
+  function stockManagementColumnDefs(withConsumption = true) {
+    let columns = [
+      {
+        targets: 'row-stock',
+        className: 'item-stock',
+        sWidth: '1%',
+        render: function(data) {
+          return $.fn.dataTable.render.RepositoryStockValue(data);
+        }
+      }
+    ];
+    if (withConsumption) {
+      columns = columns.concat([{
+        targets: 'row-consumption',
+        className: 'item-consumed-stock',
+        sWidth: '1%',
+        render: function(data) {
+          if (!data.stock_present) {
+            return '<span class="empty-consumed-stock-render"> - </span>';
+          }
+          return `<span class="empty-consumed-stock-render">${data.value.consumed_stock_formatted}</span>`;
+        }
+      }]);
+    }
+
+    return columns;
+  }
+
+  function simpleTableColumns(tableContainer) {
+    let columns = [
+      {
+        visible: true,
+        searchable: false,
+        data: 0
+      }
+    ];
+
+    if ($(tableContainer).data('stock-management')) {
+      columns = columns.concat(stockManagementColumns());
+    }
+
+    return columns;
+  }
+
+  function simpleViewColumnDefs(tableContainer) {
+    let columnDefs = [{
+      targets: 0,
+      className: 'item-name',
+      render: function(data, type, row) {
+        var recordName = data;
+        if (row.hasActiveReminders) {
+          recordName = `<div class="dropdown row-reminders-dropdown"
+                          data-row-reminders-url="${row.rowRemindersUrl}" tabindex='-1'>
+                          <i class="sn-icon sn-icon-notifications dropdown-toggle row-reminders-icon"
+                             data-toggle="dropdown" id="rowReminders${row.DT_RowId}}"></i>
+                          <ul class="dropdown-menu" role="menu" aria-labelledby="rowReminders${row.DT_RowId}">
+                          </ul>
+                        </div>` + recordName;
+        }
+        return recordName;
+      }
+    }];
+
+    if ($(tableContainer).data('stock-management')) {
+      columnDefs = columnDefs.concat(stockManagementColumnDefs());
+    }
+
+    return columnDefs;
+  }
+
+  function renderSimpleTable(tableContainer) {
+    if (SIMPLE_TABLE) SIMPLE_TABLE.destroy();
+    SIMPLE_TABLE = $(tableContainer).DataTable({
+      dom: "Rt<'pagination-row'<'version-label'><'pagination-actions'p>>",
+      processing: true,
+      serverSide: true,
+      responsive: true,
+      pageLength: 5,
+      order: [[0, 'asc']],
+      sScrollY: '100%',
+      sScrollX: '100%',
+      sScrollXInner: '100%',
+      destroy: true,
+      ajax: {
+        url: $(tableContainer).data('source'),
+        contentType: 'application/json',
+        data: function(d) {
+          d.assigned = 'assigned_simple';
+          d.view_mode = true;
+          d.simple_view = true;
+          return JSON.stringify(d);
+        },
+        global: false,
+        type: 'POST'
+      },
+      columns: simpleTableColumns(tableContainer),
+      columnDefs: simpleViewColumnDefs(tableContainer),
+      drawCallback: function() {
+        var repositoryContainer = $(this).closest('.assigned-repository-container');
+        repositoryContainer.find('.table.dataTable').removeClass('hidden');
+        repositoryContainer.find('.dataTables_scrollBody').css('overflow', 'initial');
+        repositoryContainer.find('.version-label').text(tableContainer.data('version-label'));
+        SIMPLE_TABLE.columns.adjust();
+      },
+      createdRow: function(row, data) {
+        $(row).find('.item-name').attr('data-state', data.DT_RowAttr['data-state']);
+      },
+      fnInitComplete: function() {
+        initReminderDropdown(tableContainer);
+      }
+    });
+  }
+
+  function initSimpleTable() {
+    $('#assigned-items-container').on('shown.bs.collapse', '.assigned-repository-container', function() {
+      var repositoryContainer = $(this);
+      var repositoryTable = repositoryContainer.find('.table');
+      var initializedTable = repositoryContainer.find('.dataTables_wrapper table');
+
+      // do not try to re-initialized already initialized table
+      if (initializedTable.length) {
+        initializedTable.DataTable().columns.adjust();
+        return;
+      }
+
+      repositoryTable.attr('data-source', $(this).data('repository-url'));
+      repositoryTable.attr('data-version-label', $(this).data('footer-label'));
+      repositoryTable.attr('data-name-column-id', $(this).data('name-column-id'));
+      repositoryTable.attr('data-stock-management', $(this).data('data-stock-management'));
+      repositoryContainer.html(repositoryTable);
+      renderSimpleTable(repositoryTable);
+    });
+
+    $('#wrapper').on('sideBar::shown sideBar::hidden', function() {
+      if (SIMPLE_TABLE) {
+        SIMPLE_TABLE.columns.adjust();
+      }
+    });
+  }
+
+  initSimpleTable();
+}());

app/views/shareable_links/_repositories_list.html.erb

@@ -0,0 +1,41 @@
+<% assigned_repositories.each do |repository| %>
+  <div class="assigned-repository panel" data-repository-id="<%= repository.id %>">
+    <a class="assigned-repository-caret collapsed"
+       role="button"
+       data-toggle="collapse"
+       href="#assigned-repository-items-container-<%= repository.id %>"
+       data-parent="#assigned-items-container"
+    >
+      <i class="sn-icon sn-icon-right"></i>
+      <span class="assigned-repository-title" data-rows-count="<%= repository.assigned_rows_count %>">
+        <%= repository.name %>
+      </span>
+      <% if repository.is_a?(RepositorySnapshot) %>
+        <span class="snapshot-tag">
+          <%= t('my_modules.repository.snapshots.simple_view.snapshot_tag') %>
+        </span>
+      <% end %>
+    </a>
+    <div class="collapse assigned-repository-container"
+         id="assigned-repository-items-container-<%= repository.id %>"
+         data-repository-url="<%= assigned_repository_simple_view_index_path(@my_module, repository) %>"
+         data-footer-label="<%= assigned_repository_simple_view_footer_label(repository) %>"
+         data-name-column-id="<%=  assigned_repository_simple_view_name_column_id(repository) %>"
+    >
+      <table class="table hidden repository-table"
+             data-stock-management="<%= repository.has_stock_management? %>"
+             data-stock-consumption-editable="<%= can_update_my_module_stock_consumption?(@my_module) %>">
+        <thead>
+          <tr>
+            <th class="row-name"><%= t("repositories.table.row_name") %></th>
+            <% if repository.has_stock_management? %>
+              <th class="row-stock" data-columns-visible="false"><%= repository.repository_stock_column.name %></th>
+              <th class="row-consumption" data-columns-visible="false"><%= t("repositories.table.row_consumption") %></th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+  </div>
+<% end %>

app/views/shareable_links/my_module_protocol_show.html.erb

@@ -53,5 +53,24 @@
         </div>
       </div>
     </div>
+    <!-- Assigned items -->
+    <% assigned_repositories = @my_module.live_and_snapshot_repositories_list %>
+    <div class="task-section">
+      <div class="task-section-header">
+        <a class="task-section-caret" role="button" data-toggle="collapse" href="#assigned-items-container" aria-expanded="true" aria-controls="assigned-items-container">
+          <i class="sn-icon sn-icon-right"></i>
+          <span class="task-section-title ">
+            <h2 class="assigned-items-title" data-assigned-items-count="<%= assigned_repositories.map(&:assigned_rows_count).sum %>">
+              <%= t('my_modules.assigned_items.title') %>
+            </h2>
+          </span>
+        </a>
+      </div>
+      <div class="collapse in panel-group" id="assigned-items-container" aria-expanded="true"
+          data-repositories-list-url="<%= my_module_repositories_list_html_path(@my_module) %>">
+        <%= render partial: "shareable_links/repositories_list", locals: {assigned_repositories: assigned_repositories} %>
+      </div>
+    </div>
   </div>
 </div>
+<%= javascript_include_tag("shareable_links/repositories") %>

config/initializers/assets.rb

@@ -125,6 +125,7 @@ Rails.application.config.assets.precompile += %w(shared/file_preview.js)
 Rails.application.config.assets.precompile += %w(users/shared/linkedin_sign_in_links.js)
 Rails.application.config.assets.precompile += %w(reports/template_helpers.js)
 Rails.application.config.assets.precompile += %w(my_modules/shared/layout_overrides.css)
+Rails.application.config.assets.precompile += %w(shareable_links/repositories.js)
 
 # Libraries needed for Handsontable formulas
 Rails.application.config.assets.precompile += %w(jquery.js)