Add switch for active/archive repository view

app/assets/javascripts/repositories/index.js

@@ -4,9 +4,10 @@
 
   var REPOSITORIES_TABLE;
 
-  function initRepositoriesDataTable(tableContainer) {
+  function initRepositoriesDataTable(tableContainer, archived = false) {
+    var tableTemplate = archived ? $('#archivedRepositoriesListTable') : $('#activeRepositoriesListTable');
     if (REPOSITORIES_TABLE) REPOSITORIES_TABLE.destroy();
-    $('.content-body').html($('#activeRepositoriesListTable').html());
+    $('.content-body').html(tableTemplate.html());
     $.get($(tableContainer).data('source'), function(data) {
       REPOSITORIES_TABLE = $(tableContainer).DataTable({
         aaData: data,
@@ -39,7 +40,7 @@
           var dataTableWrapper = $(tableContainer).closest('.dataTables_wrapper');
           DataTableHelpers.initLengthApearance(dataTableWrapper);
           DataTableHelpers.initSearchField(dataTableWrapper);
-          $('.content-body .toolbar').html($('#activeRepositoriesListButtons').html());
+          $('.content-body .toolbar').html($('#repositoriesListButtons').html());
           dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
           $('.create-new-repository').initializeModal('#create-repo-modal');
         }
@@ -47,5 +48,18 @@
     });
   }
 
+  function initRepositoryViewSwitcher() {
+    var viewSwitch = $('.view-switch');
+    viewSwitch.on('click', '.view-switch-archived', function() {
+      $('.repositories-index').toggleClass('archived active');
+      initRepositoriesDataTable('#repositoriesList', true);
+    });
+    viewSwitch.on('click', '.view-switch-active', function() {
+      $('.repositories-index').toggleClass('archived active');
       initRepositoriesDataTable('#repositoriesList');
+    });
+  }
+
+  initRepositoriesDataTable('#repositoriesList');
+  initRepositoryViewSwitcher();
 }());

app/assets/stylesheets/repository/index.scss

@@ -0,0 +1,13 @@
+.repositories-index {
+  &.active {
+    [data-view-mode="archived"] {
+      display: none
+    }
+  }
+
+  &.archived {
+    [data-view-mode="active"] {
+      display: none
+    }
+  }
+}

app/assets/stylesheets/shared/content_pane.scss

@@ -17,6 +17,37 @@
     h1 {
       margin: 0;
     }
+
+    .view-switch {
+      margin-left: auto;
+
+      .caret {
+          margin: 8px 0 8px 8px;
+        }
+      &.open {
+        .caret {
+          transform: rotateX(180deg)
+        }
+      }
+
+      .dropdown-menu {
+        @include font-button;
+        min-width: 250px;
+
+        li {
+          cursor: pointer;
+          padding: 1em;
+
+          .button-icon {
+            margin-right: .5em;
+          }
+
+          &:hover {
+            background: $color-concrete;
+          }
+        }
+      }
+    }
   }
 
   .content-body {

app/helpers/repositories_datatable_helper.rb

@@ -15,6 +15,8 @@ module RepositoriesDatatableHelper
         '4': escape_input(repository.team.name),
         '5': I18n.l(repository.created_at, format: :full),
         '6': escape_input(repository.created_by.full_name),
+        '7': 'Archived on',
+        '8': 'Archived by',
         'repositoryUrl': repository_path(repository)
       )
     end

app/views/repositories/index.html.erb

@@ -3,12 +3,27 @@
 
 <% if current_team %>
   <%= render partial: "sidebar", locals: { repositories: @repositories } %>
-  <div class="content-pane flexible">
+  <div class="content-pane flexible <%= params[:archived] ? 'archived' : 'active'  %> repositories-index">
     <div class="content-header">
-      <h1><%= t('libraries.index.head_title') %></h1>
+      <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 %>
+        <li class="view-switch-archived" data-view-mode="active">
+          <i class="fas fa-archive button-icon"></i>
+          <%= t('libraries.index.switch_view.archived') %>
+        </li>
+        <li class="view-switch-active" data-view-mode="archived">
+          <i class="fas fa-rocket button-icon"></i>
+          <%= t('libraries.index.switch_view.active') %>
+        </li>
+      <% end %>
     </div>
     <div class="content-body">
     </div>
+  </div>
+<% end %>
+
+<!-- Active table template -->
 <template id="activeRepositoriesListTable">
   <table id="repositoriesList" class="table"
     data-source="<%= team_repositories_path(current_team, format: :json) %>"
@@ -24,25 +39,73 @@
         <th><%= t('libraries.index.table.name') %></th>
         <th><%= t('libraries.index.table.number_of_items') %></th>
         <th><%= t('libraries.index.table.shared') %></th>
-            <th><%= t('libraries.index.table.shared') %></th>
+        <th><%= t('libraries.index.table.ownership') %></th>
-            <th>Added on</th>
+        <th><%= t('libraries.index.table.added_on') %></th>
-            <th>Added by</th>
+        <th><%= t('libraries.index.table.added_by') %></th>
       </tr>
     </thead>
   </table>
 </template>
-    <template id="activeRepositoriesListButtons">
+
+
+<!-- Archived table template -->
+<template id="archivedRepositoriesListTable">
+  <table id="repositoriesList" class="table"
+    data-source="<%= team_repositories_path(current_team, archived: true, format: :json) %>"
+  >
+    <thead>
+      <tr>
+        <th>
+          <div class="sci-checkbox-container">
+            <input value="1" type="checkbox" class="sci-checkbox">
+            <span class="sci-checkbox-label"></span>
+          </div>
+        </th>
+        <th><%= t('libraries.index.table.name') %></th>
+        <th><%= t('libraries.index.table.number_of_items') %></th>
+        <th><%= t('libraries.index.table.shared') %></th>
+        <th><%= t('libraries.index.table.ownership') %></th>
+        <th><%= t('libraries.index.table.added_on') %></th>
+        <th><%= t('libraries.index.table.added_by') %></th>
+        <th><%= t('libraries.index.table.archived_on') %></th>
+        <th><%= t('libraries.index.table.archived_by') %></th>
+      </tr>
+    </thead>
+  </table>
+</template>
+
+<!-- Repositories action buttons -->
+<template id="repositoriesListButtons">
 <% if can_create_repositories?(current_team) %>
   <a class="btn btn-primary btn-lg create-new-repository"
     data-remote="true"
+    data-view-mode="active"
     href="<%= create_modal_team_repositories_path(current_team) %>">
     <span class="fas fa-plus"></span>
     <span class="hidden-xs"><%= t('libraries.index.no_libraries.create_new_button') %></span>
   </a>
 <% end %>
+  <a class="btn btn-light" data-view-mode="active" href="#">
+    <span class="fas fa-pencil-alt"></span>
+    <%= t('libraries.index.buttons.edit') %>
+  </a>
+  <a class="btn btn-light" data-view-mode="active" href="#">
+    <span class="fas fa-copy"></span>
+    <%= t('libraries.index.buttons.duplicate') %>
+  </a>
+  <a class="btn btn-light" data-view-mode="active" href="#">
+    <span class="fas fa-archive"></span>
+    <%= t('libraries.index.buttons.archive') %>
+  </a>
+  <a class="btn btn-light" data-view-mode="archived" href="#">
+    <span class="fas fa-undo"></span>
+    <%= t('libraries.index.buttons.restore') %>
+  </a>
+  <a class="btn btn-light" data-view-mode="archived" href="#">
+    <span class="fas fa-trash"></span>
+    <%= t('libraries.index.buttons.delete') %>
+  </a>
 </template>
-  </div>
-<% end %>
 
 <%= javascript_include_tag "repositories/index" %>
 <%= stylesheet_link_tag 'datatables' %>

app/views/shared/_view_switch.html.erb

@@ -0,0 +1,9 @@
+<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">
+    <span>View</span>
+    <span class="caret pull-right"></span>
+  </a>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
+    <%= yield %>
+  </ul>
+</div>

config/locales/en.yml

@@ -1312,6 +1312,7 @@ en:
         error_flash: "Something went wrong! Please try again later."
     index:
       head_title: "Inventories"
+      head_title_archived: "Archived Inventories"
       table:
         name: "Name"
         number_of_items: "No. of items"
@@ -1319,6 +1320,17 @@ en:
         ownership: "Ownership"
         added_on: "Added on"
         added_by: "Added by"
+        archived_on: "Archived on"
+        archived_by: "Archived by"
+      switch_view:
+        active: Show active inventories
+        archived: Show archived inventories
+      buttons:
+        edit: "Edit"
+        duplicate: "Duplicate"
+        archive: "Archive"
+        restore: "Restore"
+        delete: "Delete"
       no_libraries:
         create_new_button: "New Inventory"
     show: