Merge pull request #2665 from aignatov-bio/ai-sci-4690-archiving-inventories-items-switching-between-view

Switching between the active and archived view in inventory [SCI-4690]

app/assets/javascripts/repositories/my_module_repository.js

@@ -1,13 +0,0 @@
-(function() {
-  'use strict';
-
-  function initTable() {
-    RepositoryDatatable.destroy()
-    RepositoryDatatable.init($('#content').attr('data-repo-id'));
-    RepositoryDatatable.redrawTableOnSidebarToggle();
-    onClickToggleAssignedRecords();
-  }
-
-  // initialze repository datatable
-  initTable();
-}());

app/assets/javascripts/repositories/repository_datatable.js

@@ -65,8 +65,8 @@ var RepositoryDatatable = (function(global) {
         $('#copyRepositoryRecords').prop('disabled', true);
         $('#editRepositoryRecord').prop('disabled', true);
         $('#archiveRepositoryRecordsButton').prop('disabled', true);
-        $('#assignRepositoryRecords').prop('disabled', true);
-        $('#unassignRepositoryRecords').prop('disabled', true);
+        $('#restoreRepositoryRecords').prop('disabled', true);
+        $('#deleteRepositoryRecords').prop('disabled', true);
         $('#editDeleteCopy').hide();
       } else {
         if (rowsSelected.length === 1) {
@@ -77,8 +77,8 @@ var RepositoryDatatable = (function(global) {
         $('#exportRepositoriesButton').removeClass('disabled');
         $('#archiveRepositoryRecordsButton').prop('disabled', false);
         $('#copyRepositoryRecords').prop('disabled', false);
-        $('#assignRepositoryRecords').prop('disabled', false);
-        $('#unassignRepositoryRecords').prop('disabled', false);
+        $('#restoreRepositoryRecords').prop('disabled', false);
+        $('#deleteRepositoryRecords').prop('disabled', false);
 
         if (rowsSelected.some(r=> rowsLocked.indexOf(r) >= 0)) { // Some selected rows is rowsLocked
           $('#editRepositoryRecord').prop('disabled', true);
@@ -437,6 +437,7 @@ var RepositoryDatatable = (function(global) {
         url: $(TABLE_ID).data('source'),
         data: function(d) {
           d.assigned = viewAssigned;
+          d.archived = $('.repository-show').hasClass('archived');
         },
         global: false,
         type: 'POST'
@@ -467,7 +468,7 @@ var RepositoryDatatable = (function(global) {
           if (!row.recordEditable) {
             icon = `<i class="repository-row-lock-icon fas fa-lock" title="${I18n.t('repositories.table.locked_item')}"></i>`;
           } else if (EDITABLE) {
-            icon = '<i class="repository-row-edit-icon fas fa-pencil-alt"></i>';
+            icon = '<i class="repository-row-edit-icon fas fa-pencil-alt" data-view-mode="active"></i>';
           } else {
             icon = '';
           }
@@ -538,6 +539,7 @@ var RepositoryDatatable = (function(global) {
         // Show number of selected rows near pages info
         $('#repository-table_info').append('<span id="selected_info"></span>');
         $('#selected_info').html(' (' + rowsSelected.length + ' entries selected)');
+        checkArchivedColumnsState();
       },
       preDrawCallback: function() {
         animateSpinner(this);
@@ -551,8 +553,9 @@ var RepositoryDatatable = (function(global) {
           dataType: 'json',
           type: 'POST',
           success: function(json) {
-            json.state.columns[6].visible = false; // Here must be switcher depend on active/archive view
-            json.state.columns[7].visible = false;
+            var archived = $('.repository-show').hasClass('archived');
+            if (json.state.columns[6]) json.state.columns[6].visible = archived;
+            if (json.state.columns[7]) json.state.columns[7].visible = archived;
             callback(json.state);
           }
         });
@@ -638,53 +641,6 @@ var RepositoryDatatable = (function(global) {
     return TABLE;
   }
 
-  global.onClickAddRecord = function() {
-    checkAvailableColumns();
-    RepositoryDatatableRowEditor.addNewRow(TABLE);
-    changeToEditMode();
-  };
-
-  global.onClickToggleAssignedRecords = function() {
-    $('.repository-assign-group > .btn').click(function() {
-      $('.btn-group > .btn').removeClass('active');
-      $(this).addClass('active');
-    });
-
-    $('#assigned-repo-records').on('click', function() {
-      viewAssigned = 'assigned';
-      return new Promise(function(resolve) {
-        resolve(TABLE.ajax.reload());
-      });
-    });
-    $('#all-repo-records').on('click', function() {
-      viewAssigned = 'all';
-      return new Promise(function(resolve) {
-        resolve(TABLE.ajax.reload());
-      });
-    });
-  };
-
-  global.hideAssignUnasignModal = function(id) {
-    $(id).modal('hide').promise().done(
-      function() {
-        $(id).remove();
-      }
-    );
-  };
-
-  global.openUnassignRecordsModal = function() {
-    $.post(
-      $('#unassignRepositoryRecords').data('unassign-url'),
-      { selected_rows: rowsSelected }
-    ).done(
-      function(data) {
-        $(data.html).appendTo('body').promise().done(function() {
-          $('#unassignRepositoryRecordModal').modal('show');
-        });
-      }
-    );
-  };
-
   global.onClickDeleteRecord = function() {
     animateSpinner();
     $.ajax({
@@ -705,105 +661,105 @@ var RepositoryDatatable = (function(global) {
         }
       }
     });
-  }
+  };
 
-  global.onClickCopyRepositoryRecords = function() {
-    animateSpinner();
-    $.ajax({
-      url: $('table' + TABLE_ID).data('copy-records'),
-      type: 'POST',
-      dataType: 'json',
-      data: { selected_rows: rowsSelected },
-      success: function(data) {
-        HelperModule.flashAlertMsg(data.flash, 'success');
-        rowsSelected = [];
-        resetTableView();
-      },
-      error: function(ev) {
-        if (ev.status === 403) {
-          HelperModule.flashAlertMsg(
-            I18n.t('repositories.js.permission_error'), ev.responseJSON.style
-          );
+  $('.repository-show')
+    .on('click', '#addRepositoryRecord', function() {
+      checkAvailableColumns();
+      RepositoryDatatableRowEditor.addNewRow(TABLE);
+      changeToEditMode();
+    })
+    .on('click', '#copyRepositoryRecords', function() {
+      animateSpinner();
+      $.ajax({
+        url: $('table' + TABLE_ID).data('copy-records'),
+        type: 'POST',
+        dataType: 'json',
+        data: { selected_rows: rowsSelected },
+        success: function(data) {
+          HelperModule.flashAlertMsg(data.flash, 'success');
+          rowsSelected = [];
+          resetTableView();
+        },
+        error: function(ev) {
+          if (ev.status === 403) {
+            HelperModule.flashAlertMsg(
+              I18n.t('repositories.js.permission_error'), ev.responseJSON.style
+            );
+          }
         }
-      }
-    });
-  };
-
-  global.onClickArchiveRepositoryRecords = function() {
-    animateSpinner();
-    $.ajax({
-      url: $('table' + TABLE_ID).data('archive-records'),
-      type: 'POST',
-      dataType: 'json',
-      data: { selected_rows: rowsSelected },
-      success: function(data) {
-        HelperModule.flashAlertMsg(data.flash, 'success');
-        rowsSelected = [];
-        resetTableView();
-      },
-      error: function(ev) {
-        if (ev.status === 403) {
-          HelperModule.flashAlertMsg(
-            I18n.t('repositories.js.permission_error'), ev.responseJSON.style
-          );
-        } else if (ev.status === 422) {
-          HelperModule.flashAlertMsg(
-            ev.responseJSON.error, 'danger'
-          );
-          animateSpinner(null, false);
+      });
+    })
+    .on('click', '#archiveRepositoryRecordsButton', function() {
+      animateSpinner();
+      $.ajax({
+        url: $('table' + TABLE_ID).data('archive-records'),
+        type: 'POST',
+        dataType: 'json',
+        data: { selected_rows: rowsSelected },
+        success: function(data) {
+          HelperModule.flashAlertMsg(data.flash, 'success');
+          rowsSelected = [];
+          resetTableView();
+        },
+        error: function(ev) {
+          if (ev.status === 403) {
+            HelperModule.flashAlertMsg(
+              I18n.t('repositories.js.permission_error'), ev.responseJSON.style
+            );
+          } else if (ev.status === 422) {
+            HelperModule.flashAlertMsg(
+              ev.responseJSON.error, 'danger'
+            );
+            animateSpinner(null, false);
+          }
         }
-      }
-    });
-  };
-
-  global.onClickRestoreRepositoryRecords = function() {
-    animateSpinner();
-    $.ajax({
-      url: $('table' + TABLE_ID).data('restore-records'),
-      type: 'POST',
-      dataType: 'json',
-      data: { selected_rows: rowsSelected },
-      success: function(data) {
-        HelperModule.flashAlertMsg(data.flash, 'success');
-        rowsSelected = [];
-        resetTableView();
-      },
-      error: function(ev) {
-        if (ev.status === 403) {
-          HelperModule.flashAlertMsg(
-            I18n.t('repositories.js.permission_error'), ev.responseJSON.style
-          );
-        } else if (ev.status === 422) {
-          HelperModule.flashAlertMsg(
-            ev.responseJSON.error, 'danger'
-          );
-          animateSpinner(null, false);
+      });
+    })
+    .on('click', '#restoreRepositoryRecords', function() {
+      animateSpinner();
+      $.ajax({
+        url: $('table' + TABLE_ID).data('restore-records'),
+        type: 'POST',
+        dataType: 'json',
+        data: { selected_rows: rowsSelected },
+        success: function(data) {
+          HelperModule.flashAlertMsg(data.flash, 'success');
+          rowsSelected = [];
+          resetTableView();
+        },
+        error: function(ev) {
+          if (ev.status === 403) {
+            HelperModule.flashAlertMsg(
+              I18n.t('repositories.js.permission_error'), ev.responseJSON.style
+            );
+          } else if (ev.status === 422) {
+            HelperModule.flashAlertMsg(
+              ev.responseJSON.error, 'danger'
+            );
+            animateSpinner(null, false);
+          }
         }
+      });
+    })
+    .on('click', '#editRepositoryRecord', function() {
+      checkAvailableColumns();
+
+      if (rowsSelected.length !== 1) {
+        return;
       }
+
+      let row = TABLE.row('#' + rowsSelected[0]);
+
+      $(TABLE_ID).find('.repository-row-edit-icon').remove();
+
+      RepositoryDatatableRowEditor.switchRowToEditMode(row);
+      changeToEditMode();
+      adjustTableHeader();
+    })
+    .on('click', '#deleteRepositoryRecords', function() {
+      $('#deleteRepositoryRecord').modal('show');
     });
-  };
-
-  // Edit record
-  global.onClickEdit = function() {
-    checkAvailableColumns();
-
-    if (rowsSelected.length !== 1) {
-      return;
-    }
-
-    let row = TABLE.row('#' + rowsSelected[0]);
-
-    $(TABLE_ID).find('.repository-row-edit-icon').remove();
-
-    RepositoryDatatableRowEditor.switchRowToEditMode(row);
-    changeToEditMode();
-    adjustTableHeader();
-  };
-
-  // Delete record
-  global.onClickDelete = function() {
-    $('#deleteRepositoryRecord').modal('show');
-  };
 
   // Handle enter key
   $(document).off('keypress').keypress(function(event) {
@@ -869,9 +825,19 @@ var RepositoryDatatable = (function(global) {
     });
   }
 
+  function checkArchivedColumnsState() {
+    var archived = $('.repository-show').hasClass('archived');
+    TABLE.column(6).visible(archived);
+    TABLE.column(7).visible(archived);
+  }
+
   return Object.freeze({
     init: init,
     destroy: destroy,
+    reload: function() {
+      TABLE.ajax.reload();
+      clearRowSelection();
+    },
     redrawTableOnSidebarToggle: redrawTableOnSidebarToggle,
     checkAvailableColumns: checkAvailableColumns
   });

app/assets/javascripts/repositories/show.js

@@ -1,7 +1,7 @@
 //= require repositories/import/records_importer.js
 
 /*
-  global animateSpinner repositoryRecordsImporter
+  global animateSpinner repositoryRecordsImporter I18n
   RepositoryDatatable PerfectScrollbar HelperModule
 */
 
@@ -147,6 +147,25 @@
     });
   }
 
+  function initRepositoryViewSwitcher() {
+    var viewSwitch = $('.view-switch');
+    viewSwitch.on('click', '.view-switch-archived', function() {
+      $('.repository-show').toggleClass('archived active');
+      RepositoryDatatable.reload();
+    });
+    viewSwitch.on('click', '.view-switch-active', function() {
+      $('.repository-show').toggleClass('archived active');
+      RepositoryDatatable.reload();
+    });
+  }
+
+  $('.repository-title-name .inline-editing-container').on('inlineEditing::updated', function(e, value, viewValue) {
+    $('.repository-archived-title-name')
+      .text(I18n.t('repositories.show.archived_inventory', { repository_name: viewValue }));
+    $('#toolbarButtonsDatatable .archived-label')
+      .text(I18n.t('repositories.show.archived_view_label.active', { repository_name: viewValue }));
+  });
+
   $('#shareRepoBtn').on('ajax:success', function() {
     initShareModal();
   });
@@ -154,4 +173,5 @@
   $('.create-new-repository').initializeModal('#create-repo-modal');
   initImportRecordsModal();
   initTable();
+  initRepositoryViewSwitcher();
 }(window));

app/assets/javascripts/shared/inline_editing.js

@@ -94,6 +94,8 @@ var inlineEditing = (function() {
           .attr('value', inputField(container).val());
         appendAfterLabel(container);
 
+        container.trigger('inlineEditing::updated', [inputField(container).val(), viewData])
+
         if (SIDEBAR_ITEM_TYPES.includes(paramsGroup)) {
           updateSideBarNav(paramsGroup, itemId, viewData);
         }

app/assets/stylesheets/repositories.scss

@@ -8,23 +8,35 @@
 }
 
 .repository-show {
-  height: calc(100vh - 66px);
+  height: calc(100vh - var(--navbar-height));
   left: var(--repository-sidebar-margin);
   margin: 0;
-  padding: 0 32px;
+  padding: 0 2em;
   position: absolute;
-  top: 51px;
+  top: var(--navbar-height);
   transition: .4s $timing-function-sharp;
   width: calc(100vw - var(--repository-sidebar-margin));
 
+  &.active {
+    [data-view-mode="archived"] {
+      display: none !important;
+    }
+  }
+
+  &.archived {
+    [data-view-mode="active"] {
+      display: none !important;
+    }
+  }
+
 
   #repository-toolbar {
     align-items: center;
     background-color: $color-white;
+    border: 0;
     display: flex;
-    height: 75px;
     left: var(--repository-sidebar-margin);
-    padding: 35px 32px 20px;
+    padding: 0 2em;
     position: fixed;
     transition: .4s $timing-function-sharp;
     width: calc(100% - var(--repository-sidebar-margin));
@@ -34,7 +46,7 @@
       border-bottom: $border-tertiary;
       bottom: 0;
       position: absolute;
-      width: calc(100% - 64px);
+      width: calc(100% - 4em);
     }
 
     .repository-share-icon {
@@ -47,10 +59,10 @@
     }
 
     .repository-title-name {
+      @include font-h2;
       display: flex;
       flex-direction: column;
       flex-grow: 1;
-      font-size: 18px;
       line-height: 32px;
       margin-right: 20px;
       overflow: hidden;
@@ -79,6 +91,14 @@
       }
     }
 
+    .repository-archived-title-name {
+      @include font-h2;
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .repository-subtitle {
       color: $color-silver-chalice;
       font-size: 12px;
@@ -92,6 +112,10 @@
       .manage-repo-column-index {
         margin-left: 4px;
       }
+
+      .view-switch {
+        margin-left: 4px;
+      }
     }
   }
 
@@ -100,17 +124,19 @@
     background-color: $color-white;
     display: flex;
     flex-grow: 1;
-    height: 68px;
+    flex-wrap: nowrap;
+    height: 5em;
     left: var(--repository-sidebar-margin);
-    padding: 0 32px;
+    overflow: hidden;
+    padding: 0 2em;
     position: fixed;
-    top: 126px;
+    top: calc(5em + var(--navbar-height));
     transition: .4s $timing-function-sharp;
     width: calc(100% - var(--repository-sidebar-margin));
     z-index: 90;
 
     .filter-container {
-      flex-grow: 1;
+      flex-shrink: 0;
 
       .toolbar-filter-buttons {
         float: right;
@@ -120,16 +146,44 @@
     .repository-provisioning-notice {
       color: $brand-info;
     }
+
+    #editDeleteCopy {
+      flex-shrink: 0;
+    }
+
+    .archived-label {
+      color: $color-silver-chalice;
+      display: inline-block;
+      margin: 0 auto;
+      max-width: 400px;
+      padding: 0 1em;
+
+      table {
+        tr {
+          td {
+            padding: 0 .5em;
+
+            &:nth-child(1) {
+              text-align: right;
+            }
+
+            &:nth-child(2) {
+              color: $color-black;
+            }
+          }
+        }
+      }
+    }
   }
 
   .dataTables_scroll {
-    padding-bottom: 68px;
-    padding-top: 123px;
+    padding-bottom: 5em;
+    padding-top: 10em;
 
     .dataTables_scrollHead {
       position: -webkit-sticky !important;
       position: sticky !important;
-      top: 194px;
+      top: calc(10em + var(--navbar-height));
       z-index: 90;
 
       .table.dataTable {
@@ -154,9 +208,9 @@
     background-color: $color-white;
     bottom: 0;
     display: flex;
-    height: 68px;
+    height: 5em;
     left: var(--repository-sidebar-margin);
-    padding: 0 142px 0 32px;
+    padding: 0 10em 0 2em;
     position: fixed;
     transition: .4s $timing-function-sharp;
     width: calc(100% - var(--repository-sidebar-margin));
@@ -355,6 +409,9 @@
 }
 
 #toolbarButtonsDatatable {
+  align-items: center;
+  display: flex;
+
   .view-only-label {
     opacity: .6;
   }

app/assets/stylesheets/repository/repository_table.scss

@@ -4,8 +4,6 @@
 @import "constants";
 
 .repository-table {
-  margin-top: 20px;
-
   .dataTables_filter {
     float: right;
   }
@@ -211,42 +209,45 @@
   }
 
   // Actions
+  .dataTable {
+    tbody {
+      tr:hover {
+        background-color: $color-concrete;
 
-  tbody {
-    tr:hover {
-      background-color: $color-concrete;
-
-      .assigned-column {
-        .repository-row-edit-icon {
-          display: inline-block;
+        .assigned-column {
+          .repository-row-edit-icon {
+            display: inline-block;
+          }
         }
       }
-    }
 
-    .editing {
-      border: 1px solid;
+      .editing {
+        border: 1px solid;
+      }
     }
   }
 
   &.editing {
-    tbody {
-      tr.blocked {
-        opacity: .4;
-        pointer-events: none;
-      }
+    .dataTable {
+      tbody {
+        tr.blocked {
+          opacity: .4;
+          pointer-events: none;
+        }
 
-      tr:hover {
-        .assigned-column {
-          .repository-row-edit-icon {
-            display: none;
-          }
+        tr:hover {
+          .assigned-column {
+            .repository-row-edit-icon {
+              display: none;
+            }
 
-          .assign-counter-container {
-            background-color: transparent;
-          }
+            .assign-counter-container {
+              background-color: transparent;
+            }
 
-          .circle-icon {
-            margin-left: 30px;
+            .circle-icon {
+              margin-left: 30px;
+            }
           }
         }
       }

app/assets/stylesheets/shared/datatable.scss

@@ -4,6 +4,7 @@
 .dataTables_wrapper {
 
   .main-actions {
+    align-items: center;
     display: flex;
     flex-wrap: wrap;
     padding: 1em 0;

app/assets/stylesheets/themes/main_navigation.scss

@@ -1,6 +1,10 @@
 @import 'constants';
 @import "mixins";
 
+:root {
+  --navbar-height: 51px;
+}
+
 #main-nav {
   box-shadow: $flyout-shadow;
   margin-bottom: 0;

app/controllers/repositories_controller.rb

@@ -351,7 +351,7 @@ class RepositoriesController < ApplicationController
 
   def load_repositories
     @repositories = Repository.accessible_by_teams(current_team).order('repositories.created_at ASC')
-    @repositories = @repositories.archived if params[:archived]
+    @repositories = @repositories.archived if params[:archived] || @repository&.archived?
   end
 
   def set_inline_name_editing

app/controllers/repository_rows_controller.rb

@@ -21,7 +21,7 @@ class RepositoryRowsController < ApplicationController
     @all_rows_count = datatable_service.all_count
     @columns_mappings = datatable_service.mappings
     @repository_rows = datatable_service.repository_rows
-                                        .active
+                                        .where(archived: (params[:archived] || false))
                                         .preload(:repository_columns,
                                                  :created_by,
                                                  repository_cells: @repository.cell_preload_includes)

app/models/repository.rb

@@ -4,6 +4,7 @@ class Repository < RepositoryBase
   include SearchableModel
   include SearchableByNameModel
   include RepositoryImportParser
+  include ArchivableModel
 
   enum permission_level: Extends::SHARED_INVENTORIES_PERMISSION_LEVELS
 

app/views/my_modules/repository.html.erb

@@ -29,13 +29,13 @@
     <% if module_page? && can_assign_repository_rows_to_module?(@my_module) %>
       <button type="button" class="btn btn-default"
         data-assign-url-modal="<%= assign_repository_records_modal_my_module_path(@my_module, @repository) %>"
-        id="assignRepositoryRecords" onclick="openAssignRecordsModal()" disabled>
+        id="assignRepositoryRecords" disabled>
         <span class="fas fa-check-circle"></span>
         <span class="hidden-xs-custom"><%= t'repositories.assign_records_to_module' %></span>
       </button>
       <button type="button" class="btn btn-default"
         data-unassign-url="<%= unassign_repository_records_modal_my_module_path(@my_module, @repository)%>"
-        id="unassignRepositoryRecords" onclick="openUnassignRecordsModal()" disabled>
+        id="unassignRepositoryRecords" disabled>
         <span class="fas fa-ban"></span>
         <span class="hidden-xs-custom"><%= t'repositories.unassign_records_from_module' %></span>
       </button>

app/views/repositories/_sidebar.html.erb

@@ -1,6 +1,6 @@
  <%= content_for :sidebar do %>
   <div id="slide-panel" class="visible" data-sidebar-url="<%= sidebar_repositories_path %>">
-    <%= render partial: "sidebar_list", locals: { repositories: repositories, archived: false} %>
+    <%= render partial: "sidebar_list", locals: { repositories: repositories, archived: archived} %>
   </div>
 <% end %>
 

app/views/repositories/_toolbar_buttons.html.erb

@@ -1,4 +1,5 @@
 <div id="toolbarButtonsDatatable">
+<% if @repository.active? %>
   <% if @repository.repository_snapshots.provisioning.any? %>
     <div class='repository-provisioning-notice'>
       <i class="fas fa-info-circle"></i>
@@ -7,7 +8,7 @@
   <% end %>
 
   <% if can_create_repository_rows?(@repository) %>
-    <button type="button" class="btn btn-primary editAdd" id="addRepositoryRecord" onclick="onClickAddRecord()">
+    <button type="button" class="btn btn-primary editAdd" id="addRepositoryRecord" data-view-mode="active">
       <span class="fas fa-plus"></span>
       <span class="hidden-xs"><%= t("repositories.add_new_record") %></span>
     </button>
@@ -16,7 +17,7 @@
   <% if can_manage_repository_rows?(@repository) %>
     <span id="editDeleteCopy" data-toggle="buttons" style="display:none">
       <%if can_update_repository_rows?(@repository) %>
-        <button type="button" class="btn btn-light editAdd" id="editRepositoryRecord" onclick="onClickEdit()" disabled>
+        <button type="button" class="btn btn-light editAdd" id="editRepositoryRecord" disabled data-view-mode="active">
           <span class="fas fa-pencil-alt"></span>
           <span class="hidden-xs-custom"><%= t("repositories.edit_record") %></span>
         </button>
@@ -24,7 +25,7 @@
 
 
       <% if can_create_repository_rows?(@repository) %>
-        <button type="button" class="btn btn-light copyRow" id="copyRepositoryRecords" onclick="onClickCopyRepositoryRecords()" disabled>
+        <button type="button" class="btn btn-light copyRow" id="copyRepositoryRecords" disabled data-view-mode="active">
           <span class="fas fa-copy"></span>
           <span class="hidden-xs-custom"><%= t("repositories.copy_record") %></span>
         </button>
@@ -32,21 +33,29 @@
 
       <% if can_delete_repository_rows?(@repository) %>
         <button type="button" class="btn btn-light"
-          id="archiveRepositoryRecordsButton" onclick="onClickArchiveRepositoryRecords()" disabled>
+          id="archiveRepositoryRecordsButton"  disabled data-view-mode="active">
           <span class="fas fa-archive"></span>
           <span class="hidden-xs-custom"><%= t'repositories.archive_record' %></span>
-          <%= submit_tag I18n.t('repositories.delete_record'), :class => "hidden delete_repository_records_submit" %>
         </button>
       <% end %>
-
+        <button type="button" class="btn btn-light" id="restoreRepositoryRecords" disabled  data-view-mode="archived">
+          <span class="fas fa-undo"></span>
+          <span class="hidden-xs"><%= t("repositories.restore_record") %></span>
+        </button>
+      <% if can_delete_repository_rows?(@repository) %>
+        <button type="button" class="btn btn-light" id="deleteRepositoryRecords" disabled  data-view-mode="archived">
+          <span class="fas fa-trash"></span>
+          <span class="hidden-xs"><%= t("repositories.delete_record") %></span>
+        </button>
+      <% end %>
     </span>
 
     <span id="saveCancel" data-toggle="buttons" style="display:none">
-      <button type="button" class="btn btn-success" id="saveRecord">
+      <button type="button" class="btn btn-success" id="saveRecord" data-view-mode="active">
         <span class="fas fa-save"></span>
         <%= t("repositories.save_record") %>
       </button>
-      <button type="button" class="btn btn-light" id="cancelSave">
+      <button type="button" class="btn btn-light" id="cancelSave" data-view-mode="active">
         <span class="fas fa-times-circle"></span>
         <%= t("repositories.cancel_save") %>
       </button>
@@ -54,4 +63,21 @@
   <% elsif @repository.shared_with?(current_team) %>
     <p class="view-only-label"><%= t('repositories.index.view_only_permission_label') %></p>
   <% end %>
+<% end %>
+  <div class="archived-label" data-view-mode="archived">
+    <% if @repository.active? %>
+      <%= t('repositories.show.archived_view_label.active', repository_name: @repository.name) %>
+    <% else %>
+      <table>
+        <tr>
+          <td><%= t('repositories.show.archived_view_label.archived_on') %></td>
+          <td><%= I18n.l(@repository.archived_on, format: :full) %></td>
+        </tr>
+        <tr>
+          <td><%= t('repositories.show.archived_view_label.archived_by') %></td>
+          <td><%= @repository.archived_by.full_name %></td>
+        </tr>
+      </table>
+    <% end %>
+  </div>
 </div>

app/views/repositories/index.html.erb

@@ -2,12 +2,12 @@
 <% provide(:container_class, "no-second-nav-container") %>
 
 <% if current_team %>
-  <%= render partial: "sidebar", locals: { repositories: @repositories } %>
+  <%= render partial: "sidebar", locals: { repositories: @repositories, archived: false } %>
   <div class="content-pane flexible active repositories-index">
     <div class="content-header">
       <h1 data-view-mode="active"><%= t('libraries.index.head_title') %></h1>
       <h1 data-view-mode="archived"><%= t('libraries.index.head_title_archived') %></h1>
-      <%= render layout: "shared/view_switch" do %>
+      <%= render layout: "shared/view_switch", locals: {disabled: false} do %>
         <li class="view-switch-archived" data-view-mode="active">
           <i class="fas fa-archive button-icon"></i>
           <%= t('libraries.index.switch_view.archived') %>

app/views/repositories/show.html.erb

@@ -6,35 +6,40 @@
 <%= stylesheet_link_tag 'datatables' %>
 <% provide(:container_class, "no-second-nav-container") %>
 
-<%= render partial: "sidebar", locals: { repositories: @repositories } %>
+<%= render partial: "sidebar", locals: { repositories: @repositories, archived: @repository.archived? } %>
 <div id="alert-container"></div>
 
-<div class="content-pane repository-show" data-table-url="<%= load_table_repository_path(@repository) %>">
-  <div id="repository-toolbar">
-    <div class="repository-title-name">
-      <h2 class="name-container">
-        <% if @inline_editable_title_config.present? %>
-          <%= render partial: "shared/inline_editing",
-                     locals: {
-                        initial_value: @repository.name,
-                        config: @inline_editable_title_config
-                     } %>
-        <% else %>
-          <div class="read-only-name">
-            <%= @repository.name %>
-          </div>
-          <span class="repository-share-icon">
-            <%= inventory_shared_status_icon(@repository, current_team) %>
-          </span>
+<div class="content-pane repository-show <%=  @repository.active? ? "active" : "archived" %>" data-table-url="<%= load_table_repository_path(@repository) %>">
+  <div id="repository-toolbar" class="content-header">
+    <% if @repository.active? %>
+      <div class="repository-title-name" data-view-mode="active">
+        <h2 class="name-container">
+          <% if @inline_editable_title_config.present? %>
+            <%= render partial: "shared/inline_editing",
+                       locals: {
+                          initial_value: @repository.name,
+                          config: @inline_editable_title_config
+                       } %>
+          <% else %>
+            <div class="read-only-name">
+              <%= @repository.name %>
+            </div>
+            <span class="repository-share-icon">
+              <%= inventory_shared_status_icon(@repository, current_team) %>
+            </span>
+          <% end %>
+        </h2>
+        <% if @repository.shared_with_anybody? %>
+          <% team_name = @repository.team == current_team ? t('repositories.show.your_team') : @repository.team.name %>
+          <div class="repository-subtitle"><%= t('repositories.show.subtitle', team_name: team_name) %></div>
         <% end %>
-      </h2>
-      <% if @repository.shared_with_anybody? %>
-        <% team_name = @repository.team == current_team ? 'your Team' : @repository.team.name %>
-        <div class="repository-subtitle"><%= t('repositories.subtitle', team_name: team_name) %></div>
-      <% end %>
+      </div>
+    <% end %>
+    <div class="repository-archived-title-name" data-view-mode="archived">
+      <%= t('repositories.show.archived_inventory', repository_name: @repository.name) %>
     </div>
     <div class="repo-datatables-buttons">
-      <div class="share-repository-button">
+      <div class="share-repository-button" data-view-mode="active">
         <% if can_share_repository?(@repository) && current_user.teams.count > 1 %>
           <%= link_to team_repository_share_modal_path(current_team, repository_id: @repository),
                       class: 'btn btn-secondary share-repo-option', remote: true, id: 'shareRepoBtn' do %>
@@ -66,21 +71,21 @@
         <% if can_perform_repository_actions(@repository) %>
           <ul class="dropdown-menu pull-right">
             <% if can_create_repository_rows?(@repository) %>
-              <li>
+              <li data-view-mode="active">
                 <a href="#" id="importRecordsButton" data-turbolinks="false">
                   <%= t('repositories.index.options_dropdown.import_items') %>
                 </a>
-              <li>
+              </li>
             <% end %>
             <% if can_read_repository?(@repository) %>
-              <li>
+              <li >
                 <a href="#"  id="exportRepositoriesButton" data-turbolinks="false">
                   <%= t("repositories.index.options_dropdown.export_items") %>
                 </a>
               </li>
             <% end %>
             <% if can_create_repositories?(current_team) && !@repository.shared_with?(current_team) %>
-              <li>
+              <li data-view-mode="active">
                 <%= link_to t('repositories.index.options_dropdown.copy'),
                             team_repository_copy_modal_path(current_team, repository_id: @repository),
                             class: "copy-repo-option",
@@ -88,8 +93,8 @@
               </li>
             <% end %>
             <% if can_manage_repository?(@repository) %>
-              <li data-hook="destroy-repository-option" role="separator" class="divider"></li>
-              <li data-hook="destroy-repository-option">
+              <li  data-view-mode="active" data-hook="destroy-repository-option" role="separator" class="divider"></li>
+              <li  data-view-mode="active" data-hook="destroy-repository-option">
                 <%= link_to t('repositories.index.options_dropdown.delete'),
                             team_repository_destroy_modal_path(current_team, repository_id: @repository),
                             class: "delete-repo-option",
@@ -99,6 +104,16 @@
           </ul>
         <% end %>
       </div>
+        <%= render layout: "shared/view_switch", locals: {disabled: @repository.archived?} do %>
+          <li class="view-switch-archived" data-view-mode="active">
+            <i class="fas fa-archive button-icon"></i>
+            <%= t('repositories.show.show_archived_items') %>
+          </li>
+          <li class="view-switch-active" data-view-mode="archived">
+            <i class="fas fa-rocket button-icon"></i>
+            <%= t('repositories.show.show_active_items') %>
+          </li>
+        <% end %>
     </div>
 
     <div class="toolbar-delimiter"></div>

app/views/shared/_view_switch.html.erb

@@ -1,5 +1,5 @@
-<div class="dropdown view-switch">
-  <a href="#" class="btn btn-light view-switch-button" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+<div class="dropdown view-switch" >
+  <a href="#" class="btn btn-light view-switch-button <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
     <span><%= t('general.view') %></span>
     <span class="caret pull-right"></span>
   </a>

config/locales/en.yml

@@ -1060,7 +1060,6 @@ en:
       success_flash: "Table result successfully deleted."
 
   repositories:
-    subtitle: "Owned by %{team_name}"
     repository: "Inventory: %{name}"
     icon_title:
       i_shared: "Shared inventory (owned by your Team)"
@@ -1119,6 +1118,17 @@ en:
         all_teams: "All teams (current & new)"
         all_teams_tooltip: "This will disable individual team settings"
         success_message: "Selected sharing options for the Inventory %{inventory_name} have been saved."
+    show:
+      archived_inventory: "Archived %{repository_name}"
+      subtitle: "Owned by %{team_name}"
+      your_team: "your Team"
+      show_active_items: "Show active items"
+      show_archived_items: "Show archived items"
+      archived_view_label:
+        active: "These are individually archived items from the %{repository_name} inventory. The inventory itself is active."
+        archived_on: "Inventory archived on"
+        archived_by: "by"
+
     table:
       id: 'ID'
       assigned: "Assigned"
@@ -1175,6 +1185,7 @@ en:
     copy_record: "Duplicate"
     delete_record: "Delete"
     archive_record: "Archive"
+    restore_record: "Restore"
     save_record: "Save"
     cancel_save: "Cancel"
     assign_records_to_module: "Assign"