Finish full view repository

app/assets/javascripts/my_modules/repositories.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-/* global DataTableHelpers PerfectScrollbar */
+/* global DataTableHelpers PerfectScrollbar FilePreviewModal */
 
 var MyModuleRepositories = (function() {
   var SIMPLE_TABLE;
@@ -70,6 +70,7 @@ var MyModuleRepositories = (function() {
     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,
+      stateSave: true,
       serverSide: true,
       order: $(tableContainer).data('default-order'),
       pageLength: 25,
@@ -119,6 +120,7 @@ var MyModuleRepositories = (function() {
 
       drawCallback: function() {
         FULL_VIEW_TABLE.columns.adjust();
+        FilePreviewModal.init();
         if (FULL_VIEW_TABLE_SCROLLBAR) {
           FULL_VIEW_TABLE_SCROLLBAR.update();
         } else {
@@ -130,6 +132,12 @@ var MyModuleRepositories = (function() {
             }
           );
         }
+      },
+      stateLoadCallback: function(settings, callback) {
+        var loadStateUrl = $(tableContainer).data('load-state-url');
+        $.post(loadStateUrl, function(json) {
+          callback(json.state);
+        });
       }
     });
   }
@@ -147,6 +155,11 @@ var MyModuleRepositories = (function() {
   function initRepositoryFullView() {
     $('#assigned-items-container').on('click', '.action-buttons .full-screen', function(e) {
       var fullViewModal = $('#my-module-repository-full-view-modal');
+      var repositoryNameObject = $(this).closest('.assigned-repository-caret')
+        .find('.assigned-repository-title')
+        .clone();
+
+      fullViewModal.find('.repository-name').html(repositoryNameObject);
       fullViewModal.modal('show');
       $.get($(this).data('table-url'), (data) => {
         fullViewModal.find('.modal-body').html(data.html);

app/assets/stylesheets/my_modules/repositories.scss

@@ -1,6 +1,27 @@
 // scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
 // scss-lint:disable NestingDepth ImportantRule
 
+@mixin my-module-repository-title {
+  @include font-h3;
+  line-height: 22px;
+  overflow: hidden;
+  padding-right: 55px;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::after {
+    color: $color-alto;
+    content: attr(data-rows-count);
+    display: inline-block;
+    line-height: 22px;
+    padding-left: 5px;
+    position: absolute;
+    right: 0;
+    width: 55px;
+  }
+}
+
 .my-module-inventories {
 
   .main-actions {
@@ -89,10 +110,10 @@
       padding: 0 18px;
       text-decoration: none;
 
-      &:hover,
+      &.collapsed:hover,
-      &:active {
+      &.collapsed:active {
-        text-decoration: none;
         background: $color-concrete;
+        text-decoration: none;
       }
 
       &:not(.collapsed) .fa-caret-right {
@@ -105,23 +126,7 @@
       }
 
       .assigned-repository-title {
-        @include font-h3;
+        @include my-module-repository-title;
-        overflow: hidden;
-        padding-right: 55px;
-        position: relative;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &::after {
-          color: $color-alto;
-          content: attr(data-rows-count);
-          display: inline-block;
-          line-height: 22px;
-          padding-left: 5px;
-          position: absolute;
-          right: 0;
-          width: 55px;
-        }
       }
 
       .action-buttons {
@@ -177,22 +182,76 @@
       flex-direction: column;
       height: inherit;
 
+      .modal-header {
+        align-items: center;
+        display: flex;
+        height: 55px;
+        padding: 10px 24px;
+
+        .close {
+          flex-shrink: 0;
+        }
+
+        .header-container {
+          flex-grow: 1;
+
+          .assigned-repository-title {
+            @include my-module-repository-title;
+            @include font-h2;
+          }
+
+          .breadcrumbs {
+            @include font-small;
+            align-items: center;
+            color: $color-silver-chalice;
+            display: flex;
+            height: 20px;
+            width: 100%;
+
+            .my-module,
+            .project,
+            .experiment {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .slash {
+              flex-basis: 20px;
+              text-align: center;
+            }
+          }
+        }
+      }
+
       .modal-body {
         flex-grow: 1;
+        padding: 0;
       }
 
       .dataTables_wrapper {
-        height: calc(100% - 30px);
+        height: 100%;
         position: absolute;
-        width: calc(100% - 30px);
+        width: 100%;
 
         .dataTables_scroll {
-          height: calc(100% - 104px);
+          height: calc(100% - 146px);
+          padding: 0 24px;
 
           .dataTables_scrollBody {
             height: calc(100% - 44px);
           }
         }
+
+        .main-actions {
+          padding: 16px 24px 10px;
+        }
+
+        .pagination-row {
+          border-top: $border-default;
+          height: 84px;
+          padding: 0 24px;
+        }
       }
     }
   }

app/views/my_modules/protocols.html.erb

@@ -86,3 +86,4 @@
 
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag("my_modules/protocols") %>
+<%= javascript_pack_tag 'emoji_button' %>

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

@@ -2,6 +2,17 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
+        <div class="header-container">
+          <div class="breadcrumbs">
+            <span class="project" title="<%= @project.name %>"><%= @project.name %></span>
+            <span class="slash">/</span>
+            <span class="experiment" title="<%= @experiment.name %>"><%= @experiment.name %></span>
+            <span class="slash">/</span>
+            <span class="my-module" title="<%= @my_module.name %>"><%= @my_module.name %></span>
+          </div>
+          <div class="repository-name">
+          </div>
+        </div>
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
       </div>
       <div class="modal-body">

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

@@ -2,6 +2,7 @@
   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 %>"
+  data-load-state-url="<%= repository_load_table_state_path(@repository) %>"
 >
   <thead>
     <tr>